Forgot and Reset Password with React + Node JS

let me tell you about one of the most um annoying and frustrating incidents being a first-time developer in the Work World um and one of the incidents that really helped me or shaped me or model me into the developer that I am today I was well into my first year as a graduate developer straight from University and one of my first tasks was to develop an application that was to be used by about 100 people and all these people are my colleagues I work with them in the same institution everybody needed to have a password in order to use this application because this was a financial institution and hence their sensitive information involved in order to protect sensitive information one of the ways is to use a password so everybody needed to have a password so I'm done with this application and I'm now dealing with maintenance and I'm doing a few tweaks here and there and all of a sudden the phone rings somebody one of my colleagues says I forgot my password now luckily I had a manual way of resetting a user's password I had a process that I would use in order to set a user's password so that means nobody would send set the password on their own unless I set I reset the password for them so I had this manual process of resetting the password now the second call comes in and then another person says I forgot my password the third call comes in the fourth call comes in the fifth call comes in and this is over a period of time I keep getting multiple calls of people uh forgetting their passwords over and over again and I started to just really get annoyed because instead of dealing with maintenance issues and instead of adding some features that I was tasked with I'm now dealing with the same problem over and over and over again that's when you know you've hit rock bottom as a developer when you have a task that you have to keep repeating over and over again and this is one of the experiences that as a developer taught me how to make a system autonomous and what I mean by that is that the system needs to be able to sustain itself so it needs whatever happens on the system the user should find a way to get themselves out of like a situation or they they have to have a way of solving problems using the system instead of having to consult a developer all the time so this is this was the first time where I really learned about the password recovery feature and I learned the reason why it was important for many of the websites that I know to have this password recovery feature on their website because can you just imagine a billion people in this world just calling Google and saying I forgot my password that seems very very tedious so I learned about password recovery through this process and in today's tutorial I am going to show you how to perform the easiest password recovery that is possible as a beginner if you're interested in that or if you're interested in learning how to code and improving your coding skills let me encourage you to subscribe to my channel my channel is coding101 and this is the place whereby I put up videos that try to help you become a better developer one video at a time if that's something that piques your interest then please do subscribe to my channel like this video if you've learned something new or if you just like me just like the video and if you have any comments just leave them in the comments section as well I've been receiving a lot of comments and I've been replying to many comments so I'm really happy to see that many of you are interacting with the videos that really encourages me to keep making more and more and more video so essentially that's it for today's tutorial we're going to be making password recovery using react and node.js we're going to use node.js as backend so in the node.js aspect of this we're just going to be sending the password recovery email so yeah let me just like sort of like explain to you how this is actually going to work so it's a four-step process nothing too complicated so the first step that we have is the user actually signaling that they have actually forgot their password so that is our step right here this is where the user signals to us that they've in essence forgotten their password and after they've done doing that then an email or a password recovery email is sent to the user now this password contains OTP which is a four digit code that is going to be needed in order to verify the user's identity in essence and after that the user takes the OTP and then they enter the OTP in the website that we're going to create and this will in essence be verifying the user's identity and after we verify the user's identity by means of OTP we give the user an opportunity to be able to reset their password and ultimately we're going to lead them to the home screen showing them that they have successfully reset their password so it's a four-step process nothing too complicated nothing too rigorous let's get into our code I have two files that I've created in here I have the client file and I have the client uh I mean I have the client folder and I have the server folder so this is a full stack application that is going to be needing communication between both the client and both the server and be reminded that we're only using the server in order to send that OTP or password recovery email so let's start with the server you know how to create the server if you don't know how to create a node.js um project then I have a video I will put the link on the description box so that you can learn a little bit about that so just create a simple node.js application and that's where we're going to be putting our email or our password recovery email sending functionality so this is our server file this is where we're running our server um we've done this email sending functionality uh multiple times in my previous videos but I will leave um one such video in my cards so this is our email sending functionality note that we are using node Mailer in order to actually send this email and in order to attach an HTML file because we want it to be a very professional looking email this is our HTML file note that I've used I've put the HTML code inside of like these back ticks because what I want to do is to be able to dynamically because what I want to do is to be able to dynamically input that OTP that you see over here so the OTP is going to be coming from the front end so the front end is going to be responsible for constructing that OTP so you yeah this is where our email sending functionality I'm going to put this code in the description box if I don't just hit me up on my uh comment on the comment section and over here no this is just a testing functionality I was just testing if that route is running so essentially all in all on our server side we just created a email sending functionality that is able and we've attached that to our router that you see over here so this is a post route that we're going to be using and our post write is a post route rather is going to be receiving two items or two data points the first thing that is going to need from the front-end side is the OTP which is the four digit code that I have alluded to and the other thing that it's going to need is the user's email because we're going to need the user's email in order to send this OTP so that they can be able to recover their password so this is just about it on our server side if this is a bit confusing for you then I appreciate any questions in my comments section now let's go to the front end aspect of our project I've created a folder over here called components and inside of components I have three components I have three components that I'm actually using first the first stage is the login phase so the login screen you've probably seen when we are starting up this video but let me just like show it to you again so this is our login screen so this is the first thing that the user is going to be able to see and in order for them to recover the password they would need to come over here and click this forgot password link which is going to lead them to our second screen which is the OTP input component let me show you how that one looks like and so this is our email verification component so you can see this uh four uh input elements that you see over here this is where you're going to put your OTP and then after you've put in your OTP you're going to click verify account and it's going to take you to a password resetting screen and this right over here will be our password resetting screen I'm going to show you how everything works in a moment then after that it's just going to say welcome home or you've successfully reset your password as simple as that so let's see this in action before we execute it come over here and I need to put in my email after I put in my email I click forgot password and then after that I'm going to get the screen over here which is going to say we've sent a code to your email email23 gmail.com and then I'm going to be asked to put in that four digit code and if I don't put it properly obviously it's going to tell me that it's not the correct code and luckily because I know the correct code I'm gonna put it in there so that uh yeah previous three two four four so this is just a random code that has been generated and then if the code is correct we're going to be led to this password changing functionality we reset our password reset and there you have it our password is successfully set welcome home all right okay so now now that we've gotten the nitty-gritties out of the way let's find out how we're actually going to create our code so we're going to be starting off with the so pretty much blank application except for the components that we created so I do want to remind you that these are UI these components were created with Tailwind CSS so you need to be really good with Tailwind CSS either tutorial a small tutorial on Tailwind CSS can leave the card up and leave the video up on the card so make sure that you install Tailwind CSS in order to make this application so the first thing that we're of course we're going to start with let me just get rid of these because yeah cool we're going to create a use context and use context is going to make sure that we are able to aggregate our state data at one place or at one setting so we're going to create context which is already part of our javascript's um I mean which is already part of reacts in our language like that so we're gonna have to make sure that we also import these things from react that that should be fine get rid of this extra statement it's not necessary okay so now we need a couple of States as you can see we've imported a state over there at the very top we need at least three states three main states that we're going to need in order to run this application so the first state that we're going to need is the page State because it's going to allow us to navigate between those four components between the login page the OTP input the recovered page and the reset page so this is going to just allow us to navigate between all these components and then we need the email page I mean the email State sorry that is going to capture the user's email which we're going to ultimately use in order to send the OTP code and then we're going to need the the state tool which is going to capture the OTP code so these are the three important states that we're going to need so let's start off with how we're going to use the first state the first state which is the page state is going to allow us to navigate between those two components so essentially we're going to have to create a function that is going to allow us to navigate between all those components you can see that when the page name is called login then you need to give us the login component and then the other ones we're going to use them at a later stage so now what we're going to do we're going to create a context provider so that means this component is going to this parent component is going to pass on these states to its child components that is essentially the reason for having used context or for using use context in order to capture that state data and pass it downwards into your components so I'm just going to wrap everything that is inside of there with a provider and I'm going to give the provider these values that you see over here page set page because remember we're going to use these values inside of the other components then inside of that I want to put in that navigation function which is going to allow us so instead of having to directly put in that login component I'm going to just put in that navigate components function or component which is going to allow us to just like navigate between all those components we don't want to do anything too complicated but you could use react router Dom to actually do this instead of having to but I think it's I find it a bit efficient to work with it this way because it's much more simpler you don't have to navigate to a totally different page so we're done with our app.js now we're going to move on to the login page so the responsibility of the login page is actually to receive the email that is being sent or the email or the user email sorry yeah yeah the responsibility is to actually receive the user email from the customer from the user of the website but before we do anything we need to make sure we need to get a couple of those states that we've gotten from the context we need to get those and we need to make sure that we import the recovery context at the top of our page and then after that we need to now use this over here set email inside of our input tag so we want every time the user inputs the email we want to update the email state in this this part over here that's the reason why we use use context is to enable us to actually manipulate the state on a different component so as you can see we've implemented in on change event so every time the user types in the email that email is going to be stored inside of this state and so now we have a button that is going to allow us to actually send that OTP email and so that button is at the very bottom this is the button over here it's called forgot password so every time we expect that every time the user clicks forgot password we need to actually handle the event that on click event and we need to tie it to a function that we're going to call navigate to OTP like that so now we need to actually create this function foreign right so there is our function before I explain to you what is happening here let's just get rid of this because I don't think we're going to be needing the use State function over here they use State hook sorry navigate to OTP function it does um uh a couple of things the first thing that it does is that it creates that random OTP code using math.random so and then it takes that OTP and it sets it to the OTP state that we extracted from app.js you remember so this OTP is going to be in here it's going to be saved in here by means of use context then after we've uh created um that OTP code we're going to use axios in order to run that post router that we created on the back end so this is our post router and inside of the body of our post router is the OTP and it is the recipient's email so yeah and then after that after we're done doing everything after we're done uh executing that router we just like move on to the next page which is the OTP page which is going to allow us to input um the the OTP foreign stage now we can go to the OTP input stage so the OTP input stage the first thing that you notice over here is that we need to tell the user that we sent uh an email and we need to be specific where we actually sent this email so that is why we're probably going to dynamically render that information over here but where are we going to actually get this email lucky for us because of use context we can extract this email right from the appj.js and actually input it in here so that's one of the first things that we're going to do and so you will notice that we're not just getting the email we're getting the OTP and the set page um Setter as well so we are not only getting that because we're going to use that so in in our component so yeah there's our email over there I think that is fine so another thing that we need to learn what how to do in password recovery is that we need to give the user the opportunity to be able to resend an email because like what if maybe something happened and maybe they didn't enter the email correctly or maybe the email didn't arrive or something but we need to give the user an up the opportunity to be able to resend the email so that is why if you go down to the bottom of our email verification component you can see that the user is allowed to actually resend that email but only after 60 seconds because we don't want them to continuously mess around with the the recent functionality so they need to know to use that recent functionality wisely right so that is what we're going to try to implement on the OTP component so we need a couple of states in order to actually run this we need a timeout or a time count State let's go to the OTP component we need a timer like that so I'm going to call it time count and I'm actually going to create a function which is going to be called recent OTP so there's a function so all it does is to make sure that the OTP sends is recent right so we need another state that we're going to call disable because you will notice that if we go to our text this text over here is blue but a minute ago it was gray that means it was disabled so we are controlling that that flip flop through a state called disabled so whenever the state is the disabled um or when disabled is equals to true then we don't need to do anything then we need to make that uh that entire anchor tag to be to not do anything essentially but if it is um the disabled button or the disabled state is turned off then we are able to actually send or resend our email using the same method that we set before and then after we're done doing that we set disabled back to True again so that we can gray out that anchor tag again and then after that we're able to tell the user that Hey listen we've just recent that OTP again and then after that we start the timer again at 60 Seconds so that is our recent OTP functionality and in order for that to work continuously we need to put it inside of a react hook called use effect so it needs to be inside of a use effect in order for it to work appropriately so what the use effect essentially does it counts down it counts down all the time so after 60 seconds has elapsed it or before 60 seconds has elapsed it it counts down so we put our counter inside of here so every single you can see that over here we have set an interval of like one second so it's going to be counting down from like 60 seconds and it's going to make sure that every time we reach 0 or every time we reach 0 yeah every time we reach zero seconds and what's going to happen is that that set disabled is going to be set to false thereby enabling the user to actually use that password resending password recovery resending anchor Tech so yeah that's essentially it um I'm probably gonna do a tutorial on use effect so don't worry if you're having trouble understanding that or you could also do a couple of research on your own but I'm pretty much interested if there's any of you interested in me doing a use effect tutorial let me know in the comment section and I would happily do so right so we're done with that I think oh we're not actually done because presentation matters so you can see that the colors were changing a little bit and the wording was changing a little bit so we need to make sure that if our our anchor tag is disabled it looks a certain way and if it's not disabled then also it looks a certain way as well so we're going to just say if disable is equals to true or if the anchor tag has been disabled Let It Be gray if the anger tag has been disabled make sure that there's no pointer hovering and make sure you underline everything and then after that you also change the wording as well and this is where we put our time count so that every time it counts how many seconds are currently left until the user can be able to use that password recovery email resending functionality well such a heavy word so yeah I think that's essentially about it but except we haven't done one more thing which is the main functionality for this entire component is to be able to verify the OTP that you're getting from the user right so before we verify we need to actually capture that OTP so I am going to create a state which is going to be an array containing four digits so the way that our input tags are structured let me just show you the way that our input tags are structured these are four individual input texts so essentially that means we're going to have to go around extracting the value of these four input text so that means we're going to have about four there's usually there's an npm package that does this more easily easily so you can look for that or if I find it I'm going to just leave the link for that in the call in the description box so we're just going to do an on change for each of those individual components and this is how we're going to do it so I'll say for the first one over here for our first input tag we're going to take the value and put it on LA on the first on the first um element yeah we're going to replace the element the first element with the value that we get from the first input tag and we're going to do the same with the others so say for example the second input tag we're going to take the value from the second input tag by means of an on change event I'm going to replace that value we're going to replace the second element in the array with that value so we're going to do the same with the rest of the other so I'm not going to get into too much detail with those ones so now that we're done uh capturing our our OTP information then what we need to do is we need to verify our OTP so that that's going to need a function so we're going to use this verify OTP function in order to verify our OTP so you can see that it tells us okay I'm going to get rid of this console log because I was just using it to debug so you can see that what it does is that because this is an array because we've structured this as an array what it does is that it joins that array and so that it forms just one string then it just like takes that string and converts it into a number and checks whether that number is the same as the OTP and if it is the same then we move on to the next page if it's not the same then we just tell the user that hey the OTP that you've entered is not correct so we need to actually tie this verify OTP functionality to our verify button so there's verify account I'm just going to put it in there oh sorry I need an unclick event to make that happen so and then I think that should be it our password reset uh we're not going to be focused too much on password reset I know because that one is going to need us to actually involve a database so we're not going to focus too much on that but if you want I do have a um log in uh yeah I have a login authentication video that you can check out to learn how to interact with databases in order to set or reset your password so in this component what we just want to do is it's just a means turn and whether somebody inputs their password or not it really it's not that much of a concern to us we just want to move to the next stage so I'm just gonna say I'm just going to call that function over there called change password the change password function is just going to allow us to move on to the next page there it is so I think that's about it because the recovery the recovery or recovered um component doesn't really need any much of JavaScript or so so I think that is about it also what we need to do now is to actually test what we've created so I put my actual email in here and then click forgot password and there we go email verification we've sent a code to your email so now I need to check my email to see if whether or not have received that email so there is the email you as you can see click on the email there is our OTP 6973 we can take our OTP we can you can copy it or you can just like memorize it six wait what was that 6973 69 73 and we verify account so you can see in a minute or in a second it's going to turn blue yeah there you go I think my phone is even responding to the OTP email I don't know what that is we verify okay so there seem to be a problem it's saying reset is not defined so that has to do with the the components that we have over here so we need to make sure that they're all imported at the top so we need to import them over here at the very top so our four components have been successfully imported at the very top let's try it again get rid of the console there's a new OTP code 5658 five six five eight verify account fingers crossed there we go there's our change password you can choose to put whatever you want to put in here and then we press reset password and there you go password has been successfully set welcome home so essentially that is how you recover your password if you create an application it's a must you need to give users the opportunity to be able to solve their own problems that is the art of being a developer you need to give power to the users so that you don't have to constantly be doing things over and over again that is the lesson from today's tutorial I hope you've learned something and if you've learned something then please do like my video If you haven't subscribed please do subscribe to my channel if you are struggling with something or you would like to make a comment leave your comments in the comment section other than that thank you so much for watching I will see you next time on coding 101. foreign

Channel: Koding 101

Views: 27,724

Keywords:

Id: A8k4A7TuhDY

Length: 28min 13sec (1693 seconds)

Published: Wed Jan 18 2023