Authentication has become one of the essential attributes of large multi-user websites. Applications require authentication to collect and verify a user's information before granting access.
What we will be building
This article discusses authenticating, collecting, and displaying a piece of user information with Clerk's open-source authentication provider.
With a ridiculously seamless user experience, Clerk provides a refreshing approach to authentication and user management for modern applications.
This article requires the following:
- A Clerk account, create a free account
Setting up our Next.js app
Next.js is an open-source React framework that enables us to build server-side rendered static web applications.
To create our Next.js app, we navigate to our preferred directory and run the terminal command below:
After creating our app, we change the directory to the project and start a development server with the following:
To see our app, we go to http://localhost:3000.
Installing Tailwind CSS
Tailwind CSS is a "utility-first" CSS framework that allows us to create user interfaces for web applications rapidly.
To install Tailwind CSS in our project, we run these terminal commands.
These commands create two files in the root directory of our project,
tailwind.config.js, we add the paths to all our template files with the code below.
Next, we add the tailwind directives in our
Creating a new Clerk Application
Clerk is an open-source user management tool that offers developers a seamless yet robust solution to authentication.
To handle authentication with Clerk, we need to create an application on our Clerk Dashboard. To create an application, we go to our Clerk dashboard, click on Add application, and give our application a name.
Here is how the dashboard of the newly created application looks.
To understand more about the available authentication settings, check out the Clerk Docs.
We click on the API Keys tab on the left side of the application's dashboard.
Now, copy the Frontend API Key, Backend API Key, and JWT verification key, which we need to initialize Clerk's SDK.
Next, we create a
.env.local file in our Next.js application's root directory to initialize the Clerk SDK.
Paste the keys we copied in the
After creating our application on our dashboard, we install Clerk in our Next.js application. To install Clerk, we run these terminal commands.
_app.js file, we wrap our application with the
<ClerkProvider/> component to get access to Clerk properties.
Creating our E-commerce website
index.js file, we create the user interface of our e-commerce website with the code below.
In the GitHub gist above, we define an array of objects containing information on all our e-commerce website's products. Next, we loop through the array and render the products in our application.
Here is how our e-commerce application looks.
Handling Authentication with Clerk.
After creating our e-commerce application, we only want to restrict application access to signed-in users.
Protecting routes with redirect
To efficiently restrict page access, Clerk uses components called Control Components. In this article, we will use three Control Components.
<SignedIn/>: Renders its children only when a user is signed in
<SignedOut/>: Renders its children only when there's no active user
<RedirectToSignIn/>: Triggers a redirect to the sign-in page
_app.js, we protect our pages from unsigned users with this piece of code below:
In the code block above, we do the following:
- Import the
RedirectToSignIncomponents from the clerk/nextjs package
- Specify what routes we want to be available to unsigned users in the
publicPagesarray. In this case, the
publicPagesarray is empty, which means we do not want any page to be available to unsigned users
- Collect the current route a user tries to access and check if the route is in the
publicPagesarray. We then update the
isPublicPagevariable depending on if the route is in the
- Render the page content if the
- Redirect the user to sign into the application if
Here is how our application looks to an unsigned user.
Displaying and Signing out a User
Clerk allows us to use a component called
<UserButton/> to display and sign out users. The
<UserButton/> component is a button that displays a user's information and allows a user to sign out from our application.
index.jsx file, we import the
Next, we place the button in our header
Here is how our
With this, we have created our application.
This article discussed using the Clerk auth0 services to authenticate an e-commerce website. After authenticating users, we signed in, displayed the signed-in user information, and finally signed the users out.
The resources below may be helpful: