Next.js 14 Authentication with Clerk - Login | Sign Up and Forget Password

hi guys welcome back to another video on nextjs in this video I will be using the latest version of nextjs which is 14 which is launched few days back and it uses the app directory as well just like the previous version of nextjs which was 13 so there is no much difference but I will be using 14 version in this video so this video covers up a complete authorization authentication system you can see at the top we have the home login page sign up page login with Google login with with GitHub and it gives us a lot of other providers as well so I'll be using clerk authentication management system and uh this is the website and this gives us a lot of flexibility and in very less time we can Implement complete authorization authentication system which I'll be showing you in this video and I will also be showing you how we can implement the forget and reset password functionality and also I'll be showing you how we can protect our routes based upon if user is logged in or not so let me give you an overview that what happens if we log in with Google GitHub or custom credentials so currently I'm not logged in that's why it's showing login and sign up page so let me log in by clicking on the continue with Google button over here it shows me all the accounts available of Google so I'll click on one of my account so after showing loading text for few seconds it will navigate me to the profile page profile page is protected if I was not logged in I was not able to navigate to this profile page and you can see that it covers up a lot of different options which I'll be showing you and clerk provide all these options by default I can navigate to the security I can click on the account and on the Navar you can see that I cannot see the sign in sign up links now but if I click on this particular Circle because I'm logged in it will show me the manage account it will open up a model all right and also it will give me this sign out button which I click and click on it and it will be navigated back to the homepage and from here I can login again or sign up again so quickly just want to let you guys know that I've got a message from some of my subscribers to create all these tutorials in the latest version so as I've already told you that there is no much difference next js14 is also using the app directory so there is no much difference in it you can still watch my playlist of nextjs 13 plus tutorials and in this playlist you can see that I've already created 35 videos and more videos are coming up and it includes Project based tutorials and all the different concepts State Management debugging the stand best practices handling errors handling mistakes connecting with databases SEO and pretty much all the topics which would require you to become a good NEX GS developer using App directory so even if you have created new project of nextjs with the Varian 14 you can still follow the same videos in your new version of nextjs projects and if you want to learn the login registration complete authorization authentication system using the next Au package I've already created a 1 hour and 30 minutes video on my channel you can check that out under the playlist nextjs 13 plus tutorials and in the previous video I've already explained you that how you can update your nextjs 13 project variant to nextjs 14 with just couple of commands in few seconds so I'm putting a lot of effort creating these videos for you guys it will really encourage me to create more videos If you subscribe my channel and like this video so let's get started I've opened up my vs code and I've opened up the terminal and uh this is an empty folder that I have opened so I have the latest version of node installed already so you can see that I have the 20 version so I can create a new project using npx Create next next app at latest and Dot I don't want to create a new folder so I'll hit enter so it will ask me a few questions as always as the previous version of nextjs so I will go with the typescript es L Tailwind CSS Source directory yes and import LS no so it will take some time and it will create all the different files and folders so let's wait for it so the project is created if I go to the source folder you can see that it contains the similar folder structure we have the layout file and we have the page. TSX file I don't need anything from here so I'll just be removing instead for now I'll just be adding an empty div over here okay so let's save it and first of all let's go to the clerk so this is the main page of the clerk authentication system what you need to do you need to go ahead and start building for free and you need to create a new account over here once you will create that uh you will be asked to create a first application so I've already created couple of applications so I will be creating a new application for you guys so I'll click on ADD application in which I'll be giving the name of that application so let's say next 14 YT okay so I can actually select the different providers which I want to enable for the sign in and the sign up you can see that it gives us a lot of different options so for this video I will go with the email address Google and the GitHub okay but you can also enable the other providers as well if you want all right so I'll click on the create application so it's going to create that application by providing me these details next public clerk publishable key so first of all let's click on the continue in docs so it will open up the docs in a new tab of my browser So Below I will be first installing this particular package at clerk SL nextjs so in the terminal I'm in this folder so I will be pasting that command so it will be installing the clerk nextjs so before it gets installed we need to create a env. Lo file in our folder structure so here first of all I will be not in the source directory I will be creating env. local file over here and in this file I will be copying these details the secret key and the publishable key from here so I have pasted this over here and over clerk next yes is installed as well all right I'm going to close this one let's go to the documentation and here next thing we need to do make sure you choose the app router from here we need to open up the layout file and wrap every HTML element under this clerk provider okay so I'm going to open up this layout. TSX file and I'm going to come over here so clerk provider which is from the clerk nextjs so I'm just going to copy it to avoid any issues so this has been added now I'm going to add the provider let's wrap this up around the HTML all right so now let's go to the documentation let's go down and here first of all I will be creating this middleware dots file I'll be copying the whole code which is given over here and I will be creating a new file in this Source folder so middleware dots and I'll be pasting it over here all right so if I go down this is something I'll be adding later on uh so that's pretty much it we need to configur that that is already configured now let's run the project and see how it's looking like what are the things we need to add further so it's running the on the Local Host 3000 let's open that up I'm going to render this page again if I hit Local Host column 3000 it will be automatically navigated to the signin page you can see that the UI is already there and the continue with GitHub continue with Google the email address it is giving with the signup and these details are already here we don't need to create these forms and we can configure it obviously and this is showing the secured by Clerk and I'll show you that how we can remove this branding of clerk from here as well okay so first of all let's go over over here I need to make the Home Route public okay currently the Home Route is private when we wrap everything within the clerk provider everything is protected okay so in this file in here what I need to do is I need to make the Home Route public and for that I can come to this object and I can write the public routes it will give me an array and now all the routes that I will be providing over here will be come public automatically okay so I'll save this middleware dots file and if I go to the Local Host 3000 now I can see the homepage now there is no content let me go and see yes there is no content so let me add home and uh here you can see it is showing home over here so this route has become public because we have added it in this array we'll be adding some more stuff over here as well let later on all right so first of all what I'm going to do is I'm going to add some Tailwind CSS to make uh the content uh at the center of the page and also create the nav bar for this so first of all I'm going to add go to the layout and I'm going to wrap this children within a Dev so that the content comes to the center so I'll be wrapping it to this div and I'll be adding in a class name over here and let's add the flex Flex call items Center text Center and I'll be giving it some margin from the top mt32 let's cut this and add it within this div okay so let's go now you can see that it is at the center and uh what I'm going to do is I'm going to wrap it in another div I'll show you later on that why I'm doing this this is for actually adding the loader which I just showed you okay so this is showing the loader over here and uh I'm going to add some class over here it is going to be the MX 36 and the text 2 XEL all right so let's save it and the text should be increased and this is for the main container that's why added the margin on x-axis with the value 36 all right above children I'll be adding a nav bar so for adding the nav bar I will be adding the components folder within the source directory so let's add the components and here I will be creating a new file inside it so I will name it navb bar. TSX okay so here I will be using the extension t s RFC so it will be creating this uh structure so I actually need to export this as well so export default navbar which I have created I don't need these props here let me remove everything from above and I will be creating a UI for this navbar so let's add that so inside this div I'll be adding the UL so let's add the link first of all from the next and it will be taking the href with the home directory okay so this is going to be the Li and then the home okay so I can actually wrap it in a div as well so let's wrap it like this and uh after this div I'm going to add another div and this div is going to take up uh the login sign up profile route and also the that profile icon okay currently I'm not authenticating these links but um I'll be doing that after creating the UI so I'm going to create a link let me copy it from above link like this and add it another time U I'll be changing its name to the login let's change its name to the sign up and also let's give it the sign in these names for the routes are actually recommended by clerk so uh we cannot change these names from the URLs I'll I'll be showing you that when we navigate to the login page uh you might have seen that there is some weird URL it created but we want to stick to our own URL which I'll be showing you later on to sign in sign up and next what we need to have is the uh profile so this is the profile and then we will be needing the that profile icon for now let's save it and uh let's add some classes to it so UL class name it will be having the flex justify between I want to add some space between the first div to the second div okay so M10 item Center okay so this is going to be a div and I want to add some gap between the uh items on the right side so I'll be adding the flex and the Gap 10 okay so let's save it let's go currently we need to add it in the layout so I'll come over here and uh I will be adding the nav bar above the children so let's add the nav bar which I've just created let's save it let's go and now you can see that it's showing the home login sign up profile um I need to move it up um so let's go so actually I need to modify this code actually I wanted to add the margin top over here for the children only not the nav bar Okay so first of all here I will just be taking it out from here and if I go over here you can see that uh this is gone to the top and uh we have this Home Route login route sign up route this does not exists at the moment okay and if I click on the login and the sign in you will see that it will show some weird URL which I'll just be fixing okay so I also need to create the profile route but before that I'm going to open open up this Navar and I'm going to add some authorization checks that if the user is logged in then we need to show the profile and also the icon and if user is not logged in then we want to show only the login and the this sign up link okay so for that I'm going to go up and I'm going to import few stuff so I'm going to be like this one user button from the clerk next and I will be fetching the O and I will be fetching the use O So inside the nav bar I will be adding an async over here and this is the server component we can only use the asyn weight within the server component actually it is recommended uh it will throw some kind of warnings if you try to add asyn weight in client components so I'm going to add the cost and I will be fetching the user ID from a wait o and uh let me create another variable is O equals to not not this is just the JavaScript syntax I hope you are already aware of that and uh this is the variable that contains if the user is logged in or not okay so I will just be copying it and uh I actually need to wrap these two links so I will be writing if not all question mark this sign and uh I will be also adding it over here so let me copy these two links cut it let's add it like it inside it I will be pasting these two links all right so these have been added let me cut these as well so let's add it like it and I will be pasting these links over here all right so if user is not authenticated then I'll be showing the login and the sign up links if user is authenticated then it will only show the profile and this uh profile icon which from where I can sign out but clerk automatically gives us that drop down which I showed you at the start of the video that we can from here we can navigate to the uh user profile settings and also click on the sign out for that we will be using this user button so inside this Li I will be writing a user button and uh I will be giving it a value after sign out URL so this value refers to if we are signed out where we are going to navigate it to automatically we can navigate to to to the login page we can navigate it to uh the homepage so I'm going to navigate to the Home Route over here it is not required actually it's adding Extra Spaces let me remove these all right so now if I go over there you can see that it's only showing the log and sign up and it is automatically handling the sessions and the reason I imported this use Au because you would like to use this particular package for the client component okay and use this Au function for the server components so if you are adding the use client at the top you would be needing to use this one to check the authentication otherwise we have already used this o function let me add one line what the use o function actually provide you so it will be commented out so it gives you the is loaded user ID session ID get token this is for the client component okay so I'm going to remove it for now from this file so I'm going to go and open up this app folder and uh this is going to have the signin folder which I've already created U and inside it it's going to have another folder and this will be inside the double square brackets dot dot dot this is recommended by the clerk documentation so you have to give it the same name and inside it I'll be creating the page. TSX file if I go to the documentation let's go and from here we can actually go to the custom signin sign up let's click on that and it will give us this is the sign up and you can see that this is the folder structure it is recommending us so let me copy the signin one so I've pasted it over here and uh I'm just going to copy and paste it over here and I'm going to change its name let's change it sign in actually it's going to be sign up inside it we have uh another folder and I'm going to change its name as well so sign up all right and inside it I'm going to copy this one one so this is coming from the clerk nextjs sign up and the sign up over here this is the element all right so let's go ahead and uh let's refresh and now if I click on the login you will see that it will not actually it has navigated one thing left all right so here what we need to do is we need to copy this these lines in our EnV file over here like this so this is the sign in URL we are letting the clerk know that don't generate this weird URL yourself instead follow over URL uh by reading these uh Keys okay and uh this is where we are actually giving it uh some options that after we are uh sign in uh where we uh need to navigate it to so we want to navigate automatically to the profile route which we have yet to create so let's save it let's save this file as well so let's go let's go back let's refresh this page for one time if I click on the login you will see that we are navigated to Local Host column 3000 signin and we are seeing this good looking user interface the form for the sign in if I click on the sign up and this is the sign up route and I can navigate from one form to another form by this link as well it is automatic I Ally added over here okay so this is what we enabled from the dashboard when we created that and if we want to make some changes inside it we can do that so let's go ahead first of all this is where we can actually modify these user authentication click on the email and username here you can see that we can enable username as well on the sign up form as well so if I click on it let's refresh let's go to the sign up route and you can see that it automatically adds the username field over here above the email field all right so let's go ahead and uh we can enable the SMS verification once the user triy to register uh we want to send a code to the phone number of the user uh from that will be that will requir to uh enter in a form that will be automatically generated and after that user will be registered successfully we can add the first name last name fields as well uh we can send the email verification link as well by enabling this tokle all right so these are all the customized toggles that we can add and for the social connections if I click on it you will see that we can enable all the different social connections currently we have only enabled this Google and the GitHub toggles that's why it was showing over there and we have all other options as well over here all right so we can go to the sessions we can increase the different uh timeline for the sessions over here uh we can go to the account portal uh we can change these URLs as well if I go to the customization branding and you can see that uh here we can actually uh change the name of application update the logo update the icon as well as we want over here uh we can do it okay and I want to remove this uh branding of Clerk and I can actually do it by enabling this toggle so premium feature are free to enable development instance developing testing free plans so uh this has been enabled uh let's see if it works actually um if it yeah it works I was thinking it will be removed in the premium membership but it is removed uh luckily all right so here in the customization we can customize the email templates that is sent to the user in invitation magic signin links password removed reset password code these are all the email templates that we can modify we can modify the SMS as well we can integrate to the Firebase Google analytics as well so you can see that we can create our web hooks as well um we can change the planes and building and the settings so these are all the different options in our dashboard of the clerk all right so here first of all let me create a new account uh over here so I'm going to click on the Lo continue with Google I can select any email ID so here since I enabled the username even if I try to log in with the Google or the GitHub I have to provide the username so I can add uh any username over here I can click on the continue so now what happens is you can see that it will show the profile Link at the top which I have yet to create otherwise will throw an error and this is automatically generated and this drop down is automatically generated as well I can click on the manage account and it will show me all the different options which I can customize as well from the dashboard what user is supposed to do and different permissions for this user I can click on security it will uh show the uh different Security Options so this is automatically generated by clerk I can click on sign out as well all right so here if I go to the clerk dashboard I can click on the users and here it will show me that this one user is automatically generated using which I have created this account so we can manage users we can change their permissions we can ban users we can delete user from here as well we can manually create new user over here so they don't need to registers themselves through our register form all right so over navigation bar if I click on the profile it should be showing uh navigating to the profile profile so let me quickly create that one so I'm going to add over here so profile and inside it I will be creating the page. TSX okay so inside it um we can also show all these options manage account options not in the model but also over here in the page as well so next uh the clerk actually automatically gives us a element or a component which shows all these things by default okay so I'm going to add some code over here let's save it so this user profile is coming from the clerk nextjs and this is the simple component and this is where user profile is being showing up let's refresh and see what happens so here I can click on the profile and you can see that all the different options have automatically shown over here and not in the model popup model which is showing from here all right so so I can actually go and sign out and go to the login and I can continue with GitHub as well I can sign up with the user so let me add uh the let's go over here let's go email and uh I want to email verification code okay so I can enable the email verification link as well or I can enable the email verification code as well so let's enable that and uh let's try to sign up with a new user by adding this over here so I will be adding Umar Jam so let's add this email ID so this is automatically going to have uh different validations added over here as well so I will be generating random password it should be IBD 1359 so this is the password I have generated uh let's see if it creates or not so let's click on the continue so it has sent me a code let me open up my email ID and I will be adding the code so this email send is automatically handled by clerk as well so I'm just waiting for that let's see how much time it takes to send me the code all right so I've got the code let's add it over here I'm going to add 21626 so it is automatically detected and uh we are logged in automatically as well and if I click on it you can see that uh we can manage account sign out let's go over here let's go to the um users and it should be showing this user as well all right so we can manage users from here we can view their profile um from here all right this is all the details of that particular user okay so how quick is that how easy was it to add the these kinds of authentication but there is a flicker as I told you that in the layout. TSX file um I need to add the loaded and the loading bars so let's go to the layout and I'm going to add these things inside the body first of all let me add and import the clerk clerk loaded and the clerk loading okay this is what I will be using over over here so I'm going to add this clerk loading within the main Dev okay so this is going to be added over here so like it all right so make sure you write the same structure of HTML clerk loading means that this will be showing unless the clerk is loading whether we are logging in whether we are logging out whether we are navigating from from one page to another page so it will work automatically it will handle things automatically and once it will be loaded uh this will be showing up over here so you can see that margin top is not being applied to the Navar and the children so uh let's refresh and it's showing it was showing the loading uh only so it's showing the profile and the username as well uh let's go to the page over here and I'm going to add some content over here so let's add the div all right so this is going to be at the center and uh I'm going to click on the sign out and I'm going to log in again uh this is not at the center let's see what we can add over here in the sign in and the sign out options so in the signin we need to add uh some div classes to it so I'm going to add the div and let me end this div from here all right this is just the styling I'm doing it so just like this I will be also adding it in my sign up page as well so let's add it over here and then the sign up all right so both of these should be at the center let's try to log in again and see how the loading is working you can see it's showing the loading and after that it was showing that profile so let's go to to navbar the layout file mainly so here is the navbar actually I wrote it two times okay so this was the reason it's showing over here so if I refresh it you will see it's showing only loading we can show a proper gif image over here and after that it is actually showing this profile so there will not be any flicker before moving further to the forget password and the reset password I want to show you one thing that how we can fish the data of the logged in user so here if I go to let's find out the data over here and um let's add one package at the top I'm going to add the current user and the use user okay from the clerk again this current user you can get the data of user in the server component if you are using client component you can use this use user function to get the data Okay so so here I can actually use the user await current user okay and I need to make it async when you are using the used user you won't be using the await because it will be added in the client component and client component does not recommend to use async await all right and let's add the console log to uh get the data of the user okay so here we are not in the Home Route let's go to the Home Route uh we are already logged in and now in the terminal since it is a server component it will be showing the data over here not on the browser so here you can see it is showing all the details uh of the user um using which I have actually logged in all right so now I'm going to show you quickly it is not actually required if you were using the use user on the client component this is how you will be giving with this data okay let me remove this console log is loaded user is signed in uh this is how you can get the data all right so guys we are done with the basic authorization authentication system and uh I'll be creating another video that when we register with the new user how we can store the data in external database in the custom database like mongodb okay and that is a different topic so I'll be creating another video for that so for now let's move further and uh implement the forget password forget password if we go to the documentation you won't see any toggle button from where we can enable the forget password but uh actually if I go to the documentation you will see that it will provide us different ways that we can use uh to implement the forget password but for now we need to create the custom user interface for this purpose interface for uh entering an email ID uh for adding the new password so for that particular form we need to create that custom so here from now we are going to go to the clerk docs and I'm going to click on sign up sign in it is going to show me the user components let's go back UI components okay so if I click on this you will see that it it will show a lot of components that some of these I've already used so here is the component that you can refer to whenever you are implementing the clerk authentication system so I've already gone through all of these you can check these out yourself okay so let's go and I'm going to create another folder and this is going to be the forget password okay so inside date let's create page TSX file let me remove everything we don't need that so let's remove that all right so this is the clean and uh now let's go over here and I'm going to search forget password over here so forget password example I'm gone to the wrong place so forgot password actually okay so this is the code that is given I don't like the UI it has created but I will be using 50% of code that is given to it uh you can refer this code as well so I'll just copy this code and I will be pasting it over here and this code is not belonging to the nexs 13 or 14 uh or the app directory so it's using the onclick events as well on submit event so I will be making it on use client a client component at at the top otherwise it will throw an error okay so now what I need from here I will be needing this create function you can see that it's using the built-in signin uh from that uh used signin function coming from the clerk nextjs it is using this create function it is using this strategy automatically from the cler function but I will be modifying the UI mainly okay so uh I hope that you already aware of how to create the form so without wasting your time I will be um adding the UI inside it okay so let's add that I'm going to add the code so let's close this div and I will be replacing it with my own UI so you can see that it's simple divs with the Tailwind classes and uh uh this is actually successful creation is coming from here this one and uh successful creation is its value is getting changed from this function okay so if we are successfully the the code is successfully sent to the user email ID from and for that code needs to be added along with the new password okay so this is where I'm checking if the successfully uh code is being sent then I'm showing the new password the the the title of the form okay and then if it is not then I'm showing the forget password because we are in the first form and here on submit if we are successfully created uh and sent the code to the user email ID then uh we will be calling the reset function okay otherwise we will be uh calling the create function because this is the first step for sending the code to the users's email ID all right so after that I'm using another Turner operator you can see that I'm using the successful creation if it is if it is not successfully and not completed then I'm showing this input and this button this input is taking the email ID and this button is taking the submit uh button all right and if we have successfully sent the code to the user's email ID we need to show this form right after that it is showing the input field for the password it is showing the input field for the code actually okay so code will be needing to add over here for the you can see at the top it is automatically added we need to pass the code and the password to reset the password that's why we will be adding the two input boxes and I'm clicking on the submit button okay so after that if it is completed we can show a message in the same form that you have successfully uh changed your password we can uh take these things out of the form as well but let's let's keep it over here all right so uh you can actually pause the video and write it down yourself but before that um you can search this code from the documentation and uh you can paste it over here all right there are few things we need to modify over here if I go to the top you will see that uh these uh email IDs uh this this one actually this email ID uh is not being passed to this create function so we need to pass that so I'm going to change it to any and below e. prevent default I will be writing the email equals to the e. Target 0. value all right so now we don't need this use State actually we don't need the part password code and email from here as well all right so let's save it and we need to get the code and the password as well so let's add it from the e so I will be adding any over here so password and code is being fetched using this event handler of that form okay other than this we don't need to do anything if we want uh external error checking uh we can can create the state variables over here and update those variables based upon the then or if it can go to the catch block as well I hope that you have got an idea about the then catch block if not check out my videos in JavaScript playlist I've explained everything about the promises asyn a wait call backs and everything okay so I think we are done we don't need to do anything from here so let's save it let me see if we are running our project here yeah so I'm going to go over here let's refresh I'm actually um logged in so let me sign out and if I go to the login I can I need to show some link over here below this signin button so I'm going to go open up the signin and below this div I will be adding a link okay so in fact like over here right so let's add this link from the next link so I've added the main div this is the heading forget password and uh then I'm actually navigating to the forget password route which I've already created and this is the reset here so let's save it and see if we can see over here yes forget password reset here let me click on it and uh we are not able to navigate to this route the reason is that we need to go to the middleware and we need to make this forget password public so forget password okay so let's save it now and uh let's click on the reset here let's refresh actually let's go to the login and let's click on the reset here have I saved it let's refresh over here now click on the login reset here and now we are successfully navigated to the forget password and this is where we need to pass the email ID so I'm going to go open up the users and let me add one of my email ID okay one thing more that if we are logged in or registered with the Google or GitHub or any other provider we will not be able to update over password it will throw an error and uh to handle that error we can obviously use different state variables to show different errors over here which I have not done yet actually it will go over here this error okay if we try to change our password with the email IDs which was used to uh try uh change the password with the Google or the GitHub provider or any other provider so I'll be using this email ID since I created this email ID uh with the manual form the register form okay so I'm I'm going to come over here so let's add um jam [e-mail] let's click on submit and uh now it has navigated to it the reason it has navigated to it is because uh this has been successfully created and it was done over here this was done it means that it didn't came to the catch block and it came over here and the reset password code is being sent so it has some time so let me open up my email ID and see what the code is so I'm first going to add the code so it is the 01 2 74 8 okay so why is it showing this and now I will be adding the new password so let's add that all right so I've updated the password now I will be clicking on the submit and now our password is successfully changed so let me copy the new password and try to login with this new password so now I'm going to go click on the sign out login and uh this is the password which is already saved so let's click on the continue all right so we are able to successfully log in our after resetting our password with the custom code that we can obviously modify with the proper UI we can modify the user interface for the forms as well and uh one thing I wanted to do over here this is the code I wanted to change its type to number so we cannot able to add other alphabets over here as well all right so in the next video I will be showing you how we can store our user data in the mongodb because you might be having the different data like the noes settings analytics and you want to have the relationship of user to that data so for that reason it is important to store the user data in the mongodb database as well that is a different topic so I hope that you have got an idea if you have learned something new I'm putting a lot of effort for creating these videos make sure you subscribe my channel and like this video and comment below if you have any question from now on I will be using the latest version of nextjs 14 uh for creating different tutorials the Project based tutorials and different concepts like this all right and also go check out my playlist nextjs 13 plus app directory and you can watch videos on pretty much every topic and you can use the same nextjs 13 tutorials in your new next js14 projects as well thank you so much for watching guys see you in the next videos

Channel: Programming with Umair

Views: 5,383

Keywords: clerk auth in next js, next js 14 tutorial, next js, nextjs, next.js, login with social media using clerk in next js, login register in clerk using nextjs 14, next js 14 tutorials, build project in next js 14, nextjs 14 app directory, learn next js 14, next js 14 performance, forget password in clerk, reset password in next js 14 using clerk, forget password with code in clerk

Id: -NSRgDuAtrc

Length: 47min 52sec (2872 seconds)

Published: Thu Nov 02 2023