Hello and welcome in this blog we will see how we can implement clerk authentication in a NextJS application. We will also see how we can create protected routes and also retrieve authenticated user information. The clerk platform provides user management, authentication and profile management features along with different methods of authentication like email, phone, google, github and many more. What is great about clerk is that it is very easy to implement, it’s documentation is easy to understand and it offers it’s free service to up to 10,000 users.

We will first create a new nextjs application. Npx create next app @ latest. Name it nextjs clerk. Typescript yes eslint, tailwindcss yes, source directory no, app router yes, turbopack yes, import alias no. The Nextjs application is created. Now go to the Clerk website. To use clerk we need to have an account. Click on the sign in button. I will use my google email account to sign up. We will be redirected to this page. Here we can use different methods of sign in for our application. Now If we select a lot of different options then we will be asked to upgrade to pro . For free tier we are offered 3 social providers for authentication. So I will use google and github providers for authentication and then click on create application. 

After this Clerk will ask about the application where we will be implementing authentication. Since it is a NextJS application click here. Copy this line to install clerk in the next application. Paste the code in the terminal and run it. After the package is installed go back to the documentation and copy the code for a middleware. Go to vs code create a middleware.ts file in the root folder and paste the code there. Now copy the secret key and the API key. And paste them in a .env.local file that we will need to create. Go back to the clerk website and copy the boiler template for the layout.js file and replace our existing code with it. Now let's start the application. The app is running in the browser. Click on sign in. I will use google to sign in. Select your account and we are logged in. If we look at the right hand top corner the sign in and up buttons are removed. Instead our google profile pic is displayed. This means we are logged in successfully. Everything regarding authentication is handled and provided by “clerk”. If we click on our profile pic we will get options to manage our account. 

Now I will quickly create a few more pages called about, contact and blog. Also create a Navbar. I am doing this to show you how to protect some routes and leave the others open to the public. I am going to make the contact route protected i.e. the contact page can be accessed only after authentication. Create a components folder and create a navbar. Go to layout.tsx copy everything within header tags and pastes them in the navbar component. Also copy and paste all the required imports for sign in and sign up. I will create the links for Home, About, Contact and Blog pages. Finally import the Navbar in the layout.tsx and place it within body tags. Let’s check it out and little bit more design and its working. In google, search for clerk middleware. Click on this nextjs clerk middleware link. Here we will find different options for different levels of protection. I will select “protect all routes”. Copy the code and replace the existing middleware code with it.

Now if we go to our app we will not be able to access without signing in anything because we have protected all the routes. But our goal was to protect only the “Contact” page. So go to middleware and under the isPublicRoute add the routes that we want to make public. I will add on the routes except the contact. In the browser reload localhost 3000. Now the home, about and blog pages are accessible without signing in. But if we try to go to the Contact page. We will be asked to sign in. Let’s sign in and we will be let in.

Next we want to retrieve the name of the logged in user. Search for clerk useUser(). Open this page and copy this to import the useUser hook in our contact page. I want to display the name of the user here after signing in. Also copy and paste the rest of the code inside the component. And make some adjustments with the design. Let’s save it and there is an error. This should be Next instead of react. Also this should be a client side component so insert the use client directive at the top. Save it and the name is displayed. Besides the first name we can also use some of the other features with this hook. I hope you liked this video. Thank you for watching and i will see you on the next one.