Forgot Password and Reset Password in MERN Stack | MERN Stack Authentication Tutorial

hello everyone in this video we will just explain the forgot password using a marine stack so this is already made by me this project we'll just move to the login page this is the login in sign up page which I have already created and implemented right now I will just implement the Far Card for password functionality okay to reset our password new password and we will use for this the node mailer to send email to the user and the user will move from that email to a new page to reset his password so now let's get started before starting if you are new don't forget to subscribe our YouTube channel so first of all I will add a button here um forgot password so let's come here okay you have the code and also link for this um login and registration page which I have created in the description the links are available here so you can go and watch these videos this is the login page which I have created okay now I will just come here and add forgot password link here I will just write link 2 is equal to forgot password we will move to this route I will create this route later now let's create now this route this route this is react router which I have used I will write that here I will write for God password and here I will just fit in accompanied by the name of our card password G6 and here now I will just write the code of the login just I will change the name because we want to create an email field the user should enter his email here just change this to the our God password and let's copy this and paste it here also what should I do now let's remove this [Music] email field you will just leave this email we remove the password field because the user should first of all enter his email if the email was correct then we will send link to that email and also here this is just a user interface that I will create okay I will show you it right now okay there is an error I will just correct it yeah the error says that yeah there is I should import the login I forgot password component I will paste it here save it and just come here again to Chromebook the import line and that this is the link not linked yeah that is okay now so now this is the forecaster let's press this internal button and we paste forgot password we paste within error so let's correct that you have here forgot password okay forget password and just come here where is the error I will make that and correct that let's remove all password fields it has the password right now and also let's remove this let's remove all of this say save it and just come here now again if it's within error so let's check it where is the error no routes message like in slash forgot password I will just assign this slash before that that will be okay now depreciate in its place bar card password so we came to this page and I will just change this slide into the farcat password that is okay okay why that is not refreshed oh sorry I have changed that should change that in this one forgot password field component paste it here that is again okay for so now whenever I enter email so I should move to the server side okay this is the server side file and I should do a send an email to the email which user has entered so for that I will create an API app dot post that is forgot password radiator request in response just come here and I will correct this method okay whenever I press this send button we should send the email to the server side yeah we should write here forgot password and let's remove this one it also remove all these things let's remove this in just whenever we press the send button and the user sent email so we should move back to the liking page now let's come here and we will create this power guard password API and inside it I will write down my code so here first of all I will distract the email sequel to registered body the image which we have passed so we will distract that first of all then we will use our user model to find the user based on this email let's I will show you this is our node.js code okay and this is the connection which has created with data mongodb database check that compass and go DB compass we has created connection with it and with this employee table inside it we we use this users table this is the connection with employee database and then we have a user this is user model okay which we have created and this is used to just interact with our database this is our table we have name email and password field and also our own field and this is user model we have exported it then we imported it it inside this index.js so now we will use that user to just find the record user model dot find one okay we will find based on email okay whenever it finds the record that thing it will just give us a user so now we will write our code here if there was no user A2 not user if the user was not existed so what we will do we will just return response dot send return in object status user not existed so now I will use the G service token package let's check that see this one I will use this one to generate a token now and then I will send that to the user so let's generate first of all our token once token is equal to GWT DOT sign here first of all you should have your payload in the period you can assign whatever you want to distract them again for example I want to write email and just ID okay ID and I will just use user Dot ID I store it inside the payload and after that we have a secret key this should be a secret key okay no one should know about this key and this should be at least 32 characters but for the learning purposes right now I will just write like GWT Secret here should be made from different spatial numbers and other characters and the last we have options and that is optional so we can just write expires in like in one day okay it will expire in one day this is the token which we have generated now we will see in this token in email to the user so for the email we will use nerd mailer if you don't know about Nord Miller I have already created a video on that that is just a four minute video and you have link for that video in the description so to use nerd Miller I will just come here and I will search node mailer example dw3 scope I will copy this example okay this is the example that I will copy just a few lines of code okay first of all create transporter then mail options then just use Cinema method to send the email and just come here now I will paste it here the node mailer is already imported here now in this node Miller we will just change a few things first of all we should change these out for our Gmail okay we are using Gmail and here should be our email and here should be our password the password I have just show the method of how to send the email in that video which you have Link in the description just what watch that in you will learn how to send email using node mailer and after that here we will just write like this is the subject forgot reset your password your password and here just use text the text should be the token that we have generated in also the ID of the user so let's write HTTP we will move to http localhost then Tower front end what is the port number of our front end that is let's copy this we will move to this route and after that we will move to race it password and then we will just write our ID here user ID we will pass ID through URL and also the token change this quotation so we will move to this front end URL and we will just pass our user ID and token sorry we will see these link to the email so whenever I succeeded the email has I will just seen here a success message to our front end return um just a response dot send in object status that would be success so now I will just write my credentials here okay password and email here and also from which email I want to send I will add that email here and to which email I would like to send I will add that here for that credentials I will just stop the video so after writing the credentials now we will check okay is that sending the email or not okay we came here to the forgot password I will just come here first of all to the moon kdd and to the users yeah I will just find a record like I will just use yeah this one is gmail.com would like to reset the password of this one right here gmail.com let's press send button and let's check our email right now let's open our Gmail see a new email has came right now and this is the link that we I which I have centered okay pass reset password link and this is the link which I have sent one thing else I should mention that whenever you press on this link I hear maybe a dot yeah like here is a DOT okay okay in this link you have that by default you will face it in error 404 error but for the solving that solution of that you should install this package I will just show you yeah this one this is the packet that you should install okay with plug in rewrite all I'm using which is I updated my react app using veto team you should install this after installing this you should add just this code it's coming to our front end informative.config.js and just add this one okay plugin rewrite on this method just call this one any import that here okay that error will be removed I faced with that error enter so other people I have searched in Internet so now whenever I click on this email so I should move to a new route okay to this reset password route let's create that first of all I've come here to the app.jsic and here I will create that reset password and it will accept ID and token and we will move to the reset password component in this component we will have the same code as we had in the power guard password just we will change the input field to the password because we want to update our password let's start here update and this is reset password copy this one and paste it here this is just printed code okay I will just the same interface just I will change the email to the password because you want to reset our password reset password and here enter password new password okay the type is password and also change this to the password the username password and here we will call set password method to change the password yeah I think everything is okay so now let's move and click on that URL and that link in the Gmail just come here and let's press now on this one see we came to the power guard password interface user interface so now um so sorry we should just I came to the forgot password but I should move to the yeah I didn't change the company I should change the component here for to reset password cut it and paste it here let's come here close it and come back to the Gmail and let's press this see we came to the receipt password so now whenever I enter the password I should move to the server set and update my password so by pressing this button yeah I should just come here to the reset password and here I will just change this to the reset password and I will pass first of all I will just distract my ID and token from URL let's start here const idn token is equal to use power this is a react rotor down hooks which is used to just distract um our variables from when you are in and after that I will pass ID and a token to this one okay it's right here first of all I will pass ID and in the token let's change this quotations that is okay now when we will move to this reset password so now let's create this API come here up dot post reset password and we will get request and response so now first I will just distract ID and token from rayquest dot forums and after that the um I should distract the password which I have seen is equal to request.body so now I will just verify the token is the token the one which we have sent in the email is the token is correct or not so to modify the token for that I will just use again JWT package dot verify and to verify we will pass first of all our token to that token in our secret key this is our secret key was JWT Secret key and after that it will just generate let's create a callback function now here are a decoded value these decoded are those value it is our period we have just stored our ID in our payload so now if there was an error so we will just return response.json return in object status uh error with token else if there was no error then we will just first of all hash our password because we stored a hashed password inside the database so to Hash the password we will use another package which is decrypt they create that hash so first of all we will just assign our password Here okay this password and after that we will just write our search salt is just a number that we will assign and it will just generate a Unity okay right now it will just generate 10 unique unique characters sorry okay 10 unique characters and it will attach with the password so after that it will just give us a hash password hash password now we will use that and store that inside the database let's use user model to update it find by ID and update okay first of all we will find a record then we will update that so to find the record let's write ID we will ask just this is the ID in the database field name of the ID and this is our ID that we have here okay so it will find a record based on this ID so after that it will update this password field okay password in the database and here we have hash so it will update this one dot in so let's send result response.seint object status it means our password has updated successfully otherwise if there was any errors let's come here send status is equal to be there and also we will have the same catch error here so this is our code for reset password and I hope it will work so now let's let's come here once again here if status was success it should move to the login yeah let's check it okay let's stick it and we will reset our password right now so to reset our password let's for example our new password would be one one one one and five times one let's update it I have press the update button nothing has happened so it says access error and there is an access error with our code so let's check it just come here to the receipt password and localhost is it password okay that is okay and we passed ID and token to that in password just come here and reset password yeah we should have here the ID and also the token let's see it now let's come here again and let's press again the update button see we came to the login page and let's now login gmail.com and let's enter five times one we slide in see we came to the home page directly okay let's change again our password so just come here to the orguard password and this time again already article.com so it will send an email to our email towards Jimmy let's check that see any email has came and let's recycle in this link so now I will just enter one two three four five six seven eight this password it's this update that has updated so now let's again alright gmail.com let's enter our rank password if I press login button so it will not log into the system okay access the login button it is not because the password is incorrect see this message which we have printed on the console it's now enter a correct password see we came to the home page so this is all about resetting and also updating our password using marriage stack I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching guys

Channel: Code With Yousaf

Views: 9,428

Keywords: mern stack tutorial, mern stack, mern stack authentication, reset password, mern stack project, forgot password, mern stack authentication and authorization, mern stack authentication tutorial, authentication in mern stack, mern stack reset password, mern authentication tutorial, forgot password in mern stack, forgot password in react js, forgot password nodejs, authentication tutorial, node js forgot password api, forgot password mern stack, mern authentication

Id: YXjORp170Lg

Length: 28min 31sec (1711 seconds)

Published: Mon Jul 24 2023