Complete MERN App (OTP Verification, JWT Token, Authentication, Reset Password)

hey everyone and welcome back to daily tuition in this amazing course you are going to learn how to create this login system with monster we're going to build this application really from the scratch you're going to learn how to create login registration reset password with email OTP verification profile update with JWT token and much more let me first show you what we are going to build in this course we are going to first build this beautiful login page where we have the username and the button now before we log in we need to register with this application so click on register now this will open the register page I'm going to specify all the details right here you can choose the profile as well select your profile open it click on resistor button when you click on register this is going to register the user in this application and send a mail to your email address specify your username click on let's go here you have to specify your password you can see this is your username you have to specify your password click on sign when you click on sign in this will redirect you to the profile page right from here you can update your profile let's suppose if I specify here daily tuition and click on update button and this is going to update this data so now once I update this data if I reload the browser I'm going to get the same result because this data is now stored in the mongodb database now just for that if you want to log out right from this application you can click on this logout button your successfully log out from your application now let me show you how you can reset your password you have to first specify your username click on this button and right from here let's suppose that you don't know your password you click on this record Now button when you click on it this is going to redirect you to the recovery page and here you will see the message OTP has been sent to your email so you have to enter six digit OTP right inside this text box so you have to open your email copy this OTP I'm using the testing email account you can use the Gmail as well that's up on you now once you're back to the application we can specify that OTP here or if you want to regenerate this OTP you can click on this resend button when you click on recent button it's going to regenerate that OTP and you will get email in your inbox just for that once you specify this OTP click on record and this will redirect you to the reset page and right home here you can reset your password so let me just update my password and click on reset button now the password is successfully reset now I can log in inside my application now if I try to use my previous password then I'm going to get an error message here but if I use my updated password you can see now I can easily access my account so we are creating this complete application really from the beginning we'll go to secure route understand how to update the user only when we have the token and learn many many more if you want you can follow along with me from any section of this video you have to just download this project from the link provided in the description so before taking too much time let's get started so let's get started and see how to create this amazing project using react as a front end and node as a backend I'm going to use Visual Studio code throughout this course so I'm going to open the project directory inside this vs code and create here a new directory and specify the project name to it let's create a new directory and name this login app now that's upon you you can specify any name to this project directory right inside this project directory here I'm going to create two directories first for the client and inside this project directory let's create another directory with the name server inside the client we are going to have the react application and inside the server we have the node backend so let's first set up the client UI and then we'll move to the backend so inside this client let's create a react application to create a react application open a terminal enter into the login application and the client folder here I'm going to execute a command called npx create react app and then specify the directory name because we are in the client directory let's basically here Dot and press enter this is going to create a react application inside this client directory it will take some time to create a react application if you want you can use wheat as well to create a react application that's a module now once you have the react project let's clear the screen then specify a command called npm start this command is going to start the react development server you can see the react application is running on localhost 3000 now let me just toggle my vs code just like this close this terminal and minimize this and let's create the react application so I'm going to open the app.js file this one and get rid of all this code because we are not using it edit of this here I'm going to add it one heading tag and then specify here react app save this and you can see I'm gonna have here react app not just out of that what I want I don't want it to initialize this react app as a git repository instead I'm going to remove gate right from the client and initialize this complete project as a git repository so you can easily download the front end and back end from the single gate repository so let me open my terminal let me stop the development Server create a screen and here I'm going to say remove RM hyphen RF and then space over here dot get so this will just remove the git repository from this project and I press enter you can see this will remove the git repo right from this project now just for that I'm going to move to my login app directory and here I'm going to say get in it now this is going to initialize this project app as a git directory and I press enter this will initialize this directory as a git directory right so once we have this git directory let's commit all the changes first so I'm going to say here get and then I'm going to add this client and server inside this get repository but what I want I want to remove and ignore this node modules from the client and from the server so I'm gonna get rid of this git add and inside this login app I'm going to grab this dot ignore file and grab that and create that inside this login app so instead of creating a new one I'm going to move this file inside this login app and just for that inside this git ignore don't forget to specify here client so you specify your client so ignore the client node modules and server node modules folder this or that I'm also going to ignore the dot EnV files so I'm going to duplicate both the statement and here I'm going to say client dot EnV and server dot Envy I'm going to ignore all these files from the git repository close this dot ignore file and now open the project and here I'm going to say git add then specify here dot to add all the files inside this master Branch I'm gonna press enter so this will add all the files inside this master branch and then I'm going to say get commit hyphen M and then specify here initialize project that's it I'm gonna press enter this will create all these files inside a git repository now you can download this master branch and follow along with me from the master Branch now let me just enter into the client directory and paste over here npm start to start the development server now just out of that I'm gonna get rid of this complete Source directory right from this client project and create a new one because right now we have all the unwanted files inside the stores directory let me just remove it and create a new one so let me delete this Source directory and create a new one so inside this client we create SRC and create a new file here so inside this we need to create index.js this is the root file and then we create a component let's create a component called app.j and to specify styling I'm using here index.css so create here index dot CSS file that's it we just need three files inside this Source directory just for that inside is index.js right here let me first add import react from react then we need to say import react Dom from react Dom client just are that we also need to import in the single code then specify dot slash index dot CSS The Styling file at the end don't forget to import app from single core specify dot or slash app dot jet let's start that right down here you need to say constant root is equal to react Dom and you have to create and specify your root component so just specify your document dot get element by ID inside this get element by ID right here you have to specify the root ID and just for that right down here you have to say root dot render you have to render that root component something like this so we call here empty square bracket and then specify the app component you can just get it off this closing app component and then space over here self closing that map save the changes just back to your app.js here I'm going to create react functional component so I'm going to say rfg and press enter this will create a react functional component here I'm using the react extension to create this component and inside this I'm going to say react login app save this file back to the index save this file as well and restart the server there we go we have the react login text here these are that let me initialize this project with Kelvin CSS so I'm going to search for television CSS click on this first Kelvin css.com website and click on get started because we are using a framework we select the framework guide and select the create react app command just for that you have to install three libraries inside this project first is telling CSS second is ocss and third is auto prefixer I'm going to open a new terminal enter into the project directory so space over here CD login app and client and here I'm going to execute a command so I'm going to paste the npm install iPhone D Delvin CSS post CSS and out of the fixer I'm going to install all these packages inside my client directory just thought that you have to execute this command L1 CSS in it i1b so this is going to create two files inside your project l1config.js and post CSS config.j this will allows you to initialize your project with Kelvin CSS you can find both these files inside your land just after that once you have both your files open a tellmanconfig.js you have to paste this command so copy it and specify that right here save this or that scroll down back to the index.css paste all these three commands to back to your index.css and here paste all these three directly and just for that start the development server and paste this H1 heading tag so back to the app and paste this H1 heading tag here so inside is div I'm going to paste this H1 heading Tagle changes and restart your development server once you restart it you can see you're going to have your television CSS H1 heading back now just for that once you have the Telvin initialized with this react project let's install react router Dome module to create different routes and let's create different components inside this project now once we initialize this project with Delvin CSS let's create different routes inside this project so the different routes we specify different components so let's first install route inside this project I'm going to open my bachelor and here I'm going to specify a command called npm I4 install and then I'm going to install a library called react router Dom I'm going to install this react.ome library and create all the routes of this project so let me clear the screen and open my app.js file let me close this index.js and this index.css and right here at the top I'm going to import an object and inside that object I'm going to import all the modules from react router Dot and from this module I'm going to import create browser router and router provider and inside is app.js we are going to create the root route of this project so at the top here I'm going to add a command and say root routes so at the top I'm going to say constant router is equals to create browser router and inside this function we specify an array and inside this array we're going to have the different routes of this project so let's create a first object and here we specify the first route to specify first route specify Path property and specify your route path so this is for the root route so it's basically here forward slash so for the root route I'm going to specify element and this one out I'm going to specify here div with root route text to start that let's create the next Cloud to create a next route press over here comma copy this object and specify that here so this will create the second row and this is for the register page so we specify here register and then change this div to register crop take the changes just out of that inside your app right here let me get it off this div and convert that into main element so if we specify here main get rid of this H1 heading tag and here I'm going to call this router provider so we call here router provider like this and then I'm going to specify this router the router property of this route provider so we specify here router is equal to and then we specify this variable this one router so this router property something like this save the changes and you can see you're going to have the root route as a response inside your localhost 3000 so now this is your root route so you will get this div as a response if you open the register route here if you open the register route you will get register route as a response so you have different components on different routes now let's create all the routes of this project with different components so instead of creating components inside the source let's create a new folder for that so inside this Source directory I'm going to create components folder so I'm going to say here components and inside this I'm going to create all the components of this project so let's create a component called username dot JS let me switch over here react functional component so this will create a new component inside this project let's create another component so inside this components folder right here I'm going to create register.js here I'm also going to say react functional component back to the components and create password dot JS component here I'm also going to say react functional component save this file then I'm going to create another component with a name recovery dodges and then I'm gonna say react functional component save this file create another component here I'm gonna say profile dot JS then I'm going to create the UI of this profile page just for that I'm going to say reset dot JS and this component is for reset the password of the login user then at the last I'm going to create a component called pH not found Dodge and this is for the page not found so I'm gonna just create here page not found UI let me close all these component files right from here and inside this app.js I'm going to import all the components and specify that to this path so at the top here let me add a command and say import or components and we are going to import the username from dot forward slash from the component I'm going to import the user component then I'm going to import the password from components password after that let's import the register from the components register after that import the profile from components profile then import recovery from components recovery file and then import reset from components reset and just out of that import page not found from components page not found file that's it once you import all your components inside this app.js let's use it inside this route so for that boot route I'm using the user component so instead of this div I'm going to use this component user component get rid of this div and space over here user component let's do the same for the register valve copy this register this component and specify that right here to use the register component to this register route to start that let me copy and create routes here this is for password and for the password route I'm using the password component so let's copy and paste the password component here to start that let me duplicate this change this password to profile and then I'm going to specify here my profile component this one write down yeah duplicate this route and instead of profile now I'm going to say recovery then I'm going to specify for my recovery component here to start that duplicate this then here I'm gonna say reset and specify the reset component this one and at the last duplicate this and this route is for the page not found so instead of the photo slash specify here abstract so if there is an invalid route in your application I'm going to call the page not found component this one right here if you open the root route you will get the username if you open the password route you will get the password and so on you will get all your component with this route now to start that let's create a UI of these components one by one so let's create a UI for the username so I'm going to open the username dot JS file and here I'm going to create the UI of this first username component this username component is refers to the root router so let me open the root route so this is the username component let me get rid of this Dave and let's see here the UI for the username component here I'm using Telvin CSS classes to create the UI of this first username component let's create a div with container and MX Auto class so I'm going to say here D dot container and MX Auto this or that right here I'm going to create another div and specify some Kelvin classes here first I'm going to specify Flex then specify justify Center then I'm going to specify item Center and then I'm going to specify height screen and inside it I'm going to create another date and right inside this Dave right here I'm gonna have my title so let's create a div with the class title and inside this title here I'm gonna have H4 heading tag with the text hello again see the changes I'm going to have the result what I want I want all my text at the center of the document so I'm using here flag just if I Center and item Center this or that this title I'm going to specify Flex Flex column then specify item Center and this H4 heading tag here I'm going to specify class names text 5 Excel this or that just out of this H4 here I'm going to add a spawn tag with some Tailwind classes so I'm going to specify padding y4 so this will add top and bottom padding then I'm going to specify text Excel to specify font size width is going to be 2 by 3 so this will specify 66 percent with this Bond tag then specify take Center to Center all the text and then I'm going to specify text Gray 500. and then inside the spawn tag I'm going to specify some demo text like this save the changes you can see I'm gonna have the result what I want just out of this D right here I'm going to create a form let me get rid of this action attribute let's specify here a class name so I'm going to space over here class name adding y1 and then inside this form I'm going to create a dip and to this day let me space over some class names a little space over here profile like justify Center and padding y four so this will add top and bottom particle and inside this div right here let me add an image so I'm going to add here IMG tag and specify source attributorial and inside the source I'm going to leave everything as it is and to this earth let's specify Auto just out of the Steve here I'm going to add another div with the text box plus and right inside is there I'm going to create input type text and then I'm going to specify here placeholder username and after that and just order that right down here let's create a button and this is a type of submit button so I'm going to say here submit and the text is going to be let's go these are the changes you can see I'm going to have the result of what I want this one now let me get it all the justify Center and item center right from here so we'll see all the results right here so just after this text box right down here I'm going to add another div with the class 6 Center and here I'm going to add padding y four and inside this div I'm going to add a spawn tag with a text not a member and then I'm going to add here an anchor DAC and here in the hdf attribute I'm simply going to specify the register route so I'm going to specify here register and inside this anchor tag here I'm going to say register now and don't forget to specify some class names for this and attack so specify your class name takes rate 500. say this okay I'm gonna have the text you can notice just not there so this is on tag here I'm going to space it for some classes I'm going to say it takes Gray 500 now what I want instead of using the anchor tag I'm using a link component of react router Dom because whenever you click on the anchor tag it's going to reload the browser this is not the way a single page application work so what we have to do is we have to import here link from direct router Dom and you have to copy this link scroll down and then instead of this anchor tag you space over here link component just like and instead of href now your specify here you changes you're going to get the same result but this time you are using this single page application feature so whenever you click on this link it's just going to redirect you to the register out without loading the browser you can notice when I click on this link it's not going to reload the browser now once you've done that roll up now let me space our styling today's text box here I'm going to specify Flex select column item Center and GAP six now just for that once you have the HTML elements inside this username let me specify font family add background panel to this login page with glass morphism effect and then add the image and add some styling to this username input text box so I'm going to first add image inside this project so inside the source directory right here I'm going to create a new folder with the name assets and right here I'm going to put all the images of this course don't worry you can download all these images from the link provided in the description you have to just enter into the user component bra once you enter into the user component Branch you can download all the images of this project so I'm going to put images inside this project and now let me use it so at the top I'm going to say import form in the single code double dot forward slash specify the assets folder and inside that I have the image with the name profile dot PNG this one please provide that name here profile dot PNG then I'm going to use this author right here right inside the source and in the color braces I'm going to specify the author see those changes you can see I'm going to have the profile image just order that let me add styling to this username so let me create a file inside this project to style the username component so inside the source here I'm going to create a new folder and specify name to it styles or style that's upon you and here I'm going to create the CSS module so I'm going to create a new file with the name username Dot module dot CSS and then I'm going to import the CSS module inside this username right up here you have to say import files from double dot or slash specify Styles and then import the username dot module dot CSS and now you can use all your classes using this style object back to the username module.css and here I'm going to create styling of this username component let's create the first class with the name glass now to this glass class I'm going to specify class morphism effect so here I'm going to first specify the background and then I'm going to space over here RGB background color here and after that specify border radius which is going to be 16 pixel then specify box Shadow and then I'm going to specify some box Shadow values here and just start that specify backdrop filter which is going to be blur and then I'm going to space over here 7.1 pixel and then I'm going to specify border one pixel solid and the RGB color and just after that let me add some Tailwind classes so to add Italian classes to this class use apply directive and then space over here border or border gray 50 string zero height is going to be 3 by 4 it means 75 percent then specify width and I'm going to space over here with 30 so I'm going to space over here 30 percent now because there is no class for 30 percent in seven cases I'm using here a square bracket and inside that basically unit after that I'm going to specify rounded 3XL padding y 20 adding X is going to be 7 and mean with Max so this will specify minimum width maximum content decisions back to the username and using these Styles you can access this glass bar so back to the username and to this day just out of this flag right here you specify class name and in the curly prices you specify Styles dot Plus changes you can see you're going to have your glass you can notice just add that back to the username here let's create profile image so specify a class called profile IMG and here add some Kelvin classes so add apply for specify border 4 then border gray 100 width is going to be 135 pixel rounded pool Shadow LG and then specify cursor pointer just start that I'm also going to add the hour effect so let's create here apply again and specify however border Gray 200. so when you hover on the image this will change the Border color of the profile image just for that let's style the input text box to create a class called text box and here specify apply order is going to be zero adding X5 so this will specify left and right padding then specify top and bottom padding four rounded Excel width is going to be 3 by 4 and then specify Shadow SM after that specify text LG so this will specify font size to this Xbox after that I'm going to add again the apply directive and then specify here Focus outline no that's not that let's style the button right down here I'm going to say dot BTN and here I'm going to add apply directives and space over here Boulder BG indigo 500 width is going to be 3 by 4 dividing by 4 rounded LG X is going to be gray d and after that specify text Excel and Shadow SM and just for that press vertex Center once you have the button right down here and the last you can create hover effect on this button to create a hover effect on this button I'm using the SS so specify here button over and then space over here background color and I'm going to specify here the hex background color to this how would it back that's it save the changes and now let's add all these classes to the username so back to the username to this image I'm going to specify class name profile image so copy it and to this IMG tag Facebook class name Styles dot profile image there we go we have the class name for this imgtac just add that to this button please reflect last name and then specify the BTN last name capacitor dot BTN say this you're going to have the style to this button something like that and to this input text box we specify this text for class name so here I'm going to specify class name in The Curly braces specify Styles dot text box say the changes you can see I'm going to have this input textbook now just for that let me specify font promptly to all the text of this project and add background image to it so I'm going over a new tab and search for Google font click on the Google font website click on fonts and right here I'm gonna choose the pop and spawn so I'm going to say here Poppins this one I'm going to select the Poppins font and select the regular Style so I'm going to choose this regular 400 style select the regular 400 and here you can find the import statement just copy this import statement back to your project and open the index.css and right here you have to paste this import statement at the top and just for that right down here you have to specify asterisk select all the descendant element and specify this font family and then specify that right here so this will change the font family of this project you can notice these are that right down here I'm going to specify body and to this body I'm going to specify background image so let me specify first the fallback value I'm going to specify background and I'm going to space over here fall back x value here so just start that I'm going to specify a background image here and I'm going to space over here URL and inside this URL you specify single code dot forward slash specify asset and inside that you have background PNG file specify that background PNG here say those inches I'm going to have the result what I want just close this index file close this username module.css file and in the username right up here as you know I need to add justify Center and item Center to Center this panel this is just there we go the username component is now completely ready once you understand how to create this beautiful username component let me just make this component completely interactive using formic library and we're also going to add react or tools to display all the errors and successful messages so inside the terminal I'm going to open the client and inside this client I'm going to say npm install and I'm going to install a library called formic and we're also going to install the yak or closed using both these libraries we are going to validate and display errors and successful messages inside this application let me just play the screen close this terminal and inside this username.js right inside this component at the top here I'm going to say import toaster from the app autos and then I'm also going to import in the object use format from format I'm using this formic library to access the data of the user form and we're going to validate that user data using this use format so insert this user component here at the top we need to First say constant for make is equal to use formic I'm going to call this use for me so and inside this hook we need to First specify the initial values to the form so if we specify here initial values and inside this object I'm going to specify the username this are there as a second argument I'm going to specify validate on blur false and validate on change is going to be but I wanted to validate the user input text box only when I click on the submit button so for that I use both the statement just for that I'm going to specify here comma and say here on submit so when the user click on the submit button I'm going to call this a sync function so we pass here async values and call this function something like and inside this function just ctrl.law these values because of that use this Atomic object and then specify that to the form when you scroll down here you can notice we have the form so this form you can specify here on submit event so you call here on submit and in this curl braces you call forming object dot handle submit and just for that you need to specify value to this username when the user specify that value inside the input text box so right inside this input text box right here and here I'm going to call a spread operator and say warmac get failed props and inside this gate field props inside a single code I'm going to specify the username this property name this one I'm going to space over the same property name right yeah so whenever I change and specify value to this input text box is going to pass that value to this username property and we have that value right inside this initial value let me just say the changes and now if I specify here example and click on the let's go you can see I'm going to have the username with the example value let me just validate this input text box so what I'm going to do is at the top here I'm going to add another property called validate and to this validate I'm going to specify a function so I'm going to create this function inside the helper folder so inside the source here I'm going to create a new folder with the name helper and inside this folder right here I'm going to create a file called validate.js and inside this file I'm going to validate this user input text box so I'm simply going to first create here a command and say validate user name and here I'm going to create a function username and this is going to take two arguments first is error with the default value empty object and then take the second argument which is values just or that here I'm going to say if if we don't have values dot username then call the error dot username is equal to and then I'm going to space it over here my error message user name required instead of using this text I can just display the message using react or lost at the top I can say import post from via photos and then inside of this string here I'm gonna say close dot error and inside this error here in the single code I'm going to say username required just like this just out of that okay I'm going to say l save if values dot username it includes I'm going to call here Dot includes if it is include empty string then execute this if block and here I'm going to say error dot username is equal to toast dot error and inside this error I'm going to say invalid username just like this at the end don't forget to return the error object so if we have error only then we have value inside this error object once I create this function I can reuse this function throughout this course so I'm going to minimize it and at the top here I'm going to create the validate function of the username so here I'm going to say a command and say validate login page username and here I can say export a sync function and the function name is username validate then here I'm going to pass values and right here I'm going to say constant errors is equal to and then I'm going to call this a user verify function this one and as a first argument I'm going to specify an empty object and for the second argument I'm going to specify values this variable let's start that right down here I'm going to say return save the changes copy this username validate function in the username right up here you have to just import that you have to say here import and in the object you need to say username validate from double dot or slash and inside that you have the validate file the call that user invalidate here and then specify that to this validate property just like this so whenever you click on the let's go button it's going to first validate the input text box and then return the value of it now just for that let's display this error this those error Whenever there is an error inside this validation so what we have to do is you have to copy this poster and then specify that right down here just out of this container so at the top I want the error message so I'm going to specify the toaster here specify the position so position is going to be top Center and specify a reverse order is going to be boss see the changes and now when you click on the let's go it's going to return the data what I want but if you remove this example and try to submit this form without the username you can see you're going to get this error message username required and if you specify here empty string and click on the let's go you can see we have an error invalid user so whenever there is an error this form won't going to execute instead you will get an error message at the top now once we have the user component let's create the other components and complete this UI now let's move to the password component so right here I'm going to specify password and let's create this password component so instead of creating this password component right from the scratch I'm going to just grab all the data from the username component and specify that to the password component let me copy this complete file and then specify that with the password so I'm going to paste all the code of the username component right inside his password and then I'm going to change this username to password save this file and then I'm going to have the same component right inside this password for that let me change few things inside this password so as you know we are not using username we are using password so I'm going to specify here password copy this scroll down and here you can see we have to change this username to password to start that scroll up and here I'm going to change this validation as well so inside this validate right here I'm going to create the validation for the password so inside this validate right down here I'm going to create a function for the password so I'm going to say here validate password and here I'm going to say function password verify and inside this let's create errors object with the default value empty object and pass values to it and inside this verify password let me say if we don't have values dot password if you don't have value inside the password text box then say errors Dot password is equal to and then say toast dot error and inside this specify password required just start that and say if values dot password dot includes if it is include empty string then specify error dot password is equal to those dot error and inside this error display wrong password something like that and just for that right down here I'm going to say else if values dot password dot length if it is less than 4 and inside this I'm going to copy this statement visible that here and change this error message so I'm going to say password must be more than four characters long these are that here I'm going to say else if and then inside this if statement I'm going to say if the user specify a special character inside the password only then the password is validated otherwise we're gonna return an error message so at the top here I'm going to say constant spatial characters and then I'm going to specify here the regular expression something like this you can grab the spatial character regular expression on the Google as well if you don't have any special characters inside a password so I'm going to say here special character DOT test values dot password if you don't have any special character inside the password then I'm gonna copy this let me space over that right here and here I'm going to say password must have special character that's it and at the end just out of this if statement right down here I'm going to say return errors I'm going to return this error data changes minimize this scroll up and here I'm going to create a function for validate password so here I'm going to say export a sync function password validate this is going to take values and inside this I'm simply going to say constant errors is equal to password verify and this is going to take MP object and value and right down here I'm going to say return errors that's it just copy this password validate save this back to the password right here import the password validate here at the top from the validate file and then specify that right here it is validate properly and don't forget to change this placeholder as well so scroll down the input text box right here this is for the password just like that save the changes and just out of that let me change this link instead of this not a member now I'm going to say forgot password if the user forgot the password I'm going to redirect the user to the recovery page so here I'm going to specify a link of the recovery component and the text is going to be recover now and just for that let me test this password component here if I leave this password as it is and I'm going to get this error message if I add here a space and click on the let's go oops I think I'm going to spell something in the validate right here I just misspelled this password now reload the browser if I click on let's go is going to return required password if I add here a space and try to click on the let's go I'm also going to get an error message from password and if I say here admin and if the password length is less than 4 character I'm going to get an error message that the password must be more than four characters and if the password length more than 4 characters and when I click on let's go I'm also going to get an error message the password must have a special character so if I have here a special character like at the rate one two three then this is going to be the valid password you can see and now instead of typing this password every time when I submit a form I can just simply back to the password and then specify the initial value right yeah data changes and now when I reload the browser I'm going to have that initial value so I just need to click on this button and move to the next component now instead of let's go let me rename this to sign up here I'm going to say there it is so I'm going to have that text here now because this is the type of password input text box you can change this to password but just for the example I'm going to leave this to text to start that let me just create the recovery component so when you click on this record now it's going to navigate you to the recovery component so instead of creating this recovery right from the scratch let me copy this password component open the recovery component and right here I'm gonna paste all the code of the password component just like this change this password to recovery so we have the same component right inside this decode it out because of that let me change few things here at the top right up here instead of this hello again I'm gonna specify recovery and I'm going to get rid of this text right from here and specify that and specify here enter OTP to record password just for that I don't need this user profile inside this recovery let me get rid of it and then to this class name I'm going to specify padding raw 20. just for that before this input text box right up here I'm going to add a spawn tag enter this Pawn let me space over some development classes first so I'm going to specify here padding by four text SM text left text Gray 500 and then inside this spawn tag right here I'm going to specify a text which is enter six digit OTP then to your email address save your changes and I'm gonna have this message before this input text box you can see I'm going to create here a div and say here dot import and specify text Center and inside this div I'm going to grab this Fanta and this and protector I'm going to specify this one and this input text valve inside this division tag right here let me just zoom out a little bit so we'll see everything clearly so inside this div after that we have this button and then just down here instead of forget password Here we say can't get OTP if you can't get OTP then click on the button so we call here button with a class name text thread 500 and then here I'm going to say recent instead of this to property because to the button we don't have this two attribute get rid of the link and here we have the button just like this save the changes and here I'm gonna have the result and inside this recovery component we are not using format so let me get it off all the formic code right from this component this is changes and we're going to have the result what I want now to start that let me change this password placeholder to OTP that's it these are that let me create the reset password component so if you open the reset component then you will get the reset so this is going to open the reset component this one what I'm going to do is I'm going to copy all the code from the password and specify that inside this reset component and then at the top I'm going to change this password to reset and save the changes we're going to have the same component inside this reset as well but here I'm going to change few things so I'm going to scroll down and then I'm going to get rid of this hello again and here I'm going to say reset then get it of this text and specify here enter new password inside this form I'm going to get rid of this profile picture right from here then add here padding top 20 and then after that here I'm going to add two input text box so let me first copy these first input text bar and specify that right down here first text box is for password and second is for funform password so I'm going to specify here confirm PW D so the second text box is for confirm password just for that I'm going to change this placeholder as well the first is for new password and second is for repeat password then I'm gonna get it all this there right from here we are not using it inside this reset password and then scroll up get rid of this password right from here and then specify here confirm password this one and the value is going to be empty string if you want you can specify here a password as well verify specify here admin at the rate one two three then I need to space over the same value inside the confirm password as well otherwise you will get an error message so to get the error message and to validate this input text box you have to just validate that using this function so let's create the validate function open the validate.js and right here let's create a function to validate this reset component so write down here let me just separate the the usable function from this export function something like this here I'm going to add a command and say validate we say password and inside this I'm going to say export a sync function the function name is reset password validation it's going to get values and inside this I'm simply going to specify this statement this one constant password values just like this and then here I'm going to say if values dot password if it is not equal to values Dot confirm PWD then call error dot exist is equal to toast dot error and inside this error message I'm going to say password not match and then at the end don't forget to return errors this variable just copy this reset password validation there are the changes back to the reset.js and here you have to specify the reset password validation and don't forget to import that at the top something like this oops I think misspell something in the validation here we need to specify errors nothing the reset password is now ready if you want you can add some style and add some width to this panel so if you want you can scroll down here and do this there you can specify Here style is equal to width is going to be 50 and just for that just change this text of this button to reset there we go so the reset component is now successfully ready next let's take a look at how to create register and profile component now once you understand how to create reset we cover password and username component let's take a look at how to create the register component so if you're back to the home route and click on the register now you are then redirect to the register component let's take a look at how to create this register component so I'm going back to the password component copy all this code right from here close all these files and then I'm going to open the register.js and here I'm going to paste all the code of the password component something like this change this password to register when I save the changes I'm going to have the password component here this are there inside this initial values inside the register component I'm going to have here three input text boxes first is for email second is for username and third is for password I'm going to leave this password field as it is and inside this username I'm going to specify example one two three and then I'm going to specify here an email a demo email just start that scroll down instead of hello again now I'm gonna say here register just for that instead of this text now I'm gonna say here happy to join you scroll down and now instead of this image in the registered component we are not going to display the image instead we are going to allow user to upload their image so inside this division tag right here I'm going to create a label for the image so I'm going to leave this HTML for property as it is just for now and inside this label I'm going to grab this image and specify that just like and just order this label right down here I'm going to say input of the type file keep in mind you have to specify here input of the type file and then specify here ID the ID should be profile and you have to specify this ID right here it is html4 property keep in mind the IDE should be same these are that I'm going to specify here name which is profile here I'm gonna have this input text box for the password change this to email duplicate this two more time and the first text box is for email and then I'm going to specify here aspect because this is the required field then I'm going to specify the username and this is also a required build I'm going to pass your asterisk and this is the password don't forget to change these values as well this is the username and this is going to be the password like this and just order that instead of sign in here I'm going to specify the register button and just down here instead of forget password I'm going to say already register if the user is already registered then redirect him to the login page so we just specify here or forward slash login route and then change this text to login now just like this now just out of that I'm gonna get rid of this juice file element so I'm gonna back to the username Style I'm going to open the username module.css right here I'm going to say input of the type bio and I'm going to space over here display now save the changes and you can see and let me just add some width to this register so I'm going back to the register and to the save right here let me add a style add some width to it which is going to be 45 and then if you want you can add some top padding as well save the changes and reload the browser when I click on the profile it's going to open a window and from here I can select the image and upload that inside my register form but before that you need to get the value from this input type file so for that I'm going to create a function so inside this register right up here here I'm going to add a command and say format doesn't support the file up code so we need to create this function so I'm going to say here constant on upload is equal to async event and then return a function here I'm going to say constant base 64 is equal to and then here I'm going to convert the file into base64 and store that inside this variable and then we say about that variable to the state at the top right up here I'm gonna say constant in the array is specify file and say by is equal to use state I'm going to first import this use State at the top you will notice and then use that right yeah and then I'm going to specify value to this file right inside this on upload so right down here I'm going to say set file and specify basic report now just like that let's create a function to convert this image into base64 so we can store that image in the database so inside my project inside this helper component right here I'm going to create a new file name this file convert dot j and inside this convert dot JS right here I'm going to convert the image into base 64 format so we can store that image in the mongodb database and I'm going to say export default function and the function name is convert to base 64 and this is going to take file as a argument start that right from this function I'm going to return a new promise and inside this promise I'm gonna call a callback function with resolve and reject parameter something like this and here I'm going to say constant file reader is equal to new file data I'm going to create a new instance of file reader and specify that to this variable to this file reader variable and here we need to say file reader dot read as data URL and then specify this file as an argument you saw that right down here you have to say file reader on low so when the file is lower call this function and then return a resolve promise so call resolve file reader dot result and if there is an error called the file reader dot on error is equal to and return an error message so call here an error and say reject with error that's it save this file hope this convert to base64 close this file back to the register and at the top you have to import this function so you have to say here import to base64 from double dot forward slash specify helper folder and inside that we have the open what let's start that copy this convert to base64 scroll down here you have to specify that function just like this and now because this is going to return a promise I need to specify here away so once you have your result inside this variable we specify that to the state file once we have the converted base64 value inside this file variable we can now use and return that file from this on submit function so right here we can simply say values is equal to away object dot assign and we are going to create a new object so I'm going to say here values and create a property to the values object profile and the value is going to be the file the file variable this one so I'm going to create a new property inside this values variable from the format I'm going to return this three object and when the user click on the submit button I'm going to add one more property call profile and specify this file object data to that profile and if we don't have anything inside this file return nothing just like this so now inside is values we're also going to have the profile properly now these are that I'm going to use this file right here if the user let us fully select the file I'm gonna return that file otherwise turn the default of that just like this to this file and just out of that when you upload a file you need to call this on upload another function right down here this input you have to say here on change on a block that's it back to the project select the profile and click on open oh something is missing yeah I think I misspelled something here I need to specify the file object here so to get the file from this on uploader you have to specify here even parameter dot Target Dot file and from the files you will get your image as a first array index so you call here zero so inside the files you're going to have your multiple image I'm just going to get the first name and then specify that to this convert to base64 function so this function is going to convert the image into base64 specify that to the variable and then we specify that value to the state file this state file is going to specify a value this file variable and this file variable is going to change this image save this file reload the browser and now if I select the image click on open you can see I'm gonna have my image inside is a register form and now when I click on register I'm going to have my data as a response just for that let me add validation to this register form so inside this validate let's create a new function to validate the register form so inside is validate.js right here I'm going to create a command and say validate register form and inside this I'm going to say export a sync function the function name is register validate or you can say validation you're going to call values and right inside this I'm going to say constant errors is equal to username verify I'm going to go this function username verify right here to the default value I'm going to pass object and pass values then I'm going to say here password verify I'm gonna call this password verify function just like this and as a first argument I'm going to pass this error variable this one and then I'm going to call here comma and pass values and just after that I need to validate the email as well so for that let's create a new function so right down here I'm going to say here validate email so down here I'm going to say function email verify I'm going to specify the default value error and values right inside it I'm going to say a values dot email if we don't have value inside it inside the email property then return error dot email is equal to sourced dot error and I'm going to return error email required then I'm gonna say else if values dot email Dot includes if it is include empty string then execute errors Dot email is equal to those dot error and I'm going to return error message wrong email and just out of that right down here I'm going to say else e I'm simply going to call Here regular expression something like this and say DOT test values dot email so if the email is matched with this regular expression of the email then return error.email is equal to Source dot error inside that error I'm going to say invalid email address that's it and at the end I'm going to return error this variable and just out of that let me copy this email verify function and then specify that right yeah then specify error object and value this one and don't forget to return errors that's it now the register validation is now successfully ready let me copy this register validation save this file back to the register at the top instead of password validation now we import register validation and then we specify that right here now the register form is now successfully ready let's move to the profile component and finish the UI of this front app now once you understand how to create this register component let's take a look at how to create the profile component so just back to the profile route so I'm going to copy all the code from the register component and then specify that to the profile component inside the profile I'm going to paste all the core of the register component something like this change this register to profile let's start that save this file I'm gonna have the same register component inside this profile route these are that we have to change few things here so scroll down and here you have to change register to profile then you have to change this happy to join you and change this to you can update the details just like that here you have your profile picture and then you have your input text boxes but what we are going to do is inside this division tag right here I'm going to create a flexbox so we create here a div with the class name and to this day with spacebar click width is going to be 3 by 4 and GAP is going to be 10. inside this div I'm going to add the first name so let me copy this input type specify that here and this is for the first name I'm going to change this to first name then let me duplicate this input text box right down here and this is for the last name I'm going to change this to last name just like this just for that let me duplicate this there right down here like this and get this input text bar and specify that just try it yeah and this post input text box is for mobile so I'm going to specify here mobile and I'm gonna get it out this placeholder to mobile number just out of that let me duplicate this again copy and paste this division tag right down here just like this and then inside this div you have to just change this mobile to address and then change this placeholder to address get rid of this input text buff right from here get rid of this input text box copy this button and specify that right here get rid of this input text box you're going to have the result something like this and now what I want instead of mobile number here I'm going to specify address and move this button right down here so I'm gonna get it out this division tag right from here change this to address there we go if we have the address and the button and then instead of already register here we specify come back later and then we call here a button with the text logo just like this so if you want to log out you can click on this logout button and log out from this application now these are that at the top right up here you have to change these initial values you have here a first name record here first name then call the last name then you have your email your mobile number so specify here mobile and then you have your address below the browser and you're going to have the result what you want just out of that let's validate this profile page so back to the validate right down here I'm going to create command and say validate profile page so here I'm going to export a sync function and the function name is profile validation with value and inside this profile validation we are just going to validate the input type email so I'm going to say here constant error is equal to email verify or the default value and value I'm just going to return errors that's it we're just going to validate the email save the changes back to the profile import this profile validation right here and pass that right down here just like this just for that let me just add some custom styling to this profile page so what I'm going to do is I'm simply going to create a new file of style inside this style file right here I'm going to create a file called profile dot module dot is and let me just import that at the top so inside this profile right up here just out of this dot CSS right down here I'm going to say import stand from in the double quote double dot forward slash Facebook other styles Auto slash and then specify the profile dot module dot CSS file this one save this file back to the profile model.css and here I'm going to add some styling to this panel so let me first add here glass I'm going to extend this glass class and I'm going to say here apply height is going to be 5 by 6 and width is going to be 5 by 6 so I'm going to specify 83 percent of it to this glass just out of there I'm going to specify profile image I'm gonna specify profile IMG call here apply and say with 40 and cursor pointer after that I'm going to select the text box and this is going to be apply with 3 pi 4. that's it and to apply these properties what you have to do is you have to back the profile use this extend object right down here in the backlink operator just call the battery operator and call an object and right here you have to put this variable inside the curly braces something like that then I'm going to call Dollar curly braces called extend dot glass so I'm going to extend the classes of the previous username.css module using this profile dot module file save the changes so this will just extend some properties now just for that right down here we have this profile let me grab this put that in the back date in the curly braces as you're a dollar something like that again specify Dollar in the curly braces called Stand Dot profile IMG this class data changes let's start that so the same for the text box as well right down here you have the text box place so grab it put that in the back tape in the curly braces and specify Dollar in the curly basis you have to specify extend dot text box and do copy this class and specify that right here right here right here and right yeah that's it reload the browser have the result what I want now the UI of this project is now completely ready let's move to the back end and create the backend for this application using Express and mongodb now once you understand how to create the front end let's take a look at how to create a backend for this application using node and mongodb so I'm going to open my application and close all the front-end tabs save everything and now instead of working with client now we are working with the server folder so I'm going to open the terminal solve this development server just for now and enter into the server and then here I'm going to execute a command called npm and then press hyphen y this is going to initialize This Server as a node packet so we have the package.json file inside the server these are that you need to install few libraries inside this project so you can create the HTTP server so to install libraries you have to execute a command called npm I for install and then install Express Express to create HTTP server then you have to install course for sharing data between two different domain then you have to install Mongoose to create and connect mongode database and then I'm going to install mongodb memory server to create a mongodb in the memory after that I'm going to install muter to log every request inside a console and then install node one to start the development server whenever we make changes in it when I press enter it's going to install all these libraries inside This Server folder now once you have all these libraries inside this node modules close the terminal and inside the Server create a new file the file name is server.j and inside this let me create the backend server so to create a backend server you need to First say import Express from Express now this that man is going to return an error message because in the back end you can't use import statement instead you have to use constant Express is equal to require and require your model now these are the valid statement in backend if you want to use this import statement inside the backend back to your package.json and write down here you have to add here type of model you have to add this property to the package.json file save this file and back to the server and now you can use this import statement in this application now to sort of that once we have this import course from course let's start that right down here you have to say constant app is equal to express so now this is going to create a simple Equity application and then you have to call here middleware so I'm going to call here app.use and then call here Express dot Json after that I'm going to call app.use course and then right down here I'm also going to add the Morgan Library so I'm going to open my terminal here the screen and say npm iPhone install and then install a library called Morgan now the Morgan library is used to log all the HTTP requests inside this console so I'm going to install this library inside this project inside of that I'm going to specify here import Morgan from Morgan library and right down here I'm going to say app.use Morgan and specify the tiny format just like this just for that I'm also going to add Here app dot disable and then inside it you have to specify X forward by so less hackers know about your stack just or that right down here I'm gonna say constant Port is equal to l080 and right down here I'm gonna say app dot get I'm going to make the HTTP request here let me add here a command and say http get request and I'm gonna make a get request on the root route and call here a callback function with request and response parameter something like this and then here I'm gonna say response dot status the status is going to be 201 dot Json and this is for home get request after that once we have the HTTP get request right down here I'm gonna start my development server so I'm going to say here start server and right down here just add this command I'm simply going to say app Dot listen listen to the port and then call the Handler function and inside this Handler function I'm going to say console.law in the backlink operator this device server connected to http localhost and then specify the code name just like that so now when you start your server you're going to get your server address inside your console let me save the suggest back to the package.json and right here instead of this test command now you have to say start and in the start you have to say nodemon server.js that's it now let me open the terminal here I'm going to say npm start when I enter you can see I'm going to have your message server connected to the localhost 8080 and now if I make a get request on this route if I open this link in the browser you can say I'm gonna get here a response home get request so this is a get request we get from the backend server and inside a console you will get the more gun get request console messages now once you understand how to create a backend server let's create the in-memory mongodb server and start the backend application only when we have a valid connection to the mongodb now just out of that once you have the backend server what I want I only want to start this backend server when we have a valid mongodb connection for that I'm going to create a new folder here with the name database and inside this I'm going to create a new file the file name is connection.js and inside this file I'm going to have the mongodb connection so we need to First import Mongoose from the Mongoose module and then I'm going to specify here a thing function and then I'm going to say here connect and I'm going to export this function so right down here I'm going to say export default connect instead of using the TL mongodb Atlas I'm using here a memory server once we finish the backend I'm going to replace that in memory mongodb server with the real mongodb Atlas URL so just for now at the top here I'm going to say import memory server from mongodb memory server and right down here you have to say constant mongod is equal to away and then you have to specify memory server dot create now this is going to create a new mongodb instance whenever you start your server and you have the mongodb URI inside this mongod variable so to get that specify constant get URI is equal to mongor dot get URI so inside this get URI you're going to have the mongodb order this or that I'm going to say here constant DB is equal to of 8 Mongols dot connect and then here you have to specify your mongodb url I have my URL inside this get URL variable I'm going to specify that here just like this and then console.log a message that database connected and after that I am going to return the database say the changes back to the server I'm going to say start server only when we have valid connection and then here I'm going to first import this connect right up here I'm going to say import connect from the database connection don't forget to specify the dot JS extension inside the backend otherwise you will get an error message copy this connect scroll down and here you specify your connect your function and then call then function because this is going to return a promise so if there is a successful promise we get that inside of then function otherwise we get that inside a cache function so inside then we call a callback function something like this and here I'm going to call try and catch so we call here try and catch like that and say console.log and here I'm going to say cannot connect to the server and inside the try block right here I'm going to grab this app Dot listen then specify that by it here just like this so when there is a valid connection only then I'm going to start the backend server and if there is an invalid connection I'm going to call this catch with error and here I'm going to say console.law in the double code I'm going to say invalid database connection just like this now when I say the changes right now I'm gonna get here an error message but the database is now successfully connected and we have the application running on 8080 port so let me just remove the spawning we need to back to the connection.js file and before this connect right up here you have to call mongos Dot set single code call strict query true that's it now when I send messages you're not going to get that warning so once you have the valid backend connection now you can move on and create different routes inside your backend server let's start building the very important part of this application which is backend API so to create a backend API of this app let's create a new folder inside the server the folder name is router and inside that we have route inside this I'm going to create route.js file and then inside this route.js right here I'm going to say import in the object call router from the express module and then you have to say constant router is equal to router you have to initialize this with the variable this out of this you can easily create different routes here so I can call here post methods then we can create get methods and then we can create put methods so let's create all these methods one by one but before that we need to export this router right from this file so you have to say here export default router save this file back to the server and at the top right up here you have to say import route.js file use this router as a middleware so scroll down just after this get request right down here I'm gonna say API dots right down here we need to say app dot use and inside this cos we need to First specify the end point of all these routes so we're going to specify here API so every route inside this file starts with the API endpoint then I'm going to specify here comma and then specify the router this variable now whenever you want to access your route you have to specify the API prefix just order that back your route so let's create all the post wraps so I'm going to say here router dot route and inside this parenthesis we can specify the end point so this is for register I'm going to call here register and the kind of method we are going to make is post so I'm going to pass here post and inside this post we need to specify the controller just for now I'm going to specify here a callback function like this with request and response parameter and then we're going to return response dot Json and I'm gonna return here register drop just like this now let me just test this route let me save the changes open the vs code extensions and here I'm going to install the extension call Thunder line I'm going to install this extension to test the API once you install it you have to reload your vs code and then you will find this tab here underclined open it and create new request as you know if you open your terminal your server is running on HTTP localhost 8080 so just specify that right here this is a type of post request so you pass your post then we have this endpoint register but this endpoint start with the prefix API so here I'm going to specify forward slash API then we specify the register endpoint just like this and now when I click on send button it's going to make a post request and we are going to have a result right here we are going to have a status okay and we're going to get the response back from the server so now this route is successfully ready so whenever I want to test my API I'm going to use this Hunter client just wanna I'm going back to my routes and create all the routes of this project so let's create second drop the router dot route in the single code I'm going to specify for the Slash and then specify here register mail then call here Dot and this is a type of post request I'm going to specify all the controllers after a few seconds just for now let's create all these routes then I'm going to duplicate this two more time and then I'm going to change these endpoints instead of register mail here I'm going to say Authentication or authenticate that's upon you then I'm going to change this to login so this route is used for login purpose just for that once we have all the post endpoints let's create the get methods so I'm going to say here router dot route in the single code I'm going to say photo slash user then specify here photo slash and specify a variable which is username then I'm going to call here dot get because we are making get request from this route I'm going to call here get method let me just duplicate this and change this endpoint and I'm going to change this endpoint to generate OTP duplicate this two more times and then change these endpoints so I'm going to say here verify OTP and this is used to create and reset session so I'm going to say here create reset session these are that once I have all my get requests let's create a put request right down here I'm going to say router dot route and here I'm going to specify the endpoint first so I'm going to say here update user and call here output method this or that I'm going to duplicate this and I'm going to change this endpoint to reset password that's it all the routes of this project is now successfully ready the register mail route is used to send the email then we have the authenticate route to authenticate the user then we have the login route the login in the app then we have all the gate route here this route is used to get the user with the username and then we have the generate OTP to Generate random OTP after that we have verify OTP to verify generated OTP after that right down here we have the create station and just order that inside is put right here to update the user profile and then right down here we have a reset password use to reset password so once you understand the use of all the routes let's create a controller for all these routes so instead of creating a controller inside this route file let's create a new folder inside my project so save this file inside a server create a new folder with the name controllers and here I'm going to create a new file with the name app controller.js and then inside this controller let's create controller for all these routes so here you have to say export sync function the function name is so first I'm going to create the register controller I'm going to call here register with request and response parameter something like this and inside this I'm going to say response.json register well to solve that I'm going to add a command at the top of this controller something like this so This controller is used to make a post request on the HTTP localhost 8080 on the API register and this is going to make a post request with this data now this is just a sample data to make a post request you can copy this and specify that inside a post request we'll look at that later just for now save this file just for that let me create another controller so copy this paste that right here and this is for login so I'm going to call here login and I'm going to add here a command so this is a type of post request we are going to make a post request on this login endpoint and we need to pass a body with two properties username and password these are that let me duplicate this paste that right down here and this is for the get user and I'm going to change this to get user and we're going to make a get request with this controller so this is going to make this get request so you have to specify the endpoint and the username variable value so whenever you make a get request to get the individual user data you have to make a request on localhost 8080 on the API user and then specify your username so that is going to call this get user controller just for that let's copy this specify that here and this is for the update user so I'm going to copy this specify that here let me add a command at the top and this controller is used to make a put request on the localhost 8080 to the endpoint update user and with this we're going to return the user ID and the data which you want to update so just for the example here we have the first name address and profile just are there let me copy this press over that right down here and then I'm going to change this to generate OTP now this generate OTP is a type of get request and we're going to make a get request on the endpoint generate OTP now this generate OTP is used to generate a random OTP and return that to the user now these are that once you have this right down here I'm going to copy and paste that right down here and then I'm going to call the verify OTP and this is also a type of get request on the localhost 8080 on the endpoint verify OTP and this is going to verify the generated OTP this or that let's create a controller for the create and reset session so right down here let's change this controller name to create a reset session this is a type of get request and this is going to successfully redirect the user when the OTP is invalid so this controller is used to make a get request on the create reset session endpoint so this controller is used to redirect the user to the reset password page only when the user have the value OTP for that let me copy this and at the end I'm going to paste that and this is for reset password let me copy this place over that here and this is for reset password and this is also is a type of put request or the localhost 8080 API reset password and this is going to update the user password so whenever the user specify a valid OTP only then the user can update their password so once you have all your controllers inside this file let me just specify all this controller inside this route at the top right up here I'm going to specify command and say import all controllers and here I'm going to say import and straight As controller from double dot or slash pcware controllers inside that we have app controller.j and now using this controller object now I can access all my functions let me get rid of this inline function right from here and specify here controller Dot register because I don't have the register mail controller inside this app controller you can notice I'm going to specify that controller later so let me just comment this now because I don't have the authenticate controller inside this app controller I'm going to specify here in line function so I'm simply going to say here request and response and say response Dot n now before this function I'm also going to add a middleware we'll do that later just for now I'm just going to return response dot end from this authenticate this are that over here I can say controller Dot Login just add that to this get username controller I'm going to say controller dot get user so this generate OTP as you know we have controller generate OTP then I'm going to specify verify OTP here and here I'm going to specify controller create reset session and right down here I'm going to specify controller dot update user and right down here I'm going to say controller Dot reset password this controller this one the ones I specify all the routes to all the controllers let's create this controllers one by one now once we know that how to create all the routes of this project let's take a look at how to create a controller but before we create a controller we need to define a structure of the document so inside This Server I'm going to create a new folder and specify name to it model and inside this model I'm going to define the database structure so you have to create here a file with the name user dot model dot jet that's upon you you can specify any name to this file right inside this file you create a mongoose schema so you can specify structure of your mongodb document so here you import Mongoose from the Mongoose module and you have to say here export constant user schema is equal to new Mongoose dot schema and this is going to define the structure of your document so here you pass an object and inside this object you have a definition of your so first I'm going to create a property called username and this is a type of string so I'm going to pass here as ring then I'm going to say here required required is going to be true and then I'm going to return an error message when there is no value inside this username property so I'm going to say here please provide you need username I'm going to specify an error message here and then I'm going to specify here uni is going to be true and here I'm also going to say username exit just after that right down here I'm going to specify a comma and create a second pair the second field name is password and this is also a type of string and then I'm going to specify here required true and then specify here please provide a password just out of that I'm just going to specify here unique false just out of that I'm going to create another object to create here email of the type string specify here required required is going to be true and specify here please provide a email and then I'm going to specify the unique property to true that's it and just for that I'm going to create here first name property so I'm going to say here first name it is a type of string duplicate this and specify last name and this is also a type of string now you have to notice one thing here the first name and the last name use the camel case syntax so you have to keep in mind that you have to use the same syntax when you create this field inside this mongodb schema now because we are using the same property in the front end that is why we need to define the same property here inside the model as well this are there here I'm going to specify mobile and this is a type of number so we call here a number and then I'm going to duplicate this statement just like this and then I'm going to create a field here address and profile that's it the user model is now successfully ready just or that right down here you have to export a default Mongoose model so you have to say here Mongoose dot model and inside this you have to specify the model name the schema name user and the specific structure of it so specify here uses schema that's it and if you only have the user model inside your mongodb database and use that model or return that from this user model so you can specify here Mongoose dot model Dot users use the existing model if you have that otherwise return the new one now keep in mind when you call this mongos.models you need to specify the plural name to the selection otherwise you will get an error message now because we are creating user the mongodb is going to specify the plural name to this collection so user became user so I'm going to specify the users here save the changes back to the controller and at the top right up here I'm going to say import user model from in the single code is y double dot or slash model user module.js I'm going to import the user model from this file and I'm going to use that inside this register so what we are going to do is I'm going to get rid of this response and here I'm going to say pry and catch block inside this cache I'm going to say return response dot status 500 dot send and I'm going to send the error if there is an error inside this register endpoint to sort that inside destroy right here you have to get all the data from the user as you know when you register a new user you are going to get the email the profile password and the username so we get all this data from the user so here you can call that data so say constant in the object you to structure all the user data from the request dot body and you get username password profile and email you get all this data from the user when you register a new user just note that once you get all this data you need to first check the user existence you have to say here check the existing user you have to first check the existing user so let's create a promise for that so I'm gonna say constant exist username if there is an existing username then I'm going to return a promise so specify here equal to sign and say new promise all here resolve and reject and then you need to call here a callback function just are there here you have to call user model this one and then say dot find one and then as a first argument you need to specify the username this one okay we already have the user if this function is going to return the user then reject This Promise otherwise resolve it so I'm going to first check if the user is exist in the database so that is why I first search for the username inside the database so I'm going to say here username password comma and call a function with error and user so here I'm going to say if we have error then reject it with new era and then I'm going to say here edit object if we have user so if to find one method is going to find this user in the database and return that inside this user variable then I'm going to reject the promise so I'm going to say here reject error and in the double quote I'm going to say please use uni username and if the username is empty then I'm gonna return the result this one just like let me do the same for the email as well so let me just copy this and write down here I'm going to say check or existing email I'm going to paste the code as it is and change this variable to exist email right down here I'm going to say username dot find one if the username find the email so if I copy this email variable right from the body and specify that right here if this Returns the error then reject that I'm going to change this user to email just like this so if you find the email inside the mongodb database then return this error message that please use your name email and if there is a no matching email inside the mongodb database just return resolve and at the end right down here I'm going to call both these promises right down here I'm going to say promise dot all and in the array I'm going to say exist username and exist email I'm going to resolve both these promises and then I'm going to call the then method just like this and before I call the then method let me call the catch method so inside a catch I'm going to specify error like this and say return response dot status 5 double zero dot send and in the object I am going to return an error message with enable to Hash password and inside this then right here I'm going to first check the user specify the password or not so here I'm going to say if we have the password then execute this it block and now once you have your password you all know you're not going to store the user password in the plain text instead you convert that using bcrypt JS and store that inside a mongodb database so what we are going to do is I'm going to open the server so I'm going to CD into server and here I'm going to execute a command called npm I for install and then we're going to install a library called B grip now this module enables storing the password as hash password instead of plain text whenever you want to store the user password in the mongod database you need to First convert that using bcrip close the terminal at the top right up here you need to say import big grip from Baker and then inside this if statement right here you have to say B Crypt dot hash and you have to Hash password with the salt damn just like that this is going to return promise to get that inside that method so inside then you can call Hash password and you get the result promise inside then method and rejected promise inside a catch method right down here I'm going to say dot catch with error and inside this I'm going to return this statement copy this and specify that right here and I'm going to change this error to just error so I'm going to get rid of this just like this and I'm just going to return error from this catch statement of this promise and from this inner catch I'm going to return this unable to Hash password and inside this then right here I'm going to create a new model I'm going to store the user data in the mongodb database so to store that you have to first specify value to the model you have to say here constant user is equal to new user model and in the object you specify username password and you have to specify your value of the hash password this one you are not going to store the plain text right so you need to specify here hash password then you specify the profile this variable and just for that you have to specify the email now because the name of the property and the value is exactly same I'm not going to specify here the email like this both statements are identical and you can do the same for the profile as well but here I can store the default value with the profile because profile is not a required field of this user model so I can specify here a default value just like this and right down here I'm going to return and save the result as a response right down here I'm going to say user this variable dot save and this is going to return a promise to call here then and inside this then you get the result variable and from this I'm going to return response dot status which is going to be 201 dot send and I'm gonna send a message user register successfully and inside a cache I'm going to return error and I'm going to say here response dot status five double zero dot send error or you can call this error inside an object that's upon you that's it your registered controller is now successfully ready now let's test this controller so as you know you have to make a post request on this route so copy this open the tender client specify the endpoint register with the post request and you also need a data with this request so just copy this object and then specify that right here inside the body right inside this body select the Json and right here you have to pass this object from here you have to get rid of this address this first name and last name and you just need to specify the username password email and profile just for now I'm going to specify empty string here say this and then click on send button when I click on send button I'm going to get here a message user register successfully so now the user is successfully registered inside the mongodb database to see the user data you can simply return this result with this user message better on you just start that once you understand how to register the user let's see how to create a login inside this application I want to understand how to register the user in the mongodb database let's take a look at how you can create a login route so to create a login route you need to First make a post request on the endpoint login and you also need to pass username and password with this post paper to make the login route I'm going to get rid of this response and right here I'm going to say constant in the object I'm going to structure the username and the password and we get this from request.hot body so when you make a post request on this login endpoint you need to pass both these values just for that here I'm going to call try and catch block so let me first set up the cash block so I'm going to say catch error return response dot status five double zero dot send and send the error that inside this cry here I'm going to say user model this one dot find one and I'm gonna find the user from this model and here I'm going to say in the object I'm going to find the user with the username so I'm going to specify your username and if the user model return the result promise we get that inside then function otherwise I'm going to get that inside the cache block so inside the sketch here I'm going to return error and say return response dot status 404 dot send and I'm going to send here the error user name non font so if this returns error then I'm gonna get that error and return status 404 username.com and if this find one is going to return the result promise then we're going to get the user inside this user variable like this and here I'm going to say Big crib dot compare I'm going to call a function bcrypt dot compare to compare user input password with the store password inside a mongodb database as you know we store the hash password inside a mongodbit database so we need to compare that password with the user plain text to compare that I'm using big grip dot compare function so inside this big crypt.compare you need to First specify the user password so I'm gonna say here password this variable and then you need to get the password from the database and specify that as a second argument so as a second argument you need to specify the encrypted password so to get that password as you know you have this user you can get that password from this user object specify your user dot password that's it this is going to return resolve promise then we get that inside this then method otherwise I'm going to call the catch method and inside this cat I'm gonna return error so I'm just going to return here response dot status four zero zero dot send and in the object I'm going to return error password does not match I just saw that inside is 10 right here you can have password check if we don't have the password check we don't have any value inside it then return response dot status and I'm going to return the same error right from this then function just like this and instead of password does not match here I'm going to say don't have password just like this I just saw that let's create JWT token now let me first explain what is JWT token JWT is a Json web token defines a token for authentication so whenever you want to authenticate the user Json web token is going to release the authorized token so the user can use that token to authenticate the user if you want to know more about JWT token I have a complete video on it you can check out that video from the link provided in the description yes for now let's create a JW token so to create jwd token you need to First install it so open the terminal clear the screen here you have to say npm iPhone install and specify here Json web token and install this library in This Server just like this play the screen close this and at the top right up here you have to say import JWT from Json web token so you simply have to say here JWT Dot sign and this sign method is going to first take the payload as a first argument as the second argument it's going to take the jwptc grid and as a third argument we specify the expiry tag so as a first argument let's first specify the payload here I'm going to specify the user ID but I'm going to first get the user dot ID I'm going to get the user ID from this variable this one I just saw that I'm also going to return the username I'm going to say here username user dot username and after that as a second argument you need to specify the JWT secret so I'm just going to space over here secret that's it and then I'm going to specify here comma and specify X bars in which is 24 hours so this statement is going to create a token and return that so just get that token inside a variable to see here constant token is equal to get that token inside this variable just like this and right down here you have to say return response dot status 201 or 200 dot send and this is going to return an object with message login successful and with this message we are also going to return the username user dot username and the token this one we are going to return all this information with this request now instead of this simple secret I'm going to call the base64 value and specify that here you don't need to specify a very simple circulated your application so what you have to do is you have to create the base64 value inside the config file and then specify that right here let me show you how inside This Server here I'm going to create a new file with the name config.js or you can create dot EnV file as well that's about you I'm going to create your config file here I'm going to say export default object from this object I'm going to return JWT secret and in the double quote I'm going to specify the JWT secret to generate the base 64 value I'm going to call my terminal and here I'm going to specify a command open SSL then specify random so just call here Rand hyphen base64 32. when I press enter it's going to return a value just copy it and specify that right here so now this The Secret of your JWT token copy it save this file and just back to your dot ignore file and make sure to First ignore this config path because we are not going to submit this file to the server so I'm going to say here server photo slash config dot JS just like this close this dot ignore close this config file and here at the top right up here I'm going to say import e and V from double dot photo slash specify concrete dot JS and from this dot EnV you can access the secret variable so just specify here e and V Dot JWT secret that's it now your login route is now successfully ready save this file minimize this login route let me show you how to test this route go back to your new request and here you have to first make the post request to register a new user now because we are using the in-memory mongodb server so whenever we restart the backend server the data of the in-memory mongodb server get wipe so that is why we need to register the user again so I'm going to click on the send button it's going to register the user and now I'm going to specify this end point is login endpoint to copy it specify that here and this is a type of post request so we pass here post and then as you know with this login you know to specify the username and password so just specify the valid username and password here I'm going to get rid of both this statement right from here just like this save the changes and now when I click on the send button you can see I'm going to get here a message login successful and we have the username and the JWT token now you can use this JWT token to authorize the user now before we move on I want to validate the user first so whenever you call the login route I need to First validate the username and after that I'm going to call this drop so for that I'm using a middleware so at the top right up here let me create a middleware for the user so I'm going to say here middleware or verify user right down here I'm going to say export a sync function verify user and this is a type of middleware so it's going to get request response and the next function just like this then inside this I'm going to call try and catch block I'm going to call here try and catch inside this header here I'm going to say return response dot status four zero or and send the error object with authentication error just start that inside is then here I'm going to say constant username I'm going to get the username value from the user is equal to and here I'm going to say if the request dot method if it is equal to get then return request dot query otherwise return request Dot I'm going to make this middleware available for the get and for the Post request so if there is a get request we get the data from request.query and if there is a post or put request I'm going to get the data from the request.body and just out of that I'm going to store that inside this variable right down here I'm going to say check the user existence and here I'm going to say let exist is equal to away user model dot point one and if the user find the username inside the mongodb database then return that inside the exist variable and here I'm gonna say if we don't have anything inside this exit then return response dot status 404 dot send and I'm going to send an error message that can't or cannot find user and if this model is going to return that username that I'm going to call the next function this one so this middleware is useful to verify the user so if there is a resistor user inside a mongodbit database then this middleware is going to move to the next controller otherwise it's going to return error messages to save this file and you have to call this verify user right inside this account so before this login right here you have to call controller dot verify user just like so this middleware is going to first verify the user and then move to the login drop so if there is a valid user in the mongodb database only then we are going to check for the password otherwise we are going to return the error message from this middleware and if I try to test this API then we are going to get the same result so once we understand how to make this login route let's see how to get the user information using get request once you understand how to create a login route for this application let's take a look at how to get all the information of the user using this get request so if you're back to the route then you'll notice here inside this get methods we have this user this username and we call this get a user function so this function is going to return all the user information as a response to get all the data of the user you have to make a get it paste on the user example one two three endpoint so let me first create this get user endpoint so let me get rid of this response right from here and here I'm gonna say constant in the object I'm going to destructure the username from the request dot params now because inside this URL we are going to have the value of the username we are going to get that value inside this username variable as you know if you back to the route here we have the variable username and we specify value to this username variable when we make a get request so when we make a get request is specify value to the username so here for example the username is going to have this example one two three value and we get this value from the request.param and to structure that with this variable these are the once you desstructure it here I'm going to call try and catch block inside this cache I'm simply going to return response dot status 404 dot send and I'm going to send the error and I'm going to say here cannot find user data these are that inside this try here I'm going to say if we don't have the username if we don't have any value inside this username then return response dot status 501 dot send and then I'm going to return error invalid username and if we have value inside this username then I'm going to say here user model dot find one and then I'm gonna return here username and then as a second argument I'm going to call a function with error and the user so inside this function I'm going to say if we have error then return response dot status 500 dot send error in the object and just for that I'm going to say if we don't have user if this function won't return any user then return response dot status 501 dot send and then send error who don't find the user just after that if the statement successfully find the user then we are going to return that user so just say return response dot status 201 dot send and we're going to send the user variable this one that's it your get user is now successfully ready let me save this address and back to the new request and right now you can see inside the activity log on the left side here we have two post requests one for the register and second for the login let's use this activity log to make a request so I'm going to select the post request for the register and first register the user this will register the user once you register it let's make a get request so click on new request and here you have to specify the endpoint user example one two three because the username is example one two three that is why we specify here endpoint user example one two three and this is a type of get request we select get get rid of the statement and save the changes when you save the changes you can see inside this activity log you're going to get here your get request and now when you click on send button you can see you're going to have all your user data as a response but what I want I don't want this password field as a response from this endpoint so what we can do is inside this controller right down here I can filter this value and say here constant append restructure the password from the user right from this variable and then I'm going to get all the rest of the properties inside spread rest variable and then I'm going to return this rest right from this request just like save the changes first make a post request because we are using the in memory database and then back to the get request and now if you make a get request on this route you're going to get the result something like that this result is coming from the mongos so what you have to do is you have to create a new object and return only the Json data so back to the app controller and instead of just a user you have to say here object dot assign and assign a new object with user dot two Json just like this you have to convert this user into Json format and then assign it to the new object and then return that to this properties now let me just add here a command remove password from the user the mongoose return the unnecessary data with this object to convert it into Json and then return that from this object so now if I say the changes and do the same if I make a post request first and then make a get request you can see I'm going to get the result what I want right inside this result I won't get the password field if I have all the necessary data what I want so this is what I want from this get user endpoint these are that let me show you how to update the user using this put request now just out of that let's take a look at how you can update the user using the update user controller with a port request so if you open this port request then you will notice here you're going to make the request to this update user endpoint and we need to pass IDE with this request the user ID and then we need to specify the data which we want to update so inside this port right here I'm going to first call the try and catch block and in the error I'm going to return response dot status 401 dot send and I'm going to send the error just like that and in the try right here I'm going to say constant ID is equal to request dot query dot ID we're going to get the user ID from the query parameter so just out of that I'm going to say if we have ID then execute this if block otherwise execute the else block and inside this else I'm going to say return response dot status 401 dot send and I'm going to send the error user not pump and if we have a valid ID inside this if block then I'm going to say constant body is equal to request dot body so we get the data from the body and store that inside a body variable and now I can simply update the data so I'm simply going to say user model dot update one I'm going to call a method of this user model update 1 and then here you need to First specify the ID so in the object I'm going to specify underscore IDE ID as you know mongodb is going to store his data inside the ID property so the ID property is looks something like this you have underscore and the ID so you need to specify your ID to this property and then as a second argument to specify the data which you want to update I'm going to specify this body this variable I just saw that I'm going to call here a function so I'm going to say here function with error and data just like this and here I'm going to say if we have error then throw that error inside this cache block and just start that just add this if right here I'm going to say return response dot status 201 and I'm going to send a message MSG record updated just like this the update controller is now completely ready let me just save the changes we have to just open this update user endpoint so create a new request with the update user endpoint then select the put request and in the query parameter right here you have to specify the ID so specify here ID then the value is going to be the user ID so just copy this user ID but right now I restarted my development server so I need to register the user again then get the user data and then specify that to this ID so I'm going to leave this value field as it is these are that in the body I'm going to specify the data which I want to update as you know if you're back to the register right here we have this data let me copy this and specify that right yeah so this Json just like this and I'm just going to update the email and just get it off all the data right from here and specify here email one two three four save the changes this is going to add my HTTP request right inside this activity log so what you have to do is you have to first register the user because we are using the in-memory mongodb database once you have the register user get all the data of it just make a get request once you have your ID copy it back to your put request and in the query you have to specify that value the ID value and then select your body you have to update this email with example one two three four and click on send button when you click on send you can see you have a message called record updated and if you make a get request again you will notice this will update the email value when I make a get request again you can see now you have the example one two three four at the gmail.com so this will successfully update the user data if you want you can update the profile as well so if you're back to the put request and if you add your comma in the double quote profile and you specify here base 64 image like this save this file click on send button then you will get the same response but when you make a get request again it will update the profile picture so if you make a get request you can see this is going to update the profile so this is going to update all your data of the mongodb server now let me close all this stuff right from here and then let me show you how to create generate OTP and verify OTP controllers once you build the update user you can notice when you make a put request on this route you just need to get the ID of the user and make a request we're only going to allow the authorized user to update their value so we need to just make some changes inside this boot request so what we have to do is we have to call the middleware to this update user we need to get a token from the user and then pass that to this update user so when we have a valid login user then we are going to allow user to update their value so for that inside the server right here I'm going to create a new folder with the name middleware and inside this middleware I'm going to create a new file the file name is auth.js that's upon you you can specify any name to this file right inside this file we need to say export default unsync function and now because this is the default rsync function we don't need to specify any name to it if you want you can specify name to it auth that's upon you and right from this function we are going to call run and cash block so I'm going to say here try and catch and right from the sketch we are going to return response at our status so we need to call here request response and next function now because this is a type of authentication middleware so let me call here on middleware I'm going to call here request response and next function so inside this cache I can say response dot status 401 dot Json and in the object I'm going to say error authentication build and in the try block right here I'm going to first access the authorize either to validate request for the validate request I'm going to get the authorized header first so to get the authorized header you can call request dot headers dot authorization and from this authorization property you can get the authorized header so when you make a put request you're going to pass the authorization header right inside this auth barrier right here so you have to first login and get the user token and then pass that user token right inside this barrier token and once we have that variant token we get that using this authorization property let me show you if I just store that inside a variable constant token is equal to and if I say here response dot Json open save this file back to the route so at the top right up here you have to import auth from the auth files to specify here Dot photo slash specify middleware and call auth.js and then you have to call this middleware before this put request right here so this statement is going to first call the middleware and then call the controller let me save this file save this file back to the printer client and let me first register the user click on login route and log in the user get this access token so just copy it back to the put and inside this barrier right here put the authentication token as it is and click on this send button when you click on it you'll get this response you will get the barrier text with your authentication token now what we have to do is we have to separate this barrier text from this token and just get the token from this Authentication so now this token is going to return this X so we have to just separate this text from this token so to separate that we can simply specify here dot split with space now because we have space right here you can notice we can split both this statement and store that inside an array so split is going to return an array so we pass here a square bracket and pass here one now because 0 is going to represent this barrier effect we're going to pass here 1. so 1 is going to return this token so once you have the token inside this token variable now we can move on and re type the user detail of the logged in user so right down here I can create a command and say retrieve the user details of the login user to retry the user detail you have to call a weight JWT verify function so at the top I'm going to first say import JWT from Json web token and from this we have to call JWT dot verify and then call the token this variable and your authentication secret so at the top you also need to import e and V from double dot forward slash whichever config Dot JS file and from the EnV as you know inside this EnV you have a and v dot JWT Secret specify that right here so now this is going to return the decoded token so just know that inside a variable specify your constant decoded token once you store that inside a variable you can just pass this variable with the request you can specify here request dot user is equal to decode token and then you can call this decode token right yeah just like this so now let me show you what do we have inside this decode token say the changes let me do the same so first register the user login the user and specify this request right here and then click on send button you can see you're going to have the response something like this right from this decode token I'm going to get the user ID username and the expiry time so what we're going to do is we are going to get this user ID from decoded token and then specify that to this update user right here so I'm going to just copy this user ID in the app controller right here I'm going to comment this and right down here I'm going to say constant in the object I'm going to call this user ID is equal to request dot user from this decode because we specify this decode to the user property so when we call this middleware we are going to create a property called user and specify this decode to contour and now I can access this property inside my update route right here and once you have the user ID I can specify that by here just like this so now only the valid user can access this update Route save the changes and now let me show you how you can update the user information I'm going back to the registered out first register a new user then back to the login route login with the username and password get this token copied back to the put specify this token right here inside this barrier token and then I'm going back to the body and here I'm going to update this profile with the examples one two three four gmail.com and then I'm going to update this email and this profile if I make a get request you will notice I'm going to have example at gmail.com and don't have anything inside this profile now let's make a put request and update this value now because you get your IDE from the object you don't need to pass any query parameter just like this and now when I make a put request you can see I'm going to get here a response but what I want inside this path instead of this response I'm just going to call this next function just like this save the changes this is going to restart the server so first register the user log in the user get the user token copy it make a get request and see the data first so here we have the email so here we have example gmail.com and we don't have anything inside this profile and just back to the put get rid of this barrier token and paste the updated token here get rid of this ID and in the body I'm gonna update the email and profile now when I click on send button you can see I'm going to get here a message record updated now if I make a get request again this is going to update my value you can see now this is a correct way to update the user information let me close all these tabs and just for that let me show you how you can generate the OTP and verify the OTP from the backend application let's see how to do it now I'm using this generate OTP endpoint only when the user tried to reset their password so whenever the user try to reset their password we are going to call this endpoint and then generate the OTP and then we're going to verify that OTP using this verify OTP endpoint so let's see how we can work with both these endpoints one by one so let's first generate the OTP right inside this generate OTP controller right here I'm going to first create a variable and in that variable I'm going to specify the generated OTP before we create this we need to install a library called OTP generator so execute a command called npm iPhone install and then specify here OTP generator press enter now once you've done that this will install the OTB generator library inside a project clear the screen close this tab and at the top right up here you have to say import OTP generator from OTP generator and from this object right down here inside this OTP generator you have to specify here OTP generator dot generate now this is going to generate the OTP so you have to first specify the length of the OTP so I'm going to specify here 6 and then I'm going to specify some options here so inside an object I'm going to say lower is alphabet is going to be false because I don't want any lowercase alphabet inside this OTP so I'm going to space over here lowercase alphabet false and uppercase alphabet is also going to be false so I don't need a lower and uppercase Alpha weight inside this OTP I just saw that here I'm going to pass comma and say special characters pause once you specify all these three properties so this statement is going to generate the OTP with the length of six numbers these are that you have to specify here a weight and then store this inside a variable so I'm going to say let OTP is equal to and I'm going to store this inside this OTP variable but what I want I want to create here the app locals variables so I can access this OTP variable inside this verify OTP controller so I'm gonna back to the middleware and inside this auth.js right here right down here I'm gonna create the middleware for the local variables so I'm going to say here export function local variables and then I'm going to call here request response and next function and write down here inside these local variables I'm going to make a middleware which create this variable only when we call the generate OTB so I'm going to just add here request dot app dot locals you can access the local variables using the locals property of the app so you just have to specify request.app.locals is equal to and then specify an object here I'm going to specify here a property OTP which is going to be null the initial value of this OTP is now and then I'm going to say reset session and this is going to be pause I'm going to create here two properties inside this local and then I'm going to call this next just after this request to start that I'm going to save this file copy this local variables open the route.js file and at the top here I'm gonna pass Pokemon and import this local variables from the auth.js file and write down here as you know we have the generate OTP right here I'm going to pass this middleware something like this I just heard that I also want to verify the user before we generate the OTP so I'm going to copy this controller verify user and then specify that right yeah or you can first verify the user and then create the variables something like this so I'm going to first verify the user and then create variables and then access that variables inside this generate OTP let me save this file back to the app controller and instead of let OTP now I can simply get rid of this statement and say request dot app dot locals dot OTP so now I'm going to access this property inside this app controller now because I'm going to pause this middleware this generate I can access this OTP inside this generate OTP endpoint these are that right down here I'm going to say response dot status 201 dot send and I'm going to send a code request dot app dot locals dot OTP so I'm going to return that OTP with this code property and just for that when you have this OTP you can just verify that using this controller so to generate the OTP you have to make a get request on this generate OTP endpoint we will test this generate OTP after a few seconds just for now let's build this verify OTP right down here I'm going to get it off this response and here I'm going to say constant in the object I'm going to call code this variable from request dot query so from the request dot query I'm going to access this OTP this or that once I access this OTP I'm going to say if parse n and I'm going to convert the OTP into number first so I'm going to say here request dot app dot locals dot OTP I'm going to access the same variable right inside this verify OTP and I'm going to first convert that into number and then I'm going to say if it is equal to bars in board then execute this if block and right inside this if block I'm going to first reset the OTP so I'm going to say here request dot app dot locals dot OTP is equal to now and then start the session so I'm going to say here request dot app dot locals Dot reset session so I'm going to access this variable reset session right inside this verify OTP right yeah I'm going to start this session so I'm going to pass here value true now this is going to reset the OTP value and this statement is going to start or you can say the station or reset password and just start that we're going to return a response so just pass your return response dot status two zero one dot send and in the object I'm going to say message MSG verify successfully and if there is invalid OTP I'm going to return the response dot status 400 dot send and I'm going to send the error with invalid OTP and now let me just test both these controllers save this file I'm using this verify middleware to both these endpoints so whenever I try to access this generate OTP and verify OTP endpoint I need to pass this username as a query so I'm gonna first back to the new request open the standard and and then I'm going to register a new user I'm going to say here register a new user once I register it I can get the user information here I'm gonna have the user information and now I can make a new request to this generate OTP endpoint so just copy this generator depend point in the new request specify the generator OTP and this is the type of get request and we also need to pass the query with the username so don't forget to pass here username is going to be is example one two three and now if you make a request to this generate OTP is going to generate the OTP and return the code as a response so if I save the changes first and click on send button you can see it's going to generate the OTP and we are going to have the OTP as a response so whenever you click on send button it's going to regenerate the OTP you're going to have a new OTP every time when you make a request to this endpoint yes or that let me show you how to verify this OTP so if you're back to the app controller here you have the verify OTP endpoint just copy it back to the new request and here you you need to First specify this verify OTP to the query and you also need to specify the username back to the new request right down here you have to specify code and your OTP so just copy this OTP specify that here and then you have to change your endpoint to verify OTP so just change this generator to OTP to verify OTP save those changes and click on send button when you click on send button you're going to get this message verify successfully and now if you try to click on the send button again you're going to get this error message invalid OTP this is because we are going to just reset the value of the OTP when we call the verify OTP now if I comment this and comment this statement as well take the changes back to the new request if I make a request again if I register a user and generate the OTP Again by clicking on the send button then I'm going to get this OTP right now if I copy this OTP back to the verify OTP specify that OTP here and click on send button I'm going to get this video if I successfully message and if I click on the send button again I'm going to get the same message the reason behind this is right here I just comment the statement and I just have the same value inside this OTP variable so what I want I want to reset the OTP when we successfully verify it so I'm going to uncomment this statement and after that I'm going to start the session let me show you how to use this station variable let me uncomment this save the changes and now let's scroll down and create this reset password session so here inside this reset password session right down here you have to say if request dot app dot locals dot reset session if it is equal to true then I'm going to just reset that value to box and I'm gonna do that right here so I'm going to say here fault and then I'm going to add here a command allow access to this route only once and just order that right down here I'm gonna say return response dot status 201 dot send in the object I'm gonna send MSG message access granted and just add that right down here I'm gonna return response dot status 440 dot then error and in this error I'm going to say session expired so only allow the user to access this route once when the user tried to reset their password otherwise I'm gonna redirect and restart the session right from the start let me save the changes I'm going to show you how you can use this endpoint when we build the reset password UI just for now I'm going to leave this as it is minimize all the components and write down here let's see how to create the reset password component now let's take a look at how you can reset the password of the user so we are using this reset password controller to reset the password of the user and we are going to make a put request on this reset password endpoint to update the value of the password so right here and I'm gonna say here try and catch we're going to create first try and catch block and inside the sketch we are going to say return response dot status 401.10 and we are going to send the error let's start that inside this try right here I'm going to say constant in the object we're going to call username and password and we get that from request dot body to start that I'm going to call try and catch block again so I'm simply going to see here try and catch and then inside is cache right here I'm going to say return response dot status five double zero dot send and I'm going to send the error as a response inside this try right here I'm going to say user module dot point one and I'm going to find the username inside the database if if we have the successful promise I'm gonna get that inside is 10 otherwise get that inside the catch and I'm going to say here error and say return response dot status 404 dot send error username not let's start that inside this then right here I'm going to say user if we have the user inside this 10 then I'm gonna get that user and call B Crypt dot hash and I'm going to Hash the user password so we'll get the user password inside this variable when the user reset a password I'm gonna pass that to this big crap hash and then specify here salt tap then if we successfully hash the password then we call then method otherwise call The Catch and inside this cache I'm going to return the error and here I'm gonna say return response dot status 500 dot send and I'm going to send an object and say error enable to hash password and just order that inside this then right here I'm going to say hash password then specify a function here and right here I'm going to say user model dot update one and then I'm going to update the user so I'm going to first select the user with the username and then I'm going to specify value to it the user dot username I'm going to get the user from this variable just out of that I'm going to specify here comma and then here I'm going to specify the updated password so I'm going to specify here password colon hash password so I'm going to update the user with this new password so first argument is for selecting the user I'm going to select the user using the username and I'm going to update that user with this new password and just start that just order this object here I'm going to pass Obama and call here a function with error and data and inside this function I can simply say if we have error then just throw that error or return a response dot status 201 dot send and in the object we call message record updated just like that now this is going to update the user password let me just minimize it take the changes back to the auth.js close all the unwanted tabs right from here and then we're going to back to the routes and here so this reset password don't forget to specify this verify user so we are going to first verify the user and only then we are going to reset the password so we first call the verify user middleware and then call the controller reset password and now let me show you I can test this reset password so I'm going to copy this endpoint reset password open a new request and here I'm going to specify that endpoint reset password and then I'm going to select the put HTTP request and to this reset password we need to specify the username and the password so I'm gonna back to the new request and in the body here I'm gonna grab this username and password this username and password and then specify that right here and I'm going to update this password so I'm going to specify here password admin one two three four and just add that as you know is is going to first check for the username and then update the password right so let me save the changes back to the new request this is a type of put request so I'm going to select put facing by the end point and then specify the body with the Json data save the changes and this will add this put request inside this Equity log and now let me first register the user using this data so let me first register the user and then get the data from the user so I'm going to select get request make a get request and get the user data so here I'm gonna have the user data now let me reset the password so if I'm back to the put request to the reset password and click on the send button I'm going to have this message record update it but you will notice here anyone can reset this password with a valid username then why do we need to create this verify OTP and generate OTP endpoints so what we can do is inside this reset password we are going to first check if we have the validation only then the user can update the password otherwise we are going to return the session expired message so right at the top right up here I'm going to say if request dot app dot local dot reset session and then I'm going to specify here acceleration Mark so if there is a false value inside this if statement I'm gonna return this Batman just like that so I'm going to return the status 404 with the station expire error when we have false inside this if statement otherwise I'm going to execute this reset password let me show you the result save the changes and if I back to the port and try to reset the password and when I click on the send button I'm going to get this error session expired this is because right now I'm not a valid user to reset the password so what I want to do is I want to First generate the OTP verify it and then try to access this reset password so what I can do is I'm going back to the get request generate the OTP with the valid username so I'm going to click on the send button this will generate the OTP let me copy this OTP make a get request to the verify OTB with this OTP and when I click on the send button this is going to verify the OTP and then when I back to the reset password and make a boot request you're going to get a message record updated and this is going to update the password field now just for that when you have true inside this statement you can then specify false using this statement right down here you can say request.app.locals registration and specify the value relationship is so now once you have all your routes we also need one more route inside this backend application which is this registered mail so when you will successfully register inside this application we are going to make this register mail request and send an email to your email address so let's see how to implement this route inside this application now once it is done how to create all this routes inside this backend let me show you how to create this register mail route so I'm going to uncomment this and using this route we are going to send the mail to the user when the user successfully register and we also going to send the generated OTP to the user from the mail so what we are going to do is inside this controller here I'm going to create a new file with the name mailer.js and inside this file I'm going to send a mail to the user so I'm using node Mana library to send the mail to the user so I'm going to first install that Library so right down here I'm going to say npm iPhone install and install node mailer along with that I'm going to install mail gen to generate the email so I'm going to install both these libraries inside this backend and just for that I'm going to search for node mailer and click on this node miller.com website and right from here you can get all the documentation of this Library so what you have to do is you have to create the testing account if you don't have your Gmail create a transporter with all these options and then send a mail using transporter dot send mail function and then you can get that mail inside your testing account now if you want to make a mail using Gmail then I have a complete tutorial on it you can find that video in the description of this video using that tutorial you will learn how to send mail using Gmail right inside this course you are going to send a mail using just a testing account so when you scroll down here you have this ethereal account I'm going to use this account to send them up so what you have to do is you have to open this link ethereal mail and create ethereal account just click on this create ethereal account you can use this random email and password to send and receive mail so just back to the node Miller scroll up and back to your project close this file and at the top you have to first import node mailer from node Miller and after that you have to say import mail chain from mailchen down here I'm going to say import e and B from double dot forward slash config.js file and inside this config.js we are going to store this username and password so just copy it back to the config.js right here create a variable email and specify this testing email here back to the Ethereal account copy this password and specify that right here save this file close this config.js and write down here I'm gonna call the configuration object so here I'm gonna post for a link so you can easily create the Ethereal account so I'm going to call this link here and right down here I'm going to select node config is equal to an inter object I'm going to call the configuration object so if you're back to the node Miller then you will find here you have this configuration object just copy it and specify that right here so once you have this object don't forget to replace these values with your EnV so just get it off this test account user with EnV dot email and this became e and V dot password and then just out of that you have to send the mail using send mail method but before that you need to create the reusable transporter object using the default SMTP transport so right down here I'm going to select transporter is equal to node mailer dot the gate transport and to this create transport I'm going to specify this node config object this one so using this transporter I can create and send a mail but before that let me just initialize the mail gen so right down here I'm going to select mail generator is equal to new mail gen and in the object I'm going to first specify the default theme just like this and then specify the product I'm using the name mailchen and and I'm going to specify the link here start that right down here let me create my controller so here I'm going to say export constant register mail is equal to a sink request and response and call here a function just like this and here I'm going to say constant in the object I'm going to get the username user email text of the email and subject of the email and then we get all this information from the request dot body so when we make a post request we can pass values to this variable yes or that right down here I'm going to make the body of the email so let's create the body of the email to make a body of the email let's create a variable where email is equal to and pass an object here I'm going to create a body so specify a property called body and then I'm going to suppose specify the name the name is going to be the username I'm going to call here username after that I'm going to space over the intro I'm going to have all these properties inside this mail generator Library so I'm going to specify here intro I'm going to space over here text and then I'm going to specify my default value so I'm going to copy and paste my default value here just for that I'm going to specify the outro and here I'm going to specify the R correct text something like this so if you have text and this username then I'm going to specify that right from this body otherwise specify the default value just after that you need to pass this email to the mail generator so call here where email body is equal to mail generator dot generate and call this email here this one so now this is going to generate a male and specify that to this email body then right down here you can say let message is equal to in the object you can simply specify from from where you want to send the mail so just specify your e and V dot email so you call here your email this variable and then where you want to specify your email so specify here two and then I'm going to call this user email here I'm going to get the user email from the user body and specify that right here just or that specify your comma and specify the subject subject is going to be this variable subject this one and if I don't have any subject then I'm going to return the default value here just like and then I'm going to specify the HTML and inside this HTML I'm going to specify the email body this one and at the end right down here you have to send your mail so just use this variable transporter copy this specify that here to send mail and I'm going to say transporter dot send mail and then here you have to specify the message this variable and then you're going to call then if there is a successful promise called then method otherwise call The Catch method inside the cache we are going to return error response dot status five double zero Dot send and from here I'm simply going to say error just like this and just out of that inside this then here I'm going to call a callback function and say return response dot status 200 dot send and right from here I'm going to say MSG U should receive an email from us so I'm gonna get this successful message from the node mailer that's it just save this file up don't forget to copy this register mail and back to the router and at the top you have to just import that so you have to say here import in the object you call register mail from double dot photo slash specify controllers and in that we have mailer.js let's grab this specify that up here and just copy this at register mail and then specify that just down here if you want to test this API endpoint you have to just back the mailer and let me just add here at the top let me just copy a command right from the app controller and this is a type of post request I'm going to select the post request copy this command page over that right here I'm going to make a request to the localhost 8080 on the API on the registered mail endpoint I'm going to space over that here and this is a type of post request and we are going to pass view data with this mail request first is username second is user email then I'm going to duplicate this you can pass text and subject so when you make a post request to this registered mail endpoint you have to pass all this data so let me just copy this endpoint and back to the new request here I'm going to specify that endpoint just like this is a type of post request so select post back to the Thunder client and then I'm going to copy this object and specify that right inside this body just like this and just for that let me see if this changes first and now when I make a post request I'm going to get this error code envelope command API this is because username is not a valid email so if I specify here at the rate gmail.com and if I add here a text testing mail and if I add here subject backend mail request and if I save the changes and click on send button that you can see you're going to get this message you should receive an email from us and if you back to your ethereal account if you open this mailbox then you'll see you're going to get this email hi example one two three testing mail and this is what you have from this mail if you want to learn how to send mail from your Gmail account then I have a complete tutorial on it I'm going to put the link of the tutorial in the description of this video so I hope you understand how to create all these routes inside this project let's take a look at how you can use all this route inside the react application now once you understand how to create the backend API using Express and mongodb let's take a look at how we can access this API in the react application so I'm going to first start the react application so I'm going to open my terminal enter into the client directory so 3D into client and say npm start so this start command is going to start the client application now once we have the client application now let me show you I can access this API so let me close all these files right from here and now let me open the client directory and inside this inside the source inside this helper folder right here I'm going to create a new file with the name helper.js and inside this helper.js I'm going to make a request to the API so here I'm going to add a command and say make API request and to make an API request instead of using page API I'm using here Exiles Library so for that I'm going to enter into the client and here I'm going to say npm iPhone install and then I'm going to install xios the exos library is going to allows us to make the API request once you install the exhaust Library you can just head on to this helper.js and at the top you can simply specify import axios form axios and just add that right down here you can create your functions so let me first create here authenticate function let me add here a command and say authenticate function right down here I'm going to say export a sync function the function name is authenticate and then I'm going to pass here username parameter and inside this function I'm going to say try and catch and inside a catch here I'm going to Simply return an object with error and the error is going to be the username doesn't exist so that inside this drawer here I'm going to Simply return the axios library so we need to First Call here await because we need to make this statement completely asynchronous so I'm going to call here await xdos Dot post and we are going to make a post request to the API authenticate endpoint so if you back PR server then you will notice here for this authentication user endpoint you have to call the authenticate endpoint so inside this helper.js here I'm going to call the authenticate endpoint now this is going to return a post with response Dot N but before we call this response dot end we need to verify the user we are using this authenticate controller to verify the user so what we need to do is when we call this response dot end before that I'm going to call this controller dot verify user this one so I'm going to call this controller dot verify user so now this endpoint is going to first verify the user and then return the successful response and now back to the helper.js the once you have a successful response from this endpoint you can return that from this function but as you know so this authenticate you need to return the username so as a second argument you specify here a comma and in the object you specify the username just like this so now this is going to return a successful promise just for that once you have this function right down here let me create another function to get user details so to get the user details I'm going to create here a function called export or sync function and the function name is get user and in this parenthesis we're also going to call a parameter username but we are going to call this inside an object we are going to destructure the username inside this parenthesis and call here a function and right inside this function I am going to call raw and catch block just like this and inside a catch I'm going to say return error password doesn't match and in this try block I'm going to say await dot get we are going to make a get request from this get user function and I'm going to make a get request to this user username point so what we are going to do is right here I'm going to use backlink operator and specify here forward slash API forward slash user and the value of the user as you know right here I'm using a variable so we need to pass value here to this variable so I'm going to specify here a dollar sign a curly braces in here I need to pass this username this one that's it this is going to make this endpoint request so once we have this get endpoint request we're going to store that inside a variable I'm going to see here constant in the object I'm going to destructure a data property and return that data property so I'm going to say return data so using this get user function you can get all the details of the user let me create a function to register the user right down here I'm going to create a command and say register user function here I'm going to say export a sync function the function name is register user and inside this we need to pass the user credentials so I'm going to add here a parameter written here I'm going to call try and catch block and inside this cache let me first add return promise and we are going to return the reject promise from this cache block and I'm going to return error here these are that inside this fry block here I'm going to say await xios dot post from this register user I'm going to make a post request to this register endpoint now because this is a type of post method we need to make a post request to this register endpoint so in the helper file right here inside this post I'm going to specify backpick operator then specify your forward slash API forward slash register make sure the endpoint name is exactly same so I'm going to specify here register and after that you have to specify all your data so inside this variable I'm going to specify all the data to this post request so I'm gonna pass it a comma and paste the credentials here just like this and just after that this is going to return a response so I'm going to get that response inside a variable so right down here I'm going to say constant in the object I'm going to get all the response so I'm going to get data and status from this request and from this data I'm going to destructure the message property so I'm going to specify here a colon and in the object I'm going to say MSG so when you make a request to this register endpoint inside this controller you will notice here we are going to return this message when the user successfully register we are going to get this property right inside this front end I'm going to structure this property and return that I'm going to say let in the object I'm going to get the username and email from the credentials so right from this credentials I'm going to get the username and email of the user and then I'm going to send email so if the user is successfully registered after that I'm going to make and send the email to the user so right here I'm going to say if the status is equal to 2 0 1 so if you're back to the API controller then you will notice here the successful status is 201 so inside this helper I'm gonna say if the status is 2 0 1 then execute this if block and here I'm gonna say away xdos Dot first I'm going to make a post request to this register mail endpoint to insert this helper right here inside this pattern this is I'm gonna specify photo slash API and then specify this endpoint register mail just like and then as a second argument you need to specify some values to it so right here I'm going to specify an object it's basically the username then specify the user email now because we don't have the user email property I can get the user email from this email variable and then specify that to this user email property just after that I can specify text as well so I'm going to say here text MSG this variable so I'm going to specify this x to this email and just start that just out of this if statement right down here I'm going to say return promise dot resolve and in the parenthesis I will specify the message this one that's it the register user is now successfully ready these are that let's create the login function so write down here I'm gonna create a command and say login function to create a login function we need to export the async function with the name verify password that's upon you you can specify any name to this function I'm using here a function name verify password for the login so inside this parenthesis I'm going to pass an object and specify here parameter username and password we are going to get the username and password from the user and make a request so now inside this fry blog in the catch I'm going to post specify return promise dot reject and I'm going to reject the promise and say here error password doesn't match I just saw that inside this try block here I'm gonna say if we have the username only then execute this if and then I'm going to specify here of it and now to verify the user I'm going to make a post request to this login endpoint so I'm going to specify here in the single code forward slash pcify API login and after that this login API you also need to specify if you're back to your controller then you will notice to this login endpoint you need to specify the username and password so inside this helper right here as a second argument in the object I'm going to specify the username and password now just for that this is going to return a data so I'm going to get the data inside a constant variable constant data and I'm going to get this data and return it so simply going to say return promise dot resolve and I'm going to resolve this promise and return the data variable now just for that once I have the login function right down here I'm going to create the update function so right down here I'm going to say update user function here I'm going to say export async function and the function name is update user and this is going to get the response and inside this response we are going to have the user details let me just add here update user profile function now just start that right inside this function as you know if you're back to the controller of your backend then you will notice here this update user is going to get the ID of the user from the token you have to pass your token and then get your ID and then update all the profile values so I'm going to just back to the helper.js and here I'm going to say try and catch inside a catch I'm going to post return a promise dot reject and I'm going to reject This Promise with error couldn't update profile and now inside this try block I'm going to make a request to the update user endpoint so if you back to the app controller then you'll notice here you need to make a put request on the update user endpoint and you need to pass the user token in the header and from that token we are going to get the user ID and specify that user ID right to this update 1 function and then you need to pass the data which you want to update so I'm going to just make a simple request from this helper to make a put request you have to first get the token from the user so I'm going to say here constant token you're going to get this token from the local storage so when we register the user we're going to store the token inside the local storage and then we get that token from the local storage so here I'm going to say token is equal to a weight local storage dot get item and inside this get item here I'm going to say token so once we have the token inside this token variable I can say here constant data is equal to a weight exers dot put now this is the type of put request so I'm going to pass the airport and then in the single code which by forward slash API and then don't forget to specify the exact name of this put request update user so I'm going to pass here update user just for that you need to pass your data so as a second argument I'm going to pass the data which I want to update so I'm going to specify this response here this variable inside this response variable I'm going to pass my updated data this are there as a third argument you need to specify your header as you know if you're back to the app controller you need to specify the header with the token to update your profile data so with this helper as a third argument you need to pass here an object and specify headers and inside these headers you have to space over here an object again and right inside this object in the double code you specify the authorization it is specify here authorized ration and then specify here colon and in the backpick operator you specify the barrier token so you specify here barrier phase and then specify your token here just like this make sure you specify space between this barrier and the stock otherwise you will get an error message now once you've done that once you have a valid put request you can get the data inside this data variable and then I'm going to return this data so I'm going to say here return promise dot resolve and then inside this object I'm going to turn this data this one that's it your put update user request is now successfully ready next let's take a look at how we can access and generate the OTP so right down here I'm going to create a command and say generate OTP here I'm going to say export or sync function and the function name is generate OTP and inside this parenthesis I'm going to specify the username and inside this username we are going to get the username and specify that to this generator.tp now because inside the generate OTP I'm going to first verify the user you can notice using this middleware we need to pass this username a valid username to this generator.tp right here I'm going to call try and catch block and inside the sketch here I'm going to say return promise dot reject and then inside the object I'm going to call the error just are there inside the try block here I'm going to say constant I'm going to destructure the data from the XPS Library so I'm going to say here data 4 and in the trial block here I'm going to say await xios dot get we're going to make a get request to this generate OTP endpoint right here to generate the OTP you have to just specify this endpoint generate OTP back to your helper right here this is a type of get request I'm going to specify here get and I'm going to specify here single code 505 forward slash API and generate OTP endpoint and just for that you need to pass the user name as well as you know here in the route we are going to first verify the user so we need to pass the username with this request to pass here a comma and pass an object here and to the params you need to specify the username just like this so now this is going to verify the user first and then make the generate OTP request and now this is going to return a response and then we get the response and restructure this code variable so inside this helper right here I'm going to say constant is equal to and destructure the data property and inside this data property as you know we are going to get this code property so I'm going to say here colon in the object I'm going to say port and we can also get the status of this required so just down here I'm going to say if the status is equal to 201 so if this is a valid request if you're back to your controller generate OTP then you will notice here I'm gonna send the status 201 and if it is a valid request then execute this if block and inside this if block we are simply going to send mail with the OTP we are going to send the mail to the user email with the OTP so I'm going to say here of it and call here get user function now because this get user function is going to return the user data we are going to make a request to this get user function once we get the user details we get the email from it and then send mail to the user's email so to get the user data you have to specify here a wait get user and then you need to pass your username and this is going to return the data they call that data right inside here I'm going to select in the object we are going to destructure this data so I'm going to say here data specify colon and inside this data we are going to have the email property we get that email and then send the mail so let me first create the body of the map so I'm going to say Here let text is equal to in the backpack operator I'm going to say your password recovery OTP is this code I'm going to specify this variable and then I'm going to space over here verify and recover password and just out of that right down here I'm going to specify await xios dot post and I'm going to make a post request to API register mail to this endpoint to create and send a mail I'm going to specify here register mail and then I'm going to specify the data here I'm going to specify the username first user email the user email is going to be the email variable this one and then I'm going to specify the body of the email so I'm going to specify this effect this one and then specify the subject I'm going to say here subject of the email the subject is password recovery OTP so this statement is going to send a mail to the user with the OTP and when the user verify their OTP we can then redirect to the reset password page just start that just after this if statement right down here I'm going to say return promise dot resolve I'm gonna return a simple code that once we successfully generate the OTP let's see how to verify it so right down here I'm going to create here a comment and say verify OTP here I'm gonna say export unsync function verify OTP and in this parenthesis I'm going to pass the object and say username and code we need to pass username and OTP with this function and here I'm going to call first try and catch block so I'm going to say try and catch Insider catch I'm going to Simply return the error if you want you can reject this with promise promise dot reject and then specify the error that's upon you inside this try here I'm going to say await xios dot get I'm going to make a get request to this end point so there is verify OTP endpoint so inside this helper right here I'm going to make a get request and first you need to specify forward slash API verify endpoint and just for that right here you need to pass the username and code to the parents so here you pass comma and pass params in the object and then you specify this object here username and code now because if you back to the route.js file of the server then you will notice you don't need to specify the username here because inside this app controller if you open the verify OTP you don't need to specify the username but what we are going to do is before we make this verify OTP request we need to verify the user so I'm going to copy this controller verify user and then specify that right here so before we make this verify OTP request I'm going to first verify the user and then make this request and then back to the helper and now this is going to first get the username verify it and then verify the OTP just for that this is going to return data and status I'm going to get that inside a variable inside a constant variable so here I'm going to say constant in the object I'm going to get the data and status and I'm simply going to return that in the object I'm going to return data and Status that's it and now at the end let me just create the last function to reset the password so here I'm going to say reset password we need to say export unsync function and the function name is reset password and with this we're going to return a parameter username and password and right from the reset password I'm going to say try and catch inside this cache here I'm going to return promise dot reject and I'm going to recheck with the error and inside this try here I'm going to say constant in the object I'm going to get and destructure the data and Status property is equal to a weight axios dot put this is a type of put request so I'm going to pass here put in the single code I'm going to specify forward slash API water slash and then don't forget to specify the endpoint name which is reset password I'm going to space over here reset password and just out of that you need to pass username and password the copy it and specify that right yeah right down here I'm gonna return promise dot resolve and inside this resolve in the object I'm going to return data and status that's it all the functions is now ready now you can access all these functions and make a request to the back end but before that I need to specify the back end domain so at the top you have to specify here xios dot defaults dot base URL you have to specify your server domain here so I'm going to specify the server domain in the double port instead of specifying the server domain in the hard-coded value I'm going to create the dot entry file and specify my server domain there so inside this client here I'm going to create a new file with the name dot e and V and inside this I'm going to create a variable with the capital letter react underscore app and then specify my variable name server domain now if you create a DOT Envy file in the react application you have to prefix your variables with react app and then you specify your variable name so react app is a prefix and then the variable name is server domain here I'm going to specify equal to sign and then in the single code here I'm going to specify my server address so I'm simply going to space over here http colon forward slash localhost colon 8080 now this is my server address so if there is a change in my server domain I'm simply going to change the value of This Server domain variable save this file close this file and back to the helper.js and right here instead of this double quote now I can simply specify here process dot EnV dot react app server domain so I'm just going to copy this variable and then specify that here now let's see how we can access all these components inside a react application once you have all these helper functions so we can make the API request let me just use all these helper functions in the react components so I'm going to open the username.js file when you click on the submit button it's going to return the username what we are going to do is we are going to store that username inside the central store and use that username in other components so I'm going to open my terminal and here I'm going to first install a library called zoostat so I'm going to say here npm iPhone install and specify the library name dual scan now that's upon you you can use Redux as well to create your central store it doesn't make sense to use the Redux inside this application because we are just going to have only one or two variables inside the central store compared to the Redux Zoo Stan is much easier to set up if I'm using Zoo stand for this application clear the screen close this terminal back to the username and inside the react application right here I'm going to create a new directory with the name store and inside the store I'm going to have a file called store.js that's upon you you can specify any name to this file right inside this file you have to import create from Joe stat and right from this file you have to export a constant function use auth store now you can notice I'm using here a prefix to this variable which is used this means this is the type of hook so you can use this hook only in the react component otherwise you will get an error message so now we simply going to create the reactor use auth store and then specify a function here which is create this function now this create function is going to create a central store in the react application so you can access the central store variable in any react component so inside this Central store inside this create function right here you call another function like this and we are going to return the data from this function so I'm going to pass parenthesis here and inside this parenthesis we are going to have an object and this create is going to take an argument which is set now this set variable is used to set a new value to the store if you want to know more about zoospan then I have a complete tutorial on it you can check out the tutorial from the link provided in the description inside this object right here let me first create the initial store so I'm going to say here auth colon and in the object I'm going to specify username and the value is right now now I'm not going to specify any value to this username so this is the initial store of the zoo stand let me set value to this username using a function so I'm going to pass here a comma and create a function here set username now this is a type of action now if you ever work with readers then this set username is a type of action using this action we are going to change the value of the store so we simply going to say set username colon and pass a function here and in this parenthesis I'm going to specify name and just out of that here I'm going to say set I'm going to call this variable set and inside this set function right here inside this parenthesis we need to return a new state so I'm going to first get the current state and return it so inside the parentheses right here I'm going to specify an object and call the auth property this one and inside this Earth as you know you have the username to pass here colon all an object and restructure all the other properties so I'm going to specify here spread operator like this false State DOT on so if you have another property for example if you have your active property like this then this statement is going to first get the other properties and update only the username property so as a second argument here you need to specify the username and then I'm going to specify value to this username which is this name variable I'm going to specify here colon and say name that's it your central store is now ready to use back to the username and let me show you I can access the central store inside this username component so at the top right up here you have to say import and copy the center store you store variable and in the object you have to import this use auth store from in the single code specify double dot forward slash space of a store and inside that you have Pro dot yes file once you call the use auth store you can access this hook inside your component right inside this component write down here you can simply specify use auth store like this and this is going to return state so I'm going to pass here state and I can console.log this day if I consult or log this date save the changes and if I open my browser and reload it you can see I'm gonna have here auth with the username and a function set username to access this username you just need to access the auth variable and inside that you have the username so if I specify here Dot auth dot username and I can access the value of the username inside my console reload the browser then we'll see I can access the value of the username right now I don't have anything inside this username so I'm not going to get anything so just out of that once you understand how we can access the username value let me show you how we can specify value to this username variable so you simply need to access this function this set username function and then specify your value to this name parameter so you call here Dot set username this function and then you get this function inside a variable so specify here constant that username is equal to and use this set username function you can assign a value to this auth username variable right down here inside this on submit when you submit your form let me just add here a command and right down here I'm going to say set username values dot username now this statement is going to set the value to the username property and just for that if you want to access the username variable just duplicate this call here username and return just the state Dot auth dot username and instead of this console.log we just have to return the state dot username just like this inside is username you're going to have your current username value you can display that in the use effect so I'm going to import the user pack just like this and console.log the username value this one and don't forget to import this use effect at the top let me save the changes let me uncomment this back to the browser and reload it right now the username is empty let's suppose if I specify here username example one two three when I click on let's go you can see and this is the username store value so we successfully set value to this username and now I can access this username value in any component of this project these are that let me get rid of this username property you are not using it and get rid of this console.log now these are that when we have a valid user only then we are going to redirect the user with the password component so at the top as you know we have react router dome right here you can see I'm gonna just add use navigate hook right from this react router Dom to navigate the user to the different component I'm going to copy this and at the top right here I'm simply going to say console navigate is equal to use navigate using this variable I can navigate the user to the different route but before I navigate the user to the different route I need to add some changes inside the validate file so let me open the helper and inside this validate right here for this username validation I'm going to first verify the user and then move the user to the password component so as you know using this user validate we are going to validate the user import along with that I'm also going to check the user existence so here at the top I'm going to say if the values dot username if we have the username inside this username variable then execute this if block and then I'm gonna check for the user existence so I'm going to say here check user exist or not and as you know inside the helper.js file we have this authenticate function I'm going to use this function inside this validate at the top I'm simply going to say Import in the object call authenticate from and then specify helper.js file so I'm going to copy this authenticate and write down here I'm going to say constant in the object I'm going to get the status is equal to away authenticate and I need to pass the username values dot username so now this function is going to check the user existence and return the status inside this variable and here I'm going to say if the status if it is not equal to 200 then execute this if block and return errors dot exist is equal to those dot error and in the single quote I'm going to say user does not exist that's it back to the username save this file and back to the project reload this project suppose if I specify the initial value example one two three back to the project and reloaded and if I try to click on this let's go you're going to get this error user does not exit currently I don't have this user in my mongodb database so if I back to this hundred client and make a post request with this resistor endpoint and create this example one two three client in my mongodb database then this is going to create a new user and now if I click on this let's go oops I think I misspelled something this is going to make a request to the localhost 3000 we need to make a request to the localhost 8080 I'm going back to the helper save this file if you console.log these values and if you click on let's go you're going to get your username here and then if you change this so let's suppose if I change this to example one two click on let's go you're going to get this error user does not exit and you will get this error because you don't have this username inside your mongodb database so once you have a valid username you can just now redirect the user to the password component so I'm just going to use this navigate to redirect the user to the password component so here I'm going to call navigate in the parenthesis single code password slash and then here you have to specify password just like this save the changes and now if you click on let's go it's going to open the password component you can notice now just for that once you are on the password component let me change few things here let me update this password component with the backend data let's take a look at how you can create the password component so what I want I want to display the username right here instead of this again text and then I want to display the user profile right here so I'm going back to my application and let me just close unwanted tabs right from here and close this username I just saw that I'm going to open the password dot JS file and from the password.js component I am going to first fetch the user data so we can display the username and profile and then when the user click on sign in we are going to call the login route and create a token and store that inside a local storage the first to paste the data I'm going to create the react customer so let me show you how you can create a custom hook in the reactor application so you can use that hook anywhere in any component to fetch the backend data so inside your Source right here I'm going to create a new folder with the name hooks and inside this hooks I'm going to create a new file with the name fetch DOT book dot JS now that's about you you can specify any name to this file those are that inside this switch hook right here I'm going to first import axios from the Exiles library and then I'm going to first set the base URL something like this we already specify the base URL in the helper.js file I'm just going to copy and paste the same syntax here and right down here I'm going to say export default function the function name is use fetch that's upon you you can specify any name to this function but keep in mind you have to specify use prefix to this function so the react will recognize this function as a reactor and to this use patch I'm going to specify parameter query and inside this I'm going to call the use State the actor so I'm going to say here use state reactor so I'm going to just import a use page from react and inside this view state right here inside is used that I'm going to add an object and here I'm going to say is loading is going to be false API data is going to be undefined then status is going to be now and server error is going to be now so I'm going to specify this object to this state and then I'm going to specify here constant in the array get data and set data so I'm simply going to create this state inside this react application just or that right down here I'm going to call use effect oh so I'm going to import the use effect hook right up here and call the user vector function here something like this and as a first argument we call this function and as a second argument we call the dependencies inside the array we insert the array you have to specify this query this one and just out there inside this use effect right here you have to say if you don't have query then exit from this function and if you have value inside this query then I'm going to create here another function with a name constant fetch data is equal to and this is a kind of a sync function so we call here a thing function inside this I'm going to call raw and catch block and inside the sketch I'm going to return and change the value of this used it so I'm simply going to first call here set data this function to set a new value to this use State and inside this parenthesis I'm going to call a callback function with the previous step I'm going to call here previous specify here callback function in this parenthesis inside an object I'm going to call Spirit operator with previous values and then update the ease loading to false and I'm going to do the same and then I'm going to duplicate this statement and here I'm going to call server error error now if you want you can simplify this that man just cut this statement right from here and pass the server error here you just have to specify server error and just get rid of this statement now just for that inside this try we need to First say set data and inside set data I'm going to copy this complete statement so I'm just going to copy this set data specify that right here and I'm going to make this is loading true and get rid of this server error property just like this so when there is a valid request I'm going to make is loading true and after that right down here I'm going to make a request so I'm going to say constant in the object data and status I'm going to get these variables from away exers dot get request and say follow slash API forward slash dollar curly braces query so now you can specify any endpoint to this use page query and get your data now just for that once you get your data and Status inside this variable right down here you can say if the status is equal to 201 then execute this if block and then I'm gonna copy this set data specify that here and this time I'm going to change this is loading to pause and after that I'm going to duplicate this statement again and change this property and here I'm going to say API data is going to be data this variable and just out of that I'm going to specify comma here and say status is going to be the status variable this one and then if the status is not equal to 201 then I'm going to copy this say data and specify that here now just for that you have to call this fetch data right down here inside this use effect and at the end you have to return this get data and set data so you can change the value of your use state from this use page so write down here just after this use page you have to return get data and the data your custom Hook is now ready so let me add here a command and say custom look back to the password and now you can access this custom Hook from this file so at the top right up here you can say import use page from the hook which dot hook file copy the zero switch and write down here inside the password you can call that use page and then you can specify the end point but what I want I want to get the user data from the API so to specify endpoint I'm simply going to pass here backlink operator then specify forward slash user forward slash and the username as you know we don't have username inside this password component but if you can notice inside the user.js file you set the username to the central store and we can access the username using this use or Central store so to access this just copy this back to the password import the use of store Central store inside a password and right down here you can say use auth store return State and from the state I want state DOT on and this Earth is going to return a username so I'm going to structure that username inside this object just like this and once we have the username I can get the data of the username by passing it to this end point so here I'm going to copy this and pass here object and pass the username just like this now this use fetch is going to return the data so I'm going to get that data inside an array because we just return here an array and inside this data we're going to have this object so to get this object right here for this news page I'm going to specify equal to sign and specify here constant in the array in the object we need to say is loading comma API data and server error so I'm going to the structure all these properties inside this password if you want you can restructure this status property as well that's upon you I'm going to leave this property as it is and just after that right down here I'm going to say if is loading is true then display the easy loading message so here I'm going to say if if we have true inside this is loading then return division tag width is loading message or you can simply call here h one heading tag like this with some Kelvin classes you can specify here class name text to excel and text bold so if we have true inside this is loading it's going to display this is loading method and just out of that right down here I'm going to say if if we have error inside this server error then just going to return that so specify your return in the H1 heading tag I'm going to specify server error Dot message and then I'm going to change the color of this H1 heading back I'm going to specify here class name text Excel and then specify here text Red 500. and then if this is a valid request then you will get that data inside this API data variable and once you have that data you can specify that data to your component so just out of that scroll down and instead of this again right here I'm going to get rid of this pass your curly prices and here I can say API data DOT first name I'm going to access the data from the back end and with this API editor you're going to get the first name property but this is going to return an error because this statement is going to take some time to load the data so you need to pass here a question mark So execute this statement only when we have this property otherwise don't execute anything just or that if the user don't have the first name then call its username then specify API data question mark Dot username I'm going to display the username value instead of the first name just order that if the user have profile then I'm gonna display that profile right here inside this image so here I'm going to first specify the API data question mark Dot profile if the user have profile then display it otherwise display the Callback value author that's it just save the changes back to the project and right now you're going to get an error message because inside is username right now you don't have anything and now what you have to do is you have to back your recruit route open the username component and register a new user with the username profile and all the other fields so just back to the Thunder client I'm going to create a new user with the username password email and with the profile image and inside this profile image I'm going to put the base64 format of the image so you can see the result right inside the password component so I'm gonna just pass the base64 format of the image right here let me say the changes click on send button it's going to store the data inside the mongodb database with the profile image just for that let's back to the password.js and now when you click on let's go this is going to return user does not exist because now you have the username one two three four so right here I'm going to specify 4 and click on let's go you can see you're going to have your profile and the username now this is just a demo profile image I'm going to replace this profile image with the user profile once you have the username and profile now you can click on sign in button and create a user sign-in but before that let me show you I can create the register component so I'm going to back to my username and click on this register now and now let me first show you how you can register the user with the profile image now let's take a look at how you can register the user as you know we already have the register component inside the react application so if you back to the register component if you open the register.js file then you will notice here register component is going to return three values email username and password and we are going to append another property called profile with this initial values so now when you click on register just going to return the email password and you don't have anything inside this profile and the username now if you select the user profile let's suppose if I select this user profile and now if you click on this register you can see you're going to have some values here you have your email password your profile and the username now what you have to do is you have to pass this object to the registered user helper function so if you're back to the helper function then you will notice here you have here a function called register user you have to just pass all these gradient Shields to this register user helper function so back to your register.js and right here inside this on submit at the top don't forget to First import this helper function register user so right here you have to say Import in the object call register user from double dot forward slash Space by helper folder and inside that you have helper.js file and just for that you have to copy this register user and specify that right here and now because this is the earth synchronous function you can call here await as well but before that I'm going to specify your parentheses and pass all the values of the form so I'm just going to pass these values right yeah now this values is going to return this object and inside this object we are going to have email password profile and username and we're going to pass all this data to the register user now this function is going to convert the image into base64 format and then specify that value to the file variable and then we specify that value to the profile assign a new property to the values and then specify that values to this register user because after that I also want to add a toast inside this register component so when there is a successful registration I am going to display that react photos but at the top before this poster right up here I'm going to space over here toast and I'm going to copy this to host scroll down and here I'm going to say toast dot promise and inside this promise you have to specify your register promise you have to store this register user right inside a promise let register promise is equal to and right here you have to call this register promise and then pass your comma and in the object you can specify loading creating text then you specify the success text which is success and in the Bold tag here I'm going to say register successfully and if there is the error we call here a property called error and in the Bold here we specify could not register just like this that's it let me save the changes back to the project and reload it now we already have some default values to this input Xboxes if you want you can specify your own values here that's upon you let me choose this image and click on this register button when I click on the register button you can see I'm going to have this post here the heading register successfully and this is going to register the user in my mongodb database so if you're back to the home route and specify your username and click on let's go you can see you're going to have your username and your profile picture now just order that once the user successfully register we are going to navigate the user to the home brow at the top we need to import right up here we need to import the use navigate and I'm going to call this use navigate right here I'm going to say use navigate constant navigate is equal to and using this navigate variable we can redirect it to user the Home Route so here I'm going to say register promise dot then and then call here a function just like this and here I'm going to say navigate to the Home Route when there is a successful registration save this file let me restart my backend server just like this and now let me back to the register page let me select the profile image and when I register the user I'm going to have this creating react hot toast and when there is a successful registration we are now navigated to the Home Route from here we can specify the username click on let's go and now we can work on this password component now what I want I want to verify the user password and then redirect the user to the profile component so let's see how to do it let's take a look at how you can work with the password component here I'm going to specify the user password and click on sign in button once the user is successfully sign in we are going to redirect the user to the profiles component so let's back to the password.js and right here inside this on submit I'm going to call a function verify password if you back to the helper.js then you'll notice here you are using this verify password helper function to make a login so I'm going to copy this verify password back to the password.js at the top right up here I'm going to say import in the object I'm going to call verify password from in the single code double dot or slash based by the helper forward slash Helper and just after that you have to create a promise or a toast and then navigate the user to the profile component so inside the password right here I'm going to copy this verify password pull down and you have your password value inside this values variable get rid of it here I'm going to say let login promise is equal to verify password and this verify password is going to take few arguments first is the username and a password so as you know you have your username inside this variable this username variable I'm going to copy this and pass that right here and just for that you have your password inside these values dot password I'm simply going to call here a comma and say password values dot password and just for that at the top you have to first call your toast right here you call closed open this toast scroll down here we call the toast dot promise and inside this promise you call this login promise plus your comma and as a second argument you pass an object and here you call loading message checking for the success message you're going to call a bold login successfully just like this and for the error you're going to return a bold message password not match and just for that once you successfully login you can call login promise this one dot then and inside this then you call a response variable and inside this response variable you're going to have your data and from the data I'm gonna get a token the user token so this verify password is going to return the register token I'm going to get that token from response dot data variable and inside this data we're going to have the token variable to get that specify let in the object you can access this token variable so I'm going to just this structure the token variable from the response dot data and then I'm going to store this in the local storage so called local storage dot set item and as a first argument for token the key name and the value token this one now keep in mind you have to specify token as a key name right inside this local storage now this is going to create a token and store that inside a local storage if you're back to the helper.js file then you will notice inside this update user right here I just use here local storage dot get item and I'm going to access the user token from the local storage so when the user successfully log in we are going to store the user token inside the local storage and then we're going to redirect the user to the profile component so at the top right up here I'm gonna first import here use navigate copy this specify that right here and then say here constant navigate is equal to copy this navigate scroll down here I'm going to call the navigate and navigate the user Twitter profile component that's it the user login is now successfully ready now when you click on let's go it's going to navigate you to the password component and if you open the browser and open the application tab right down here inside this local storage you don't have anything right now here but when you click on sign in you can see you're going to get here a message login successfully and this is going to create a token inside this local storage now if you are using this token to authorize the user let's see how you can update the user details using update user helper function once you understand how to register and log in the user let me show you how you can display all the information of the user inside this profile page and update the profile when you click on this update button so we're going to first back to the password.js and right here I have all the code of the profile.js file so open the profile.js back to the password component close all these unwanted files right from here then I'm gonna copy this use patch right from here and paste that right inside this profile then I'm going back to the password don't forget to import this so just copy this use page import statement and specify that right here now once you have the import statement this is going to return the data this variables and inside it is loading you have the loading message inside this API data you have the user data and inside this server error you have the error messages so just back to the password scroll down copy both statements specify that right inside this password before this return statement right up here now you can get the data from the back end so just grab this API data scroll down and here you can specify the API data question mark Dot profile use the backend profile if you have that otherwise use the current file profile or use the fallback value of that that's it back to the profile and then you can see I don't have the username inside this profile component so what we have to do is you have to scroll up and back to the password scroll up copy the statement paste that right here and you have to just import this up right up here inside the profile just like this so once you have the auth variable username we're going to pass that username right here you can see you're going to have your profile picture inside this profile component just for that let me display all the user data right inside this text boxes so right down here instead of this empty string I can specify the user data here so here I can say API data question mark Dot first name and if we don't have this value then fall back with this empty strength do the same for all the properties so copy this specify that here and get it of this first name and change this to last name and do the same for this email as well I'm going to get rid of this hard-coded value specify here the email and specify the fallback value nothing just note that for the mobile I'm going to do the same and then I'm going to change this property to mobile fallback value is going to be empty strength and at the end I'm going to do the same for the address as well so here I'm going to say address just like this back to the profile and reload it I'm going to get an error message this is because when you reload your browser the use said is going to reset its value and now you don't have anything inside this username you have to back your root route again login with your username and password and then you will have all your user details what you will notice right now I don't have anything right inside these text boxes so what you have to do is you have to add here another property to this format you have to add here enable re-initialize is going to be true you can see you're going to have your email inside this input text box and now because you don't have any values inside this input text boxes you won't get anything here now let me show you I can update the user profile when you click on this update button it's going to return the user data inside an object here we just have the email because we have this value inside this email tech box what if I pass your example one two three and click on update we have that value inside this first name right now what I want I want to pass this object to this update user endpoint so I'm going back to the profile scroll down and right here inside this on submit because down here I'm going to call this update user helper function so back to the profile at the top right up here I'm going to say import in the object call update user from double dot forward slash specify helper helper file and use this update user write down yeah just like this and don't forget to pass all your values here and then you have to get this inside a variable so specify here let update promise is equal to and then call here a toast so at the top I'm gonna first import toast something like this copy this toast specify that right here dot promise and then press over your update promise here and as a second argument you specify the loading message which is updating then to specify the success message in the Bold update successfully and at the end you specify the error message in the Bold element instead of this console.log right from here say this changes back to the profile and get rid of these console messages now if you reload the browser I'm going to get an error message let me just back to my root route and click on this let's go and I click on sign in button it's going to sign in and I'm going to have my profile picture here let me update my first name and last name here daily fusion and click on update button you can see this is going to update my profile and now if I back to this profile again you can see I'm going to have my data what you will notice this is going to remove this profile picture so what we have to do is instead of just this file we can now get this data from the API data right here inside this profile the second callback value need to be the API data so you call here API data question mark Dot profile and then the last value is now that's it and now let me update this profile picture let me select the profile picture and click on update so this will update the profile picture and set the profile now if you're back to the home route click on let's go click on sign in you can see I'm going to have all my data inside the profile whenever I reload this browser I'm going to get this error message because do span is going to reset this username value now to reset that value I need to back to the username component and then login in the application again I don't want to do the same thing again and again so to solve this problem we can get the user information from this token once you get the user information from the token I can specify that to this profile instead of this storage we can get the user data from the token once we get the user information from the token we can specify that to this use file so let's see how to do it so I'm going to just first back to the helper.js and at the top right up here I'm gonna make a new function to get username from token so here I'm going to say export or sync function get username so here I'm going to say constant token is equal to local storage dot get item and from the local storage I'm gonna get the token just like this and then if we don't have token then return promise dot reject and this is going to return cannot find token so if you don't have token then this function is going to return the rejected promise otherwise if we have the token I'm going to decode this token and get the user information so to get the user information you have to install a library called JWT decode so just back to your application in the client here you have to execute a command called npm iPhone install JWT decode you have to install this library in the react application once you install it close this terminal at the top here you have to say import jwd decode from JWT decode so using this Library you can decode the value of the token right down here you can specify here let decode is equal to jwtd4 and pass your token here now if I console.log this Decon say the changes copy this get username and back to your hook right here and inside this hook let me first import this function at the top so here I'm going to say Import in the object called get username from double dot or slash and specify here Helper and helper.js file and once you have this get username and display that here I'm just going to print this username here something like this back to the profile and open the console you can see now inside a console we have the user ID and username now I'm going to have this information from the token so once you have your username which is back to the helper and instead of just console.log return this decode variable just like this save the changes back to the fetch book and right here you can specify constant in the object you can just specify username just like this and don't forget to call here okay now this get username is now going to return this username and we get that username inside this variable and pass that to this exhaust request I'm going to say if we don't have the query to this use fetch then instead of just return we are going to return a different request but get rid of this statement right from here and here I'm gonna say if we don't have query then execute the true block or execute the false draw so I'm going to duplicate this something like that and pass here a column so if you notice how I specify both this requests here but instead of API query now I'm going to copy this user username and specify that right here something like this so now if we don't have this query to this usage then use this first argument otherwise use this second argument back to the profile and don't forget to get it off this query and get it of this statement as well save the changes back to the profile and reload it yeah I just miss fill here the API prefix I'm going back to the hook right here I need to add API just like this back to the profile and it's load it you can see now you have your profile data what you want now you can reload your browser and you're going to get the same result and now if I update this address let's suppose if I update this address to USA click on update this is going to update this address and now if I reload the browser I'm going to get the same data this are that creating a logout the profile component is super easy what you have to do is you have to just remove the token from the local storage that's it so if you scroll down and here if you create a command and say log out Handler function and if you create here a function called user logout and here you can say local storage dot remove item and just remove the token from the local storage that's it and then you have to navigate the user to the root tab now because I don't have the use navigate right inside this profile I have to call that back to the profile you can notice right up here I have this react outer Dome with use navigate I'm going to specify that right here get rid of the statement and I don't need this link I just want to use your use navigate copy this specify that right here constant navigate is equal to copy this navigate variable scroll down and inside this user log out we pass the navigate and navigate the user to the root out that's it and then you have to specify this user logout to this button this one so this last logout button right here you have to call here on click event and then specify your user logout Handler function that's it back to the component and reload it when you reload it you are going to get the same data but when you click on this logout button you can see now your successfully log out and if you're back to the application you can see now you don't have a token here and now if you try to access profile component then you can still access the profile component you need to protect this profile route from the unauthorized user let me show you how you can protect your route from the unauthorized user so now you can see you can still access the profile even if you are not the authorized user you have to back to your app.js and right here you have to add your protected drop so I'm going to create a new folder inside the client and name that folder middleware and inside this middleware I'm going to create a file called op.js and inside this file we are going to create the authorized router so here I'm going to create the authorize and the protected middleware and pass that to the app component let's first protect this profile from the unauthorized user so I'm going to back to the auth.js and here I'm going to say Import in the object we call navigate from the react router Dome and right down here I'm going to say export constant authorize user is equal to and then call here a function and this function is going to return children's so in the object we pass children keep in mind you have to specify the same property right inside this thirdly prices so we call here children and right from this function we say constant token is equal to we get the token from the local storage dot get item and here we have the token we get that inside this variable and we simply going to say if we don't have token then execute this if block and return navigate component and navigate the user to the total and then replace the URL so pass your replace true and if the user is authorized and have a token then just return these are that copy this authorized user component save this file back to the app.js at the top you have to first call here a command and say auth middleware and then I'm going to say here import in the object call authorize user dot forward slash specify middleware and here you have auth file and then you have to copy this component scroll down and you have to paste your component here something like this and just grab your profile and paste that by it here I'm using the self closing tag so I'm going to get rid of this profile and specify the self closing tag here just like that you can see if I try to access the profile then I can't access my profile component because now it's protected now let me do the same thing for the password as well so if you click on let's go and open the password component oops I can misspell something here let me just back to the fetchbook.js yeah right here this statement is going to return an error message because right now we don't have any token you have to do the same thing you have to add this condition to this statement as well you have to say if you don't have a query then execute this admin otherwise return nothing to this username variable that's it back to the profile reload this and now when you click on let's go here you can see you're going to have your password component now if you click on sign in it's going to successfully sign in and then you have your token right here and now if you're back to your root route and try to access your profile route the space over here profile then you can see you can easily access your profile component because now you are the authorized user right so this is how you can easily secure your profile component now let's do the same thing for the password component so what I'm going to do is I'm going to allow user to access this password component only when we have a username so I'm going to back to the auth.js and right here I'm going to create another middleware and I'm going to name this export constant protect route is equal to and right here I'm going to call it children and return a function right inside this function I'm going to say constant username and we're going to get the username from the use auth store from the central store so we say here import use alt store from the store file and then call this use of store here something like that then call here dot get State and this function is going to return the current state and then return dot auth username so this save man is going to return the username to this variable and just start that right down here we can say if we don't have the username then we are going to Simply navigate the user to the different route so we're just going to navigate the user to the root route and if we have the username then return the children say this file copy this protect route back to the app and here don't forget to import that right up here you have to import this protect route and then specify that to this password right here just copy this password and use this protect route as a wrapper to this password don't forget self closes and get rid of this closing password something like this now if you try to access your password component without the username so if I type your password and I can't access my password component but if I click on this button now I can access my password component but if I reload this browser this will redirect me to the home page again because this is going to reset the settle store and we don't have the username then and after that I can't access my password component so once you understand how to set up the username password how you can update the user profile and log out from this application let's take a look at how we can recover and reset your password now let's take a look at how you can reset your password if you forgot your password then you can easily recover that using your username now the only requirement to reset the password is your username you should have to know your username if any situation you forget your username then you can check your email and get your username as you know when we register with a new account we are going to send a mail to the user with their username so the user can easily find their username from the email and record his password so let's take a look at how you can recover your password so what you have to do is you have to just specify your username and click on let's go right now I don't know this password so you click on this record Now button when you click on sling you are now redirect to this recover component and right from this recover component we are going to send the OTP to the user email address and from that user can recover their password so let me just back to the vs code close this file close all the unwanted files right from here and now let me open the recover.js file and right from this file we are going to send the OTP to the user email so what we need to do is we need to first get the user name from the store so here you have to say Import in the object you have to call use are store from double dot forward slash specify store and inside that call the store then call use auth store specify that here and from that as you know you can get your username just call State Dot and this structure your username here so once you have your username just out of that right down here I'm going to say constant OTP and set OTP is equal to use state I'm going to call usted hook of the air and then I'm not going to specify any value here and just for that right down here you can notice you have here the input text box so this input text box we are going to pass on change event so we call here on change here we pass the Callback function like this with the event parameter and then we call here set OTP this function and we are going to set the value to this variable write down here I'm going to say e dot Target Dot value so this statement is going to set the OTP value to this variable because of that when the user load this recover component we have to generate the OTP and send to his email so for that I'm using use effect talk I'm going to call it here use effect don't forget to import that at the top and here I'm going to say use effect like this and then to this use effect don't forget to call the username as a dependency just start that here we need to call the helper function which is generate OTP this one so we need to import that inside this recovery right at the top here we have to say Import in the object you call generate OTP double dot forward slash specify Helper and inside helper you have helper file you get the generate OTP right from this file and inside this use effect here you call that generate OTP just like this and specify your username here now because this generate OTP is going to take your username so we pass your username this out there we call here then and inside this then you're going to get the OTP the generated OTP and insert this function you can say if you have OTP then you can return host so let me just add a toast at the top right up here just like this and here I can say those dot success and we send the successful message that OTP has been sent to your email and just for that if there is a problem in the OTP you are going to return a toast with error message and I'm going to say problem while generating OTP and now if you open this generate OTP helper function then we'll notice here we're going to first generate the OTP so that inside the score and then using this if statement we are going to send a mail with the OTP we are going to just make a post request using this register mail and then specify the username user email and I'm going to return the OTP with the state map you can notice we are going to send the OTP to the user email so once the user get the OTB from his email so when the user click on this record button we are going to verify the user OTP and to direct him to the reset pad so let's see how to do it so scroll up just add this use effect right down here create a sync function with the name on submit and here you pass the event parameter and then say event dot event default just remove the default execution of the form using the statement and then here you have to call away verify OTP this function is copied and at the top right up here you have to call the verify OTP function you have to first import it and write down here you call verify OTP then specify your OTP as you know you have your OTP inside this variable but this verify OTP is going to take the username as well so you first call the username here and then call the OTP so as you know this is going to get the code as a property so you first call here code OTP just like this and let me just get a status right from this HTTP request so we get the status and if the status is equal to 201 then execute this if block and here I'm going to say close dot success verify successfully and then down here I'm going to return and navigate the user to the different route at the top let me first import so we're going to first import here use navigate from react router don't just copy this specify that right here just like this and then say constant navigate is equal to use this navigate hook to navigate the user to the different route so we call here return navigate and navigate the user to the reset now and if there is a problem in the status if you don't have the 201 status then we are going to return the toast with error and the error messages wrong OTP check email again that's it that's all that you have to call this on submit you just scroll down and here you have to call on submit on submit Handler function this one and at the end right down here you can also notice here we have a button to resend the OTP so let me just create this button as well so at the top let me first create Handler function of recent OTP so here I'm going to say function this end OTP just like this and here I'm going to say let send promise is equal to generate OTP and then I'm going to pass the username here just out of that here I'm going to call close dot promise and inside this those dot promise here I'm going to call send Promise This Promise and as a second argument here I'm going to pass an object and I'm gonna first specify the loading message which is sending then I'm going to call the success message so here I'm going to call in the Bold OTP has been send to your email and after that I'm going to return the error message bold element right here I'm going to say code not send it that's it and at the end right down here I'm going to say set promise dot then get the OTP and I'm gonna just console Dot Login now let me just copy this console.log and paste that right up here to see the generated OTP and back to your username reload the browser click on let's go and now click on recover now when you click on it you will get here a message OTP has been sent to your email and this is your OTP you have to copy this OTP specify that to this text box and when you click on this recover it's going to recover the OTP so this is going to call this submit function this one and redirect you to the reset page so if I click on record you can see now I'm going to redirect to the reset page let me just back to the recover page and then I'm gonna specify this recent OTP this button so here I'm going to call on click and pass this recent OTP here just like this data changes now back to your home brow let me just click on let's go and click on record now now this is going to send the email to your register user email and you're going to have this OTP inside your email if you are not able to get your email you can resend the OTP by clicking on this resend button when you click on it I think I misspell something let me restart this application again you're going to get your OTB here inside a console and if you click on resend this is going to return the error message let me solve this because you have your button inside a form I think yeah that's right we have this button inside this form so this button is going to resend this form when we click on it so get rid of this button right from here and put that just after this form something like this back to the browser and now open the root route and now let me first specify the username click on record now and this is going to send the email to your register email address and you will get this OTP there but if somehow you'll not able to get your OTP then you can click on this button please send OTP so just click on resend so this is going to resend the OTP to our your email you can see so once you have this OTP just copy it and specify that right here let's suppose if I specify the wrong OTP if I specify here the post node a b and click on record I'm going to get an error message here but if I specify a valid OTP here like this then I'm going to navigate to the reset route now when the OTP is not valid then I wanted to display here a toast let's suppose if I specify here a wrong OTP and click on record instead of this message I want to display here the error dose I'm going to back to the submit right here I'm going to add here try and cash block just like this and inside this sketch I'm going to grab the statement specify that here and grab the statement and specify that inside this fry block just like this so if there is the invalid OTP then I'm going to get this error message and now when I click on let's go and click on recover now I can get the OTP right inside this console so this is the OTP copy it and specify that here but this time instead of the correct OTP I'm going to specify here a wrong OTP click on record you can see I'm going to get here a message wrong OTB check email again to start that if I click on resend this is going to resend the OTP and I'm going to have my OTP here just copy it specify the OTP here and click on the record button right click on it I can now redirect to the reset drop and now I can reset my password now once you understand how you can get the OTP and redirect the user to the reset route let me show you how you can get this OTP inside an email so just open a new tab and search here for ethereal email click on this website and create a new ethereal account right from here you can copy this testing account back to your server inside this config.js you have to specify this email here and this password just copy it and specify this password here okay this file close this config and you have to register your email again just first open the mailbox this is your mailbox you just have the default mail here so now if you back your app and right now if you click on let's go you're going to get this error message user does not exist because you don't have the user right now let's create a new user click on register now select the profile image and now when you click on register it's going to register the user with this email this username and password when I click on it you can see it's going to create a new user and send an email to this ethereal email now if I reload this you can see you're going to get here an email sign up successfully and this is going to show you your username so now anytime you forget your username you can open your email and get your username just start that let's suppose we forget the password we click on let's go and right now we forget this password we click on this record Now button to record the password and this is going to send a mail to the email address you can see now when you reload this here you have the password recovery OTP click on it and this is your OTP or this recover password you can see Facebook here and click on record this is going to redirect you to the reset page and now from this page you can reset your password so now what you have to do is you have to back your recovery page get it off all the console messages right from here just get rid of this console message so now you're only going to get your OTP inside your email so just back to your decoder page and this is going to send the OTP to your email you won't get any OTP inside your console so if you're back to your email open it here is your OTP you can see and now if you want to resend your OTP you can click on this recent button so this is going to resend your OTP and send a mail to your email address record password OTP click on it and this is your new OTP copy it so if you try to use your previous OTP this one you'll get the error message right you have to specify the latest OTP you just need to check your latest email copy your OTP and then specify that right here when you click on recover you can see now you can reset your password now at the end let's take a look at how you can reset your password with this reset component and we also need to protect this route as well now let's take a look at how we can reset the password using this reset window so first we are going to reset the password and then I'm going to show you how you can protect this route from the unauthorized user so I'm going to just back to the reset.js file right here inside this on submit you're going to get this object as a response back to the reset and click on reset you can see you're going to get password and confirm password we're going to back to the helper.js and right down here you have here reset password function this one we're going to use this reset password helper function to reset the password so I'm going back to the reset.js at the top right up here you need to say Import in the object you call reset password from double dot forward slash specify Helper and the helper file and then you call this reset password write here so you're simply going to scroll down get rid of this console.log and here you say let reset promise is equal to reset password and then with this reset password as you know you need to specify the username and your new password so just specify here the username in the object you call the username here now because inside this reset you don't have your username you need to call your central store so at the top right up here you have to say import in the object called use auth store from the store file and this is going to return the username so specify here use store in the state you have state DOT up and this is going to return the username so we destructure the username right from this use auth store so once you have the username just copy it and then specify that right yeah and then you have to specify your password here so pass your comma and say password colon values dot password just start that once you specify the password I'm gonna call toast right up here so I'm just going to say here post copy the stores specify that right here something like this and then say dot promise and call this reset promise here this one and as a second argument I'm going to pass an object and say loading then specify the loading message which is updating then I'm going to specify the success message in the Bold element He said successfully and after that I'm going to return the error so in the B element right here I'm going to say good not reset that's it these are that right down here once we successfully reset the password we can redirect the user to the Home Route but just for now let me save the changes back to the reset and here I'm going to change this password to admin one two three four when I click on reset you can see this is going to reset the password now I can log in with this password so just out of this Source right down here I'm going to say it is said promise dot then call here a function and inside this function I'm going to retire the user to the password component for the top right up here I'm going to say Import in the object called use navigate from the react router Dome copy this specify that here and create here navigate variable so specify this use navigate hook so just navigate open it and specify that right here and navigate the user to the password route and now if I click on reset I'm going to get here an error message the reason behind this is if you back to the controller of your backend server then you'll notice when you scroll down we are going to change this reset session to false when we successfully update the password you can notice and that is why we successfully reset the password and try to reset the password again we are going to get this error message so let's back to the root route and say the password is updated or not so select your username this is your password click on sign in you can see you're going to get this error message password not my here you have to specify your reset password admin one two three four click on sign in there we go now this is your password now because of that click on logout here this console and click on let's go and just start that what I want I want to protect this reset route so now if you open the reset route then you can easily access this right you can't change the password but still you can access this route what I want I want to protect this route from the unauthorized user I'm going to back to my server open the app controller and right down here inside my app minimize the reset password and you can notice here we have a controller here create a reset session so if we have the valid station so instead of resetting the session I'm going to just return the status 201 send and I'm going to send this session variable so I'm going to copy this and specify that right here so I'm going to return the plan with the station value let me get rid of this statement right from here just like this so now when there is a valid station I'm going to have true inside this set map let me save the changes back to the client open the reset password so I'm going to open the reset.js and right up here I'm going to import the use page book so at the top in the reset here I'm going to say import use fetch from double dot or slash specify Hooks and inside that we have pet shop I'm going to access this hook just copy it and then specify that right down here and just for that you have to specify the query here so if you back to your hook open the fetch hook then you will notice when you have your query then this is going to execute this exhaust statement so just after this API you're going to have your query and inside this query I'm going to call this route if you're back to the server I'm going to call this create a reset session route let me copy this and I'm going to call that right here inside this reset session right here in the single code just like this and now as you know this is going to return constant array and inside this array we have an object I'm going to get that object is loading then I'm going to have API data and then I'm going to have a server error we're going to destructure all these properties here and just for that I'm going to open the password.js scroll down copy this loading and error if statement and specify that right here and just for that I'm going to call here use effect and inside this use effect I'm going to control DOT log the API data now just for that when there is a valid request from this use fetch you can get a status right here you can call here a property called status and inside this you are going to get 201 data score so if there is a valid request you will get true inside this API data and 201 status score inside this status let me just get rid of this and right down here I'm going to say if the status is not equal to 2 0 1 then return and navigate the user to the Home Route at the top let me first add navigate component copy it scroll down here I'm going to specify that navigate component just like this and then specify here two password I'm going to redirect the user to the password component and then specify here replace so and just after that you also need to add here another condition that we only execute this if that man when we have the status otherwise I don't want to execute this if statement so here I'm going to say status and person just like this so now if both conditions return true then I'm going to redirect the user to the password out the reset component is now successfully protected back to the component and now reload the browser now what I'm going to do is I'm going to first reset my password and then try to access the reset password component again let me just click on let's go click on record password this is going to send a mail to my email account you can see open your email copy your OTP then specify that here when I click on recover now I can reset my password right from here I'm going to reset my password to admin one two three four five so I'm going to add that password and click on reset once that is said I'm going to redirect to the password here now if I try to use my previous password and click on sign in I'm going to get this error message that the password not match and if I use my current password which is 4 and 5 click on sign in you can see now I am successfully sign in in my account now let me close now let me log out now let me just access the reset route again if I click on reset you can see I'm gonna get here an error message that request fill with the status code 404 if you try to access your reset component again you can access that because if you back to the controller inside this reset password we just specify the reset value false when we update the password so if you want to update your password again you have to first set up your username click on record now and get the OTP inside your email and verify it so let me just click on record now so this will send the OTP inside my email I'm going to get this OTP copy it specify that here click on record you can see now I can update my password so I'm going to just back to my previous password click on reset this is going to reset my password and now if I try to access the reset route then you can see I can't access it and my password is now updated so if I click on let's go click on sign in you can see now I can access my profile with my old password and now if you want you can update your profile that's upon you by clicking on this update button now if you reload your browser you're going to still have your data now at the end the last thing we need to do is we have to create the mongodb atlas cluster so just login into mongodb at last and create a new project and insert a new project create a new cluster and connect that cluster to your backend database so let me just first create a new project here click on new project and name this project YouTube login on and then I'm going to click on next button I'm going to leave everything as it is click on create project this will take some time to create this project inside this I'm going to create a new cluster click on build database create a new cluster or choose the share version the free version of the cloud database click on Create and just scroll down if you want you can choose the name to your cluster using this option I'm going to leave everything as it is and click on create cluster just for that here you have to specify username and password so I'm simply going to specify here admin and password is going to be admin one two three so this is my password let me just create this user just add that scroll down and here you have to add your IP address I'm going to add my IP address right from this section click on network access click on ADD IP address and I'm going to choose allow access form anywhere click on confirm this will take some time and this will update the status with active we have the active status here just back the database access here we have read write to the database just for that you have to back to the database click on connect and right from here you have to click on this connect your application copy this URL back to the project and in the server right here as you know you have this config.jspath right inside this file I'm going to create here at last URI and then I'm going to specify this URL here you have to change this password I'm going to specify here admin one two three my username password Here let me just say the changes copy this at last URI back to the database open the connection.js file and instead of this statement now I'm going to say constant DB is equal to a weight Mongoose dot connect and instead of this get URI I'm gonna get the URL from the config file so I'm going to say here import e and V from double dot forward slash specific config dot JS file and from the dot EnV I can access my mongodb Atlas URL so I'm going to say here EnV dot Atlas URL sales pages and now if you open your terminal then you will see you have the database connected message just close this back to my application and now if you try to access this user then you will get error message because right now we don't have this user so let me just register this user click on register now and create this user with the profile picture click on register so now once we successfully register we can then click on let's go sign in with the username and password there we go we have all the data of the user here and now if you're back to the mongodb database in the collection you have your user here you can notice now if you want to update this value you can just back to your profile here you can specify daily Fusion you can specify your address here and click on update when you click on update it's going to update your data so if you're bad to your mongodb database refresh it you can notice you're going to have your address first name last name and mobile number so this is going to successfully update this data and now if you want you can reset your password by clicking on this record Now button so if you click on record now and this is going to send a mail to your email just copy the OTP specify that here reset your password I'm going to specify your password just like this and click on reset button and if you try to access your profile with the previous password then you will get an error message you have to specify the updated password here and click on sign in you have your data here so we successfully created this complete login system using monster so I hope you understand how to work with login system using man stack you can download this project from the link provided in the description if you find anything useful make sure to press the like button share this video with your friends subscribe for more latest videos that is all for now I will see you in the next one [Music] thank you [Music]

Channel: Daily Tuition

Views: 189,355

Keywords: Complete MERN Application with React Mongodb Node.js & Express, mern stack, complete mern stack application, login system with mearn, create mern app with login sysytem, login application with mern stack, mern application, mern stack app, mern tutorial, mern app, complete react application, react app, react mern application, react application with mern stack, mern

Id: BfrJxGQEPSc

Length: 297min 53sec (17873 seconds)

Published: Thu Dec 29 2022