#8 How to do forgot password in React JS by sending mail | Node JS | Reset Password | use nodemailer

hello guys welcome to the debug arena in this video I am going to apply the forgot password functionality in our react app so when user enter his email address and click on submit he will receive a mail with a link through which he can reset the password before moving forward if you are a beginner and looking forward to learn the login authentication in react using node and mongodb then you can follow this playlist in this I have explained you about API how you can create an API in node.js how you can connect that API to react and how you can import mongodb also we have done the login and register functionality in our react app so if you want to learn all these things then you can follow the playlist and if you are only here for the forward password then also you can watch this video you will completely understand everything so without any delay let's get started one more thing this video might be long but you will definitely understand each and every step so let's get to the code this is my note JS code here I have imported Express Mongoose I have used express.json to send and receive data in Json format I have used course JS and Json web token this is my JWT secret and this is the combination of random alphabets numbers and symbols this is my URL and this code tells me whether I am connected to database or not for this you can watch my video on how to connect node to mongodb okay yeah I have imported the schema this is my schema which contains fname LM email and password and I will change the password okay now here this is my registered API this is my login API and this is my user data API so if you want a forgot password functionality you don't need any these three API like if you don't have written this then also it is okay what you need is JWT token that is Json web token you need this JWT secret you need to connect to your mongodb and you need a single data or multiple users data in mongodb these are the only requirement [Music] so if you skip all these things then also it is okay but make sure to import the user's data from mongodb like you can see I have imported my model here so if you don't understand these things then please watch the previous videos that's it for the introduction and now I think we are good to go so first let me make a API here that we are going to receive the email address from user we'll first get that now we are getting the email so the first thing is to check whether the user with the this email exists or not so first write it in try and catch block [Music] okay so this will check whether the user exists or not so if user does not exist I will just return [Music] okay so here we are getting the email from request.body and we are checking whether the user with that email exists or not okay now we will create the secret and this secret will be used to generate our token which will be sended to our user so let's create it it will be the combination of our JWT Secret and our user password [Music] your user data has been stored in this variable so I am accessing the user's password why I am writing this user old user. password I will explain you in the next step now we will just create a token and I will pass here email so why I am passing this email and ID bypassing this the jwp will create the token that will contain this email and ID and we can extract it now here I will pass our secret which has been generated here now at last I will pass the expiration of the email so I will give it five minutes so after five minutes the link will be invalid now let's create the link it is very easy to create the link okay so my link is ready this is the link which will be sent to the user's mail so what is happening here this is my localhost uh 5000 where my API is currently running so in future if you host your API to some server then you have to change this link only and this research reset password is the name of our API which we are going to create and this on this link we are also passing our data we are passing our token and we are passing our old user.id so this whole link will be sent to our users to mail now currently I am not sending it to the mail I will send it in the end of the video currently I will just console.log this link to see how it looks [Music] okay now let me also create this reset password API this will be of get okay we are sending user ID and token so let me extract it from request.paramps okay we are done here let's go to the react code this is the code of my reset.js here I have the form this is the email input I am setting it to the email variable and this is my submit button it goes to this function here I am calling the my forgot password API so let me call it [Music] and whatever data we are receiving we will just alert it so we will just alert okay data dot status let me change this also in the node file so I will just change this to Json [Music] yeah okay done okay now let me explain you the flow of our application so when user will enter the email and click on submit it will go to the forgot password API it will receive the email it will check whether the user exists or not if not then it will return this and this will not work and if user exists it will create the secret and with the help of secret it will create the token after the token it will create the link and this is the link that will be sended to our users mail through which they can reset the password so let's see here I will just enter any random mail [Music] click on submit you can see that the user does not exist so now let me enter this mail other Center g.com [Music] foreign and then I click on submit I had already started a server you can see that I am getting the link so let's copy this link and paste it in our browser okay it is showing error I think we are missing something um it is same I think yes okay okay we have to receive this ID and token in params so we can receive the params like this [Music] so this is the structure of our link like reset password it has ID and it has token now let's save this over here refresh it again okay leave this I will just create another link and you can see that in console I am getting idn token it is uh keep on loading because we haven't responded anything okay so let me just send response dot send okay now when I okay now when I go to this link and click on here you can see here that we are getting it done okay it is going very smooth till here so let me explain you that why we are receiving idn token here so when user will click on forgot password you will get this link and when user click on this link it will redirect it to the reset password uh so when user will click on this link it will redirect it to this API now here we are receiving its ID and token so first thing is we will verify that whether that ID in token is true or not so let's verify it foreign [Music] yes and if the user is not does not exist then it will return this [Music] now all we have to also copy our secret because we are going to verify it that whether this secret belongs to us or not so inside try and catch block we will just verify our secret we will be using the function of JWT verify and we will pass here our token which we are receiving from URL and we will pass your secret so it will match both these two now here we will receive error if it is verified then also we will receive this so let's see whether it is working or not [Music] we'll go here click on submit okay it is restarting this is the link I will just copy this [Music] paste it here and I am getting it done [Music] so again refresh this and you can see here that we are getting verified now if I change the token like this is the ID this is the token now suppose I have changed the two letters and when I click on here so you can see that not verified so if token does not match then it will give us not verify and if it matches then it will give us verify okay so now we have verified that user who clicked on the link is the same user who is in our mongodb collection so now we can surely show him the UI so here comes the tricky part that how can we connect the UI for react to node like how can we show the react UI to the node it is possible but it is like Advanced topic so we are not going to do that we are just going to create a UI in a node.js itself for that I am going to use the engine ejs engine which is like a template to create a HTML JavaScript in node so let me first install it go to here stop your server right NTM install BJs [Music] I had already installed it so you can easily install it now start your server now we have to set that engine so we can write here app.set this will you JS template JavaScript code in node now we have to come here we will hear first create a container folder name views inside it I will create that index.html sorry index Dot ejs it is HTML JavaScript template for node I will just import it and I will just create a form here so let me create it okay so we are done here we will just write here action is not method will be post yeah okay done so this is my password and this will be my confirm password now here come here if this token is verified like user is verified then we will show him this UI so we will just use less Dot render [Music] index [Music] and we will just [Music] pass image will be verify dot email are setting the inside this the jwp token now we are accessing that token here inside verify so we can access that email here and we can easily access this email in our template so we can I will just write here [Music] [Music] so in this way you can access the variable pass from API like I am passing here email so I can access it here so let's see whether it is working or not let me just send it again click on submit receive the link copy paste okay it is showing not verified that means I have made some mistake let's go here let's console that error whatever error we are getting just save this come here refresh this and go to your and what we are getting we are getting JWT expired okay no issue you can just generate it again foreign [Music] not verified and we are getting error no default engine was specified okay I have specified that okay it is spelling mistake you have to write your view engine now just hit save come back here refresh this you can see here that I am getting email and this password and confirm password field in a submit button let me give the placeholder here you can change the UI as per your requirement I will just zoom this refresh this again okay everything is working fine now let's go to the code now here we have to create a new API so we will just copy this paste it here and this API name will be same as this one but it will be the post I will explain you this in a few moment post okay it will be the of the same name here also we will verify it we will just comment this verified and not verified okay we will also here send the response as verified okay now let me explain you what is happening here when user click on this link it will be redirected to this API now here it will check whether the token and ID is proper or not and if it is proper then it will go to index.html otherwise it will give not verified so whenever this will be called and the user is verified it will go to index.html and user will insert his password and confirm password and he will click on submit it will be automatically get directed to here so now here also what we are doing we are doing we are first checking whether ID and token is same or not whether that a user exists or not whether that token is verify or not and if it is verified now here we will write the code to change the password so now let's clear this like we don't have to control this okay now we will just get that password and confirm password slash no we will just get password we I am not validating confirm password and confirm password is same you can validate it by your own so I will get it through request.body once again I'm saying you don't have to specify action here it will directly come to this API so we are getting inside a password okay so we are already getting password here but as you know we don't Store password directly we has them so let's hash the password for that I will be using decrypt guess I already imported it I will pass here password which is coming from my index.html okay so now my password is hashed save this and as you know that I am getting the user's data inside old user so I will access the user which is my model and I will just write the command of update 1 foreign will be this ID and what to update so we will give here response.json otherwise okay so let me explain you what we are doing here we have first encrypted our password then we have find the user to update one so we will find the user whose ID is same as this ID that we are receiving from our URL and then we are changing its password to encrypted password now let's see whether it is working or not so I will go to my sign in page here one two three four this is my previous password and I am clicking on submit and you can see login successful now let me reset the password [Music] so [Music] let me click on submit I have received this just copy this paste it here okay I've been verified here you can just uh authenticate this that password and confirm password should be same I am not doing this so I will write password one two three four five six seven eight I will just click on submit okay you can see that I am getting here error something went wrong so I think it is because [Music] whenever we will receive the data from dot ejs file that we have to add something here so we have to write it here app dot use okay so I think it should work now like when passing the data to react we have to use this express.json Json in the same way we have to use this also so let's see whether it is working or not I will click on submit go here let's save this okay I am writing here one two three four five six seven eight Nikon submit and I am getting password updated let's see whether it is working or not so let's enter the Gmail others at the rate g.com and I will enter the password one two three four and when I click on submit you can see nothing happens because it controls and in control we can get invalid password now I will be entering password at one two three four five six seven eight and when I click on submit you can see that we are getting login successful so we have done this now we can easily forgot the password and also we are receiving the data so in this way you can easily do the forgot password functionality in react.js using node and jwd okay let me explain you well last time and after this I will integrate it to the mail [Music] okay so when user will click on forgot password we will first check if user exist or not if not then the function will be over and if user exists then we will generate the secret and then the token will be generated with the help of that secret and that token will contain our email and our ID now we will generate the link this link will consist of our node.js server so this is 5000 and it will redirect you to reset password so now this API will come into the picture now here we are receiving ID and token just like same here from URL so we will first see that whether that ID exists or not if exist then we will proceed now we will verify the token that that the token is correct and if the token is correct then we will go to index.html otherwise the function will be over here now inside index.html we are creating password and confirm password after this when we will click on submit it will go to the same URL but with the method of post so we are here here also we are checking that idn token are true or not again so if all the things goes right then we will go to here here first we encrypt the password which we are receiving from request.body and after that we have just uploaded updated the password so it is quite easy to stress the password but our job is not done yet because you can see here that I am sending a response as password updated and here also but we are not receiving it in react like our UI is here so how can we redirect the user to our UI if the password has been successfully changed so for that what we will do we will just uncomment this so we will if password is updated then again user will go to index.html and now here we will pass status as verified and we will also pass here status as not verified okay so now come here here I will just create a script inside this I will write so I will get the status and we can get it like this so now whatever value we are receiving in status it will be stored in this variable status so here we will just write if condition okay so let me explain you what I have done here so when user is verified and changes password then we will come to this UI again and first it will check whether the if and for end it will check if the status is verified then we will tell user do you want to not continue do you want to login and if user click on yes it will go to our URL so let's see it live working now here I will enter my email we click on submit I will get the response copy this paste it here okay the user has been verified I will change the password to one two three four five six seven when I click on submit so we are still getting password updated and it is not running it is because we have to use here this thing yes change the change the quotes now hit save let's go here again submit it I hope it should work now go here paste it and now I will change my password to 7 and when I click on submit you can see that I am getting the do you want to login when I click on OK I just go to my website so in this way you can navigate your user from your node.js server to your react app so now let me show you that how can you send mail just come here search for node mailer W3 now you can see here you have to run this I had already installed this now just import this I think I had already imported this no okay just save this come here now just copy this whole thing come here [Music] come to the link part here paste that [Music] now here you have to enter your mail address to which you will send the mail you don't have to enter the password of our mail as you know that the less secured app has been removed from the Google the node mailer will not be able to authenticate you with this password so for that you have to enable the two-step verification for this and there is one more step through which you will get one unique password and you can paste that password I have explained this in one of my video which is on phpmailer so you can go and watch that don't watch the coding part watch directly from the two-factor authentication and how do I get the password so let me copy that password okay I have entered my password now here you have to make changes on from to subject and text inside text I will just pass my link so we can just pass it as like this and inside 2 we can pass this email but currently I had written some rubbish email that's why I am passing my email okay and you can see here inside text it is showing link and subject will be sending email using node.js okay the subject will be password let's save this you can see here that it is showing me that the email has been sent so I am getting this message let's check this let's check our mail yes I have received my mail in my phone actually there is Network issue okay yes I had received here also [Music] okay so you can see here that I have received the mail so when I click on this link you can see that I have been redirected to my URL and now I can easily change my password so when I click on submit you can see do you want to login okay so in this way you can easily change the password in react using node.js and mongodb and also using node mailer so that's it for this video and if you have any doubt then please let me know in comment if you found this video helpful then please like share and subscribe thank you

Channel: The Debug Arena

Views: 37,478

Keywords: Forgot password in react js, reset password in react, how to send forgot password link in react, hot to use nodemailer, how to reset password in node js, less secured app nodemailer, login and register in react, login authentication in react using node, forgot password, reset password, forgot password in react mern, reset password in mern, node, forgot password authentication, reset password auth, using jwt token, sending token with nodemailer, forgot password with token, js

Id: AClnCg_WCJk

Length: 29min 26sec (1766 seconds)

Published: Sat Aug 20 2022