Mastering Authentication: React, Node, MongoDB | Login, Signup, Forgot Password, Protected Routes

hello everyone if you would like to learn the authentication it means register login rece and forgot password and also hash the password and GWT Json wh toen implementation all these things okay also protected routes so to implement all these things in one video so this video is for you okay it will help you I have explained it step by step okay first of all we will move to register a user then login after that reset and forgot password after that protect routes and GWT token implementation and log out functionality okay we will Implement all these functionalities step by step so let's first of all check the demo of this video so first of all uh let's register a user okay for example cim email clim gmail.com and password let's press the sign up button see we directly came to the login okay and now in the login system we are able to log to the system and here we have the forgot password if you would like to move back to the sign up so by pressing this button sign up by pressing the down from the sign up login back to the login system let's first of all before logging to the system uh for example let's uh implement the login okay let's log to the system I will insert my email then the password it corrector password let's Lin see we directly came to the Lin system okay but if you would like to log out let's press the log out we are we will let's move to the dashboard okay we came to the dashboard let's press the log out we directly came back move back to the login page okay now let's implement the forgot password functionality okay let's press forgot password so we came here let's insert our email let's press now send button what happened okay let's press the send button so after pressing the send button let's wait see email sent to your uh check your email for receip password link okay so now let's move to our Gmail account let's move to that we will see we will um yeah we received a new email see this is the new email that we received Now by pressing this link we will be able to move to the reset password see we came directly to the reset password page now let's reset our password before we used eight character now let's I will insert five character password let's press reset button so we came directly back to the Lin let's Lin back okay five character okay let's Press login button see we directly came here okay if you press the log out button we log out for the system if you would like to access the dashboard we are not able to access the dashboard back to the home because we are not authorized we log out from the system so we will Implement all these topics step by step okay so um this video will be very helpful for you okay to learn all these Concepts and these things so let's get started before starting don't forget to subscribe our YouTube channel let's start so for this project I have opened an empty folder inside vs code Visual Studio code so now first of all we will uh create two Ops one for reactjs the second one is our node app server side app okay and also we will install all those necessary packages and libraries that we would use in this project so let's get started okay first of all let's move to the terminal so to open the terminal we can move from the uh open the terminal from menu or control backt okay so after opening the terminal now let's create our react app okay so to create react app we will use wijs for that okay uh npm create WID after that press enter so it will initialize our react project now let's assign a name to our project so that is like let's assign a client name and here now select the framework that we will select react we are using react in JavaScript so after that it says CD it means change your directory to client then npm install then run your project so now let's change directory directory to client after that we will n name install so it will install all those necessary packages in libraries for react app so let's wait for it until it install the packages the installation has completed now let's install two other packages npm install uh react router D which is used react router D for routing okay for navigation from one page to another page okay to create a single page application we will use act aoon for routing the second one is accs which is is HTTP request and response library that we will use okay now let's press enter so we will install these two packages also then we will run our react app so that is installed now let's write npm run du so it will run our react app our react server okay so now let's move to this URL okay press control then press the mouse button uh left side button so it will run the project now open the Chrome browser so this is our react default app that we have okay this is the default react yes app so we have completed the installation and the configuration of our react app now we would like to create our uh server side project so for that um let's open a new terminal uh in a new terminal I will write uh first of all I will create a new folder okay so to create a new folder let's write name it for example server okay after let's move now to the server CD uh change directory to server and here write npm init it means initialize hpon Y and press enter so it will create a package.json file inside our our server see that has created now we will install Okay the let's install the packages inm install first of all Express Express which is used which is the nodejs framework okay we will use to write code through this and the second one is mongos we will use it for connecting with the database okay um omm okay this is and after that we will use nodon nodon is used that whenever we rep it means that whenever we change something in our server side up so it will automatically refresh our server s up and bcrypt BP is used for to to Hash the password Json whb token it is used for to generate a token Json web token and cars which is cross origin request and response okay whenever we would like to access our server side from front end so we are using cars and EnV which is used to create EnV file okay later we will create that also and um one another one which was the cookie parser cookie parser for handling the cookies let's press enter now we will install all these packages let's wait for it the installation has completed now we will write we will create a a file inside This Server okay let's create a new file name it for example index.js in this index.js this is our start point of our server side up okay we will write our code we will start from this index TCH is file and now let's configure the nodm okay package so let's close it back tick come here to the bcrypt okay in under in the package dig under the script here we will write start okay nmon index.js what it will do whenever we make some changes inside our server app so it will automatically refresh our app this is the job of nman package now let's use by default we cannot use the import statement okay we never we would like to import a package the import is not working by default okay for that we need to write something here uh uh that is type module okay if you don't write this type module so what you should do then you should use require okay whenever you are importing something you should use require uh method for that okay to import something but the like this okay I will show to you come here to the index for example you would like to import the express let's write import Express from Express by default this statement doesn't work in node app okay if you don't write this type module you should write instead of this like this const Express is equal to require Express you should write like this okay like the second statement by default you should use this code but if you would like to use this one the first one import statement then you should add this type module let's create now EnV file as we mentioned and we install EnV before in This Server app now we will create EnV if you don't know about the en EnV so you can watch my video you have the link in the description for what is it and why we use it okay in this uh will write all our SEC secret things like uh URL and keys and um whatever you want okay so I have explained in that video okay you you will write all those things here for example putot number I will now I will use for is equal to for example 3,000 let's write now 3,000 okay I will write the port number now in this EnV file okay now come here to the index we will run our server app so for that let's create an app con app is equal to express I will call the Express method now let's write up. lesson we will call lesson method and first of all we will call the pass the port number we should write the port number in this lesson method so we already uh written the port number inside thatv so how to import this now so for that we need we have installed EnV okay so let's first of all import thatv from EnV so after importing it now let's write env. configure call that okay EnV do configure method config method so after calling that method now we can use that F okay okay we can import that Port so how to do that process do en EnV env. Port comma we will write a call back function and in this we will write uh console okay console let's write this message console.log server is running now let's check it okay let's run our server set up let's move to the terminal and here we are in the server directory and here we write npm start start okay so it will start our server side up see Server is running so it was all about the configuration of our react and server side up that we did okay now we will move to start our design first of all first of all we will create a sign up Forum then we will pass data to the server side up and then we will register that inside the mongodb database let's first of all configure the mongodb database also okay for the MB database what we should do for that uh you have two methods okay to use the mongod one is the online method the second one is the offline okay to use in local locally so for the online also I have a video and for the local also and I will show you how to do install it locally we will just install mongod compass mongodb compass okay whenever you install this this is a GUI tool for database okay so then simply press the connect it will be connected with the uh mongod okay you can use this string to connect connect with this database it is very simple to use locally okay for the online also I have a video you have Link in the description for that okay mongodb Atlas to use that so now let's move to our client side okay in the client side first of all we will configure and let's remove the default code first of all okay let's remove the default code uh I would like to remove all these things this stop okay also this one and this one I will remove all this code save it and come here to the up. Cs control s remove the code index is remove all code okay so now we will start our coding okay first of all I will configure now uh the react Ram okay I will uh write the code for that to configure react aam how to use that later then after that I will create the sign up Forum uh page so let's start now first of all we should import it okay react out so to import it import browser router we need three things to import browser router uh the second one is routes the third one is Route is equal to uh sorry from from react router D after importing them now let's use them okay in this fragment I will write browser router and here I will write routes inside routes now I will Define route and the route has two parameters the first one is path is equal to the path is for example P the sign up page we will move SL sign up or register whatever you like and the second one is the element is equal to in the element we will import our uh component so let's first of all create sign up component I will create a folder components inside components I will write uh sign up jsx and here I will write RCA react Arrow function export component this is the shortcut okay to to use to automatically create this function how we can do this okay for that we need to install a package okay this package just come here I will show to you this one see as7 react redu react natives okay install this package extension whenever you install this so you will be able to use that shortcut now just import the S of inside this react sign up that has imported let's save it now let's move it okay let's move to our browser where we have run our uh react app now here I will write sign up see we came directly to the sign up component page now let's try design it okay to create a sign up page sign up Forum come here to the sign up control B to close the left side bar let's write our code here I will add a class name which is sign up container and down from that we will have a forum uh but before that we will have h2 tag which is for sign sign up and down we will have a forum let's remove the action from this and here we will add a class name sign up form inside this we will have label this is for username here we will write username and it's how an input field input field is text and yeah that is okay I will just add input and down here we will have label which is per email let's write email and down here we will have an input field for email uh let's write R2 complete off and down for let's add a placeholder also okay placeholder email and open up I will write in this one placeholder um that is the username username come here down and here control z label and this one is for password password input field and this is password placeholder let's write St St okay and down here we will have a button this is part sign up and type type is equal to with submit so this is our form that we has created now let's check it okay let's move to the browser so this is our uh Forum okay now I will add the CSS code okay to design it to looks better so let's create a CSS file so where we should write the code let's write all code of the CSS inside op that CSS okay we don't need to write other files so here I will write the CSS code then I will import this op. CSS inside sign up so let's first of all import it okay import to import the CSS first of all we should move from the sign up component to this directory okay to the SRC directory okay after moving from this directory from components now we will use up. CSS so after importing it now I will write code inside this app CSS so I have added this CSS code okay let's check it this is simple sign up container for forum for label for input for button okay this is the CSS code simple CSS code okay now let's check it okay yeah it looks like this but it should be up so let's configure it let's just bring it down okay alt down AR key save it let's check it now see it looks like better now so this is our sign up Forum now when we write something in these input fields we should store that somewhere okay so to store that for that just come here we will create three uh State variables const first of all username we can create an object also but I will create three state variables okay username sit user is equal to use State we will use use State hook for this okay use State hook this is a hook that we will use uh this is the variable that we will use and this username this is a method which is used for updating this username now let's create to others the first one is for email and this one is sit email and this is part password and set password we can add here the default values like empty string okay this is the default values for this save it so now let's uh whenever we write something in these onput builds we should store that in these State variable so to store that for that let's come here to the input fields and down here I will just write onchange I will add unchange even to this input field okay unchange event whenever I write or change something in this okay so what it will do it will call that let's write create an arrow function and here let's write uh we will call now sit uh username this method now we will pass e. target. value what it will do whenever we write something uh in that okay so it will call that sit username method and it will write whatever we are writing in the input field it will write inside that username we will do same thing for other three Fields also okay contrl C8 control V instead of sit sit username now I will call uh sit email let's come here to do it for the password also sit password see so let's format our document okay it don't looks like very well so to format our document we can right click and here you see format document or you have the shortcut key see the document has formatted it looks like this now let's save it now it will store values inside the your username so now whenever we press this submit button we should pass this data to our server side up and store it inside the database so let's do it perform this okay so let's come here to The Forum and here I will add on submit event it means that when we press the submit button we will call handle submit function after calling it now let's just come here we will create that function handle submit is equal to this is an arrow function and here we will get an event also with that function calling that function now first of all we will call e. free default it means it will prevent the default submission if you don't write you will face with errors and now here we will use now AXS okay that we have installed at the start HTTP request response library to go call our server side up axus first of all so let's import it first of all import axus from Aus now just use it okay access. post we will use post method to pass the data here we will write the URL we should write our server side of URL okay so to write that we will write HTTP SL Local Host then colum then our port number what was our port number that we have that we wrote inside andv okay this is our port number let's show you 3,000 okay this is our port number 3,000 and after that we will uh call the route uh sign uh / signup we will call this route and we will pass our data in in object okay username email then password control B alt shift shift F to format the document access. post okay uh do then okay after that we will get a response okay response so let's console.log our response we will just print our response. cage if there was an error so console.log error print that error to us on the console now let's move to our server side up okay we have passed data to our server side up now let's write that route okay. sign up come here to the server side up to the index okay just come here to the index so in the server site first of all we will create a model for for a user or for the employee okay so let's do it for uh come here to the server uh folder and here in the Server create a new folder and name it models and inside model we will create a file um in the name of for example user.js and here first of all let's import Express import mongos from mongos and after that now let's create the schema const for example user schema is equal to new mongos do schema and inside it now we'll we will Define all the fields okay first field is usern name uh the username field is type is equal to with string and unique required true unique true and the second one is email for the email type is equal to with string and required true unique true and the third one is password type string required true you can add more validation to these fields uh if you would like to add more validation so for that I have a separate video which is we will use express validator for that so right now we did all this bus but okay like required and unique you can add the validation and password and email others also now let's create a model from this this okay so let's create that account user model is equal to mongos model and here first of all we will write a name which is the user and after that um the schema okay let's write user schema now let's export it okay export user model as user so this is our model that we has created okay now we will move to write the route for it okay just uh come here uh we will create a new folder okay and this new folder is for routes and in this route the first route would be like let's name it like user okay user.js and this now we will Define all the routes for the user first of all UT Express from Express and after that import bcrypt our password uh hashing from bcrypt and right now these two okay now let's write a route let's const create const router is equal to with Express router so we will create a router Router now we will use this router router. poost okay and our route was um sign up let's check it in the front end let's move to sign up so this is our app okay sign up a is that a we will use in the index sech is okay whenever we are calling the uh route of sign up so we will use this sign up now in this user okay sign up and after that we will get request and response now to distract data from Front End okay that is inside the data request. body so we will write const uh username uh email and password is equal to with request. body okay so after extracting it now we will insert it inside the database so first of all we need to create connection with the database we will use mongodb comp passs let's open it okay let's connect with this URL so now let's copy the connection string okay copy connection string just come here and to create connection we can create that in a separate file but I will create it inside the index.js mongos do connect we will use connect method and here we will add URI okay control V we we will paste that you in slash we will add here the database name okay let's add it authentication so let's check it that we have authentication database no authentication is not available so we will create name it authentication so it will create authentication database for us uh this Local Host uh doesn't work okay instead of this WR one 127 uh own database okay uh 0.0.1 okay it also refer to Local Host so after that writing this it will create a connection and um after that now let's use this route okay this user route so to use that um this user route right yet we didn't register as a record but we will use that okay let's first of all import that import um let's write it uh is the name of this uh we didn't export it it export um router okay as user router now let's import it user router from SL router routes and user now we will use this user router so we will use it like this okay up. use slash comma user router and also let's use up. use express. Json this medal where just convert the data that we pass from front end to the Json format come here now we will register our um uh user okay to so to register it first of all we will import the user model let's import it a user from slash models slash user JS so after importing the user now we will use user okay user. find based on uh for example email okay if this email was already registered so then we will print let's write here cost a user is equal to user. find Bas an email if user if the user was existed so then the return response. Json uh message user already existed else if the user was not existed so what we should do then we will just uh insert the recard inser the database so to insert the recard for the we will use const uh first of all we will convert to the password okay to Hash the password okay for we will hash the password con uh also let's create this function as synchronous I syn um hash password is equal to a bcrypt DOT hash and we will pass our password and after that salt salt is a unique character okay a number uh which generate a unique character attach unique character with that okay so let's add a unique character would be like 10 okay this is we will add this SST in so after generating the hash password now let's create a new user const new uh cons new user is equal to new user and we will now pass our Fields like email password is equal to with hash password and password so now let's save it okay new user a wait new user. s and return um response. Json message record um registered so we did it I think there is no error so let's check it okay first of all username yeah here we should write uh instead of this this username then email and this is password hash password so that is okay you new user. save new user yeah let's check it okay if there was an error we will Sol it okay also how to do it to solve the errors let's move to the uh browser and also let's move to the console if there was an error we will see that inside the in the console let's write the username and password five let's press the sign up button what happened let's check it okay uh we faced with an error okay so now we will solve this error what is the error uh config we will just solve this error let's check it in the terminal inside the server okay server app let's check it where is the error we already faced with an error let's move here it says that import routes. user.js did you main import so you where we have imported user.js okay routes okay just here to the index routes user.js okay let's add. JS save it yeah the error has solved now let's check it okay let's press the sign up button again we faced with an error out SL sign up from origin it is a card's error okay card is block okay so to enable it we will use car also so let's come here to the index rjs and here we will use uh let's import first of all that the cars import cars from Cars okay after importing it now let's use it okay this is from and just come here up. use cars let's save it now now let's check it okay press the sign up button see we got the result it means that we successfully us user already existed it means the previously when we press the sign up button the user has registered let's check it okay if there was any error let's move to the mongodb compass and here we will refresh our database see authentication database has came here and now let's check the users in the users we don't have any recard okay uh there is no record inside users let's check it okay let's check it where is the error let's move to the console there is no error come here to the uh where is the route this is Route okay sign up and request user. find based on email if user user already existed so let's add just await keyword here okay let's save it now let's check it now here press the sign up button so now let's check it okay uh let's come here to the mongodb database refresh it and refresh this one no recards again let's check it again okay where is the error I will just solve the error let's use find one method okay not find find one save it now let's check it and try it press the sign up button record registered see record registered okay it means that has registered right now let's check it now the mongod be Compass let's refresh it see we got the uh This Record okay this is the first record that we has entered so this was the user registration also we have hashed the password okay this is the hashed password you see so it was all about how to register a record so now let's implement the login functionality okay when we register successfully we should move directly to the login page so for that let's come here uh one thing is that I should add a button here for login okay whenever I press that button I should move to the login and also whenever I register a record we should I should move to the um login so let's implement this functionality okay just come here and to the front end to the sign up here I will create an instance of Navigator let's import first of all use navigate hook yeah use navigate Hook from react ROM let's create an instance of that const navigate is equal to use navigate hook so now whenever we register successfully so we will move directly to the lagin page console uh navigate slash login we will move directly to the login page right now we don't have the login comp uh route but later we will implement it okay let's come here back to the L okay but one thing is that whenever we return a response here here okay the response is here I will return registered it means our status true I will return this also with the message okay whenever I register record successfully status true now in the sign up here I will Implement a logic app response. dat. status status if it was okay so then I will move directly to the login page else I will be in the same page and now let's create the login component okay uh one thing else that I should add here a Lin button the down okay down here I let's create um already or we can say how an account if you have an account so then uh please log in okay here I will use Link let's import it link from react ROM this is link okay the link has imported from react ROM see this link okay now we will use Link let's add here to is equal to SL login log in let's save it now let's check it okay it looks like this okay uh how an account log in but it should be in the same page the same line paste it here so whenever we P Lin we should be able to move to the Lin or whenever we create a an account we should move directly to the login let's first of all create the login component login. jsx R afce and let's check it now okay just come here login CV directly oh we didn't import that just come here to the up. GSX and here I will Implement that this is log in and here let's use log in let's import it that has import it see we came directly to the Lin okay whenever we register a record let's register five press sign up see we directly came to the login it means the record has registered successfully so press it see the second record now let's design the Lin page so to design the Lin page we we have the same concept as we did for the sign up okay we have the same input Fields just we will remove this username input Fields okay for the Lin we have the email and password input fields and submit button and also this uh function to submit the record in these uh variables let's control a control C control a control V we will just change this to login because writing again the same code it will take time so we will just use that code login now now let's first of all remove this username because we don't need username in the login this is the first thing and also remove it from here and just come here and here we will remove the username yeah this one and change this to log in log in and just come here down this is uh here we will move to the sign up okay sign up here I will write don't have account if you don't have account press the sign up button here we will move to sign up and here this is log in instead of sign up save it let's check it now okay how it looks like this is our login page see sign up came to sign up login we come directly to the login now when we press the submit button we will call this handle submit function and here instead of sign up I will call now like in route okay and then I will return return the status if the status was okay so then I will move to the home component right now we don't have the home component but later I will add that and login okay now let's implement this login route inside our server side okay come here to the user and here we will Implement that router. post slash Lin right request and response first of all let's distract the values const email email and password is equal to request. body and after that uh first of all we will check the um password okay um the because the password is first of all we will check the email okay then we will check the password and also generate a token here uh to store it inside the cookies the token okay so let's first of all add a Sync here to make it a sync and here I will uh user is equal to a wait user model we will use user model. find one okay we will find based on email if user it means if the user was existed so then I will uh return response. Json I will return the message uh if not user sorry okay if not user if the user was not existed so then I will turn this message user is not registered okay user is not registered now if the user was existed so down I will check now compare the password okay because the password is hash and uh our password is plain so now we will compare the passwords so for that just comp here and const wet password is equal to a v um bcrypt do compare and here first of all we will pass our password and then we will just write uh user. password if not valid password if the password was not valid so or return response. Json message password is incorrect and down from that if the password was also okay and also the user was existed so now what we will do we will first of all generate a token okay then we will store that token inside the uh cookies of user to use it um in the future okay for the authentication purpose const let's generate first of all the token token is equal to here first of all we should import the Json wh token import JWT is equal to Jon JWT from Json we token save it GWT do sign okay this GWT is um a use for okay a security method to exchange the data between two parties uh it is used mostly for authentication and authorization if you don't know so I have a separate videos about JWT and how it works you can watch that okay you have the link in the description and here it has three parts okay the first part is the payload in the pad we will write for example we uh yeah the username let's write it the username in the pad so we will write user. username and the second part is the key a secret key this should be a secret key no one should know about this okay and this should be at least 32 character at least and it is it will be a unique uh key so I will write this um key inside the EnV okay EnV file for example keyy is equal to with like GWT token key I wrote just like this but in the real application it should be at least 32 character and a unique key that no one should be able to generate that and to know about that GWT token key okay uh now let's come here I will WR that process env. uh key and the third part is um the options okay that you can add for example expire in okay expires in like in for example 1 hour okay in 1 hour after 1 hour it should not be able okay to um this should be expired after 1 hour okay uh for example you use this in your application after one hour the user should uh L in again okay it will need uh a Lin again from the user uh now just come here down so after generating the token now I will store this token inside the user cookies okay in the cookies so to store it for that I will use response. cookie here I will assign a name for example token and here I will like the token that I have generated here also we can add mix age okay the option we have here mix age how many um times after it will expire for example 360 like it is in milliseconds okay after um uh 1 hour it will expire from the cookies and return now response. Json status status true and message Lin successfully so what we did okay we have implemented this okay this is it should be an object let's wrap it inside curly braces so this is the token generation then we store that inside the cookies and here I will add um HTTP only also okay let's add that HTTP only three because uh then uh you should add this one okay this is for the security purpose that no one can access the token from JavaScript if you don't add this then they will be able to access it from the JavaScript code okay but if you add this you they can access just through http request uh now Ling successfully okay we have implemented everything uh to use this okay response. cookies okay for that we should now um configure the cars Also let's come here it will automatically generate an error so for that uh first of all Let's uh just come here import the cookie parser I think we we need to import that cookie parser from cookie parser and use that up. use uh cookie parer and one thing else that we should add to this uh C that is uh origin we should add the origin here okay the origin it means from which front end from which website you would like to um you access now here we will write our front end code uh URL okay copy this one and paste it here remove the login so we will access at this uh server side from this uh domain okay from Local Host comma credentials true and one thing isse that from which uh component you would like to access this cookies you are using cookies okay this cookies we are using cookies in the login so now in the login component what we will do here um we will add axus uh that is axus let's axus sorry do defaults do with credentials is equal to True add this in the front end code also so after adding it it will not generate an error for you so now let's check it okay let's move to the our part content and here let's move to the console and come here to the login component if we successfully if the status was okay then we will move to the home component right now we don't have the home component but let's we will add that later let's refresh our code just come here here I will write [Music] gmail.com let's press Lin button so we faced it means we Direct came to the homepage it means that the status is okay okay so it says there is no home um route it means that we directly uh successfully log into the system now okay let's check the cookie the cookie generated or not the cookie has stored or not just come here to the application in the application come here to the cookies s cookies come here to the local house see we have the token cookies okay this is the code key that we have stored the token that we have stored now let's create our home company just come here home. jsx or afce generate the code and also write it inside here path for homepage this is for homepage and element is equal to with home it's imported that has imported save it so let's check it here home path is slash let's remove this home okay we don't need for hom page this one we are directly at the homepage and here in the login we will remove him we will directly move to the hom page without writing an route so this is our homepage so we have implemented registration and login functionality now we will Implement Reet and forgot password if we would like to implement that concept also so let's add forgot got uh password link to home login page okay just come here to the login page in the login page come here down um up from where we should add for example yeah under from the Lin button okay here I will add a link link of react rter let use it the link has imported or not yeah we have imported the link just come here and we will use that and here two is equal to we will move to SL forgot uh password right here forgot password save it and let's first all check out okay how it looks like just come here to the browser and to the Lin yeah forgot password so now whenever we press this we should move to the forgot password component let's come here to the app and here we will add forart password power guard password and here we should create a component and we will import that first forgot password. jsx orc save it and now let's import it instead of plugin forgot password so let's check it okay so Place forgot password we directly came to the forgot password component now we will have here uh an input field for email okay user should enter his email then we will send a forgot password link okay a Reet link to the email of that user so let's do it okay first of all just come here we will have an input fields copy this forum code past it here and we will remove the username and the password field just the email field okay forgot password and let's copy this code also and paste it here let's remove the password the username and let's copy these things also copy and paste name here so whenever we write our password Here uh email in this input field it will be stored inside the email variable okay then whenever we press the submit button uh let's forgot password uh send just send button okay remove this also so when you press the send button so we will call the handle um this function okay handle submit function and there what we will do we will move to the receipt password okay we will move to um forgot password instead of this we will write forgot password to this route and we will pass just the email whenever we succeed it so here we will just alert check your email for receipt password link let's save it later we will move to the Lin page now let's create this forgot password uh route okay just come here to the index come here to the user and we will create that okay router. post forgot password we will get request and response const [Music] email is equal to request. body and now let's check the user okay let's add a sync and a wait first of all we will wrap the whole code in TR cage block okay we should uh wrap these parts also in Tri cage block if there was an error so it will handle it okay I forgot that in that time console. log example error now just come here we will const user is equal to um user model dot let's write a wait user. find one and based on email if not user it means if the user was not existed so then we will return a response. Json message which will say user not registered else if the user was registered so then we will send an email to the email of that user to that email okay okay we will send an email so to send email we need to use no mailer okay we will install first of all that then we will uh send an email so let's uh to write the code for that first of all let's just come here no node mailer let's search it and just come here to W3 schools to the nodejs and here we first of all we will install it okay npm install node mailer just come here and let's move move to the terminal let's take a new terminal press sign CD we will move to server directory there I will install npm install node mailer so let's wait for installation of node mailer yeah that has installed and down here now what we then we will import it but before to send the email this is the code okay let's copy this code this is the example code okay simple code copy this code and here down come here first of all let's import that import node mailer from node mailer import from so after importing it now let's use it okay let's paste the code here after pasting the code now we will configure this okay to send the email uh for that you need uh first of all to configure your Gmail okay uh I have already created a video you have link for that video in the description how to send an email using node mailer but here I will show you okay first of all you should move to your Google account after moving to your Google account then you should move to the setting of your Google account then to the security tab after security tab you should and move to twostep authentication first of all you should turn on the twep uh authentication after turning on the twostep authentication then you should come here down so let's write I will write my password login okay it needs the password I entered my password let's Now log in so after coming here okay you should come here down to the store up password okay press this a password then you should generate a new password okay I have already generated a password then just assign a name and create press the create button it will generate a password for you then you should use that password okay whenever you would like to send an email you should use that this password okay that you are generating here in our password okay so let's come here now to our code here uh our service okay we we are using Gmail if you are using your own domain so you will write that uh in authentication for the Authentication you should write your own email and the password of that okay that we have generated right now okay that password after that uh mail option these are here you should write your own email from which email you would like to send an email and two to whom you want to send we should we will send the email to the user okay who entered his email to for resetting the password in subjecting here we will write the subject reset password okay reset password in the text what you will do in the text we will send him uh a link okay whenever he press that link he will move directly to the forgot to the receipt password page that link will be something like okay down here we will send the email okay here we don't need anything else okay so that's okay here just we will write here our email and here our password then here our email okay so I will write them I will write all these things so I wrote everything okay first of all I generated a token okay um right now I Cote for this generating a token after generating a token this is the previous code okay but here I wrote my email and this is the password that we has generated and down here in the mail option again from which user okay I wrote my email then to the email okay the user email that we has previously the user has entered okay this email check it see this email okay to this email we will send to this email after that uh we will send this text okay Local Host this is our front end code uh fronted URL and reset password this reset password we will declare it in our app.jsx okay then whenever user press this it will move to the Reet password page and also I attach token with this uh text okay it means that whenever we attach this token when he reset his password and he request for updating his password so we will then check the token is that user authenticated is it the same user or not okay and down here whenever we sent it successfully so then we send that status is true and message mail sent uh now let's check it okay let's first of all just if there was an error so then I will return let's an error to the front end paste it and let's just send an a message error sending email see it now let's check it okay just come here to the front end let's close this one and here in the receipt password let's enter our r at for example my email okay I will write my email here this user is not registered okay this user is not registered first of all let's create um we will register this user okay my email I will register my email let's write my email and here the password let's press the sign up user has um registered let's press parot and here I will enter my email and let's press send button okay let's press send button and let's move to the console and come here to the console we faced with an access error okay it says access error let's check it where is the error just come here and to the note no error here what it says where is the error yeah the error is here okay this is for forgot okay we forgot G let's save it now let's try it okay let's press send button now see check your email for receip password link okay PR okay now it came directly to the um login we will check now our email see we got a new uh email okay this is a new email Reet password and this is the link okay whenever we press this login so this will expire in 5 minute okay after 5 minute it will not work so let's now write the Reet password create the Reet password link and here we will just add is it password and we will move to the reset password page let's just come here create a new component password at GSX the Reet password will be the same as the signup contrl a contr c we will have a as the forgot okay contr a control C let's control a control V the same code okay we will just change one thing I will show to you res set password Here we will have instead of email we will have the password okay let's copy the password field is it here and this is reset password reset password reset okay and change this to password and reset password set password and here we will pass the password and here we will call reset password instead of forgot password reset password let remove this s so now let's press okay and our email let's press this link okay let's press it so it says the local page can't be found Local Host 5173 that is okay Reet password oh sorry okay we should add here in the up here we should add a token okay because we need to get the token also our route should be like this because we are passing a token just come here now let's refresh it so the problem is because this URL contains dot okay so we cannot fix this uh the react app okay so we should remove dot so for removing the Dot from this react up we will update our WID okay which is let's check it the version of it is 4.3 okay so let's update it what happened okay first of all we will update it let's create a new terminal CD client npm install with at latest press enter so the package has installed let's restart our server npm R de and also let's check the version yeah that is fifth version now let's check it okay see it is working okay we have updated the BD so and issue has resolved so now let's for the forgot password um we came to the but we should move to the reset password okay so let's move to up. jcx yeah here we should move to re password and let's Che it now yeah we are in the Reet password so we should now enter our new password okay and let's move to reset password G6 open it and here we will write new password save it you can add confirm password field also but this one is okay just for how to uh apply it now whenever we enter the password so that would be stored inside this password Feld okay whenever we press the submit button we will call this function and we will call this uh reset password uh route and if that was status was okay then we should move to uh directly Lin page okay so let's move to reset password and also we should pass the token okay whenever we come to the uh reset password so we are passing a token okay this parameter so we should store the parameter we should grab that parameter let's do it like that we will like token is equal to use par hook okay this is react autodom uh hook okay which will just take the uh parameter from uh URL so we will take the token now we will pass this token to Reet password like this okay comma plus uh token so after passing it to the uh Reet password now let's move yeah that is post okay let's move to the user and here we will come to the receip password let's create receip password router. poost SL reset the path was reset password Reet password Reet password request and response so to take parameter from URL here we should write slash token name it token so to take this token for that we will use a const token is equal to request. forum. uh token and after that now um uh in inside this token first of all we will verify the token okay after verifying it we will update our password so let's extract the password also is equal to request. body and we will drop it in Cur braces also and let's remove this now let's start TR C block etern response sorry this console.log error and let's add a synchronous make it a sync and here now first of all we will very by the token okay this token that we got con decoded is equal to uh JWT doy and here we will pass our token comma our secret key so for the secret key we will write process EnV do uh key if the token was okay so then we will move forward otherwise if the token was not valid so we will it will generate an error it will print the error to us so now let's after if that was okay so now let's take the ID from decoded uh data const ID is equal to decoded. ID this decoded is the value that we uh used uh when we were um generating the token okay the failure that we were writing at the start so this is that ID now let's update our record okay so to update the record for that first of all we will hash this password okay because this is a plain password we will hash this pass password then we will uh uh store it update our record so let's make const hash password is equal to bcrypt do has and our password then salt and after that we will update our record cons let's use here a vit and also a vit here const AIT uh user sorry this should be um aate user. find by ID and update find by ID and update the ID is equal to with this one ID where our ID and after that date the um password and assign hash password to that to the password so lastly return response. Json status let's return a message status true message return the message updated record password save it okay and here also we will return uh return respon Json invalid token for example so now let's move back to the forgot password if the status was not okay then we will print here console do log response okay response. data save it now let's try it just come here reset password let's write eight character password the previous one was five character okay let's reset it so now let's check it okay the console where is the error uh let's wait for the press the reset password let's move to the just come here server is running okay no problem slash uh log in and here yeah here we will press here just come here press this link and it so press reset button so we should print this data inside thisit password okay to see the error message just come here reset password token and here we will print that data save it let's now check it okay okay see invite token it means because the the token is expired we generated it uh an hour ago uh it has expired the expiration time time of token was 5 minutes so let's now send um a new email okay with the refes token forgot password press send button so it will send an email to us now so we received a new email uh let's move to the email okay just come here and refresh it so we got a new email let's press this icon so now let's add our code okay eight8 character before that was five character our password now it is eight character let's move to the console if there was an error we will see that okay receive password so we directly came it means that the password has updated okay if you if you would like to Now log to the system so we should enter a character password let's write it Press login see we directly came to home it means we logged in successfully and we changed our password so it was all about the receipt password and forgot password uh now what we should do we will implement the protected routes and also the uh lagout functionality okay so let's implement it the for the protected routes uh let's just come here to the homepage yeah remove it and also close the email uh for the protected routes here and the home component should be uh access just those people okay or we can create a new component the dashboard okay whenever we would like to move to the dashboard that should be accessible just by those users who are already logged in with to our system okay so let's do it okay for example I will create a new component just come here by the name of dashboard jsx or AFC and just come here to the home component here here and the home component I will add a button a button inside button we will have a link react out link and two is equal to we will move to dashboard by placing this button we will be able to move to the dashboard and one another button for log out let's add that also uh that should be a few button lout so by pressing this dashboard we should be able to move to the dashboard let's create that component the dashboard let's add route PA is equal to SL dashboard element is equal to dashboard dashboard element has imported and let's try it we are at the home page and this is log out button and this is the home let's write something inside the home I just come here and we will write here uh dashboard be okay let's check it okay this is dashboard and this is log out we can add on another brake line see it will looks like this let's press the dashboard see we directly came to the dashboard component but we should make this protected okay just the um the uh authenticated user should be able to see the dashboard so for that let's move to uh the dashboard come here to the dashboard and here we will just write um use use effect hook has two parameter first one is call back function the second one is array dependency and here we will Implement accs let's import xs. uh git slash uh we will move out SL verify but then we will get the response and here Apple response. data. status was okay so then we will move no problem otherwise else we will just uh navigate to homepage okay navigate navigate SL homage okay we will create this navigate okay let's import first of all const navigate is equal to use navigate h also the accs has imported now let's create okay this is HTTP Local Host Port 31 Au verify so now let's create this protected route okay the earth I just come here to the user router. git slash rify request and response and what we should do here uh let's here we will create a function okay for verication and we will call that here const verify user is equal to we will get request response and next next medal beare we will call it later okay the next one the next okay so here we first of all we will get the token from the cookies okay so let's write con token is equal to uh request. cookies. token if not token it means if the token was not existed inside the cookies so then we will return response. Json uh status fals and message no token for example okay if the token was valid so then what we should do then we will check for the verification okay we will work the token so for that let's write asynchronous and wrap the whole code inside TR cage plug error and let's now here down from this let's perit the document okay let's per the document that has pered so down here now we will verify the token uh let's write const decod it is equal to with JWT verify um the token our uh process env. our key okay so if the verification has successfully completed so then we will call next let's save it and let's write here we were um the we verify the token okay if it was a valid token so then we will call next next we move back here to this route okay now here we will return a response return response. Json status status true and message loog uh authorized authorized so just this is okay wherever you want so you will just call this verify user on which um uh route you would like to apply verification so you should just call this uh wari method on that okay this midal we on that like this we did on the wari if you would like to call it another uh route so you should do like this and yes now let's check it okay just come here and we would like to move to the console first of all and in the console Also let's s now the dashboard see uh we got a response or not let's move I think we p an error check it and uh top [Music] error canot destructure property yeah this is not 31 Au P dashboard and C in promise config let's check the error okay get AU 5 db. G6 so let's check it okay let's yeah let's uh first of all use in the dashboard yeah here we should use the AIS dot defaults start with credentials is equal to True let's save it now let's try it okay let's refes it we we paste again with error so the problem is that in this user we should initialize this function okay verify user um above from this okay route so this was the error let's check it this is in the node up okay this was the error so let's save it now let's check it now let's repes it uh we paste again with error so I will check the error so the problem is this port number this is 3,000 okay not 31 let's save it now let's check it okay that was the error let's move to the dashboard so it says that we are valid but we we let's check it okay let's just a minute yeah we came directly okay we our wet we got the response is okay but why we can't move to the dashboard okay let's press the dashboard we directly came back to the homepage so let's check it okay let's check it whenever we get the result app response. dat. status was okay so then we should navigate just slash to homepage just come here to the user status [Music] true message authorize what is the response that we are getting okay let's check the data status PSE message no token so let's check is the token available or not let's move to application and in the application the cookie yeah there is no token okay right now with us so that's why we came directly back to homepage because there was no token so let's log to the system okay we will move to the um login page and the homepage we should have a button for login also uh home dashboard so let's move to the login page and here we will log to the system let's Press login button see the token is generated right now we have the token okay so now let's check it okay move back to the console if you press the dashboard button see we directly came to the dashboard and status is okay and we are authorized okay repeate A1 F close contr c a f close this uh tab okay again come here and search it again again we will come direct to the dashboard because we are authorized we have the token the token is stored there we what we would like to log in so we will be loging we can access the dashboard because we are logged we are authorized until the token expire so now let's implement the log out functionality okay so to log out is to implement the logout functionality for that let's move to the homepage whenever we click this we will call a button okay un click event handle log out this function let's create it handle log out and use A.G HTTP Local Host three three tri0 and SL slash L out okay do th and we will get here the response and app response. dat. status um it if it was okay so then we will navigate let's use the navigate instance of a navigate const now get is equal to use navigate hook navigate slash to homepage or login okay cage if there was any error console.log error let's move to the here and we will Implement router. uh G lag out so here we will write response. clear cookie and we will pass the name of the cookie which was token return response. Json status true yeah just status true okay when we return the status on homepage uh we should move here directly to to the login okay back to the login Manu where we log out let's check it now just come here and let's press the log out button see we directly came to the logout now let's check the token okay come here to the terminal to the application see that the token is existed right now okay the token didn't remote because let's check the error okay clear cookie just come here to the homepage where did we call that function that we called here okay so here we will just use um let's use that on the top of this a. defaults do with credentials is equal to True let's save it now uh now let's check it okay let's move to dashboard can access the dashboard because we are authorized let's press Now log out see directly the token has removed also because before we didn't use that statement so now if we would like to access the dashboard now see we will directly go to homepage because we are not authorized and dashboard again not also to like to just handle this log out and Lin for that we can create um variable okay uh if the user was l in it means if there was Data inside the cookies we should store here um we should write here show the Lin button otherwise the L out I did also this also you have I have added other videos for this and also for role base management you can watch those videos also okay you have link for that in the description so I hope this video was helpful for it was the complete authentication system that we have implemented the register log in and um uh which was reset and forgot password hashing the password JWT token I hope this video was helpful if you like this video so don't forget to subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 4,316

Keywords: authentication, react router tutorial, react, react authentication tutorial, react authentication and authorization, react authentication, authentication tutorial, react jwt authentication, login and signup, login page with jwt authentication, protected routes, react native login to different accounts, react user login and registration, redirect after login and logout, user authentication system using node.js, nestjs authentication jwt mongodb, react tutorial for beginners

Id: a0OteSViYpg

Length: 101min 5sec (6065 seconds)

Published: Thu Jan 25 2024