In this chapter, we're going to add authentication to our project. We're going to set up a Clerk account and SDK, configure authentication provider and middleware, create sign-in and sign-up flows, and then test it all out by building authenticated and unauthenticated views. No need to have your app running at the moment, because we're going to visit the Clerk's page using the link you can see on the screen. Go ahead and create an account and visit the dashboard. In the dashboard, you will have a list of your previous projects or a button to create your very first application, which is what we are going to do.
Let's click on create application. I'm going to give my application a name, Polaris, and for the sign-in options make sure you have email turned on. This is because a clerk billing needs this sign-in option to work. As for the other providers, it really doesn't matter. You can add as many of them as you prefer.
But one that is very important to enable is GitHub. This is because GitHub OAuth token will allow us to later import users' repositories, even private ones, as well as create new repositories on their behalf, which is a crucial feature of our editor. So for simplicity's sake, I'm just going to enable GitHub. You can of course add as many of them as you want later. But make sure you have email and GitHub as those are the important ones.
And let's click create application. Now let's go ahead and let's run the following terminal command so that we can install clerk. I'm gonna go ahead and paste this and then I'm gonna show you what version was installed. There we go. Let's go ahead and check the package.
Jason so you can see exactly what package I have you been using. There we go. Clerk 6.36.5. So for those of you who want to use the exact same version, you can install it like this. Great.
Now let's go ahead and follow the instructions. So we've just added the package and now we have to set up clerk API keys. Add these keys to your dot environment file. Let's go ahead and copy these and let's create our .environment file. So in the root of our app right here I'm going to create a new file .environment.
Here it is. And I'm just going to paste this here. So we now have next public clerk publishable key and clerk secret key. It goes without saying that you shouldn't share this with anyone. Since I'm making a tutorial, I'm sharing them, but obviously I will remove them later.
I like to add comments to my environment so I know exactly what keys refer to which service. Great. Step 2 finished. Let's see what else we have to do. We now have to create what was previously called a middleware.
You can see they even have a note about that here. So if you're using Next.js lower than 15, name of your file is middleware. So since we are using Next.16, we are using a new name proxy, which is honestly a good thing they've changed because middleware was just confusing people because it doesn't actually work as a normal middleware. So depending on whether you have the source folder or not, your middleware file actually goes in a different place. Let me see if they actually tell you that here.
They do. So you either create one at the root of your project or inside the source directory if you're using that. Since we do, let's go inside of source, create a new file middleware.ts. My apologies, old habit proxy.ts. Even though middleware would still work it will throw a deprecation warning in the terminal.
So let's go ahead and copy this code from here and paste it inside of here. So it kind of makes no sense for us to write this, that's why we are copying and pasting. If you want to you can pause the screen and then write it on your own, but it's just a big regex rule which covers a bunch of things. Great. And now let's go ahead and let's add a clerk provider.
So you can see they are instructing us to add some code to the layout file which we are already familiar with at this point. So let's revisit it. Source, app folder, layout.tsx. And in here let's go ahead And well let's import all of these. So clerk provider, sign in button, sign up button, signed in, signed out, as well as the user button.
I'm just going to add all of them here. There we go. No errors because we have all the packages installed. Great. So let's see what else do we have to do.
We have to wrap our entire app with a clerk provider. So I'm going to go ahead and do that right here. And let me indent the rest. And now I'm going to go ahead and go inside of the theme provider and I will create a signed out view and instead of signed out I will add a sign in button which will be a self-closing tab. So all users who are signed out are going to see a button to sign in.
And let's add sign up button here as well. Let me go ahead and move this here. Obviously if you want that you can just copy it from here but I'm writing you know along just so we kind of learn how to compose clerk components and I don't need to do the whole class name thing. I think they're just trying to demonstrate how you can modify the look of the sign up buttons in here. I'm just going to give it a background rose 500 and the text of white.
So we have a points, maybe some padding around it. And I don't know. That's it. And for the signed in view, let's just render a user button, which will allow us to sign out. Great, yeah, and we can kind of keep all of that within a header.
So it's kind of like a navbar. There we go. Let's go ahead and do npm run dev. And we should be able to access our app at localhost 3000. And I think at this point it should already be working.
Yeah. There we go. So I'm zoomed in a lot but basically you can see that above my click me button which is inside of my page.tsx I now have a sign in and sign up buttons. Both of them will actually do the same thing right now because I have no accounts. So as you can see we are redirected to another page with our sign in box.
And in here I can use GitHub to create an account. So I'm going to go ahead and do that. Let me authorize clerk and I will be redirected back to my local host app. There we go. And you can see that now right here I have my account.
And when you click on this button right here, you can click manage accounts and you can see a bunch of info about your account. We are going to explore this later, especially when it comes to billing. The only reason I'm not clicking it right now is because it's going to show my email address. But feel free to explore the manage account settings. And you can also sign out from here as well.
And that will lead you back to the unauthorized state. Perfect. So this is how easy it was to add authentication using Clerk. Obviously it goes even more than this, but it doesn't make sense to explore this any further before we add convex, which will be our database provider, our sync engine, our real-time database, basically our backend. And once we add that, we're going to have to incorporate that with clerk so I want to wait until we do that so that we can in a smarter way create components that will combine both and work nicely together rather than building something now and then having to change it all together.
But it goes without saying, you can control how your user sees when they are signed in and when they are signed out in many different ways and one of them is by using composition components like signed in or signed out. But obviously you will be able to do that also using the middleware or what's called proxy now right. What I suggest you do is you follow the guide and there we go. Okay, so my email is shown here now, which is what I was trying to avoid. But okay, the problem.
What I would suggest you do now after you do this is visit the documentation. In fact, we're going to do it together so I can show you a bit how all of that looks like. So you can click on any of these actually and they will lead you to the documentation. For example, add security and in here you will be redirected to next.js SDK here and you can read all about this right. But if you want to get familiar with their components for example, you can do that as well.
Let's go ahead and scroll a bit up we have user management here you are a components there we go. So we have the clerk provider which is what we've just added right. And in here we can see all the props that clerk provider has. And for example one of the props that we are going to use is going to be the theme. So that's something you can figure out if you go through the props right.
So let's actually try it out. Let's go inside of layout here. My apologies it's not called the theme it's called appearance right. So appearance prop and go ahead and add a base theme here. Actually let's call, let's do theme as base theme is deprecated and in here we can use the dark theme.
Keep in mind that now we have to install that. So let's go ahead and do that. So we're going to have to add a small package here. Npm install clerk-themes. As always I'm going to go ahead inside of my package.json clerk-themes 2.4.46 so if you want to, you can use that specific version like this.
Now that we have clerk-themes, we can import dark from that package. Let's do dark from add clerk themes. There we go. And now the clerk provider will match all of its UI components according to the theme we have given it, which is exactly what we want because we have kind of defaulted our app to dark mode, if you remember. And now you can see how it opens in dark mode.
So basically that's the kind of thing you can learn if you go through their documentation and figure out all the things that they have. Here it is, appearance which accepts the theme and then you will get to the themes here and this is what we just did, we added clerk themes, right. So obviously I've been using clerk for a lot for a long time so I do all of this you know at the top of my mind but this is how I learned to that right. I went through the documentation and I learned how cleric works. We're going to go back to this documentation later whenever we need to explain something.
I think it's a very, very well-written documentation. That's why I'm pushing it so much for you to visit it because it's a shame if you don't do it. Usually, the documentations are not very easy to read, but Clerks is very, very well done. I would recommend that you do that you know just kind of get familiar What is clerk middleware? How does it work with the app router?
What is this out helper? Right, how does that work? And you will actually find some useful examples about how you can authenticate your page and maybe you can even play around with it. We will explore most of this simply by building the project anyway. But if you want to do it on your own, I highly recommend that.
That's always a good way to learn something. Excellent. Other than that, I believe we did what we wanted in this chapter. So we have set up a clerk account and SDK. We have configured the authentication provider and the middleware.
We've created sign-in and sign-up flows. And we also build authenticated and unauthenticated views using their composition components. So in the next chapter, we're going to join this with convex to make it even more powerful. So for now, let's go ahead and do what we usually do, and that is commit this and create a new branch. So I'm just going to go ahead and close everything here.
As you can see, I have four files changed package Jason package lock proxy file and layout where I added all of the clerk stuff. So I'm going to go ahead and do git add dot which will add all of them. You can see four files have been staged. Then I'm going to do git commit like this. And now what I'm going to do is going to be a slight change.
I'm going to create a new branch. So git checkout dash b and I'm going to call this 0 to authentication. And you can see I have a message now switched to a new branch, right? And now that I'm here, I want to do git push u origin 0 to authentication whoops it is not with a slash it is just origin and then the name of the branch which in our case is 0 to authentication. There we go.
And you will see that the same thing is happening here in the visual editor. So down here you can see I am on 0 to authentication. So now Let's go ahead and go to our GitHub and you will now see that once we push this new branch We have this prompt 0 to authentication had recent pushes 26 seconds ago In case you are not getting this notification you can always manually go instead of pull requests here and create it but just confirm that you actually have that new branch here because we just push that branch to remote so it should be visible right here. So I'm going to go ahead and this time just create it manually. I'm going to go instead of pull request and I will click a new pull request.
So base is a main and we are comparing that to our new branch. There we go. So we only have one commit here which I have conveniently named exactly the same as our branch so we know that's the one. So I'm going to go ahead and click create pull request and then I'm just going to create the pull request. And now we are going to review our changes.
As you can see my pull request has been reviewed by something called CodeRabbit, which probably isn't the case for you. And that's perfectly fine. That's because I'm using CodeRabbit to review my pull requests automatically the moment they are created. And you will be able to do exactly the same. So I'm going to explain all about it in a second, but for now, let's just actually go over what happened in this pull request.
So the first thing that happened is CodeRabbit provided me with a summary of this pull request. New features. We integrated user authentication system with sign-in and sign-up functionality. We added user account menu for authenticated users. And finally, we enabled security across the application with authentication middleware.
So that is the high-level summary, which is always useful in itself. And then below, it actually went file by file and found some what it thought was a bug. So in here, it noticed that I have a file called proxy.ts. And it labeled this as a critical failure. It said incorrect file name for Next.js middleware.
And I know what you're thinking. It's not exactly a great first impression for an AI review tool to not have the most up-to-date information. But give CodeRabbit a benefit of the doubt, especially with what I'm about to show you next. So in the last few projects, CodeRabbit has found multiple real critical security issues in my code. I think it is in general a good idea that between you and me, we have a third person, AI, whomever, reviewing the code.
Because as much as I think my code is okay, sometimes things slip. And if this wasn't the case, if proxy truly was a misnamed file, it would have been a critical failure and middleware would not have worked at all. So it is actually impressive that CodeRabbit wrote this comment. But here's what's even more impressive. I actually responded that middleware has been renamed to proxy in Next 16 and I've provided with the documentation.
And you can see the response. The usual, you are absolutely correct, I know we are all tired of hearing that. It apologized for the incorrect review comment and thanked me for the clarification. It even gave me some tips on how I should be exporting a function called proxy if I want to write some custom logic here. And Here's the cool part.
I can see learnings added. So from now on, I have successfully taught CodeRabbit something new. And this is where you can actually see what a high quality tool this is. Even though this encounter might have seen a bit annoying with its lack of the most up-to-date knowledge, we all know that AI is really struggling with that. The fact that you can feed it new information makes it really, really good, because this probably won't happen again now.
And I think this will stay true across my entire account. I think that the next time I start a project, this won't happen again because it now has this learning. So I think this is super cool example, even though it looked like a big failure, it is actually really really cool and I promise the more complex our pull requests get the more useful CodeRabbit will be. Using the link on the screen you can add the same thing to your GitHub account and with a literal two-click install you can add it to all of your pull requests. They have a super generous free tier, it costs you nothing to add this.
It would mean the world to me if you would use the link you can see on the screen to create an account. So since this was a super simple pull request we actually don't have too many things to do besides merge it. So I'm going to go ahead and just merge this. I'm not going to change anything and I'm not going to delete my branch this way whenever I want I can just go ahead and switch back to 0 to authentication and then I can see what I was doing back then. What we have to do now is we have to go back to our main branch here and then we have to pull from origin main.
So git pull origin main. There we go. So you can see that I was ahead but now I am on the same branch. Great. My apologies, this syntax keeps confusing me.
So it is git pull origin and then space main. Perfect. So what this means is that now I have completely synchronized my local main branch with my remote main branch and we can confirm that with the visual editor here as well by clicking on the graph here. So we have this initial commit from create next app. We then have our first commit which was in our first chapter project setup and then you can see that we have branched out into this 02 authentication branch and then we merge that back into our main branch here.
So you should have the exact same graph here. Excellent. I believe that marks the end of this chapter. So going on, this is how we are going to end all of our chapters with a branch so we can always easily come back to it and so we get an actual code review of our changes which will come in very handy when we start doing some security things. Amazing, amazing job and see you in the next chapter.