Simple Next.js & React Authentication With Clerk

what's going on guys so when building a web app one of the most difficult things to deal with but is it also absolutely necessary is authentication and I've done a lot of videos on creating your own authentication with Jason Webb tokens I've done a few videos using oauth and some other services but in this video we're going to build a project with full authentication and user management using a tool called clerk which in my opinion is one of the easiest if not the easiest way to implement full authentication into your react projects and clerk can be used with react Spas it can be used with nexjs remix in this video we're going to be using it with next.js so we'll be able to register log in have a profile page on the user's end and on the admin end you get a complete user management system now I do want to mention that Clark is sponsoring this video however many of you know me and you know that I don't take any sponsors that I don't believe in and this is definitely something that I would recommend either way I'm all about finding tools that can make things easier for you guys and I'm also going to be using clerk in some of my own projects coming up now there is a free tier so it's not like you know you don't have to pay anything to follow along with this and build this project if you do plan on using it in production the price is more than fair for what you get all right so let's take a quick demo of the application so this is the next JS project that we're going to create you can see I have a sign in and sign up link here so if I click sign up it shows me a form where I can sign up with GitHub Google or my email address and password and those are just the three options that I chose there's there's a whole bunch of I think there's like 20 different services that you can use to have your users authenticate now this form that you're looking at is a predefined component that I just brought in from the clerk package same thing with the sign in however if you don't want to use these predefined forms and you can customize these there's different themes you can use and so on but if you want to create your own UI you can also do that and we're going to do that at the end of the video and I just want to show you if I go to slash register that's a custom form that I created and use the different tools that they give you to basically create the same type of flow but with your own UI so you can completely customize it now I'm just going to give you a quick demo if I if I continue with GitHub here it's just going to validate and now you can see I have my little Avatar up here and we have this drop down with manage account and of course I can sign out if I click manage account it shows me this modal where I can add email addresses connect accounts delete my account and then I also have this profile link because we can also embed that into a page with the user profile component all right now I want to go to the clerk side of it now so I'm going to sign in at clerk.com and you can see it's pretty much the same the same layout here and we're going to go to the YouTube application that I created and then if I go to users you'll see that user that I just registered with and if I click on it I've got a little profile of that user all right so you have complete user management if I go to users and authentication and I click on this email phone username if I scroll down here you'll see that there's all different options so you can choose to use an email verification link or not or SMS verification you can choose to have the user store their first name and last name which I did choose and then to show the see the connections here I'm only using GitHub and Google but you can use all these different Services which is really cool all right now I just want to show you how I can sign up with just my email address and password so I'm going to log out of this account and then go to sign up and then I'll just fill in here email address I'll use support travesty media and then password okay so continue now what it's going to do is email me a passcode or a verification code so I'm going to check that off camera real quick okay so I get that so I'm going to paste that in and there we go so now I'm logged in as the user that I just registered as you can see my email address and it just used my first and last initial for the for the Avatar and then if I go back to users you'll see that additional user so the functionality that you get is just incredible for the amount of code that you write I mean if you were to implement this all from scratch with you know your own back end and so on it would take a long time and you also get additional security features and there's just a lot to it so the final repo is going to be in the description it's this clerk app right here so if you need the code for any reason you can get it there and that's it let's get started thank you okay so let's jump into our project and like I said we're using next.js but there's packages for react if you want to use like create react app or V and then there's also a clerk package for remix as well so since we're using next.js let's go ahead and run npx just just go to wherever you want to create this project in your terminal and then we'll say create Dash next Dash app and I'm going to do at latest which right now I believe the latest is 13 Dot what is it let me just double check uh let's see 13.4.8 so the name of the project I'm just going to call clerk app and I'm going to basically just choose the default so no typescript no eslint yes Tailwind no Source directory yes app router and no to the custom import alias so that'll just go ahead and create a default next project for us all right so once that's done I'm going to CD into that clerk app folder and then just open up vs code in that folder and if you're using something else just open open your editor up so first thing we'll do is run the dev server I'm going to do that from my integrated terminal so we'll run npm npm run Dev so that'll open on Port 3000 let's open that up it'll take a couple seconds the first load okay so we just get a standard next.js landing page so I want to just clear all this up so if we go into the app folder you'll see the page.js that's the home page in fact I'm gonna I'm actually going to rename these so instead of JS I like to use jsx so I'm going to change that and I'm going to change layout as well and that should still work just give it a Reload if you want to use those extensions so in the page.jsx we can basically get rid of all this so the the image import and then everything that's in the return I'm going to just clear all that up and for now all I'm going to have here is a fragment with an H1 and we'll just say home since this is the home page now as far as styling goes if we go in our Global CSS I just want to use Tailwind so we have all of our Tailwind stuff here so we can get rid of the rest of this and then we should just have a white background with the text of home so now what we want to do is install the package the next I'm sorry the clerk package so I'm going to open up a new terminal here and let's run npm install and it's going to be at clerk slash next Js okay now we're going to have to get the get your API key so you need to set up an application within the clerk interface so let's go to clerk.com just go ahead and sign in you can sign in with GitHub Google or your email I'm going to use GitHub and then you want to just create a new application and just call it whatever you want I'm just going to call it clerk YouTube and then there's tons of ways that you can have your users authenticate you have your either email address and Google those are the two that are selected but you can use phone number username Facebook apple and then 19 more so we have GitHub Microsoft LinkedIn Dropbox Discord so tons of ways that that people can authenticate I'm going to stick to Google email address and GitHub just just like the actual clerk website so we're just going to use those three because those three are really easy some of these you do have to add some extra configuration so let's click on create application and then right away it's going to show us the API keys so we're just going to copy those and you want to put them in a file called dot env.local so let's do that in the root here we'll create dot EnV dot local and then just paste that in and I don't care if you see mine because I'm going to delete this afterwards anyways so that's all we have to do there just close that up now we need to add the clerk provider around our application so let's go to our layout.jsx because that's this is the highest level within our structure so basically any route that we go to all the content comes through this children prop and it's wrapped in HTML and body tags so what I want to do is wrap this in the clerk provider so we're going to import up here let's say Clerk Provider from clerkj clerk slash nextjs and then we're going to add that down here so clerk provider and we just want all of this to be in the middle of the provider all right now I also want to just uh I want to add a container and put everything in the middle so I'm just going to add a couple elements in classes here so let's see in the body make sure you do this in the body here I'm going to wrap the children let's do Main and we're going to do container and I want it to be in the middle so mx-auto and then inside that we'll have a flex container so let's give it a class of flex we'll say items Dash start and then justify Dash Center and then for the height we'll do Min H screen so full height and then I want to div in here because that's going to be the flex item that I want to Center and I'm just going to give that a class name of margin top 20. okay and that's where we want the children prop to go so we're going to just move that into here and then if we look at our app you should see home is in the middle now I think one thing I'm going to do here because I'm going to be using containers in other pages instead of having to do MX Auto we can add to the config that we want our container to be centered because if I get rid of that MX Auto you can see now this isn't it's not quite in the middle but I can go to the Tailwind config and let's see we're going to want to put this in the theme so we have the theme object here I'm going to go let's see yeah after extend and let's add container and we're going to say Center and set that to true I mean you don't have to do this I'm just prefer I just prefer it all right so now any container class we use is going to be centered good now the first UI element that I want to put on here is the the header or the nav bar so it'll just have the text and then it'll have a law a sign in and a sign up link and then when we're actually signed in it'll have a link for the settings and for the log out and so on so let's create in the app folder a folder called components which is just going to be UI components you know not page components and then a file called header.jsx I'm going to use my vs code extension to just map out a component here and we're going to call it no not dashboard it's going to be called header so we're just going to leave it like that get rid of that actually I'm going to make that a fragment okay and then we're going to have a nav bar here so let's say nav and I'm going to give this a bunch of classes so BG Dash blue 700 or Dash 700 will be the color and then let's do some padding on the y-axis so we'll do py4 and let's do p x six so px-6 and I'm going to make this a flex container so we can items Center and justify between because we want basically the logo to be on one side and then the links to be on the other and then let's also do margin bottom five and then in that nav I'm going to have a div for the logo area which is going to be a flex box and I want to items Center that and this will have a link around it so we need to bring in the next JS link component so let's say import link from next slash link and we'll put that link here that's going to have an href which is going to go to Just slash and then I'm going to wrap this in a div with the class of text oops let's say text Dash LG make it a little larger I want it to be uppercase so yeah uppercase and then let's do font bold make it bold and also make it white and then that's just going to say clerk app so I'm going to save this and bring it in I still still have to add the links but let's bring it into the layout just so we can see it so here we're going to import the header from components header and where we're going to put that is right in the body tag right above the main tag so that'll be the header save that and there we go so now we have our header now let's add the links to it so we're going to go under this div right here that wraps the the logo part of The Branding I should say and then let's have a class of text White and then we're going to have our links so link href and this is going to go to let's say sign in and I'm going to give this a couple classes as well so class name let's say text Dash Gray 300 and then I'm also going to add a hover state so we can say hover colon and let's do text White on Hover and let's also do margin write-4 just to push things over a little bit okay and then that will say sign in and then what we'll do is just copy this down and change this one to sign up we want to change the text as well sign up okay so now we have our links now if I go to one of these pages it's not going to work obviously it's a 404 because we haven't created it so before we do anything else I want to show you how we can protect pages right and we're going to make it so that every new page we create is protected unless we specify it in the public routes so let's create a page for the dashboard first so we actually have something to protect so in the app folder I'm going to create a folder called dashboard and then in dashboard I'm going to create a file called page.jsx okay so if we go to slash dashboard whatever we put in here should be displayed now as far as what I want to put here let's do rafce and I'm going to call this dashboard page that'll be the name of the component and I'm just going to have let's see let's get rid of this and just put fragment and then H1 I'm going to do text Dash 2XL and let's make font make the font bold and then margin bottom five and we'll say dashboard and then underneath that I'll have a paragraph with the class of mb5 and just say welcome to the dashboard okay so right now if I were to I'm not obviously I'm not logged in if I go to slash dashboard I'm able to see it right now I want to protect this so what we have to do and I'm actually going to open up I'm going to go to one of the documentation Pages here so we have to add a file called middleware.js and then we can use the auth middleware that's part of the clerk next.js package and what we can do I think it's on this page what we can do is is just Define our public routes okay and basically we want to block everything else everything else will be private so we're going to export this config object with a regular expression that basically says everything is going to be private except anything in slash API or trpc so if you're creating an API Let's uh let's create that in the root we're going to create a file called middleware dot JS and then what I'll do is just grab this or just say copy here and I'm going to paste that in and this all this I want to leave but we want our our public routes so that actually goes in this middleware as uh as an argument so we can pass in an object and then we're going to add here public routes which is going to be an array so obviously we want the home page to be public so let's add slash and let's just do that for now so I'll save that now if I go back and I try to go to my dashboard page let's reload that now it redirects me to a sign in page now notice this is not in my application flow it's at a different URL so you can do things like this but what we're going to do is have this in our actual application as a component as a page but right now at least you can see that everything is blocked even if I go to a page that doesn't exist it's going to bring me to a sign in page now if I go to sign in or sign up it brings me to these it's going to bring me to a sign in and I don't want it to bring me to that I want to have my own sign in and sign up Pages now you could add those to the public routes but you can also create environment variables in a DOT EnV file so in the root here not my DOT EnV local but we're going to create a DOT EnV and then we want to add next Dash public and obviously this is not something that needs to be hidden these are just your URLs so let's say next public Clerk and it's going to be signed underscore in underscore URL and we're going to set that to just slash sign in and you could call it whatever if it was register or sign in without the The Hyphen but we're using sign hyphen in and then what I'll do is copy that down we're going to have four of these this next one is going to be the sign up URL so that's going to be sine Dash up okay and then let's see here this is going to be the after sign in url so right here we're going to say after underscore sign in so where do we want to be sent after we sign in and that's going to be the dashboard okay and then we also want to do the after sign up so here let's say sign up oops and we're going to put after right here so after after sign up and that's also going to be the dashboard okay so now if I were to let me just reload this page and then click sign in it's still 404 because I don't have you know I don't have a sign in page but it's not blocking it so now we can close that dot EnV file and then let's create our sign up page so I'm going to go into uh actually just close this stuff up so in our app folder we're going to create a folder called sign in so sign hyphen in and the way that this works is it uses the catch-all route so to create a catch-all route you actually create a new folder and in Brackets so we're going to do this with brackets or two sets of brackets and then triple period so triple Dot and then the name of the route which is sine Dash up okay that way if we go to like sign up slash something then it'll it'll be whatever is in the page in this folder so now in this folder we want to have a page.jsx and let's do rafce by the way if you don't know what I'm doing here with the rafce it's the es7 react where is it uh that's not it this right here es7 react Redux Snippets so you can just generate components so I'm going to call this this um sign up page okay so if I go ahead and save that and now since I did oh that's sign in sorry let's change that that and that to sign in and now if I were to go and click on sign in I now see my sign in page okay now what I'm going to do this there's so many ways to go about this but what I'm going to do first is the easiest way to do this and that is to just use the sign up component that clerk gives you now you can have your own custom flow your own custom UI and forms and all that and I'll show you that in a little bit but the easiest way fastest way to get set up is to just use the the sign up and sign in components so what I'm going to do is bring that in up here let's say import and then sign in from Clark next JS and then we'll just make that a fragment and then we can just embed the sign in component like that so I'll go ahead and save that and then I'm going to do the same for sign up so I'm just going to copy this and then in the app folder let's create a folder called sign Dash up and same thing we're going to use the catch-all route so we're going to make a folder with two brackets and then dot dot dot sign Dash up and then inside that we'll have our page.jsx paste that in and I'm just going to change this all of these ends I'm going to change to up so now if we come over here and we go to sign in let's reload there we go so we have that sign in page with the GitHub the Google and the email address methods of signing in if I go to sign up we have the create your account so now it's in our application flow it's in you know our own URL rather than being outside of it so as far as The Branding here I just want to mention that if you use the free account then you have the branding if you do upgrade to a paid account then you can get rid of that but like I said you can also have your own login flow and I'm going to show you that probably be the last thing that I show you now this is set up already I'm going to go ahead and create an account let's let's start off with uh with Google so I'm just going to choose one of my accounts I'll use this Tech Guy info here and now you can't really tell because I haven't added anything to the UI but I am logged in and I'm signed up so if I go to my dashboard now go to Clerk and we get this little effect that says congratulations your application now has users if I go to users I can see my Tech Guy info so this is the I signed up with Gmail and that's the user okay so you have a complete user management system now and there's there's not much that we had to do to really set this up now obviously I want to change some stuff here because it still says sign in and sign up if I go to either of these links though automatically it brings me to my home page because I am signed in so let's change the header to show something different if we are signed in so let's go to the header component and there's a few ways to do this there's a few different things that we can bring in from clerk to to show if we're logged in or not so I'm going to go right under the link import and let's say import and I'm going to bring in off so auth from clerknext.js and let's go right in uh let's see so right in the the header component above the return let's say cons and I can destructure the user ID from the auth function in fact let's go ahead and console log the user ID remember we're using next.js and by default these components are on the server so your console log is going to be down here not in the browser and that's the user ID so you could easily integrate this with your own backend API if you're if you're let's say I don't know you have a real estate application and someone's listing a property you can just take this user ID and send it with the rest of your data to the database to store that okay and then you could have permissions where it checks for that ID and and you can just use this in any way that you want so I'm not going to actually need the ID for anything except I just want to check for it so that I can hide or show certain things so down here where I have the sign up link and sign in link so basically right within here um let's see I'm actually going to just add on to this flex and the class of items Dash Center and then right above this the link I'm going to say if not user ID then and then I'll open up some parentheses and in those parentheses I'll put a fragment and then I'm going to put both of these links in there so what I'm saying is that if there's not a user ID meaning if we're not logged in then we want to show these links and now you'll see they disappeared because I am logged and I do have a user ID and I'm just going to change the home page real quick just put something different than that so in the the page.jsx that's in our app app folder let's just change let's see what do I actually want to put here we'll just have an H1 let's give it a class of text Dash 2XL font bold and mb-5 and let's say welcome and then paragraph mb5 so just like our dashboard really I'm going to say this is a demo site for the travesty media let's see travesty media next JS and Clerk tutorial go ahead and sign in obviously you can put you know whatever you want here I'll say go ahead and sign up or sign in all right so I think it just looks a little better than just home and get rid of that dot okay now we don't have a way to log out we don't have anything here right so there's another component that we can use called user button which is fantastic it gives you the little Avatar gives you a drop down with a log out and also a link to a settings modal to your profile so back in the header let's come up here and let's Import in addition to auth I'm going to bring in user user button and then we're going to put that let's see down here we don't even need to put it in like an else because it won't show if we're not logged in so I'm just going to go right under this um where we ended this and just do a class of ml Dash Auto just to align it and in that I'm going to say user button actually it's it's a self-closing so we're going to do user button like that and then I can also pass in a prop which is going to be the URL where I want the user to go after they sign out so we're going to say after sign out URL I'm going to make that just slash just the home page all right so now I'll save that and you can see it gives us the little Avatar remember I signed in with Google so it's going to use my Google Avatar if let's say you log in with your or you sign up with your email and you don't have an avatar it'll just be I think the letters of your your name or something like that but if I click that we get this really nice looking drop down with a sign out link so that's how we can sign out and then manage account which opens up this really nice looking modal where you can change profile data add an email address connect accounts delete your account set your password and then I'm not going to scroll down anymore because it shows your devices and your IP address as well all right so we can close that up now there's we can also embed that into a page if we want so let's actually do that let's create another folder in app called profile and then in profile let's create a page.jsx so I'll say ra fce and I'm going to call this profile page and I'm going to bring in the user profile component so user profile and then down here I'll get rid of that and let's just embed the user whoops user profile okay and then if I go to right now slash profile there we go so I see I see that same stuff but it's not in a modal I have it on a certain page at a certain route now I I want to link to that so let's go back to the header and I only want this link to show if we're logged in so right below this right above where we put the the user button let's say if user ID then we're going to have another link and that's going to be let's say href to profile and I'll give it a class name let's say text Dash gray 300 and on Hover we want to do text Dash White and what else mr-4 okay and then we'll say profile let's save that so now we have a link to that profile page so what I'm going to do now is sign out make sure that works and now we can just see our sign in and sign up so let's try signing up with an email address so I'm going to use uh what should I use I'll do Brad at traversee media.com and it's one two three four five six password must be eight or more so there's some built-in protections here just click continue uh this password has been found as part of a breach and cannot be used so you can see this built-in security systems so I'll use something else here let's do uh we'll do that so now what's going to happen is I'm going to get an email with a code so off screen I'm going to check my email so this is really cool that this is built in and we didn't really have to you know write any code that has to do it with any of this we're not sending this it's just all there for us to use so let's uh let's see I'm just going to check this real quick I should have an email yep there it is Clark YouTube and I have a verification so I'm going to go ahead and paste that in there we go I'm logged in so I guess the Avatar is just this if you you know if you use uh email login now before I get into the the whole custom sign in sign up I just want to show you themes and I'm just trying to cover as much as I can about Clark because there's just so much to it so basically if we let's search for themes so let's see hmm let me see if I search for base theme yeah customization Maybe yeah so there's an appearance prop that we can use with the clerk provider and we can install a themes package and then we can apply that theme so if you want like a dark theme for for these components these you know this here the sign in the sign out let's just sign out for now so we can see these pages so what I'm going to do is install I'm going to go over here and I'm going to install let's say at clerk slash themes and then we'll go to the layout and let's see I'm gonna bring in we'll go right here and let's import the doc theme so I'm going to import doc from clerk themes which I just installed and then I'm just going to add an appearance prop to the provider so here we can say appearance and I'm going to set the so in here I want this to be an object so I'm going to use double curly braces and then we're going to say base theme and I'm going to change that to dark so now if I save that and I come back you can see now the sign in and sign up have a dark theme and there's others as well so I just wanted to show you that I'm not going to keep it like this I would have to change the rest because obviously this doesn't look very good but what I'll do is I'll bring in the light theme which is the default so I'll just do that just so you can see that you can actually use this appearance prop all right now I want to get into custom components because this is great that you can write such a little code and have all this functionality but you might want to really customize your UI and customize your flow so what I'm going to do is create a separate register page or sign up page but not use the predefined components I'm going to show you how to do it all custom if you want to stop the video now and this is this is good enough for you that's fine but I do want to show you at least how to create a a custom register page and then if you want to do a custom log login or sign in you can do that as well so let's close up everything that we have here okay and then as far as the page that I want to create I'm going to call that register since we already use sign up because the same thing sign up register so in the app folder let's create a folder called register and then in register I'm going to create my page so page.jsx and rafce and we'll call this register page all right now if I save that and I just go to slash register I'm not going to put in a link because it's not really part of the whole flow here now notice it's not letting me go to that page so what I'm going to do is go to my middleware.js and add it to my public routes so let's say slash register make sure you put the slash or it won't work so now let's go slash register and we should see the text on the registered page okay and this is going to still have the whole email verification type in your code we're going to implement all that and it's going to be completely custom so in the register page let's bring in first of all I want this to be a client-side component because we are going to be using the use statehook and some other hooks so you have to has to be a client component for that so what we do is just add up here in quotes use client and then I'm going to import a couple things I want to bring in use state from react and then we're going to bring in a hook called use sign up from Clark and if you're creating the sign in form there's a hook called you sign in so let's say import use sign up from Clerk and then I'm also going to bring in the route I use router hook because I do want to do a redirect so let's also bring in use router from next router actually it's next navigation now now this is kind of a long file because there's quite a bit of code we're going to write so I'm going to paste in chunks and explain them all right I'm going to close that sidebar up and the first thing I'm going to do in here is add the component State all right so I'm going to paste that in so this use sign up hook that we brought in we can destructure that and get three things from it is loaded which is going to tell us if the sign up object is ready or not and then the sign up object itself has a bunch of methods on it to send the verification link through email and validate it and so on and then set active is what we're going to call lastly once everything is done once we register and verify the uh the code that's sent in the email and then email first name last name and password are all form Fields however if you do want to use first name and last name we actually have to enable that in clerk so if we go to user and authentication and we go to email phone username down here so you can really customize this how you want if you want to use the username you can right here I'm going to check this the users can set their first and last name if you don't check this and you you add the first and last name it's going to not know what you mean so make sure that you add that if you want to use the name during registration so next we have pending verification which is a Boolean and basically once we submit the form and the email is sent with the verification code this gets set to true and then in the UI instead of showing the regular form it'll show an input for the verification code okay and then the code will go in this piece of State then we just are initializing the router so that's the main component State now we're going to have two functions in here and I'm just going to paste the function in without a body for now so we have handle submit obviously the form submit and then when we verify the the user the the code that gets sent to the email this will fire off and then in the return we're going to have a few things so what I'm going to do is just add some classes on here so we'll have border we'll have padding five and let's do rounded and then I'm also going to make give this a width so we'll do style and we'll set that to width and then let's say 500 pixels okay so if we go now to our register page we should see the the Border here and then we'll have an H1 with let's do text 2XL and also uh what else did I want to do here margin bottom four and then register okay and then underneath that I'm going to check to see if we're not pending verification which is the default of the you know it's false by default right here so if it's not then I just want to show the regular form with the name and email and all that so that form I'm going to just copy and paste in because it's a it's kind of a lot to write to type out and I'll just go over it real quick so we have just a couple fields we have the form with the handle cement we have the first first name here so it has a label and an input on change obviously is going to change that state then we have last name then we have email address and then we have password and then a button so pretty simple so it's going to look like this which doesn't look as good as the the predefined component but you could make this form look however you want now under here we want to say if it is pending verification meaning the email was sent and now we're waiting for you to type in the code so then we have a different form for that so let's go ahead and paste that in so just have a div with a form and the input is this is the code so value is going to be the code in our state and our on change is going to call set code and then the button when clicked will call on press verify all right now we just need to add the body to those two functions now if the handle submit is actually going to be pretty simple so let's first of all e-dot prevent default and then we're going to check to see if it's not loaded so if not is loaded then we want to return because that means that the the sign up object is not is not loaded is not ready if it is then let's do a try catch and here we'll just do a console log of error and then in the try we're going to call sign up dot create which is asynchronous so we want to say await sign up dot create and we want to pass in here an object that has first underscore name and these have to be formatted these Keys like this that's going to be equal to the first name in our state the last underscore name is going to be the last name in our state the email underscore address will be the email in our state and our form and then password our our state variable is the same so we can just put in password now that will create we then need to send the email with the verification so again we're going to use await and then sign up has a method called prepare email email address verification and that's going to take in an options object and we want to add a strategy because you can either do email link or email code and we're going to do email code all right then we just want to change the UI to pending verification true so let's say set pending verification and set that to true okay so and I can just show you real quick if I were to set that to true manually like that then it's just going to show this right but we want that to be false to begin with so the last thing we want to do is the on press verify that's after we enter the code so for that I'm actually going to paste that in all right so we're going to prevent the default we're going to check if it's not loaded try catch and we're gonna have this complete sign up which we're going to set to the the return value of this attempt email address verification where we pass in the code an object with the code if that is not complete then we're just going to investigate the response see the error if it is complete if the status is complete we're going to then call set active and we create a session okay so we use this created session ID and then we're just redirecting to the the home page all right so this code here is going to pretty much do the same exact thing as when we use this sign up and you can see now this actually has the first and last name it didn't before but I enabled it within the dashboard of clerk so let's try our register form the custom one here so I'm going to say John for the first name do and I'm going to use I'll just use actually yeah I'll use Traverse media gmail.com and then password and let's create an account okay so now we have this verification enter verification code so what I'm going to do is check my email for our code okay so zero zero one four seven one four verify email and there we go so now we're logged in and it does show the initials JD so John Doe so this is incredibly powerful I mean if you think of creating a custom authentication using Json web tokens it's a ton of work just to get the authentication between the front end and the back end never mind the user management like we have here I mean you can go in now and you can manage your users and there's just a ton of different options you have your your session options here you have JWT templates different Integrations that's another thing I forgot to mention is you can integrate with Firebase with Super Bass Google analytics there's just so much that you can do so but that's that's kind of the basics of it I just wanted to show you guys how easy it is to just get up and running and add authentication to your projects whether it's next JS whether it's a single page application or whether you use using something like remix alright so that's it guys thanks for watching and I will see you next time

Channel: Traversy Media

Views: 34,124

Keywords: next.js, next.js authentication, clerk, clerk authentication, react, react auth, react authentication, remix authentication

Id: RHFmsoiVtKE

Length: 49min 35sec (2975 seconds)

Published: Mon Jul 10 2023