Next.js 14 Authentication Tutorial with Clerk

welcome back everyone today I'm going showing you how to implement this clerk authentication in nextjs application so as you can see the clerk is basically the user management platform that really easy to implement in nextjs application so as you can see when you log in you have this dashboard here to manage all the user that log in in your application and yeah this is what we are going to be building so let's go to home this is the homepage and we are going to sign up first so basically all the sign up option it can be avilable you can just toggle the option you can use GitHub uh Google Facebook a lot of option that you can choice and also for this field also you can choice you can use first name last name or just use email and password anything you want basically so I'm going to say join do for the first and last name and the username I'm going to say join 123 for email I'm going to use my email gmail.com and for the password I'm going to say uh this is my password one two three so let's continue and now uh let's do random something in here I'm not really care about that so now we should put our verification code if I open my Gmail account now I have the email come from the clerk and now I'm going to if you want to see this is the email look like right I'm going to copy the verification code and paste that right here this automatically ver verify the code and now it will redirect me into the uh dashport page as you can see the dashport is basically the private road now as you can see we log in and up here as you can see we have this icon here I can manage account I can change my name I can just upload image here and change my username change my password I think uh yeah we can remove the email here and add email address as well this is uh available by default when we using Clark and yeah hopefully this video helpful and let's get started all right so the first thing what we need to do let's create the folder I'm going to give a name learn Clerk nextjs and I'm going to CD into the learn clerk next JS folder and from here I'm going to say npx create next app at lettus and then SL that mean it will generate nextjs application in the current folder I'm going to use typescript es L TN source rouder and the import alas I'm going to say no it will generate the next JS application just wait for that it's done so let's open that inside the visual studio code we can say code and then dot it will open the visual studio code like so so now let's run the application by say npm run def it will open Local Host 3,000 I just want to clean up this home a little bit so I'm going to scroll down and grab all of that and here I'm going to say diff and I'm going to put H1 let's say home page just like that and I'm going to remove this image up here so now let's open the Local Host 3000 and this is what we have by default we should have this H1 homepage nice so now let's go back to the clerk documentation just make sure you have already log in in here sign in and I already sign in with my GitHub account you can do that and here let's go to clerk.com documentation SL talks and go to Quick Start and I'm going to select this nextjs and here the step by step how you can implement the clerk so the first thing is we need to install the clerk SL nextjs open the terminal and paste that right here and also the next thing is uh we should see this envirment variable here this next public clerk publish key and the secret key how do we get this so basically you can go to Clerk and you can sign in with uh GitHub or Google anything you want and in here I have already have this application here for my testing and I'm going to create new application you can give any name you you want and I'm going to say learn clerk uh YouTube just like that and as you can see this is real time you can add a pH number here as you can see this one you can add Facebook sign in with Facebook Apple GitHub anything you want I just want to select the Google and GitHub and also I'm going to uncheck this bone number and then let's scroll down you can select anything you want in here but I'm going to leave it like so and just create the application after you create the application now as you can see we have this file here it's like the documentation right here so I think we can just copy this go to the nextjs application and in here you can say env. local and just paste it right here I'm going to remove this so I think doesn't really matter if you see this secret key all right after we're doing that we need to run that again npm run Def and after that let's go to the documentation and as you can see we need to wrap our layout with this clerk provider so let's go to layout here and then I'm going to wrap these children here with Clark provider so let's do clerk provider like so and I'm going to put these children inside inside the clerk provider just like that and now if I access my Local Host 3,000 I'm going to refresh and now it should be we can access that because I believe oh we still access that right I'm not sure what I'm doing Miss right here oh yeah that is because we need to add this middleware to our application so let's go back here inside a source directory because I use source directory here I'm going to create file called middleware dots and in here I just want to copy all of those copy that and paste that right here and as you can see this is basically the road that user cannot access that mean it will be uh private road as you can see all of this but the accept is this API or trpc folder is it will be public so let's try to refresh here yeah as you can see we cannot access my homepage it will redirect us to this signin page really cool but I don't want that happen I want to my homepage is still public road so how do we do that so in here we can add something called public road so let's add the public road and the public road that I want to add in here is for Slash so let's try to go back here and let's try to open Local Host 3,000 and I believe now we can access that right nice so let's go to the global CSS I just want to remove all this style here this doesn't really matter so now as you can see this is clean and I'm going to go back to my page and just add some styling I think in here to make it a little bit bigger so I'm going to say class name font B and the text I'm going to set that to Center and also the margin top let's do 10 right so now as you can see this is the homepage so if I want to add another road here for example I'm going to say about so let's do with file I'm going to create folder called about and then inside the folder I'm going to create file called page. DSX so in here I'm going to say LFC and then I'm going to do about page just like that save and then if I go to slash about we cannot access that because about will be protected Road by default so we need to add the about Road inside the middleware inside this public road so here we can say comma and then I can say slash about that's how you add the public road basically so now if I open the Local Host 3000 slab now we can access that right here but in normal layout on website we have some header in here and we have sign in and sign up and we have the logo in the left right so let's L quick little quick create the header so here inside the source I'm going to create folder let's do components folder and inside the components folder I'm going to create header. TSX and in here I'm going to say RFC let's remove the name I'm going to say header with Capital H right here let's remove the input react and in here I'm going to render a diff with the background I think gray something like 600 something like that and in here I have diff class container and inside the container I have link this is basically the home so I'm going to say home something like that and I'm going to say hit ra is going to be equal to for slash so let's try to save here and I'm going to render that on our layout here this is our root of application right so I'm going to put the header like so here we go we have the header up here right so let's fix that the styling so let's go back to header and here I'm going to say the text should be neutral I'm going to say 100 and inside the container I'm going to say MX AO to make it in the center and also I'm going to say Flex item Center and justify justify between to put the home in the left and the button sign in and sign up to the right side and I'm going to say beding vertically into I'm going to do four let's save and this is what we have let's zoom out like so and down here we need need to put the diff and I'm going to say some link here I'm going to do another diff here let's put uh link like so this is going to be the sign up and let's add hitra right here Rich ra is going to be good to the for/ sign up let's copy and paste this it's going to be for/ sign in I'm going to change this to sign in so now we have have sign in and sign up great so here I'm going to say display Flex to add some space in this sign in and sign up I can do Gap to four like that and the item and set that to Center nice we have the signing and sign up button but we don't have yet the sign up Road and sign in road so let's create the road first let's go back to documentation go back to all documentation and click this next JS and I believe we can see in here at custom sign up and sign in Pages because we're using App router we need to create this file here so let's just copy that and inside the app here I'm going to create that file and paste that in here it will create the folder sign up and this array right here and also inside of that we have this page. DSX so in here we need to render the sign up component come from the Clark right here we need to just copy all of that and paste that right here and again we need to add the sign in so let's copy this I'm going to copy that and go back to app I'm going to create file and paste that right here and also we need to just copy all of this let's copy that and paste that right here but we know in our middleware here the road that public is just the for SL and about the sign up and sign in now it's still private road so how do we make sure the sign in and sign up here is is public road so user can access that road so as you can see here we can use this environment variable so we need to just copy that go back to environment variable here and just paste that right here this is the next signin URL this is the sign up URL and this is the after signin URL after user sign in I want to redirect user to the dashboard rad and after user sign up I also want to user redirect into the dashboard page right so let's close this one and let's try I'm going to click this sign up it should be open the sign up Road and open this component here as you can see this is the sign up and also when I click sign in it will open the sign in signin form as you can see really cool it's not on a center because we're not stying anything on the sign up and sign in pages so let's go to sign in here and I'm going to wrap this inside the diff like so and in this diff here I'm going to add uh Flex to just put this on the center here so let's do flex and then item Center and also justify Center and flex it's basically Flex column like so and I'm going to add Gap to let's do 10 because I want to put something like H1 in here and say this is sign up page so here I'm going to say class name text for Excel and also the font Bold and the margin top I'm going to say 20 let's save and as you can see now the form is on Center but when I go to sign up it's still on the left so I think we need to just copy The Styling here here go to sign up and paste that to this return here like so but of course we need to use the sign up in here and this is sign up of course this should be sign in all right my bad like so as you can see this is the sign up when I go to sign in this is the sign in we also use this button here I believe go to sign in and sign up all right it working so what the next thing we need to do let's try to log in but first I'm going to go back to the dashboard of the clerk here and go to the users now as you can see there's no user here let's try to log in I'm going to log in with my GitHub account so let's click the GitHub let's click this authorized Clerk and it will redirect me to the uh as you can see the dashboard now is which don't have the dashboard right but as you can see we we see this pitch not found but let's go back here and refresh we should be able to see our user that log in here as you can see this is my name and my email nice it's really easy right so let's go back to app here and I'm going to create the dashboard so let's create a file here I'm going to do dashboard slash page DSX like so and inside this page I'm going to say RFC and I'm going to change the name to dashboard page and then now let's go back here I'm going to refresh now we should see this dashboard page and the next thing I'm showing you is how that we can get the name of the user that user login or not it's pretty simple so let's go back to the documentation here as you can see we can read session and user data by use this uh I think to check the user not loging or not we we can use this user ID come from the out so let's try to do this I'm going to just copy this and the first thing is we need to change this component into as sync function like so as sync component I'm going to paste that right here we need to just import out like so and I'm going to say conso loog the user ID so let's try to see as you can see we have this user right here that mean we are loging right now so we need to check here if the user ID is not access we need to just return something called maybe diff here I'm going to say you are not log in it's like so right so now let's try to grab the user information by using this current user so I think we need to just copy this go back here and we need to import this current user now let's try to console lock user now as you can see here we get a lot of information we get the first name last name image URL and a lot of things here I believe you also have the email somewhere I think this one email email address right great so now I'm going to return the information in this Stone here so as you can see we access basically the user. first name this one or that this one user do first name user. last name and also we access this email here by go to user email address and then go to ero array zero and inside that array Zer we have the email address so let's save as you can see we have we have some warning here because sometime user is null so we need to check in here if user ID is undefined or user is null of course we need to put this on the top here like so so now the error is should be gone let's try to see here as you can see we have this my first name and last name and then the email right here if user log in I want to showing the button user right here so how do we do that let's go back to the documentation but as you can see in down here if you want you can create a road inside the API right here you can create a road and then you can use the get out right here to returning user login or not all right so if you on the client side you also can use this use out you can grab the is loaded user ID session ID and get token I think the documentation is pretty good to follow and now I'm going to showing the button something like this on this Naf bar here so let's go back to documentation and I think it should be inside the component reference yeah we are going to use this user button so let's click that user button component here and yeah something like this right so let's go back to the code here and inside a header I'm going to add condition in here so the first thing is we need to make sure that user should be log in to showing the user to button user button I believe the name yeah user button when user log in we need to showing this user button component so how do we know user login simple we can use the cons and then we grab the user ID from out like so and of course we need to change this to a sync component and then here we need to check inside this div here we need to check if the user ID is access it mean user login if there's no user ID we need to say user not login when I save as you can see now user login so of course if user log in we need to showing the user button so let's remove this string I'm going to render a diff like so and inside this diff I'm going to add the user button component come from the clerk and if user not log in we need to just showing this button sign up and sign in as you can see now here we have this button really cool very simple to do and in here I'm going to add link basically press tool link and the link is going to be go to the dashboard like so let's do hit ra it's going to be for slash dashboard and of course we need to put uh display Flex in this class name here let's say class name Flex G four item Center nice as you can see we have this button here really cool we can manage account as you can see nice and also here we can log out when I log out I want to redirect user to the homepage how do we do that in here in the user Button as you can see on the documentation this is basically the uh props that you can use we are going to use this here after sign up URL I'm going to redirect user to the for SL right so let's try to sign up let's see as you can see we on the homepage right now nice so let's try to sign up I'm going to sign up here now we have just email and address you can setting this if you want let's go to the uh I think user authentication and go to this email phone and username you can use phone number if you want this is pro version you can use username if you want and you can use this name here it will create the first and last name so let's apply changes and see I'm going to refresh this page now you will see as you can see we have first name last name this is optional really cool we have username email and password so let's try I'm going to say John do and for the username say John 22 and the email I'm going to use my email I think let's say and for the password I'm going to say this is my long password yeah the email address is uh tacken because we already log in with that here or maybe we can just delete the user from here and try to log in again so let's try to continue please try another password all right so let's say this is new password one 2 three let's continue and now as you can see we should put the verification code so I'm going to check my email and see I'm going to copy the code that's copy that and I'm going to paste that right here and as you can see this automatically verify the code and now we are log in as you can see we on the dashboard now the first name is Jo John the email and the last name right here okay nice if you log in with a sign up now there's no image here but by default we have this alatar here we can manage here we can change the first name and last name as well here we can update the profile it's really cool I think so let's try I'm going to change this uh first name to anytime let's continue let's finish and I'm going to close this and let's try to refresh and hopefully the first name is updated right now cool so I think we're done with this tutorial and hopefully guys you can implement the clerk authenication on your next year application so thank you so much for watching see you on the next one

Channel: Cand Dev

Views: 3,751

Keywords: nextjs, next.js 14, next.js authentication, clerk authentication, web development, next.js tutorial, authentication tutorial, web security, frontend development, easy auth, next.js basics, clerk integration, step-by-step tutorial, JavaScript framework, learn coding, secure login, website security, web programming, app development, programming for beginners, clerk.js, web design, web development tools, authentication setup, clerk setup, coding walkthrough, frontend coding

Id: UqjJLhCm2-k

Length: 25min 36sec (1536 seconds)

Published: Fri Jan 26 2024