Adding Clerk Authentication to a NextJS App

#nextjs #clerk #security #typescript

I’m the type that needs a realistic project to work on if I’m going to understand a platform.

So I decided that to really learn Clerk, I want to create user profile pages on the website of my Discord server. Since Clerk has a great suite of components for Next.js apps, I figure why not port over the site to Next at the same time to learn both platforms. The first step was to bootstrap a Next site and get authentication set up so I can have users sign into it.

So here’s a quick guide on how to configure Clerk with a Next app.

Creating the Clerk Application

Starting over in Clerk, I’m going to create a new project here. I’m going to just configure Google as my SSO provider so I can sign in with my Google account. All other methods are disabled.

After the application is created, the variables shown on the following page will be used in the Next project, so note these down for the next section.

Setting up Next

I have a basic Next app set up here, and I’m going to start by installing the Clerk components.

I’m going to create a new file named .env.local and put the environment variables from the previous section of this article in there. These env vars will be used by the Clerk libraries to connect up to the application that was created earlier in the article.

Next I’m going to set up the middleware by creating middleware.ts and putting the following code in there. By default, this middleware will protect the entire site so I’ll also need to explicitly specify my public routes. In this case, it’s just the root.

Then I’ll update layout.tsx and wrap the entire app in which will enable security on the app.

Then I’ll add the component to the home page, which will let me sign in with my Google account.

Here is what the rendered version of this looks like.

Clicking that will bring me to Clerk’s UI which I can use to perform all of the actions needed to either create an account or sign in with an existing account.

After signing in with my Google account, I’m automatically redirected back to the home page but there’s no indication that I’m signed in. This can be fixed using the useUser hook from Clerk. It can be used to check to see if the user is signed in and display the component instead. Note that this needs to be rendered on the client so I added 'use client' to the page.

Now the home page should show my user profile image that has a menu embedded.

Protecting an API route

Once logged in, Clerk will save a cookie in the browser that has tokens it can use for authentication. These cookies are sent with every backend request. The Clerk libraries also have a set of backend functions that can be used in API routes to make sure that the person signed in is authorized to call those routes. Lets explore how to do this.

The following API route will check to see if the user is signed in and simply echo back their ID in a JSON response. Passing the request (which contains the cookie) into authenticateRequest will both determine if the request is authenticated, as well as provide a helper function to get details about the user.

Now if I update the front end to simply call this route on page load, you can see in the console of the browser that my Clerk user ID is being sent back to me.