So as I've just said previously, now we're gonna reuse this knowledge which we've just learned about routing in Next.js to create our authentication system. So just ensure that you have the exact same setup as me, we didn't change much. For example, right here I have a button which is inside of my root page.csx inside of the app folder here and I have no other folders nothing so I'm just gonna quickly prepare this by removing this button and instead a paragraph which is going to say only authenticated users can see this like that and I can remove this import from my button which we have right here. So just a very simple export default function page here. I believe we actually renamed this from home so for you it might be home if you didn't rename it, but don't worry, the name of the function doesn't matter.
As I've said, the only thing that matters is that the file name is page and that you do a default export. So go ahead and change this to only authenticated users can see this so you have a better mental map of what we are doing here. So what I want you to do next is go to clerk.com right here and inside of here go ahead and find the big dashboard button or login button depending on whether you are authenticated or not. And you can see that in here I already have a couple of applications from my previous tutorials. For you it might be a completely empty screen.
Basically just find the button which says add application and after that you're going to get prompted with options like this. Let's go ahead and give our application a name. So in my case I'm going to go ahead and call this Game Hub because we're going to pretend that that's the name of our app. This is of course a parody. I'm not trying to infringe on anyone's trademark here.
And go ahead and choose whatever you want for your login provider. So you have a bunch of options here. As you can see there are 19 more here which are hidden. And what I'm going to do is I'm going to disable email addresses and I'm only gonna enable Google so this way I know that my users have to pass at least Google's authenticity protocol right so they cannot spam my email addresses but Clerk actually has options for you to disable bot emails and to disable spam emails a bunch of different things. So let's go ahead and select Google or whatever you want for your signup provider and click create application like this.
Once you're in here you're gonna see a screen similar to this. So inside of here you should have next.js pre-selected and you should also have your environment keys right here. And in here we have instructions to paste the keys and the code snippet below into our .environment.local file. We're gonna do that but in a slightly different way. We're not gonna do it in a .environment.local because later on we're gonna add Prisma which can definitely read from .environment.local but by default it reads from .environment.
So I just want to skip that little step where we have to change the target from where Prisma actually reads its variables and instead we can just put everything inside of the .environment file. But here's the thing we have to do first. So go ahead and find your .gitignore file as I did right here. And right here you're probably going to see that we have .environment.local mentioned here. So when you create a .environment.local file it's not going to be part of your git history which is very important because your sensitive information is going to be there and you don't want anyone to see that.
So since I just said that we're gonna put our keys in a .environment file that means that we have to modify this .gitignore file and add .environment. You can literally add it anywhere you want. It doesn't matter if you add it below this or at the top. It doesn't matter. Just make sure that you have explicitly dot environment like that great and now what we're going to do is create a new file at the root of our project so outside of all folders called dot environment like that and you can see since that file is in gitignore you can see how it is grayed out meaning that it will not be committed if yours is not grayed out if it's in the same color as all the others right that could mean that it just didn't it could mean that you didn't save this file but it could also mean that it's just VS Code cache.
So what you can do if you're really worried about this is press ctrl shift and p and then just type reload window and after you reload you can see how now for a second it was in a bright color and then in turned into grayed out color meaning that it's officially disconnected from my git history. Great! So let's go ahead now back inside of this clerk dashboard and let's copy this environment key so you can either select them or you can use the copy icon from here. Now let's go back inside of our code let's revisit that dot environment file and let's paste everything inside so you should have the next public clerk publishable key and clerk secret key and no these are these are not two lines So this is one line like this, but I use an option inside of my VS Code to collapse my lines so I don't have to constantly scroll for you, right? So you can see everything clearly on my screen but this should be like this one below another one line for each and just save this file perfect once you've done that go ahead and click continue in docs and in here you're going to see a beautiful documentation that clerk has prepared for you So let's go ahead and see everything we have to do.
So first we have to install the Qlrk's Next.js SDK which is going to give us access to some pre-built components, hooks and helpers which are going to help us with developing our authentication. So this is the first step. Npm install at clerk slash nextjs. Let's copy this and let's go ahead. And what I actually recommend you do is just shut down your app for this part because we're gonna do a lot of changes.
We're gonna add some middlewares and some new route groups and stuff like that. So just shut down your app so no background cache will be conflicted. Right and then let's paste this command here npm install at clerk slash nextjs and then we're gonna go ahead and do the next step. So I'm gonna leave this to download and install and I'm gonna go ahead and scroll down and in here it says that we have to set environment keys and we already did that so we can skip this part. The next thing it tells us to do is to wrap our application inside of clerk provider and you can already well you can literally read here where it says right but just try and think of what we learned in the previous part of the tutorial where would you put a wrapper around your entire application?
Every single route and every single component must be wrapped in this. Well the perfect place for that is the layout file. In our case specifically it's going to be the root layout inside of the app application. So this is what we have to import. We have to import clerk provider from addclerk-nextjs.
So I'm gonna copy this line. You don't have to copy it, you can just write it right. I'm just saving some time here. And let me close this terminal and let's go inside of the app folder and select layout.tsx and it should be named a root layout and it should wrap the html and body around our children which of course represent all of our routes. So let's go ahead and add this import here at the top.
Like that. ClerkProvider. And now what we have to do is wrap our entire structure inside of the ClerkProvider. So outside of the HTML tag. Let's go ahead and do that.
So I'm gonna wrap the Clark provider. I'm gonna start here and I'm gonna go ahead and leave it here at the bottom. Perfect. So we are done with step 3 I believe and now we have step 4 which is require authentication to access your app which is exactly what we need because right now this page says well I just refreshed and shut down my app so you can't see it but our root page says that only authenticated users can see that right but that's currently not true. So let's make it true by actually adding our middleware file.
So what we have to do is copy this code so make sure you are in the documentation for this part and go ahead and create a new file in the root of your folder. So some things can happen here. For example, if you have a folder opened and then you click for a new file, it's going to create it inside of that folder. So one simple thing you can do whenever you want to create a file outside of all folders is first click on any file which is outside of all folders and then click on new file and you can see how now it appears outside of everything. So let's add middleware.ts and what's important for you to know is that middleware is also a reserved file name so make sure you don't misspell this name.
And then inside we're going to paste that entire code and then later we're going to go ahead and adapt this out middleware. It's a very powerful middleware you can of course look at the documentation for even further information but for example you can add public routes which is an array and then you can write for example slash users will be available to everyone be that they are logged in or logged out but we're not going to play around with that just yet so just leave this to be an empty object for now. Great! And let's see what else we have to do. So right now it says we embedded the user button but we're gonna do that later.
We're not gonna do that yet. We're gonna come back to that. What I actually want to do is create custom signup and sign in pages. So you can scroll down to find the next steps here and click create custom signup and sign in pages. Or you don't have to follow the documentation you can just see what's on my screen and just do that as well.
So it says that we have to create a route for signing up, right? So how are we exactly going to do that? Well, this is what I'm going to do. Instead of just creating this inside of the app folder as it's written right here, I'm going to reuse that knowledge which we just practiced of creating route groups. So go inside of the app folder and create a new folder in parentheses, out.
So you already guessed it. We're gonna have a specific layout for our login and register pages, right? So let's go ahead inside of here and let's create a new folder called sign-up, like that. And if you look at the documentation, we also need another folder inside with this specific syntax with double square brackets and this three dots right here. So that is a cache all route.
So let's go ahead and do this. So make sure you add double square brackets and then sign dash up and then inside finally create page dot VSX and I'm just gonna copy this code from the documentation it's very simple so you can find it right here so import signup from clerk next.js export default.page and return the signup and now let's go ahead and do the same thing for our sign in page so inside of our out folder create a new folder sign dash in and let's go ahead and create a catch all route by using double square brackets dot dot dot sign dash in and inside create a new file page dot dsx let's copy what's written in the documentation and let's paste it right here so just ensure that this one is actually using a sign in right so I am inside of my sign in folders here and I'm importing sign in. Inside of my sign up, I'm importing sign up and rendering the sign up. Great, so make sure you have this exact structure. We have our out folder, which is not gonna be visible inside of the URL.
The only thing that is going to be visible is the sign in and sign up routes. So make sure you have this exact structure like this and you can close those files. And let's see what else we have to do. So after we've added these pages, what we have to do is add specific environment variables so Clerk knows where to redirect users when they are not logged in. Because just by default we could have named our routes whatever we want.
There's no reason for this to be sign in and sign up. This could have been register and log in, right? But we are following the documentation of course. But you can change this to your liking. But you then also have to tell Clerk, all right sign in is my sign in route and sign up is my sign up route.
So if you use the login and register instead then you would have to change the environment variables to use those. But since we followed the documentation and I believe you followed it exactly like this you can just copy this and go inside of your .environment file where you added your clerk keys and below the last one just paste these four new options. So sign in URL, sign up URL and after sign in URL and after sign up URL. So this two routes indicate where the user will be redirected once they create an account or login and this two routes indicate to clerk where to redirect the user if they try to access an authorized route. Great And I believe that we can now actually try this out.
Yes, I believe that is true. So let's try it out. I'm gonna go ahead here inside of my terminal and I'm gonna do npm run dev like this on my localhost 3000. And let's look at the code to see what we should be expecting so when I go to localhost 3000 I should be seeing this right? A paragraph which says only authenticated users can see this but let's see if that's actually true When I go to localhost 3000 I believe that I will be redirected and I am.
Take a look at my URL. I am on localhost 3000 slash sign in and then I even have some redirect URL here to bring back the user to where it's supposed to be. So let's go ahead and click continue with Google and see if we get redirected back to this page where it says only authenticated users can see this. And there we go after I clicked login with Google there was a bit of a loading page and then it showed this page only authenticated users can see this. Perfect!
So this is exactly what I wanted us to achieve right so Now what we have to do is find a way for our user to log out, right? And we can do that quite easily by using that ClerkUserButton component. So make sure that you are seeing this page. Only authenticated users can see this, right? And what I want you to do is go inside of this page and add an import user button from clerk slash next JS.
And let's remove this with a div here. And I'm just gonna go ahead and give it some style as flex flex call gap y4 and here I'm gonna add an h1 element dashboard right and and below that I'm going to render the user button and here's an important thing I'm gonna add after sign out URL to be a slash so make sure you add this route and now as you can see I have the exact icon of what I logged in with right so when I click here there we go I have some options here I can manage my account and I can also log out. So you can go ahead and click sign out here and you should be redirected back to your login page. Let's see if that is true. So once I go here, there we go.
So I'm back on the login page. Let's try one more time to see if all of this is working there we go so it's working perfect so we can now log in we can log out And let me just go ahead and quickly debug if this should be happening here. Well, actually we don't have to debug this, right? Because later on, we're gonna enable this slash route to be publicly available for everyone. So we can actually leave it exactly like this.
But what I want to do next is actually style this login screen a bit better. Because right now it kind of looks weird. It's here in the corner, right? So what can I do to make it be centered? Well, we can use that layout function.
So let's go inside of the out folder and create a new file layout.csx. And let's go ahead and do clerk layout, actually out layout. Let's go ahead and extract our children from here. Let's give our children a type of react node and let's render the children. And now we should not be seeing any changes but we should have a proper layout here and if you remember how we did that ALT thing very similarly we can now center our application but just before we do that I want to go inside of my app folder globals.css so go inside of here and just below this tailwind directives add HTML body and colon root like this and go ahead and add height 100% and add a little semicolon at the end.
So this is the code snippet we just added. Make sure you save this file. Now go back to our layout here and give this div a class name of hFull, flex, item center and justify center. And there we go. After I've added these three classes here you can see that my entire code is centered here and if I click on sign up it redirects to slash sign up and that is centered as well So we just use that knowledge of layouts to actually do something useful for us.
So what we're gonna do next is we're gonna go ahead and start to style our app a little bit. Specifically we're gonna change this background to be a little bit darker and we're also gonna add our application logo right here with a little quote to create an account. Great, great job! So it took us barely 20 minutes to integrate authentication. Great, great job!