Forgot Password Logic - Explained

hey what is up everyone welcome back to another video in today's video i'm just going to do a quick rundown in trying to explain how the password reset workflow happens so whenever you're on a website or on a mobile application and you click forgot password and you go through that entire process where it sends you an email you click on the link it takes you to a page you reset your password and everything is fine from there so i'm just going to try and explain how this workflow um happens and everything that happens behind the scenes so let's dive right into that this is going to be a theoretical part of this topic i will be creating a node api where i implement everything i've explained here after this video so let's get started okay so the main um entities you can say that takes part in this transaction is the client obviously when the client makes a request that he forgot his password then the node application the node api has a route that is hit to start this process and then saving a few things in the database so let's start down here so first off what is going to happen is we're going to start off with our um login form where you have to insert your email password and then you click on this i forgot my password link and once you've clicked on that link it would take you to this page over here where it would ask you please provide an email obviously this is not this is just for demonstration purposes but you'll explain to the person somewhere in like small text that please provide an email that you're using for this account and then we'll send you a reset password email then you would type in your email you want the password to be reset for and press send and when you press the send button it would make a request to your api endpoint and this api endpoint will be doing the following things so from this um form over here we send in the body this email that was typed in and we send this email to endpoint so this can be arbitrary you can have this your domain name i'm just using everything localhost to just explain the concept so here you will make a request to the http localhost 5000 slash api auth and then the forgot password route and whatever this logic in this route will do is explained down here so first off we will check that the email address exists in the database so this email that was sent to us from the user we first have to check does this user actually exist in our database if this user does not exist you immediately stop the process from here because you don't want a user that's not registered to receive email for reset password okay so once you've confirmed that this user exists in the database we go down to create a random string token so you would use in node.js we use a package called crypto and random bytes and then we just create a random string let's say of 20 characters and then the next thing we do is we hash this token we just created up here so we create like this public and primary public and private key effect so the public key is this token that is not hashed and then the hash token is the private key and this hash token we will save under that specific user so the user with this email that we found we will save that hash token under his collection and we'll name that say reset password token and then once we've done hashing the token we set a expiration date on this token so we say okay this token is only valid for 10 minutes then after that it's not valid anymore so you do your date calculations and then you save another entry under that same user that says token will expire in say 10 minutes or you set the date or time when it will expire then what we'll do is we generate a reset url link using that token so the one up here not the hashed one the the public one so we're gonna send this public one in this reset url link and this url link will look something like like down here we have http localhost 3000 so this will take us to the front into our this is in blue so you can see this is our client this will redirect us to our client page reset password and in our url we will add that token we created up there so once we created this reset url with the token we can send an email to our user and i'll show you how to do email sending as well and then you'll send this link up here to the user this user will then just click on this link and it would take him to him or her to this page of your application the reset password page then you have your new password and the confirm the new password type of effect you can validate this in your front end and once you click reset what is going to happen now is we will generate um the url that we send to our backend so what i mean by that is we got this token from this url over here so in the front end we have access to that url token then we'll pass that token into the backend route so we'll make if we press reset it would make a request to http localhost 5000 slash api slash auth and then the reset password route with that specific token so the the public token gets carried all the way from when it was first created to the front end and all the way back to the to the back end so it makes like this loop and once we hit this route we'll be sending in the body obviously the new password and what we'll do here is the following things we're going to pull the token from the url so we're going to get this token from the url on the back end and then we're going to hash that token so this one we got up here so the public token we're going to hash that again the same way you hashed it up here when we hash the token so here we're going to hash that token again and search for the hash token in the user collections so now we go back to our database and search for a user that has this exact same hashed token that we just created and if we find that user we must ensure that the expiration date that we set has not yet expired so if you set the token expiration date for let's say 10 minutes we should ensure that 10 minutes has not gone by and now the user all of a sudden is trying to reset his password with that link again so that token will basically expire and if this fails then we can't update and if both of these succeed so we ensure that the user with that hash exists in our database and then we compare the hashes and then we compare that the expiration date is not um invalid then finally we can update our password so now we can go back to the login page and and log in with our new password so i hope this explanation made sense so i'm going to go over it once again just much more quicker so we'll start off because i'm just going to start off with the colors so the client everything that's blue is the client side everything that's orange is the the api side and everything that's green is the database side so we'll start off with our application here we want to make log into our account and then it tells us invalid credentials and we're like oh damn i forgot my password so you click on forgot password it will then route you to this page where it would ask you for the email address you used in your account so you would enter that email address and then you would say send email and then it would go to the back end so this send email will make a request to a backend route in our api forgot password and here we will check that the email that was sent from the client is something that is matched in our database so we want to check basically if this user actually exists in our database and once we confirm that this user exists we create a random token string or a random string token and then we take this token that we created and we hash this token and we save that hash token inside of our database under this specific user then we'll create an expiration date for this token and save that under the user as well the next step is creating a reset url that we will email to our user and then the user will receive this with the email you can set up nicely with this url link and this url link can then be clicked and the user will be redirected to this page the reset password page for your application and in here you can check that the new passwords and the new password matches so you just check that the user is typing the correct password and once you press on the reset password it would make a new request to our backend for the reset password route and then in that route we get the token that was sent all the way from here so the token that was added to the reset url we send that exact same token to our backend in the route as well then we'll pull that token out of our url and hash it the same way we has it previously and then we'll search by this hashed token in our database for a user that contains this hashed password this has hashed token and once we found that user we will then ensure that the token has not yet exceeded its expiration date and then finally we're able to go back to our login screen as the client and then so over here we can actually finally update the password yeah that's actually correct finally update the password and then down here the user can go back to the login form and continue with its new with with their new password so i hope you found this video insightful and if you did please remember to like and i will be creating this in a node.js application um in the next video so stay tuned for that and yeah thank you i'll see you in the next one cheers

Channel: The Full Stack Junkie

Views: 9,660

Keywords: forgot password nodejs, reset password nodejs, reset password logic, password reset logic, password reset nodejs, nodejs concepts explained, web development concepts explained, the full stack junkie, development concepts explained, nodejs

Id: 5TObZmJbwHE

Length: 11min 44sec (704 seconds)

Published: Tue Jan 05 2021