Now that we have our landing page finished it is time for us to implement authentication but just before we go on about doing that I want to go ahead and edit my favicon and the title of my tab right I want this to look like a proper application. So, first thing that I'm going to do is I'm going to create a new folder called config, which is going to be outside of all of these other folders. So just click on a random file like gitignore and then click on a new folder like this and create the config and inside create a file site.ds just like that and then export const site config Let's give the name of our app to be Taskify. So from here, you can also change this if you're planning on running this as your own software as a service later. And let's give it a description to be collaborate, manage projects, and reach new productivity peaks.
Basically just some marketing stuff. Great and now that we have this let's go ahead and let's visit one file which we have not looked at yet which is this global layout. Right, so we created our own layouts in the example and here but we haven't really explored this root layout. So this root layout needs to exist. And as you can see it has a name root layout and it renders the html, the body and our children.
So this is important you can change, you can remove this file. But what we can of course modify. So let's go ahead and modify this metadata a bit. I'm going to change this from a string to an object. So it gives me more options.
Default, this is going to use site config which you can import from add slash config slash site as I did here. So it's gonna be site.config.name like that and let's also give it a template. And template is gonna be, well, open up BackTicks like this and write a %s, then write a pipe and then render the site.config.name. So if you're wondering what this is. So as it says this is a template.
So this is the title. This is our default title if we are on the root page like on the marketing page if you take a look at my browser tab you can see that it says Taskify now right but later when we open up a specific board or a specific organization we're going to change it to be something like my organization pipe taskify like that so that's how it's gonna look like so instead of ask manually doing that every time we can just use this template syntax right here so this is gonna be replaced with whatever we let the title be when we create some additional layouts. Great! And now let's change the description. The site.config.description Like that.
And last thing we have to do is add our logo. Because Right now by default you can see that it has this Vercel logo here. So first thing that we have to do is go ahead inside of our app folder and remove the favicon.ico like that. And then go back inside of the layout file and add icons open up an array open an object and write a URL to be slash logo.svg and hrep to be slash logo.svg and save that and take a look at the browser again and there we go we have a matching logo in our tab. Perfect.
So now we are ready to head on creating our authentication. So in order to set up our authentication, we're going to use Qlerk. So head to Qlerk.com or use the link in the description. And go ahead and find in the sign up or a sign in button and enter the dashboard. And as you can see I have a bunch of projects here from my previous tutorials, from my side projects and stuff like that.
And just go ahead and find the button which says add an application or perhaps that's the default screen for you. So let me just zoom out so you can see this is something what it's going to look like. So let me zoom in even further. There we go. So let's give our application a name so this is going to be Trello dash tutorial you can of course change this to taskify or whatever is the name of your product and you can see exactly how that's going to look in the components so here it says Trello tutorial And then you can go ahead and play around with whatever you want to add for your users to sign in.
So there's a bunch of options as you can see all the way to MetaMask. So web3 login if that's what you want. So I'm going to turn off the email address and instead I'm just going to use Google like that. And you can of course enable something else. Now let's go ahead and click create application like that and now let's go ahead and set up our project.
So as you can see first thing we have to do is copy and paste these environment keys. You should have these two keys right here. So go ahead and just click copy. And let's go ahead and do something before we add this to our environment file and that is go inside of .gitignore. So this is very important.
Make sure you go inside of .gitignore and just below this .environment.local add .environment itself like that. So this .environment.local is of course well for that file but I also want to do it for this file. Now you might be wondering well why am I not using .environment.local? Well that's because we're later gonna add Prisma and Prisma uses the .environment file. Now yes you can change the location of the environment keys where Prisma looks for them but honestly it's just a teeny bit unnecessarily complicated for this tutorial.
We can just use the environment file and teach you how to add that to your gitignore. Now why is it important that this is inside of your gitignore? Well that way it will not be committed to GitHub Meaning that it will not exist anywhere except locally on your computer making it much more secure. And it is even more dangerous if you make your GitHub repository public. That way there's a lot of bots and scrapers which can look for public environment keys and steal those keys and that itself might not sound dangerous because in this tutorial we're all gonna use free tiers right we're not gonna pay for anything but imagine if you actually use this for your business and have some environment keys which are on paid services well they can create a lot of damage then.
So that's why it's important that you add .environment inside your gitignore file and make sure you save that file and then go ahead and create the .environment file and inside paste those two keys which we just copied so you can get them from here. Perfect! And make sure you have selected the next.js option in the quick start and click on this purple button continue in docs. Perfect! And if you watched my previous tutorials you're probably gonna notice that Qlrk has updated their documentation it looks pretty nice so in here make sure that you select the app router option like this.
Actually you don't have to I thought that this was a switch between the two. Sorry. This is the example quick start repos if you want to look at that. Looks like we don't have to click on that. Okay.
So first thing we have to do is npm install this package. So let's go ahead inside of our terminal. And you can actually shut down the app for now it doesn't matter if you're running it here. So npm install clerk nextjs. Perfect and while that's installing let's see what the next steps are.
So we have to set the environment keys and we already did that and next thing we have to do is add the clerk provider inside of our layout so let's go ahead and do that but I'm not gonna do this inside of my main layout I'm actually gonna do this only in the layout that I expect to be protected without. So let me show you what I'm thinking of. So this has installed. Great! Let's leave this as it is.
Make sure it's installed. It's important. Let me close everything here. Inside of the app folder I'm gonna create a new folder called platform also instead of brackets. Inside of brackets here.
And then inside of here, I'm going to create a new layout.tsx and this one is going to be a platform layout. Remember, we can extract the children immediately and let's also give it a type React ReactNode and let's return clerk provider from add-clerk-next.js so this package which we just installed so just make sure that is installed perfect and inside we can just render the children so in my previous tutorials I always added the clerk provider inside of my root layout right here. But that way you are gonna make your website, I'm not sure what's the proper way. You're either gonna lose on static rendering or something like that. I'm not sure, but they are working on improving that perhaps they've even fixed that.
I'm not sure but you know let's try out this new method of doing it. It's no biggie and you know it's a normal practice. So we are wrapping the layout where our actual platform where the user needs to be logged in is gonna be because in marketing we're not gonna be accessing any logged in states or something like that we're gonna let the middleware take care of that so create a platform folder and create layout.tsx and make sure you add export default platform layout. Perfect so now that we have that let's see what are our next steps here. So we have to create a middleware.
So let's go ahead and copy this. So this is step 4, require authentication to access your app. And let's go ahead and you have to create it in the root of your application. So create a new file middleware.ts like that. And just paste this code inside.
Great! Let's see what is next. Let me zoom this in for you so you can see. Alright so we just added the middleware and before we add this button what I want to do is I want to go ahead and create custom sign in and sign up pages. Usually this was all in this page but they decided to move it perhaps they feel that's a better way to do it.
So if you're confused you know if you're watching my previous videos you probably expect this to be here but it's not. Now it's in this next steps right here. So create custom signup and sign in pages. So click right here and let's see what we have to create. So we have to create a signup page and then we have to create this catch all folder with also the signup inside and then a page.tsx and then this code.
Alright, not too complicated. Let's copy this right here. And I'm gonna do that in a very specific way. So usually again I did this in the root of my application or the out folder or something like that but this time I'm going to do it a bit differently. So make sure you save the middleware file, go inside of the app folder, go inside of the platform and in here create another organizational folder called clerk.
So this is where we're going to hold everything regarding clerk. That's going to be our authentication and our organization settings our organization creating selection of organization and stuff like that so go ahead and create the sign in folder like this and inside of it go ahead and create a new folder which is gonna have this syntax so double square brackets dot dot dot assign bash in and inside create a new file page dot ESX and paste this inside and as you can see this uses the sign up so I made a mistake first I should have created sign up but very easy to fix I mean it doesn't really matter but just import sign in and render sign in just like that and the very same way we're gonna do the other page so go ahead and create a new folder sign-up and go ahead and create a new folder again double square brackets sign-up just make sure this is exactly like this and page.tsx perfect And then you can just paste this up and replace this too with signup. Perfect. Now that we have that, we have to add some other environment variables. So let me just go back here.
Oh, okay. We did this, we did this and now we have to update our environment variables so the middleware knows where to redirect us. So let's go ahead and copy these files or you don't have to copy them you can just look exactly what I'm going to paste now. So go back inside of your environment file and just after the clerk secret key add the public clerk sign in, sign up, after sign in and after sign up. Like this.
Perfect. So as you can see We have defined that my sign in URL is slash sign in. My sign up URL is slash sign up. How do we know that these are the values? Well, that is because that's how we named our folders.
As you can see, I have the platform folder, I have the clerk folder, and then I have sign in and sign up. So if I want it to be register and log in I have to change this folder to log in, I have to change this one to be dot dot dot log in and then I have to change it right here to be log in as well and it's still going to work if you need that for any reason. And remember this is not part of the URL. This is not part of the URL as well. Meaning that this route is just localhost 3000 slash sign in.
So this is why I mentioned that it's important to understand the concept of organizational routes. Perfect! So now that we have that I believe that we are ready to try this out. Let's go ahead and do that. So I'm gonna go ahead inside of my terminal and I'm gonna run npm run dev make sure you have the environment files, make sure you have the middleware and all of those pages and let's see if we did this correctly so I'm gonna refresh this page and nothing should change on this page and as you can see alright so something changed I'm gonna explain in a second alright so let's immediately go back inside of our middleware and allow the landing page to be visited by non-logged in users.
Because right now the middleware detected that we are not logged in and it redirected me to localhost 3000 slash sign in. And you can see this little component which we are going to style just a bit. So let's go ahead inside of the middleware. Let's find that. There we go.
And inside of this middleware go inside of this auth middleware inside of the object add public routes and just add slash to be the public route. And that's it. Just save that file and let's go ahead back inside of localhost 3000 and there we go. As you can see now we are logged out and we can still visit our landing page. Exactly what we wanted.
But now when we click on Get Taskify Free it leads us to slash sign up. So when I click here, there we go. I can now log in. When I click on log in, same thing, but this one leads to slash sign in and this one leads to sign up. Perfect.
So now we have to just style this screen a little bit so it's not like this in the corner but instead I want it centered. So it's very easy to style LAST thanks to the organizational folders and the fact that we know how to use the layouts. So all we have to do is find the app folder, we have to find the platform and then we have to find CLERK. And if you have any idea you can already start doing this on your own. So how would you center every route inside of Qlrk?
What did we say about layout and organizational components? Sorry, yes, organizational folders. So if you have any idea how to do that I advise you to pause the video and try and do it yourself if not you can just follow along no problem. So what we're gonna do is we're gonna create a layout inside of the clerk folder like this and then we're gonna write const clerkLayout. We're immediately gonna destructure the children and we're gonna return a div which renders those children and now let's just go ahead and give those children a type so children are a type of react react node all right and let's give this div a class name of H full plex items center and justify Center perfect so if you got anywhere near to the you probably didn't guess the exact class names right if this is your first time guessing this but if you managed to figure out that you need to create a layout and render the children you were on the right path good job perfect if not no biggies you're gonna get it And now let's just export default clerk layout.
Great! And as you can see now we have a much nicer centered screen. So whenever I click it's like this. Perfect! So one more thing that I want to show you is another component called user button so I'm gonna go ahead and create a new page inside of my platform right here which is just gonna be called protected like that and inside create a new file page.dsx so we're gonna delete this later I just want to demonstrate how it looks when we are logged in versus when we are not.
So let's go ahead and write const protectedPage return a div protectedPage Perfect and let's export default protectedPage. Like that. Great. So I'm gonna go ahead and log in with Google and after you log in you are redirected back to this page. Later in the tutorial this is not going to work exactly like that.
If we are logged in we are only going to be able to access the dashboard right we are not going to be seeing this landing page all the time. What I want you to try now make sure you're logged in is go to localhost 3000 slash protected so this route which we just created and as you can see right here it says protected page like this perfect and now I want to show you a couple of cool stuff that you can do So by default every page is a server component. That means that we can try and access some of the information about our logged in user using the Clerk server utils. So let's write const user to be current user from Clerk Next.js like this import current user from clerk nextjs and that returns a promise as you can see so it means that we need to wrap this inside of an asynchronous function and await this result and then if I hover over the user it says that it is a type of user so let's write user and let's then do user dot and you can try any of these email addresses first name I'm gonna check the first name so question mark dot first name and there we go you can see that it says user is Antonio because I'm logged in perfect you can also try another hook called Auth so it's just Auth from Clerk Next.js and from here you can extract user ID.
So this is very useful. You're gonna see it later. So user ID is just user ID like this and there we go. You can see the ID rendered out right here. Perfect.
This is going to be very useful for us when we want to protect our API calls and our server actions to ensure that the user is logged in. We're not going to check for this one but we're going to use this to quickly check okay we're logged in. Perfect so now you know how to do this in server components but what if this was a client component? Let's try it out. So I'm gonna remove all of these things.
I'm gonna remove this I'm gonna remove this hooks and let's just leave this like this for now and let's mark this as use client. So now this is a client component. Basically it's the component you're used to when working with React. And now we can no longer use those those utils which I just tried. Instead we have as you can see I have this auto completion from GitHub Copilot to give me useAuth.
So let's try that. So const useAuth from clerk-nextjs. You can see how it has a prefix use meaning that it is a hook. When something is a hook you almost immediately know that you need to use that inside of useClient component. You cannot use that inside of a server component.
And let's go ahead and destructure userId from useOut. And now let's get our user from useUser like this. And let's get our user and let's just hover over to see. There we go. Use user return and let's just check.
Maybe we have to destructure the user. Yes, we have to destructure the user. Great. And as you can see this can stay exactly the same. And as you can see it is still working exactly what we expect perfect and now that we have that we can go ahead and remove this we can remove these two hooks and we can remove everything inside and instead let's render a clerk sorry user button from clerk-next.js from the same package right and let's go ahead and just close this.
All right and now as you can see we have a user button here and from here we can manage our account or we can log out we can do a lot of things. So let's click manage account and from here you can see you can change your password you can change connected accounts you can go ahead inside of your profile and change your image if you want to basically a bunch of different things and you can of course also sign out so let's click sign out here and right now you can see that I'm redirected to this weird page check out the URL right it's not a localhost So just go back to localhost and what I want you to do is go ahead oops let's go back inside of that protected page. I want you to add a little prop here to the user button after sign out URL lead us back to the landing page. So after we sign out we want to go back to the landing page. So let's try this again.
Make sure you are logged out. Landing page is accessible. If I try to go on slash protected I'm redirected to log in. Exactly what we wanted. Now I'm going to go ahead and login.
And now I am allowed to go to slash protected. As you can see I'm right here. Perfect. And let's try one more time when I click sign out. There we go.
I am back on the landing page so I just wanted to show you how that works perfect and now let's go ahead and remove this protected folder we are not going to need it anymore I just wanted to demonstrate how to that our authentication is actually working. Perfect! Great, great job so far and now we're gonna work on creating our organizations, inviting users, admins, all of that stuff. Great, great job.