MERN Stack: Advanced User Authentication & Authorization | Mern Authentication | MERN Stack Project

hey everyone hope you are doing good so my name is nikhil and in this video we will be creating a monster project with advanced authentication and authorization technique so it's an advanced login and the signup application project where we will be building the most secure application in which we don't share any information like the tokens to the front end because everything is accessible on the front end so instead we will generate the http only cookies to send the tokens and then we will just encode the data into it and then we will fetch the user's detail from that token and then we will provide the user the access to see the details and if you are a complete migrator then still you can take this course and this course i have made it to the complete beginner friendly and if you are already a monster developer then you want it and you wanted to learn the authentication and authorization techniques so this course is for you as well and i will teach you how to build the complete secure backend so let's see the demo of this application so this is the application which we are building so we have a screen and then we have a navigation bar and once i will click on the login now you can see the login tab will appear and then we have some text boxes inside that and once i will go to the inspect to check the console and then you will see the initial state of the redux is false once i will click on the login now you can see we have my details and now once i will click on the network tab now you can see we have the user details and it is now getting the details and now you can see we have a cookie which is not accessible on the front end so if you will access on the front end as a document dot cookie so then you will see we have empty string because we cannot access the cookie in the front end and then we have the log out screen as well once i will click on the logout and then you will see now we are logged out and once i will go to the users page again so to see my details again now you will see it will show us that the no route mesh to the location as a user because these all are the protected routes and then we have here the back end running on and then we have the front end running run and then we have the models of the user and then we have the controllers of the users we have some controller functions and then we have the advanced routing here first we have the post request of the sign up and the login and then to get the user first we will verify the token and then we will get the user and then after the user's token will expire so we will generate a refresh token so the token will be refreshed from this token and then we will just get the refresh token and then we'll verify the token again and then we will show the user their details of the get user routes and then we have a logout as well to verify the token and then we will remove the token from the cookies so these are about the backend and in the front end we have the material ui we have the redux so here we have the redux slice we have a guys and then we have a header we have a navigation bar there we have some routes and then we have the app.js where we are rending some routes like the header we are rendering the header for every route and then we are handling all of the routes there and then these are the protected routes so if the user is not logged in so we can't see the user route and then we have everything working fine so this is our application so let's start building the application and for that we have an introduction video as well so let's start with the introduction so before moving ahead let's see some introduction about some topics which we are going to use in the application so the month stack so one stack is the combination of the mongodb express js react.js and the node.js mongodb handles the database operations and node and the expressjs handles the server side task and the react.js handles the front-end tasks so what is the mongodb actually so mongodb is a nosql database which stores the documents in the collections instead of the records and the tables in the sql so about a collection so collection is like a collection of multiple documents inside that and a document is a record inside a collection and if you are coming from the sql database then you can relate to the table as a collection and then record in the table as a document so about the node.js so it is a javascript engine which was originally built for the browser but now can work without a browser as well and having some extra apis inside that and now it is known as the node.js and it allows us to run the javascript outside of the browser now so initially it was just built for the browsers only and we can see about the chrome's v8 engine so it was like the chrome soviet engine that we use but now it is being maintained as a standalone project called the node and then it have some extra apis as well to use the javascript outside of the browser as well and now about the express ds so it is just a framework for handling the server side task that helps the node.js to ease the process and then it contains some controller functions as well it contain the routing so like it contains all of the http part as well so now about the react.js so the react.js is just a javascript library to build the fast and the scalable user interfaces and it is a view part in the month stack and the models and the controllers comes in the backend parts and it also combines to the mvc which is a model view controller application and it is then combined to the mongodb and now the main topic of this project which is the authentication and authorization in the month stack so about the authentication so it is the process of verifying the user like we verify the user by its credentials like its email and the password and if the credentials are correct then we just authenticate the user and then we have the authorization so it is the process of providing the access to the user for some specific application after the authentication so in simple words authentication is the process of verifying that who the user is and while the authorization is just a process of verifying that for what they have access to in our application like we can just provide the access to the user to see just the details of it but not to modify it so we have some authorization part like for what part of application we provide the access to the user so now why do we need the authentication and the authorization so we need the authentication and authorization to verify and provide the access to the user for the application like we cannot provide the access directly by knowing the password and the email we just do the authorization as well to provide them the access so now how to authenticate and authorize the user this is a very big part so first we verify the user's credentials and then we give them an access and then we set the token expiration time so first we will verify the user's credentials and then after the credentials are correct then we will provide the access token to the user and then after the access token is granted then we can just set the expiration time for a specific token but wait what is the token so tokens are used to provide some access and in this project we will use the jwt which is a json web token which is a library to use and it encodes the json data into a signed token which is shared between the two parties which are the backend and the front end so it creates an encoded data of the json which will be providing like we can provide the id of the user the name of the user inside the jwt and send it encodes that data and it provides the user that token that it contains your crucial information and don't give it to anyone so this is about the token and then we'll be using these tokens and now we need to share the access token so we share the access token with user after the credentials are true and then we need to come back from the user again so once we will share the token with the user now we need the token back from the user to verify the details and then to send them the details so after we will get back the token and when we will verify the token so then the verification completes and then we will provide the access to the user so about the access token cycle so we will generate the token and then we will send the token inside the http only cookie so after the verification is completed we generate a token and then we will send the token inside the http only cookie and these are the cookies which will be set it from the back end not from the front end and then it will be added to the request headers which will not be accessible to the front end so any front-end user cannot access that cookies and we are using the http only cookies because of knowing the access attacks nowadays which is the cross site scripting attacks where the attacker adds a malicious code to our website and the attacker can steal your token as well and then it pretend to be you and it can do any harm to the application and for your data as well so we don't share the token with the front end and we just add it to the request and then we will just get back the request from the user by the server side only so it is not accessible to the content overall so the front end cannot access the http only cookies and then the browser sends back the cookies to the back end so this is possible just because of the xio so axios allows us to send the credentials which we will receive from the backend to the backend again so it will be done from with the help of the xeos so we will use the xeos to do that and then the we have the application parts so first what we have the back end and then we have some front end and then we are connected with the api calls and the back end is built with the node.js the mongodb the express js and with the jwt which will send the tokens and with the bigrip js where we will hash the password and we will just encrypt the password of the user and then we are using the dot env as well to protect some variables some key variables from the code and we will add to the environment variables only which will be only accessible by the process.env and then we have a front-end application and then it is built with the react.js and it is built with the redux we will add the redux for the authentication states and then we will add the react router and it will handle some routes and we have some protected routes as well and then we are using the xcos to send the request to the backend and then we are using material ui some components of the material ui to make some stylings in the application so this is all about the introduction so let's start building the application so now after all the discussion now we can start building the application so now we will create the backend application first so i have opened a folder in the visual studio code and now we have to go to the terminal and then we need to select the new terminal from there and then we need to install the node.js application and to install that we have to enter the command as the npm in it so after entering this command then you will see there will be some questions like the package name of our application so you have to press enter and then you will see we have the version so initially we will be having the version as the 1.0.0 so we have to press enter again and then the description we can provide a description as well but i will not provide here press enter so then you will see now we have the entry point so we can change the entry point to the app.js and then we have a test command but we can skip all that so you have to press enter enter again and again and then license here and then you can just press enter again so after this you will see there will be a package.json file into your directory so the npm init command creates a package.json file which have all of the information about your application like the package name we have the one auth we have the initial version of the 1.0.0 description for now it is the empty string but we have the main file as the app.js and we have the scripts as the test and then we have the author and the license so we have all of the details of our application so now we can just create a new file as the app.js to create just a hello world application so first we need to create the as the console.log and it will be the hello world so if i would now save now we need to run the application but now how we can run the application so as of now we don't have any service installed like the node 1 which will automatically identify the file changes so we can just run the app.js with the node app.js command so you have to enter this then you will see now there will be the hello world on the terminal but now we can just create some commands like there will be the start command and for the start command we have to write the node so as we have discussed in the introduction video that what is the nodemon so we have to use the node one and then we have to install the node one as well so now i have entered the command as the node one as the app.js so it will automatically detect all of the file changes via the nodemon in the app.js directory in the app.js file so we have to just save and then we have to install the node1 as well so it will be npm install as the nodemon so we have to wait now till it installs in our application so now the node one has been installed and to verify that then you can go to the dependencies and you can check the dependency as the node bound so we have installed the node1 and now we have the start command as the nodemon as the app.js so now we can just run the app.js with the node1 so we have already created a start command here so we can just write the command as the npm start so it will automatically start the node 1 here so this is a command which will start the application from now on now you will see now we have the hello world and then you can see there is a newer console log that clean exit waiting for the file changes so whenever any file changes will happen again like like we have the hello world and then if i will add the exclamation mark after that so then you will see the nodemon will automatically detect the file changes again and the hello world is printed with the exclamation marks so now we have completed the installation of the nodemon so now the initial application is working fine and now we can just go and we can just install the express js in our application so we can just stop this terminal by pressing the control and the c and then the terminal will be stopped and then we can just install the express so it will be npm install as the express so the express will be installed and we have seen about the express that what is express why do we need it in the introduction video as well so we have to install the express now you can see express will also be installed in the dependencies and now we can just create a basic application with the express as well so it will be so now to create a new express gear application i will now remove this and i will first import the express js so it will be the const as the express it will be equal to require and they require is used to import some files in the node.js like we have installed the express js so we have to get the express file also from the node modules and now we have the express and now we have to adhere the variable as the app and it will be having the whole app functionality inside it so app will be equals to the express and the express will give its reference to the app.js now and the and the app variable now holds all of the functionalities within the application so now we can just write here the app door to use and the use is used to add a middleware for that like middlewares for the routes middlewares for the connections middleware for everything so we have here the app.use and then we have a default url like whenever we will opening a port on the localhost or anything so it will be the default route like we don't have anything after that slash so it will be the default route and then we can add the request response and the next as the parameters so it will be the request response and the next and then we can use here the response dot send so we have to send here something on the server so response dot send it will be equals to like we can send here the hello there so now we are sending but now where is the server so we have to create here the server as well so it will be the app dot listen so this server will be then listened to the local ros port 5000 so we have to specify the port here so we have the 5000 port and then we can also add a callback function here so it will be the an arrow function inside that and then we can just add here the console.log that listening to localhost 5000 so if i will now save now we can see in the application if it is listening to local 5000 now it's yes it is listing so we can just go to the chrome to see if it is sending the hello there as well so we can just go to localhost at the port of the 5000 and to check now you can see it is sending us the hello there in the locals 5000 and if you will change the router as anything like it will be the api so we have to go to the api so if you will just refresh it again now you will see it will show the cannot get but when you will go to the slash api as we have defined then you will see so it will show us the hello there in the express.js application so now we have created a basic server with the expressvs as well and now the next step is now we have to remove all of this because it is just a basic application and we don't need to use it in our main application so we can just remove everything from there so the express js will be there only for the import statement and now we can just go to the mongodb to install the mongodb packages so first we need to go to the mongodb to create a database so we can go and then you can see there will be the link of the mongodb the application data platform so we can just click on that link and then we can just click on the sign in to sign in for the mongodb so we have to wait so then you will see there will be an option of the login with google so we have to try this or if you have the email or the password associated with the mongodb so you can just try with the email and the password but i will now go ahead with the google so now you will see i have the previous databases here but now i will start from the new project so we have to go to the new project so we have the new project here and then we can just create a brand new project for our application so the name of the project will be like the man auth and then we can just create here the next and then you will see now we have the set permissions but now we can just skip that and we can just click on the create project button so it will create a new project for us in the mongodb so then we can just set up our cloud database as well so now you will see there is an option to build a database so we have to click on that option and then you will see now we have three options like if you will opt for the server less then it will cost you around zero point thirty dollars per one million reads and then you will see there is a dedicated as well and then you will see the other shared as well but if you want to try with the free and you can try with the free by clicking on the shared cluster so you can just create here from the free as well so now i will go ahead with the free as well now you will see now we have the default options so i will now go with the default options again and click on the create cluster so the new cluster is being created and then you can see now we have some options like username and the password so we can add a username as the admin and then we can just add any password here so i will just generate the secure password from the auto generate option and i will just copy that password so we have to save this password because there is no option i think to just reset the password again so i will now just save here the password and then now we can just create a new user and then now you will see now we have some environments like where we want to connect so i will add here the ip addresses but now we can just skip that because we need to access from everywhere so we can just go to the database access now we now you can see now we have the admin user and then you can just edit the options as well and then we have the network access and you can just add there the ip address from below option so you can just click on the add ip address and you can just add as the allow access from anywhere and if you want from only the specific ip address so you can just add your current ip address as well so if you will add from the current type yet there so it will be only accessible from your current ip address only but now for now i will now click on the allow access from anywhere and i will now confirm so then you will see now the changes will be reflected within few moments and then once you will go to the database now you can see we have the database deployments and now it will be deployed within zero to three minutes now you can see one to three minutes it will be installed until then we can just go and we can just install the mongoose so we have seen about the mongoose in the introduction video that what is the mongoose and why do we need it because it provides us access to just interact with the mongodbs so it is very simple and it is very easy to use to interact with the mongodb database so we have to just install the mongoose so we have to go to the terminal again and then we have to run the command as the npm install as the mongos so the mongoose will be then installed in our application and then we can just connect our application with the mongoose and the mongodb so they all will be connected so the mongoose package is now installed and we can see the mongoose in the dependency section as well now you can see now we have the express mongoose and the node 1 and then you will see now if now the database is also deployed on the cloud so now the first step would be connecting our application to the database so now we can just connect our application with the mongodb database and for that we need to import the mongoose here so const as the mongoose will be close to the require again as the mongoose and then we need to provide the app as well so const app will be equals to the express again and we have to give all of the express functionality to the app so it will be the construct equals to the express and then we can just use the mongoose so to connect to the database so it will be the mongoose dot connect so the connect function is used to connect to the database so first it needs a uri which is the string so we can just go to the database cloud as well and then we can just click on the connect and then we have to click on the connector application and then you will see now we have the node.js selected from there and then we can just copy here this uri so this is a uri which we need to pass there so it will be in the cures so now you will see it is now passed and then we can use a the then statement after this because it is a promise if you will hover over it now you can see this is type of a promise so we can just add here the then statement as well so whenever the connection will be succeeded so we can just create a then and then we can just add some functionality here like then so once the application will be connected to the database then we have to open the server like app.listen on the port of the 5000 and then we can just add the console.log statement as well like the database is connected and i'm listening to localhost port 5000 so this is the console log which i need to enter here and then you will see now in the connect function now we have the mongodb and then we have the password so this is not the password which we need to use so we have to replace this password from here and then we need to write the password which we have copied from there so we have to write this password after the admin slash column and then there is a new thing here which is the my first database so this is the default database which will be created by the mongodb so we can just change this if we want to change our database name like i will add as the one dash auth so this will be my database name or i will now add this to the auth so this will be my database name as the auth and then you will see we have the connection and then we can also provide the catch statement so if there would be any error while connecting to the database so we can just console.log the error which we will receive from the parameter and if i will now save and if i will now just start the server again from the npm start so then now you will see the database is connected and the connection is successfully created and it is listening to the localhost 5000 so now everything is working fine and now we need to build the functionality of our application now the application is connected to the database and now we can build the full functionality of our application so first we need to build the folder structure so first i will create a folder here and with the model and the model will contain a user model inside there so we can just create a file as a user dot js so it will be the user model and then we can just create another folder so it will be the routes which will contain all of the routes of the user so we can just create a new file as a user dash routes dot js so this file will contain all of the routes from the express.js and then we can build and then we can create another folder here as the controllers so it will the controllers so the controller folders now we have created and this folder will handle a new file inside that so it will be the user dash controller dot js so this file will handle all of the controlling operations of the routes so once the user will go to the route and then we need to write the controller functions here so these are the functions which will control the routing operations so now we have created the folder structure so now we can just go to the user and then we can just create the model for the user so the model of the user will contain some things like it will be the first we need to import the mongoose to create the model it will be the mongoose will be equals to the require and it will be the like the mongoose and then we can just use the schema so we need to build the schema of the user first so it will be the cons and the schema is equals to the mongoose dot schema so we are now referring the schema to the mongoose dot schema and then we can just create the new schema by having the new instance of the schema class so we can just create the schema as the cons user schema and it will be equals to the new schema of the mongodb database now we have the new schema and then we can write there the objects inside that the first property of this schema will contain the name and it will of the type of the string and then it will be the required field in our object so the required it will be the true so now we have the name and the field name is equals to the string so it is now showing you the true string but it is not the to string so the name is the string and then the required field is the true and then we need to write here the email of the user through the email and it will be of the type of the string again and it will also be the required so the required prop will also be the true here and then we need to write another property as the unique because every user will have a unique email id so we will add the unique prop as it true and then we need to edit the password field so the password field will contain the type again as the password what will the type as this string and then we can just add the required prop again so the password is the required field and it is equals to the true and then we can also add one more field as the main length so the password so the minimum length of the password will be close to the like we can add here the six for the minimum length of the password so this is our schema of the user which we have created now so it will have a name will have an email which is of the type string and it is also the unique email so if the email would be repeated again so the mongoose will throw us an error and then you will see we have a password and also so now we can just export the schema as the module dot exports and it will be equals to the mongoose which we have imported dot model so the model creates a schema and then it will export the schema so we need to provide a name as the string so it will the user and the u will be the capital and then the schema so schema we have already created as a user schema so the variable the user schema will be there so now this will export the mongoose dot model as the user and in the mongoose it will be stored as the users because there is a default naming convention in the mongodb database like if you will adhere the user so it will be stored as users because the first letter will also be the small case letter and then it will add here the plural form inside the mongodb so all of the models name will be on the plural form in the mongodb collections and now the schema is created and now we can just go to the user routes to create some routes so to create some routes for the user schema to interact with the database so we can just create the routes so first we need to do as we need to import the express from the require as the express again after importing the express now we can use the router so we have to declare a variable as router and it will be equals to the express we have imported the express so the express has a function of the router so now we can use the router and now this variable holds its reference inside that so now we can just create some requests like first it will the router dot get so we can just create a get request for the http and then the path will be like the there will be only the default path which we have and then we can just add there a function like the request response and the next as we did in the basic application from the express and then we can just like just send something like response dot send and it will be closed like the hello world now we need to export the router as well so it will the module dot exports will be equals to the router so right now we only have the one route but later we have more routes there and then the all of the functions like this like we have defined at the callback function so all of this function will be then in the controllers file but now to just test the application if it is running or not so we can just define here the router dot get and it is just a simple hello world and then we are now exporting the router as a standalone module and then we can just go to the app.js to import the router but with the cost router will be equals to the we can import the router here from the require again so the require and it will be in the i think will be in the routes dash we have the user routes file so now user routes file is being imported and now we can just create here the middleware for us so we need to create a middleware as the app dot use so by default url will be like the backend or like the api so we can add the api and then we can just add here the router so it will the router so now the router will handle all of the operations after the api there so it will be there as the so we have to add here the api at the slash api and then this will handle all of the routing operations after the api if i will now save so now if i will now just go to the chrome to test again so now we can test the application by going to localhost at the red 5000 so then you will see now it is showing as it cannot get but once we will go to the api again so it will show us the hello world there so now it is sending us the hello world but now for all of the operations like this like we cannot go to the chrome again and again so we need to install something like we need to install the postman which is like a api testing tool so we can just install the postman from there so now you will see now we have the poster man and then we can just download their the postman from this link so you so i am using the windows operating system to use the and to create the rest api so if you are on the linux or in the macbook so you can just try out with there with your supported operating system but i am on the windows so i will try out with the windows so i have already installed it in my machine so i don't need to install it again so you can just install and you can just open the postman for the routes so i will now go to the window select the postman to test the route so now you will see this is the screen of the postman and then we can just enter here the url as well like it will be the http slash localhost into the report of the 5000 and slash api so once i will click on this thing send requests and you can see this is the get message also so then you will see it will show us the hello world so now the basic application has been created and now we can start building the real routes for the http request so i will now delete this route from here so we have to create a new route for the signup functionality so first there will be the signup functionality that will be the router dot post so it will be the post request and then we can just add here the slash and it will sign up so it will sign up and we can add a controller function after that so we can just go to the controller and then we can just define here the controller or the signup function so first it will be const as the user and it will be close to the require so first we need to require the user model which we have created so it is in the uh model and then it will in the user so we need to import this user now the user is imported and now we can just create a first function which is a sign up that will the cons sign up and it will be equals to async function and it is asynchronous star so we have to define here it as a async function so first it will contain the request then it will contain and response and then the next the request is like which we will get from the client and the response which will send from our server and the next is used to just move on to the next middleware after the certain task so now we have created the signup function and now we need to create a the user so to create a new user now we need to create here some fields like first it will contain the cons as the user so it will be the new instance of this user and then we can just add here the object so first now you can see now we need to provide a document and for the document first we need to provide as the name which is provided there so the name will come from the request.body so the request.body just like contains a key value pairs of the data which is submitted in the request body like we will submit the request body from the postman and then in the json format so it it will contain a key value appears of the data so like we are now giving the name as a requested body so it will contain a key as the name so we need to provide the name as the key and then we can also provide here some so if we can see about the email and the password so we need to provide the email and the password as well so we can just go here so after the name we have an email so the email will be having the email field and the request dot body dot email so now we have the email and now we can also define the password so to the password as the request dot body dot password and then it will create a new user for us and then we can just and then we can just use the try catch block to save our users like it will be the try and then we can just regret the await and then the new user which we have created as a user dot it will be the save so save is a function which is available in the mongos to save a document in the database and then we can also write here the cache statement as well to catch if there is any errors so we can just catch the error and then we can just log it in the console so it will be error so now we are saving the user into the database and then we can just return something like return at the response dot status as the 201 which is created and then we can just create here the json like it will contain the message as the key and then we can just add here the new user which we have created like we can also send the user which we have created there that will be the user so now we are now sending the http request for the sign up and this is like a user and it contains the request.body.name and the email and the password as well and then now we are now saving the document into the database with the user.save function which is used to save the document and then we are now returning the status of the 201 as the json which is equals to the message and the user and then we can just export this function as well like exports it will be the exports dot the function name like the sign up will be close to the sign up so now we are exporting the sign up function from there and then we can now just go to the user routes and then we can now import the signup function from here it will do the sign up so now you will see the sign up is imported from the user controller so we can use this sign up here if i would now save in the end if i would now go to the postman once again slash api and slash it will be the sign up so now we need to so now this is a post request so we need to select the post from this drop down and then you will see there is a route as the sign up and then we can just add here the json body here like it will be the raw and then it will be the json from this drop down and then you will see now we have some fields like we have the name so we can have a name like i will provide my name here as nickel and then into the email the email we can provide as a nickel at the gmail and then we can also provide a password the password will contain any password like i would give one two three five six because the minimum length is the six so now if i would now send the request to the database now we should see the success message so sending the request to the database so now there is an error but what is an error so we can see in the console and now we have the unhandled promise rejection warning like there is an error so this error because now it is showing us that the cannot read property the name of the undefined because now the server doesn't know that which type of data it is expecting from the client so we need to add here something to the server like it will know that only the json data will be expected to the server so we can use there the lab dot use at the middleware so this will be a middleware and then we can use the express.json so we are now sending the json data from the client so the server then will know that the type of the data is the json data so we can just accept that if i will now send the request again now you will see the request has been sent to the database and then you will see now we have all of the fields of the user but we have two new fields like id and the v the id it is like the id which the mongodb gives us so now this means that our product is now successfully sent to the mongodb and it is giving us the id in return and then you will see the status is also the 201 which is created so if you are not sure that the user is now in the mongodb so you can go to the mongodb and then you can just search for the user there now you can just click on the browse collections with the collections which we have and then we can just go to the i think the users collection we have now you can see the auth is a database and the user is a collection now you will see now we have the database user our collection now we have the user so now the signup functionality is completed but there is one thing which you need to add the validations after that like you are just declaring a user as a new user and you are not providing all of the details there and if you will provide the user as the same email so it will throw us an error because we have not defined the user there but it will still send the request to the database so we can just stop that and we can just validate before it send the request to the database and then we can just return something like this email is already there so we can just add here some validations after that so we can just create a variable as the let as existing user the existing user will be by default an empty value and then we can also destructure the request.body from there because we don't need to write always the request.bodyrequest.body so we can just create an object and we can just destructure all of these fields from the request.body like the name like the email like the password and it will all be coming from the request dot body so we are now destructuring everything from the request dot body and instead of this name and the request or body dot name so we can just remove the the name and the email and the password as well so now we are sending the name as the name and the email and the email and the password and the password and then we can also remove this name and the name here also because and the es6 provides us a new way that if your name if your key and value pairs are of the same variable name so you can just define as the same thing like the name which i will provide as this so it will be acted like the name call on the name the key value pair so we can just provide you the name and the email and the password here and we can just remove the password from here so now you will see so we have destructured successfully all of the details so now we can just create a validation like we are now defining the existing user so we can just write here the try catch block again with that try and then we can just check the existing user like if the existing user we can just check in the user model which we have so it will be await function because it will await for the task and it is an asynchronous task so it will the user model which we have imported and then we can just call here the function as the find one which will find a record in the user and then we can just add a an object and then you will see it will be having a filter query so we can just add a requirey like if the email is already there in the email in the mongodb so we can just check that field like even if we provided the catch as well like it with the error so now we are now checking if the existing user is already there in the mongoose database in the mongodb database so we can just check like if the existing user is there so then we need to just return at the response dot status will be close to like the 400 and then we can just add a json message also like the message will be there as the user already exists so it will be a message which will be throw within for the validation purpose and else after this after checking this now we can just add here the user which is equal to the new user and then we can just try and catch with the statements and then we can just add here the return statement like the return status equals to 201 so if i will now save now we have added some validations here so now if i will now send this record again to the database now you will see it will throw us a message that the user already exist so now we can see we have the validation of the user if the user is already exist so we can just now register the user again so we can just add a functionality like the login instead so we can just build here the login functionality after the user has been created so after that if i will now just send again now you will see the user already exist and the login and state so now the user is there now we need to build the login functionality like the user will be logged in now so we can just create the user functionality as the login so now before moving ahead to the login route we can see that we are storing the same password in the database which we are receiving from the request.body so if i now send a new request to the database a new sign up request and if i now click on the send now you can see now we are getting the same password which we are now receiving from the user but it's not a good option like if by chance our database is hacked so we will be exposing every details of the user including the password to the hacker and now hacker can do anything with that and we have another use case that if we are building a backend server and suppose we have a team which is working on so we can't share the password of the users with our team and it is confidential information about the user so what we would do in both the scenarios so it's not the right way of storing it in a database we have to see the solution that how can we store the passwords so the solution can be we can just encrypt the password of the user and then we can store it in the database so that it can't be directly exposed in the database and it will be a hash string and it will not be easy for the hacker to decode it so we will encode the password and the hacker needs to decode it to get the user's details so that's the right way of storing in the database but now how do we encrypt that so for that we can use a package name which is the js to just encrypt and then the decrypt the password for checking the user information so i will now go and if i will now install the bicrypt.js from there so i will not stop this terminal and now we have to install the bicrypt.js npm install as the bakery js and now the bigrip js is now installed and then we can go to the user controllers and then we can see that whenever we are sending a new signup request then we should now encrypt the password using the decrypt so first we need to import the decrypts so it will the const as the decrypt will be equal to require and then we will be requiring the bigrip js from there bigripjs so now we have imported the big grip whenever we are storing a new password so then we can just create a hash password before that so if the existing user is there and then we are sending a response as the 400 and we are sending a message that the user already exist and the login instead so here after that we can just store our password as the hashed password so it will the const as the hashed password and it will be equals to the decrypt which we have now imported decrypt dot sync so we have a function which is the hashing which is a synchronous way of hashing the password so we can just hash here the password and then we can just store the password as the hash password instead of the direct password which you are not getting from the user so if i will now save and if i will now just restart the application by writing the npm start and then we can just check again in the postman so if i write a new email like this like nt test.com and i am sending the password as the one two three four five six and if i'm just sending a new post request now you can see the password is different now you can see now we have a hashed password in the database so this is what we wanted like we don't want to expose the password to the hackers even to our team as well so we want to store it as a hash password so that it would be very difficult to encode this password so it's the right approach now the signup functionality is completed and now we want to login the user so for login we can just go and then we can just create a new route in the user routes and it will be a login route so it will be a new post request from the router so it will the router dot post and it will be a request to slash at the login so this will be a login route and then we can just declare a function and then we can just use that function within this route so we can just go to the users controller and then we can just create another function which will act as a middleware so it will be the const as the login and it will be equals to the function as the request response and the next and this will be an arrow function once again and this will also be the asynchronous function because these all are the asynchronous tasks and then same we can get the details of the user by the request dot body so it will the email and the password so we need the email and the password for the login functionality so we will be getting it from the request.body again and then we can just check like we can just now declare a existing user again like let existing user which will be equals to like by default it will be undefined and then we can just use here the tri cache block and then we can just check if the user exists or not so it will be existing user once again existing user will be equals to the await and then we can just find one record again like it will the user model dot find one and we need to pass a query here in the object like the email would be the email which will be using like email will be equals to the email and then if the user will then the find the request and then we can just log in the user so now here in the catch block so we can just return the error like return new error and the new error would be the new error which we are now receiving from the try catch block and now when we have the existing user so we can see if we don't have the existing user and we can just return the server with the response dot status and the status now would be dot json we need to send the json again and it will be like the message and the message can be anything like the user not found dot and it will sign up so we are sending a message as the user not found and the signup place and now we can see and now we have hashed the password of the user but now how can we check the password so now we can see if the existing user is not available then we are returning the response dot status as the 400 and we are sending the message as the user not found and please sign up but now how do we check the hash password with the actual password of the user and the solution is very simple again so we can compare the password with the decrypt again so the bcrypt provides us a way to just hash a password so it will be the const as the is password correct so we can just declare a variable as the is password correct and we have a function in the bigrip js like comparison we just synchronously compare the password and then returns a boolean so we can just use that it will the bcrypt dot compare sync and then we can just use that and then we need to pass here the password of the actual password like there we are now sending the password which we are receiving from the request.body and then the second parameter is from which password we need to compare so we need to compare it with the existing user.password so the existing user if we have the existing user then we should have the password as well and then we will compare the existing user with password so then we can see if not so that if the password is incorrect then we can just return again like the return response dot status and it will be equal to the 400 once again as the unauthorized and then we can just send again the json again with the message and the message can be again like the invalid invalid email or the password so then we will send this request but no so if the password is now correct then we can just return the response dot status as the 200 which is the success and then we can just send a json message once again as the message and the message would be like successfully logged in so we will send this message to the user if everything is okay so if i will now save and if i will now just try out sending the request and before that window just export this as well like it will the exports dotted with the login and it will be the login function which we have now created so it will be the login and then we need to use the login in the user routes as well that will the login so if i would now save and if i would now check the request again now i will now test with the sign up so first i will now sign up the user like it with the sign up so it will be the post request and the url will be the local localhost at the rate 5000 port and then plus sign up and then the request.body would be we need to send the raw once again the text we need to send the json and the json data will contain a name of the user so we need to send here the name the name will be like nikhil i am sending my name once again and i am sending email as the email and the email would be like nikh at theretest.com and we are sending the password as well like password and the password would be i'm sending the one two three four five six and if i now send the new user to the sign up request now you can see now i think there is an error like four or four not found so we have to see what is there with the request so unexpected json token at the position seven so it will be the api and then we need to send the request now you can see now the response is successful now the response is the 200 one which is created and then we are sending a nickel and then killed at the retest.com and we are storing the hash password but now we can just check the same details with the login now so we can just now create a login request it will the login http request the url will be the same and then we need to just remove the signup from there and then we need to enter the login there a login and then the body will contain again the raw and it will contain the json format once again and if i will now just add there the json so i will copy this and i will paste this here and if i will now just send the request of the post and we should see the success matches now you can see now we are successfully logged in to the database and now the status is also 200 which is okay so now we have completed the login and the sign up and now we have successfully created a login and the sign up functionality in our application and it is good to see as we have stored the hashed password and now the password is fully secure and we can also login but now what do we need to do after the login so we need to authorize the user now the authentication is done and now we need to authorize the user so after the login we need to provide user the access to use our services of our application services but how do we provide the access so we can provide a token to the user to provide access and the token will be very confidential and it will contain the details of the user like id or the email and after a specific time the token will be expired like after nr the token will then expire and then keep the user logged in into the application so we can just regenerate the token and keep the user logged in and we can also destroy the access of the user as well but we can generate a jwt token which is a json web token and i'm sure you have heard before which will help user provide some access to use our application so for example like we can generate the token now user have to provide us the token to get the details like for this application we will just show user the details of the user like its email and the password but if you are working with the big application then you can offer services after the login and the authorization only when the user will then provide you the token so the user will provide your token and then you need to offer the services to this so now we can generate the token so for generating the token we need to go to the application once again and then we need to install a new package it will be the json web token so this package will help us to generate a jwt token to provide the access to the user and this token will provide access by encrypting the details like the id of the user so now let's start generating the token for the user to provide the access so now in the users controller when we are declaring the login and when we are using the login so after the password is correct then we can generate the token to the user so we can generate the token by just importing the json web token first so it will be the const as the jwt and it will be equal to the require and the require will then contain a json web token so now we have imported the json web tokens so now after the user details are correct so after everything is correct so we can just generate the token so now we can generate the token after the password is correct so it will be the const as the token so this is the token variable which we will generate and then we have a function in the jwt to generate the token and it is the sign so it will the jwt which we have imported dot sign so we have the sign function which signs the token to the user so first the first parameter contains a payload which can be a string an object or it can be a buffer as well so the payload contains a data which we need to encode so it can be an object in this case like we can just encode the id of the user by providing the existing user dot id and the second parameter is the secret key so this is very important so we should have a secret key and you need to make sure that this key is not shared with anyone so this is a fully secret key which is used to encode this token and with this secret key only then we can decode the information as well so you need to make sure that it is not accessible by anyone except you or the team so it will be a secret key so by default now we can generate a secret key at the constant tier but i prefer you and in the end we will just store the secret key in the environment variables by creating a dot env file so we will store the secret key there but for now only now we can generate a constant secret key like it will the jwt secret as the key and it will be equal to like secret key can be anything like it with the my key or anything so in this case we can now declare the secret key as the my key so there after we are signing the user then we can add the secret key as it will be the jwt secret key and then we need to add another parameter and it will be your object and now we have some options like we can define the algorithms like hs256 hs384 and any algorithm so by default it is the hs256 so we can use that and then we have audience we have the encoding we have the encoding properties like jwt id key id and we have a lot of properties to use but here in this case we will just use only one property which is expires in and the expires in property you can see here like example equals to 60 like it will be a time span it can be a two days or ten hours or the seven days as well so this is the property expiring which we need to use and the expires in property will define that after how many times spent after how much time the token will expire so in this case we can just use as the one hour or the two hours or the three hours as well so after that the token will expire so then we can use this expires in there so now we have generated the token after the login and then once we will get the information of the user like we are now only defining the login route but whenever we want to verify the token then we can use another route here by defining here the user route in which we will send user their information and for that first we will verify the token which we are now sending here so now we are sending the token and now we can just send the token whenever the user will be logged in we can send a message and then we can send the user as well like the existing user existing user is there and then we can also send the token as well so if i will not log in again so if i will now see if the token is sending or not so we can start the server like a database is connected and now if i will now just send again the login request so now you can see now we have some information now we have the message which is called the successfully logged in and then we have the user and then we have the every details of the user including the password and then we have the token as well so now this is the token and it is very big token to just decode then you will see this is the algorithm used as the hsa256 to just encode this token and this token contains the id of the user so it is encrypted id so now we have the token after the login and now where do we use the token to authorize the user so we can just go to the user routes and then we can just declare another route where the user will ask for their information like for example the email or the password or for the name so we can just declare a new route for the router at the router dot get and in this get request user will ask for the information like slash it will be the user and then here there is a tricky part like here we need to first verify the token which we have sent through the login so to authorize the user now we have to just access the token of the user which we have now sent so we need to provide the access token to every request after that so we need to then verify the token and then we need to just share the information to the user so first there will be a new middleware as the verification of the token so we can just create a new function after that so it will be as a cons as the verify token and it will be construct the request on the response and the next and then this will be an arrow function once again and this will act as a middleware again and then we need to send the token but now how we can send the token and how can we just get the token so we can send the token now in the authorization tab here now we have some types so we can just select the types and then we can just select any of the type but in this video we will go with the br token so we will send a bearer token with that like we have the token same it will be copied there so we need to remove that so we will use the bearer token with that and now to access that we need to get the token so it will be like the const as the headers and it will be equals to the request dot headers and it will be equals to the authorization which we have so it will be the authorization so the spelling should be same as the authorization so now you can see now we have the request dot headers authorization so if you will just console.log the information of the headers so then now you will see so i am now just console.logging the information and then we will now just exports dot as the verified token and it will be equals to the verify token once again and then we will use that same into the user routes as the verify token first for now we are now using only the verify token so now i am sending a get request from there so the url should be the same so after the login it should be the user and then it will be a get request and then we need to select the authorization and then we need to send the bearer token and for the bearer token which we have received the token from after the login for only this user or only nickel test.com so so this token is only valid for this email id so then we can just use this token so i have now copied and then we need to go to the get request and then we need to select the authorization select the bearer token and then we need to paste the token here and if i will now just send the request there now you will see now we have the token which we have now sent and it is the same token now you will expand you will see in the end there is a 5 0 g a and we have the same token here and then we have a bearer in the front as well because it's a bearer token so now we have the access to the token and now we need to verify the token so after that we can just verify the token so we can just retrieve the token from this bearer token by just splitting the token so it will be the cons token and it will be equals to the headers and it will be dot split so we will just split the headers into the space and then we will access the first number index from there so we need to access the token so it is a zero index it's a first so the splits just splits the string into the arrays and then we are now sending the arrays that between the spaces so it will be acted as a two arrays bearer and this token and then we are extracting the first index element and then now we have the token and now we need to verify the token so it will be so we can check like if we don't have the token so then we can just send an request at the response sort status as like the 404 and it will be dot uh json it will be locked the message like the string will not token pound and then after we have the token and then only we can just access the user so to verify the token we have a function again in the jwt to verify the token and it is a jwt dot verify and then it is a verify method so we need to edit the token so we can just convert the token into the string so it will be the token and then we can just use the token there so after that we need to provide here the secret key again which we have generated there so we have generated the constraint as the jwt secret key so then now you will see now we have the token and then there can be a callback function after that like completed or not so we can just generate a callback function so the first parameter is the error so if there is error in validation of the token if like the token is wrong and then we have the error and then we have the information like decoded information so we can use the decoded information as a user because we have uh generated the user id with that so we can just give here the arrow function after that and then if there is an error and then we can send the message at the response dot status it will be equal to the 400 at the unauthorized and the json which contain a message inside that message can be like invalid token or after that after we have sent the request there and then we have the user so if it is not there so we can just return here as well so if it is not there so then we can use the user so now we have the user which i have the decoded information so if you will just console.log the user there user.id which we have then uh encoded into that so if you will just console.log and then you can try again with that so if i will not send the request again so i think there is an error so now you will see now we have the unexpected end of inputs so i think there is an error because now we have now generated the exports verify token there so after that we need to just add the libraries there now you can see now the application is started and then we can just generate a new get request so click on send request now you can see now we have the databases connected and now we have the id of the user so now we have now verified the token and now the token is correct and now we have the id of the user and then we can just move on to the get user and then we can generate another middleware function to get the details of the user from this id so now we have successfully decoded the token from there and then we can just get the id of the user by going to the user routes so we can generate the new route after that so it will be the cons at the get user and it will be equals to the request response and the next and it will be a asynchronous task and then it will be arrow function so before that we need to send the id of the user to this middleware so for that we need to just send here the request dot id so we can generate any of the parameter any of the name or variable with that with the request object so request dot id i will provide you the user user will be there i think so it will be the user request dot id it will be the user which we have now decoded dot id so we have now send the request dot id as the user route id and then we can just move on to the next middleware after that so we can just use the next middleware and next after the authorization after the verification is completed and then we will move on to the get user function so we can just get the id of the user from the const as the user id and it will be equal to request dot id which will receive from the parameters from there and then we can complete this by generating a let as the user and it will be like the undefined by default so then we can just use the try catch block once again so i will now expand this so now we have the try catch block and then we can generate as a user will be equals to await and then the user we have the model of the user dot find method so we will find the user by its id from the find by id method and then we can generate the id and then we can just send the id which we have got from the request.id and then we need to get all of the details instead of the password so we can use the minus sign and then the password so it will just remove the password field and it will send all of the data of the user from that so now we can just get the user and then we can use the catch block also if there is an error so we can just return new error as the error in that and now we are using rightcast block and then we can just validate again like if we don't have the user and then we can just send here as the response as the return at the response dot status again and it will be like the 404 because we don't find the user and then we can just send the json once again like it will be the message as the user not found so now we are sending the message after the validation and then after everything is fine so we can just return as this response dot status and it will be the 200 and then dot json we can send the user so it will json and then we can send the message as the user only so now we are sending the user so if i will now just export this as well exports dot we have now get user will because of the get user function once again so then after that we can now use this in the user routes and then we can generate the so we can just get the user route by the get user so now we have exported that and then we have imported there so after the verification of the token and then we will move ahead to the get user with the next function and then we will get the details of the user so now we have provided the authorization again because the validity is 1r so if i will now just click on the send now you can see now we have the information of the user so now because we have decoded the token we have now got everything and now we have completed all of these steps in the jwt and now we have our fully secure application but one thing missing which you will see later and then now we are getting the user object with its id with its name with its email and everything instead of the password because now we have now excluded the password from the user controller so now we have provided everything and now everything is working perfectly fine and there is something which you need to know so now we have completed the jwt part and this is the way in which the modern applications are created so they just encode the information of the user like the id or anything like the user id the user's id user's email or anything with the jwt token and then they decode it and then they try to get their information from it and then they will get the information and then they will retrieve the information to the user so this is how the modern web works so now we are providing the token for every request and it is a very good approach and it is a modern approach as well so we can store the tokens into the local storage of the browser or into the sessions or into the cookies or into the memories as well but is this a good solution to store the token in the memories in the browsers where all of the javascript code can be accessible to you via the developer tools so is this a good approach but then where can we store the token in the front end so if you will store the token into the local storage so i am now currently into the material ui website so if you will check the console now you can see if you will just click on the local storage now you will see now you have access the local storage of the browser and then if you will store the token into the cookies like it will be document dot cookie so the cookies will also be accessible to you and if it is accessible to you then it can be accessible to any hacker as well so you can go to developer tools and do certain things with your application and it can break your application as well if any hacker will steal your token so here comes a new topic so are you getting my point so where can we store the tokens so in the modern web applications we also have a new threat called the xss attacks which are the cross side scripting attacks where the attacker or the hacker adds a scripts to your application and pretend to be you and it can steal your access token and then can do plenty of the things which are not good to your application and then the application can be hacked and then it will be break so this is a big problem so where can we store the excess token if we have the hackers onto there so the solution is we have we still have a solution is we can store it in a cookie but wait the cookies are accessible to the browsers but this cookie will be made from the backend and it will be an http only cookie and i have done a lot of research on this before creating this project and i came to note that storing the access tokens in the http only cookies is the most secure option to secure the web applications but how does all that work so we store a cookie from the backend not from the front end and we store a cookie from the backend and then we will send it to the front end and then the cookie will not be accessible to you but still a problem that if it is not accessible to you then where do we send the access token so in the front end whenever we are sending the request we will send the request from the axios so the axios provides us a way where we can send back the http only cookie which we will receive from the backend to the backend again so we will receive http only cookie from the backend to front end and then after every request after that so there is an option in the axios so we can just send back the same cookie again but it is still not accessible to you so it can be a very good solution storing the http only cookie and getting the cookie back from the client and then verifying and then providing the access to the user so that's a lot of discussion about that so let's move ahead so postman have a default settings to send back the http only cookie so we will test it on the postman first and then if everything will work fine and then we will get into the front end building the front end application and then we will use that with the react and the axios so now to use and send the cookies we need to install a package named cookie parser so till the npm install as a cookie dash parser so after this package we need to use the cookies and then we can just import the cookie pars array as he cons as the cookie parser and it will be equals to the require and then we need to add here the cookie parser after the require so now we have imported the cookie parser and now we need to add it into the middlewares as well so before any middleware so we can use here the app dot use and it will be the so it will the app dot use and it will be the cookie parser so we need to add here the cookie parser and then we need to call this function so now we have now imported the cookie parser and then we can use the cookie parser in our application so now i am restarting the application again and then we need to go to the user routes after the user is logged in so after the token is created and then we can just set the response dot okay and it will be the function to add the cookie now you can see response.cookie we can provide a name of the cookie then we can provide a value and then we can provide some options in the third parameter and the options can be like maximum age the expires like when the cookie will be expired and then the sign is true or not and the path so we can just add these things so first it will provide a name so we can just add a name as the id of the user so we can just set the id like we have the existing user dot underscore id so this is the id so this is the name of the cookie and then the value of the cookie would be the token so we will send the token and then we will check the token of the user after the cookies and then we can just add here some options in our object so at first it will the path and the path will be can be just it will be the by default blank path and then we can just add the expires and the expires will be there and then we can just add a new date here that's the new date because it's need the date in the expire so when the expired will be there so we can add a date dot now in the new date so it will provide the number and then we can just add like if we want to cookie for the second so we can add the thousand because a thousand milliseconds is just one second so we can just add the cookie for 30 seconds for now and then after that we need to add the http only so if i do not provide the http only in that so then it will be accessible to the front end but we need to provide the http only also so it will be the http only so we need to provide it to the true and then we need to provide a one more property as the same site so for the security reasons we can provide the same site and give a value as the lakhs so now we are sending the cookie so now we are sending the cookie with the response dot cookie after the token is created so if i will now save and if i will not just go to postman to send the request again now i'm in the postman and now we need to go to the login route and then we have the authorization and my token is now expired which i sent with this so if i will now send this again now we should see the cookie there now you will see now we have some data that the user is successfully logged in and then we have broken and then if you will go to the cookies tab now you will see we have a cookie like the name of the cookie is the id of the user and then the value has the token and then we have the domain of the localhost and then we have the path and we have the expires in property also like the it will expire after 19 march after just 30 seconds and then it is a http only cookie because we are not providing the http only and it will not be overall accessible to the front end so now we have provided the cookie so now we have set it up the cookie and now we need to get the turkey in the verify token because then we need to verify the token as well so we have specified the cookie for just 30 seconds and then we have specified the jw token for 1r so we can just increase or decrease that to the 30 seconds as well w30s so it will be added to the 30 seconds and then we need to go to the verify token now and then instead of this headers we can now just remove these headers and then we can just comment all of the functionality for now in the verify token so we can just comment it out and then in the verify token now we have the cookie in the request.headers so we can just get the cookie like cookies and it will be equals to the request dot headers now we have the cookie in the request dot headers and it will be the cookie so we can just use that cookie and then we can just console.log that variable as the cookies so now let's see if we are getting the cookie back in the request or not and then first we need to just to log in the user again for the 30 seconds because the user will be expired in 30 seconds so we can just send the request again now the request is being sent and then we can just use that get request again for the user and then we need to remove this bearer token as well click on the send so now you can see now we are getting back the cookie after the request and the cookie will be equals to like you can see it is the id equals to the token so now everything is working fine and we are getting back the cookie in the request dot address so now we have the cookie and now we can just split the cookie with the equals to sign and then it will be divided into two parts so we can just get that so it will be the const as the token again it will be equal to the cookies we have dot split so now we are splitting the cookies and we need to split it with the equals to sign so it will be the equals to sign and then we need to get the first index so it will be the like the we need to get the first index after that and then we will get the token if i will now just console.log the token again and if i will now just send that request for the login again as the post again get the token send now you can see now we have the token which we have received from that postman so now we can just take all of the things again from the headers so we can just remove from the headers there and this cons token again and then you can see now we have everything working fine and then we need to just uncomment everything and now you can see now we have the token and now we are now splitting the token with the equals to sign then we have the token and then we are already verifying if we don't have the token then we have to send the response dot status as the 404 and in the message we have to send that no token found and then we can just check in the jwt dot verify that if we have the token if it is equals to the token and if the verification is successful then we can just return the we can just check the user.id which we have decoded from there and then we can just attach the id to the request and then it will be equal to the user.id which we have decoded and then we are moving on to the next middleware and the next middleware we have the getuser because now we are already getting the user id from the request.id so we don't need to change this at all if i will now save all of the things and if i will not just go to the postman once again set the request after the login send the user we have the token send the get request again and then we should see the user now you can see now we have the user and now everything is working fine and now if you will wait for 30 seconds to see if the token is expired or not so we have to wait for 30 seconds so we can just wait i will stop the video and i will just continue the video after 30 seconds so now after 30 seconds now we can check again so if i will now click on this end request now you can see cannot read properties of undefined and now you can see the token is being expired and now everything is working fine and now we are setting up the cookies after the user is logged in and the expiration time is just 30 seconds and the cookie will also expire in 30 seconds and then we are just verifying the token to get the user and then we are attaching the request.id to the user.id and then we are fetching the user so now everything is working fine and if i will not just click on the get user again and then you will see the cannot read properties of undefined because now the token is expired but if i will now still log in again if i will now get the user again and the user will be there because now the user is currently logged in and now it will be expired in 30 seconds so everything is working fine and now you will see we are getting the token the id as well so now everything is up and running and now we need to build the front end to test it on the front end if it is working on the front end as well and after the front end will be created so we need to keep the user logged in again because we can't keep the user login for just 30 seconds so we will create a refresh token after the routes so here we have some routes like first we have the post route for the sign up then we have the login then we have to get the user where we are first verifying the token and then we are getting the user and then after this we will create a new right for the verify token after the front end application because when the user will be logged in then we need to keep the user login after the 30 seconds as well so we need to create a verify token if the user is still there on the website so now let's start building the front-end application because now the back-end is now over and the only thing which is remaining is the verify token and this part will be built up after the front end so now let's start building the front end with the react so now we can build the front end and i will now create a new folder as the back end and i will now move every folder and every file there to the backend so it will be going to the back end then and then we will just fetch everything from the back end after that so the package.json will also be from the backend so now we can just create a new react application there with the npx create dash react dash app so the name will be like the front end so we need to build this application so now we have created the command to install the react application and now we need to wait till the react app is installed and now the react app is now installed and now we can move on to the front end folder so it will the cd to the front end and now we can just start the application from the npm start and then the application will be up and running with this command so we have to wait till it compiles until it loads the react app for us and now the react app is now compiled and it is up and running and now we can just go to the front end we can just go to the source and then in the app.js then we can remove some unnecessary code from there so we need to remove from the header till the header and i will also remove the class name equals to the app and then we can also remove the logo as well and then we can just go to the index.js also we can just remove the report web items and then we can also remove the import as well and then we can just go to the app.css to remove the basic styling and then we can just also go to the index.css also and then we can just remove everything and then we can just add the star with the margin and the margin will be zero because by default the margin is the 12 px on the browsers so we can just remove that and now we should see there should be nothing on the screen and now in the app.js we can just add the hello world so the hello world and now we can save now we should see the change onto the screen now you can see hello world without any margin or without any padding from there and now we can install some packages like we can install the material ui so we need to go to the material ui to install that so we can just go to the very first link of the material ui and we need to get this command to install that we can just stop the server again and then we can just add the command as the npm installed material ui so it will be installed until then we can just create the folder structure like in the source we can create a components folder and then we can build the components first as it will be the header dot js and then there will the login dot js and then there will be the signup.js as well and then there will be the welcome page as well so with the welcome dot js so in the header we will just click on the buttons like the login and the sign up and then the login and the sign up components will appear and then we will just and then after the successful login we can just go to the welcome page so first we will build the header so i will add the basic setup of the react application by the rafc command so then now we have the header and now we can just use the header into the app.js so we can just import that so it will be the header so the header is now imported and then we can just save the application to see the changes we can just start the application again as the npm start to see the changes and then the header will be there on to the screen and now we have the header role to the application so first we need to go to the header and then we can just remove the header from there and then we need to import something from the material device so we need to import something from the material ui so it will have ui material and then the something will be the app bar so it provides a basic structure of the navigation bar and it provides a blue background color onto that so we need to just import the app bar from there we can use the app bar here as well so it will just app bar and then you will see inside of this if i will now add the hello world so there will be the hello world inside the app bar so now if i will now save now we should see the changes onto the screen and now you can see it is compiled and now we can just go to the header now you can see now we have the hello there and then we can just add the toolbar inside that and the toolbar provides us a styling inside the navbar so by having the toolbar it will just increase the size of the main header with the header looks in the real world applications and then we can just use the toolbar and then we can just add something like that the typography inside that so the typography allows us to add some text inside the material ui so it will allow us to add some text and then we can just provide the variant as well and the variant defines as the which type of tag do we use so we can just provide as the h3 as the heading and then we can just add the heading as the mer auth so we can just save that and if i will now save now you can see we have the burnout and now we have created the header with the material ui and then after that we can create a a box like a div so the box in the material ui just act like a div so we can just add a div inside that and then inside this div we can add some tabs like we can have our tabs so the tabs is used to provide some tabs in the material ui and then we can just have the children tab inside that so this tab is the parent tab and this tab is a child tab inside that we can just remove that and then we can just add here the symbol tab i set and we can just import that also and then now we have them tab and now we can provide the label as well of the tab and the label can be equals to like we can just provide the label as the login and then we can provide a manual tab here as the and it can be a sign up so it will sign up and then we can just save now we can see now we should have the tabs as the login and the sign up there and once we can click on the login now the login screen should appear and then once we will click on the sign up then the sign up screen should appear and then we can just move that box on to the right so we can just move that so it will be the uh so it will be having the sx prop to add some styling into that and the styling can be the margin left so it will be the auto so it should move to the right i think so now you can see now we have the login and the sign up and now it is moving to the right so these are as the links and we can just provide some colors into that like it will be the text color into the tabs so with the text color and we can provide the inherit so it will be inherited from the background now you can see now we have the login and the sign up buttons inside that and now the tabs are working and now we can see the tabs with the colors and now we can just add a indicator color to the tabs so we can just add a value to the tabs like we can define a value of the tab so if we will define a value of zero so it will start from the children like this type has the two children so it will start from zero index and it will act like an array because the tabs are now children of the steps so it will start from the zero children from the zero index from the children's so if you will just add the value as zero so this tab would be highlighted because it acts like an array so now you can see the login is now highlighted and the sign up is not highlighted but if you will provide the value as the one now you can see the sign up will be highlighted so we can just change that so after the tabs we can provide a unchange function also i get the onchange and the on change can be a function and then we can just use the state here to change the state of the login and the sign up there so we can use the usted snippet and then the first it will be the value and then it will the set value and by default it will be undefined and then we can just use here the on change and it will contain an event so it will be an event and after the event it will contain a value as well from the material device so we can just set the value of the tab as the material ui value so if i would now save and the value can be like we can just have the value of the value which we have defined in this state so if i will now save now we should see the change on to the screen so now once i will click on the login now you can see the login will be highlighted and once i will click on the sign up the sign up will be highlighted and then we can just add some colors as well so we can provide the indicator color so if the login is highlighted so we can just add the underline after the login so indicator color would be secondary from the material device so it will be like of a pink color so now you can see the login is highlighted with that and the signup is also highlighted with that so now everything is working fine till now so now everything is working fine and all of the things are highlighted so now we have built the header and now we can build one more functionality so once we click on the login so we need to go to the login route and for the routing functionality in the react application we know that we need to install some package and so we need to install the react router dom so we can use that and if you are using the yarn so then you can use with the yarn with the yarn add but i'm using the npm so i will now copy the package name from there and i will now add the package there so after selecting the new terminal going to the front end we can install the npm install react router dom so now the react writer dom will be then installed so we need to wait till it complete the installation so now the react router is now installed and now we can use the router and then we can see in the package.json also if it is installed or not and we can see the version as well of the react router dom so it is now installed and now we can just go to the index.js to use the routing and we need to wrap the app component with the browser router which allows us to that the routing functionality over the app functionality we need to get the browser router and it will be imported from the react router dom so we need to wrap everything from there to the here inside the react application so that the routing functionality should be there inside that and then we can just import the browser router and it will be imported from the react router dom now you will see it is now imported and now we can use the routes inside the app.js now and then we can just go to the app.js and inside this div i will now remove this div with the header so it will be the header tag and then we can use the header inside that and the header will be available in every route so after that we can just define a main tag in the html and then we can just define a parent tag also so it will be the react dot fragment and the react dot fragment is like a wrapper which will wrap all of the components inside that because the rules of the jsx so it should be having only a single parent so now we are using the main and then we can import the routes we can import the routes from the react router dom and then after that routes we can use the routes we can just add a single single route which is the child route inside that and then we can just provide the path of the route like slash as the login so in this login we can just use the element so the element would be the login component after that so it will the login and then after that we can create another route and then it will route again and then the path will be equals to the slash sign up with the react application and then we can provide the element as the element would be like the we can add the sign up element and then after that we can provide another tab like it will be the route and path will be equals to the user so the user will be having an element will be equals to the welcome so in the welcome page we will show the user so then we can define these components as well after that so we need to go to the login.js file which we have and then we can just set a basic setup after that rfce and then we have a login and then we can have a sign up so our afce with the sign up as well with the welcome as well we need to add the rafce so now we have defined the welcome page also the sign up and the login page also and then we can just import that also from the login we can import the login from the sign up we can import the sign up and from the i think the welcome we can import the welcome as well so if i will now save now we should see the changes onto the screen so now you can see once i will move on to the login let's login so there should be the login page i think the content is hidden because of the bar so we can just go to the header and then we can just remove the position of it so the position would be equals to the sticky so that it should be sticky to the top only so now you can see we have the login because the position was fixed so the login was behind the app bar and then now we can see if we can go to the sign up so we should see the sign up page now you can say we are into the sign up and if we are going to the user so we should see the user details over there now you can see now we have the welcome page onto the user so now everything is working fine so we can just fix that header like once we click on the login we should reach the login route and once we will click on the signup then we should reach the sign up so we can just fix that functionality so here in the tab so we can just add a component as the link component prop so it will be having a link component and then we can just add a link component as the link and it will be imported from the react router dom so we can just add here as the link so we can provided it to because the links in the react router dom receives a two prop and then we can just use the two prop here in the tab now and then it will be the login so it will be acted like a link component now and the same we can just use that component into the sign up as well so it will be the two and the sign up so it will be then moved on to the sign up so once the tab will be clicking on the login so it will use the app component once again and if the path is equal to the login it will then render the login component and the path if the path will be equal to the sign up then it will render the signup and if we have the user path then it will show us the user welcome so now we can just remove that also and now you can see now we are in the default application and once i will click on the login now you can see we are reaching the login route and once we clicking on this sign up now we are in the signup path and without refreshing the page and this is a big advantage of the react router dom that we can now use the routing without refreshing the page because it's a single page application and now we can build on the signup functionality first so we can just build that so we can build the signup forms here so then we can just use the form tag here as the form and then we can remove the action also and then in the form we can use the box to provide some styling and then it will contain the text field from the material ui and then import it from the material ui and we need to import the box as well from the material ui so the text field is now imported and then you can see now the text field is there and then we can just provide another text field there because we have the three text fields over there so the text field two and then the text field three so now we have the three text fields and then we will having the button over there so it will the button and the button will also be imported from the material ui and it will contain the sign up there so now we are in the sign up and now you can see now we are in the box and then we have the three text fields and then we have the sign up and then the type of it will be equals to the like submit because we are in the form and then we can just add the on submit to the form also so when the form will be submitted so we will be having a function to control the submit so we can just add a handle at the submit so we can have this function as well before that so we can have a const as the handle submit will be equals to the function now you can see everything will work fine so if i will now save so now we should see the form over there now you can see now we have the form and now we will have some styling over the form like the stack field will contain the margin as the normal and this will also contain a as the normal and this will also contain the same as the margin as the normal so now we have the margin and then in the box we can just provided the display as the flex and then we can just add a flex direction to the column so if i will now save now we should see the change on to the screen so now if i will now say now you can see now we have the text fields and now we can just define the size of the box also so the width drop into the box so the width can be close to like 300 so if i will now save now we should see the form as the 300 pixels and then we can just add the margin left so it will contain the margin left so it will contain the auto and then we can also provide the margin as the right and it will also be the auto it will be in the center onto the screen now you can see now the form is in the center and then before the form we can just add the typography as well to add there like typography like it is the sign up and then in the box we can just add the justify content also like justify as the center so the form will be aligned into the center and the align items will also be equal to the center so now we should see the changes onto the screen now so now you can see now we are in the sign up and now we can just set the typography with the variant will be close to the h2 and then the variant will be added inside the box uh so after the box we will having the variant so now we should see the changes onto the screen now you can see now we have created the signup form and now we need to design the text fields of the form so we can just define that so the variant will contain as the outline and then we can just add their placeholder placeholder would be like we can define here the name and then we can define it the values as well so but we can define the variant and the placeholders to there as well in the text fields there that will be having a variant outline and the variant outline there also and the name it should contain the email and it should contain the password so now we should see the changes onto the screen now you can see now we have the name we have the email and we have the password into the forms and we have the button as well of the sign up and then the button can contain a variant again will be equals to like the content so the button will be filled up with the color now you can see now we have the sign functionality over there now the signup functionality is completed now the form is now designed and now we can just use some state to control the form and to use the state we can just move on to the react application once again and we can define here this state so we need to define the u state to handle the form so the use state would be there and we can define some inputs to the form like now it will be having the inputs and then there will be the set inputs and then we will be having an object so the initial value of the state will contain a name and the name property will be close to the empty string and the email as well it will contain the empty string and the password as well it will contain the empty string as of now we are now defining the state with the empty string and then we can define a values to the text field also like it will be having a value of the inputs that we have inputs object state dot name and then inside the value here so it will be equals to the inputs and it will having inputs dot email and then we will be having a value again to the password as well inputs will be equals to the inputs dot password so now we have seen everything and now we can define our own change functionality also for that and for the email we can provide the type also like it will be after type of the email and for the password the type will be the password of that so i think the password field is there so we can define a type as the password so now we have defined everything so now we have defined three text fields and then we have defined a button to sign up and now everything is working fine now you can see now we have the name email and the password field and now we can define a function to change the values of the text field so we can define our own change that we don't change so whenever the change will occur so it will be having your own change function so it will handle change so it will change the values of the inputs so we can define our own change after their text field as well after this text field as well and after this text field as well so now we can define a handle change functions so it will be the const as the handle change will be equals to the function and it will be having a e as the parameter and then we will be having all of the things there and now we should see the changes onto the screen because we have defined some function and now everything should work fine and now we need to handle this state into the handle change function so for handling the state we can define in an identifier to the text field like we can just identify the text field with their name or with the id so we can define the name as this and we spend it will be the name and then we can define here the name as the email and it will be having the password so it will be the name equals to the password so now we have defined the identifier of the text field with the name and then we can just check and we can just set the state from there like the set input so it will contain the previous state so we need to just render the previous state first for it and then it will be having the previous state first so it will be having an object with the previous state and then we will be having the state here with the actual state so here we will target the property names like e dot target dot name so the name of the text field name of the input and then the e dot target dot value so if you don't know about this technique so you can just console.log it if you will just console.log the e dot target dot name and then the value so it will be the e dot target dot value so whenever the field will be changed so it will just target all of the things and now we can just go to the screen and we can just go to the inspect to check if everything is working fine you can just go to the console now you can see once you will provide the name like abc now you can see the name have we have the name of the name and then in the email once you will get anything so you will get the identifier of the email as the name and the value is equals to the a and you can just check the identifier of the password and the value equals to the ss so now we can just see everything is working fine here and then we can just handle the states here so now you can see we have defined here some states and we can just remove that console log here and now you can see once the handle submit would be there so it will contain an event inside that and then we can just prevent the default behavior of the forms in the html that once we will click on the sign up or any submit button so it will send the form data and it will refresh the page so we can just prevent the default functionality from the prevent default function so we have a prevent default function so it will just prevent the default functionality of that and we will just console.log the inputs that we have so we will just console.log the inputs of the form that we have so we will just refresh the page and then we can just check again like the name i will add my name nickel email as the abc at the test dot com and then we will have a password like one two three four five six so if i will click on the sub bit now you should see the changes now you can see now we have the name object with the name as the nickel the email as the abc at the ratetest.com the password equals to the one two four five six so now everything is working fine and after that we can just send the http request so now we can send the http request there and for that we can just uh install the xcos from there so we can install the npm install xcos to send the http request so the xcs is now installed and now we can send the requests so we need to go to the handle submit function and then we can just send a request here so we can just create a function to send the request at the send request and it will be equals to an async function so it will be an async function and then we can just send the request from this function now and now we can just declare a variable as the construct the response and it will be the response which will send the request to the server so it will be equal to the xcos which we need to import so the xeos will be then imported so we need to import the xeos from the xeo so we can import the xios from xcos and then we can use the xios to send the request like xcos have a post function so we can send a post http request so the url will be http slash localhost and at the rate of the port of the 5000 slash we have the api as in the sign up so now we are sending the sign up request and in the second argument then we need to send the data and the data will be equals to which we need to send the data as the request.body so it will be the name we need to send the name as the inputs dot name and then we can send the email as well email equals to the inputs dot email and then we can send the password password as inputs dot password so we will send the data now in the request and then after the response then we can add a catch statement of it also because it is a promise so we can have a cash statement and we will have error in the parameters and we will just console.log the error which we have so we are now sending the error and then we are now console logging the error and then it will be an asynchronous task so we need to add a wait as well so it will be the await and then after the request then we can get the data from the requests so the request so to get the data from the request we can declare our data variable and we can just get await as the response which we are sending.data so the response.data is the property in the xcos which gives us the data in the response which will receive from the backend and now after this then we can just return the data over there return data and then after that in the handle submit function now we can send the request so it will the send request so we need to call the send request function and then after that we can just redirect the user to the login so after this sign up is completed then we need to redirect the user to the login so we can use the history to use to redirect the user we can just declare history variable and the history will be equals to will be equals to the use navigator so we have a use navigate to from the react router dom so we can use that to declare the history and after the then statement we can use a history as well after the then inside that and there will be a callback function and we need to call the history so history will be there and after the history we need to redirect user to the login so now if everything would work fine then we will be redirected to the login so if i will now save and if i will now just go to the react application once again now you can see i will now refresh the page and i will now just clean everything from the console i will add the name as the nikhil once again the email as the naked test1.com and the password will be one two three four five six if i will now click on this sign up so now we should see all of the details but i think there is an error and this error is because because we are now accessing we are now sending the data from one server to another server and the another server don't allow us to accept the data from the different server so we need to allow that access because it is access controller origin and we need to add it to the allow online to from anywhere so we can just access the allow from anywhere you can just use the course from the backend so we need to stop the backend server from there and then we can just go to the backend application in the app.js and then we can just install the course so we need to install the course package to just remove this error and the course package will allow us to just allow access from anywhere to the origin we can use the course as well so const of course will be course to require and the require will be having the course so now the course is now required and now after the app dot use so before every middleware so we can use the course that will be the course so we need to run the course function which you have imported so now after all of this if i will now just save and if i will not just start the server of the back end again and now we should see everything should work fine now so now the database is connected listening to local 5000 once i will click on the sign up so now you will see everything is completed and now we are redirected to the login and now the user is already created there and now we need to build the login so now the signup is also done and now we need to build the login page so we need to go to the i think the login.js to build the page so we can just get the layout from this sign up as well so we can get the sign up layout from the inputs to handle change and then all of the data from the sign up so we can just paste that to the login so now i have now passed you to the login so we have the history so we can use that we use navigate again and then we have the use navigate and then we can have the handle change also we have already declared we have already killed the state so we have to declare the use state as well so i will now import the use state from the react and i have now send request functions so we need to import the xeos as well so xeos is now imported and then we can just import the i think i think we need to import the box also from the material ui that will be mui material we need to import the typography as well we can import the typography and then we can import the text field as well so the text field will also be imported and we can import the button as well so the button is also imported and now instead of this login instead of the signup we can add another login and then we don't need the name field now because we are in the login now we only need the email and the password so i will now remove the name from there and in the inputs also i will now add here all of these things like now the name would not be required here and now everything would work fine and now you will see now we have the send request function but this time the url will be not the sign up the url will be the login and now the url is login and now we need to add the login request there and then we need to send the data so then we can send the data here so login we have we need to send the email and the password after the login and now in the login request the login request will provide us a token as we have built the functionality in the backend so after the login will be completed we will receive a token from the backend and it will be attached to the cookie so if i will now save and if i will now just move on to the login page if i will now just refresh and if i will now just save there everything now we should see there should not be any errors now everything is working fine and now instead of this sign up it will be the login now the login is completed and now we need to send here the request like we can now send the request at the nickel at the ratetest.com and then we can add a password as the 1111 as we have declared so i will now remove everything from this console now i will now click on the login and now we should see if everything is working fine or not i think there is an error like the http request it is a bad request cannot read properties of undefined data i think there is an error so we can just check that error in the network and we can just check the error in the login here is the login request like the user not found i think the credentials are wrong so i now click on the sign up again so we can just add a new user in the sign up so it will then kill and it will be the email will be like one two three four five at the test.com and then we can add a password as the one one one one one one i will now copy this email and i will now just click on the sign up so now we are signed up successfully and now we are into the login and then we can add the same email and i will add the same password one one one one one one so now we should be redirected to the user space i think so we can just add here the functionality again that after the request is completed then we need to redirect to the user space so we need to go to send request so it will be the users so now if i will now save so now we should see the screen so now if i if everything would work fine then we would be redirected to the user if i will now click on the login so now you will see now the login is successfully done and now we are redirected now you can see the login is successfully done and now we are redirected to the user and then we can now just save this and if i will now just check the network tab if i will now click on the login again i think if i will click on the login this now you can see now we are successfully logged in but if you will check the headers over there i will now just expand it so now if i will now just check the headers here now you can see the status code is 200 okay and then you will see access control origin now it is having the star which will allow from everywhere and it is giving it this star but if you will just check below now you will see there is a set cookie which we are receiving so this is a cookie which we are now receiving there into the front end and this cookie is being set from the back end so we are getting this cookie in the front end also but as i discussed before so if you will access that cookie in the document.cookie then it will be empty string because it is not accessible to you in the front end so we are already secure in that and i think you know any hacker can get osteela token from there and we are getting the token only in the http only cookie so here is our token ey and then the token so here is our token and we are not storing a token even in the local storage even in the memory or in the cookie or in the session storage but it is completely secure and it is not accessible to you even you as well because we are there on the front end and it is not accessible to the front end and it is completely secure and then we can just go to the user space to get the user from this token and then we can just go to the users page now in the welcome page so now we can just go to the welcome and then we can just send the request in the welcome so now we will go to the welcome there we can just use the function as the use effect so it will be the use effect so we need to add the use effect here inside that so we can just send the request from the use effect i will add a function there to send the request after that and the use effect is used to so once the component is being rendered so the use effect then will run so we can use here the i think the we can use the function at the send request again and it will be cursed to the function again and then we can use there like the we can just send the request as the const response will be close to the await we need to send the request to the axios x0 we need to import the xcos so we can import the axios from there and import xcos from the xcos and now the xeos is imported and now we can use the xcos.get so this will be a get function and now we need to add here the url so to http that's localhost url will be 5000 slash api user so after that once we will send back the response once we will send back the cookie to the back end so it will check the token and it will decode the token and it will get the id and it will send us the user so this is very long process but it is a very secure process and after the user to send back the data which we receive in the cookie we need to use there an object and the object we have a property of the with credentials so we need to use a with credentials property to the true and then we need to send the with credential request after every request so we can just add here the defaults in the xcos so we can just add a by default at the xcos dot defaults so by default the excuse will send the request with the with credentials also always so it will be the width credentials will be equals to the true so now we are sending that request and now we can now just add a cache statement after that it will the cache we need to get the error we can just console dot lock the error that we have so now we are having the error and then we can just add a data variable also data and it will be equals to the await again the response dot data we will get the data from there and then we can just return the data and the send request is the async function always because we are using the await you know everything should work fine and we have already declared the send request and now i think everything should work fine and now in the use effect i will now run this uh get user function like this end request so this end request would be there and we can use a then and we can use a state variable also to add the user that will use state as the used will be there so we can add a use state as a user and the set user function with that so the user and the set user and by default it will be undefined and then then when we will get the data from that and then we will use the set user and it will be the data dot user which we will receive or we are receiving i think the message from there so we can just go to the backend to check what we are getting so we need to go to the controllers we need to go to the user controller to see what we are sending after the user is successfully logged in so we are now sending the user there so we need to get the user so we can just get by entering the data dot user so now after the so then we can add a conditional statement here so when we will have the user and then we will just create h1 tag and in the h1 tag we will just add the user so it will be the user dot name so when we will add the user so we will just show the user dot name there so if i will now save now we should see the changes onto the screen so now we are in the chrome once again now you can see there is an error again so now we need to refresh the page again there so now we can just click on the login and now we can just log in again the user which we have i will now click on the login so now we are not redirected to the users page i think there is some error and this error is because we are now sending the request from a different url server but we are having the access to giving the data and to get the data but we don't have access to send the cookie to the backend and to get the access for that cookie we can go to the app.js once again of the backend and then after we are requiring the course then we need to add some origins also because now we are sending some credentials from the xeos and for that we need to add some properties like credentials because now we are sending the credentials from the xao so credentials will be equals to the true to get the credentials and we need to specify the origin as well so in which origin we need to send the data or to receive the data so we can just write the origin as the satp slash localhost at the rate of the port of the 3000 and we are now sending the data from there so if i will now save and if i will not just go to these login screen once again to see if everything is working fine or not i will now click on the login once again now we are redirected to the user and now you will see now we have the user name there so now we are getting the name of the user nikhil and now it means that everything is working totally fine so we have now successfully built the most secure backend that we have and we have already declared everything there and once if you will refresh the page after the 30 seconds so it will be gone so once you will refresh the page so now you will see there will be an error i think so now you will see there is an error that cannot read properties undefined of data because now the token is expired and once you will go to the network once you will go to the user request now you will see we have the internal server error and now if you will just go to response now you will see the token is now expired and the token is now undefined so now it means that everything is working totally fine and we are getting the user in the front end without having their id in the url and with pure credentials which we are now sending the cookie to the front end and getting the cookie to the back end again so everything is totally working fine so this error is coming because the token is getting expired and we are not able to generate the new tokens so to fix this problem there are two solutions the first one is either we can increase the time limit of the token like an hour or day or any number of days and second we can just refresh the token again and again after every request and it will be a pure authenticated version because the access token will be then expired and we'll be generating the new access token after a time span of every 15 to 30 seconds and with this approach the application can be complex but for the security reasons we should always have a complete and a secure back end to run the application we can move ahead with the second approach so we can generate a refresh token route in the back end after every 30 seconds so the token will be then refreshed and then we will reset the cookie as well so let's start with this approach and then we need to go to the backend to complete this approach so we need to go to the backend folder and then we need to create a new route after the routes so we can just create a new route and after all of the routes now we can declare a new route with the router and it will be dot get request and it will be of the slash at the refresh so it will be the refresh and then we can just have some functions after there so we can have the functions in the user's controller so we can just go and we can just create a refresh token here so it will be like the const cos refresh token and it will be equal to the function and then we can just have the request response and the next there as the variable so it will the request response and the next as the parameters and then we can just get the cookies like we got from the i think the verify token so we can get these cookies so the cookie will be then set and then we can get these cookies from the cookies request dot header so once we will get the cookie from the request dot header and then we can check if we don't have the token and then we can just check like so we can declare here the previous token there so it will the previous token so if we don't have the previous token and then we can just return at the restaurant as the response dot status and the status will be the 400 as the unauthorized and then we can just send the message at the json and the json will contain a message and the message will be then the couldn't find token so we can have this message and then after the token is there and then in the else case then we can verify the token like the jwt dot verify so we can just verify the token with the converting it to the string and it will be like the string as the previous token that we have and then we need to compare it with the security key by giving the security key so it will be like the jwt secret key and then we can just check the decoded parameters also like the error first review the error and then it will the user which is decoded now and then we can just generate the function with there as we call back and then we can check if there is any error and then we can just console.log the error and then we can just also return the response dot status will be equals to like the 403 and then we can just send the error to the user as well as the 403 and then we can just add a json dot json and then it will contain the parameters as the message and the message will be equals to like we can just send as the authentication field because now we have the error and now the token is not verified now we have the and now we are returning the token if we have any error but now if the token is successful because now after the if case so the if case will run so the application will break but now if we don't have any error and now if we have the user and the token is successful and it is verified so we can just clear the cookie by having the response dot clear cookie function and then it will be the user.id which we will uh decoding from the user so it will be the user which we are decoding dot id so we will just return the ids and then we will return and then we will just clear the cookie from there and for the editors also then we can uh remove the cookie from the headers also that will request dot cookies and it will be like the cookies is objects so we can just get the key of the user dot id so we can just get and it will and we will just add it to the empty string so it is the empty string now and then after everything is done then we can generate a new token there so now what we are doing here we are just verifying the token if the token is successfully verified then now we are removing the cookie because the cookie contains a token and then we will generate a new token as icons as the token will be equal to jwt again dot sign and we will sign a new token with the parameter of the id as which we will receive the user.id which we have decoded and then we can just add a parameter after that as a secret key so we have already defined the secret key and then we can just use an object and the object will contain an expires in property again and we need to define the value as again like the 30 seconds so to the 30 seconds we are now defining the expires in property so we are already defining 30 seconds in the i think in the login as well as we are defining in the 30 seconds now you can see and then we need to define the cookie as well again so it will be the cookie after that so after the exercises so after the token will be created then we can just regenerate the cookie as well with the response.cookie and we are now sending the cookie so now this time this will not be there so it will be like the id will be user dot id so we are now getting the user dot id and then the token and then the path is equals to this and the expi is equal to 30 seconds again http only true and everything is fine and after the cookies generate it now the most important part now the cookie is generated and the token is also regenerated and now we need to again add the request dot id which will be equals to the user dot id which we have decoded so now for this id now we want to move on to the next middleware after that so we now we have the id and we are now attaching the request.id with the user.tidy and now after that we can just move on to the next middleware and in the next middleware the next middleware will be again the i think now after the refresh the next middleware should be the verify token again so then if we are regenerating the new token then we need to verify it again and then we will verify the token again and we will just console.log and then after the verification is successful then we can just move on to the next and then we can just show the user with the request dot id so this is very complex logic but it is very good logic for the security reasons so then we can move on to the route so after the token is going to be refreshed then we can run a refresh token so we need to export the refresh token as well so it will be export dot refresh token will be custom refresh token so now we exporting the refresh token as well and then we are now just adding the refresh token and after the refresh token now we will verify the token as well again verify token and then after the refresh is completed it verifies completed and then the final thing will be which will be the get user so now we are defining the get user so if i will now save and now in the front end now we need to work in the front end to just send the request after every time span of 30 seconds so we can just do that and for the request so request can take time because it is an asynchronous task so we can just go to the user controller and then we can just increase the time limit of the 30 seconds to 35 seconds so it should be the it should not be the exact time of that so we can just remove that the time span of this and then we can just remove that time span from the login as well it will be 35 seconds so after the 30 seconds the cookie was so after that 30 seconds the cookie will be then removed and it will remove the token as well so the again the token will be generated for the 35 seconds but after the 30 seconds we will just destroy and we will just create a new token so we can just move on to the user routes again and then everything is working fine and then we need to go to the welcome.js in which we will send the request so so here in the welcome.js now we need to generate a new function now we need to create a new function as the refresh so it so before the send request i will generate a new function as the refresh token and it will be equal to asynchronous function again as the async and then we can just generate a new response variable again as the response will be equal to the await and it will be like the uh i think the axios which we have imported dot get and this is a get http request and then we can just add the refresh refresh is there and then after the refresh so i think the route will be refreshed so the http localhost at the report of the 5000 then api then refresh so we will send the refresh as well after that so if the route will match the refresh so it will work so now it is the refresh again it will work fine and in the second object now we need to again send the width credentials and it will be equals to the true because we need to send the credentials also to verify the token and then we can just catch the error if there is any error then we can just console.log the error that we receive so after the response then we can just get the data again because data will get the await at the response.data so if everything is successful then we can just get the data and then we will just return the data and then after that now we need to use the set interval method from the javascript and the set interval allow us to do a task after every interval like if you will provide interval of around something like 15 seconds so it will run a task after every 15 seconds so we need to do that so we can just go to the use effects so for the first render so i think in the use effect we need to create a logic that on the first render we need to render the send request and after the first render then we need to render the refresh token so for the logic we can just generate a new variable here we can just create a new variable here before the rendering and it will be the let as the first render and it will be by default equals to the false like the first render will be equal to the true i think so first render is true and then we can just check in the use effect like if we have the first render and then we need to just send the request to get the user and after that so and after that we can just use there like i think we need to just update the first render as well i like the first standard equals to the false so now for the first render we are now sending the request to the user and if the first render is not there now we can just use here the use effect now if the first render is true and now we are now providing the first standard equals to the false and we are sending the request and in the else case we need to do one more thing like we need to declare a let interval again interval and interval equals to the set interval again so the set interval function is there and then we can just use here the callback function inside that and in the second parameter we need to provide here the milliseconds so what we need to do in the set interval is we need to run the refresh token function and then we need to send the data and then the data which we will receive we will set user again the data so the set user will be equals to the data again so this is the logic of it and then now we can see now if everything works fine and now we can add a time span of around something like we are setting up the cookie we are setting up the token for 35 seconds and we are setting up the cookie for 30 seconds so we can just run the refresh token after every something like 28 seconds or 29 seconds so it will be thousand milliseconds so it can be the 28th so after the 28 seconds now we will send the set interval function so it will run after every 28 seconds and then it will run for the refresher out so everything will work fine and for that we need to also just return there something because we need to add a clean up function also for the use effect to clean the interval after every 28 seconds so it can be the clear interval which is available already in the javascript vanilla javascript so we can just in clear the interval which we have defined the interval so this interval will always be expired after every 28 seconds once the cleanup is completed and then we will generate a new interval and then if everything will work fine then we can just have the user.name again and again so now i think if everything works fine so we need to save and then we can just go to the node again so i think there is an error so first we need to remove everything from there we need to go to local rows thread there 3000 and then we need to just remove the cache as well so i will remove the cache and then now we need to run the request so first we need to go to the login and have already saved all of things once i will click on the login so now you will see now we have the name nikhil so now we can just check after every i think 28 seconds if everything is working fine and now you will see the refresh is getting again and now you will see the refresh is working and now we are getting the user and now the refresh is also working fine and now we need to fix one thing so now when we are getting the user from the set user so we need to add the data dot user and not only the user so it will be the data dot user and then i have just increased the time limit of the 29 seconds over there so this is some basic fixes and then we need to go to the user controller and then we need to add some condition in the login because this can be a big application so we need to add some big logics over there so once the user will log in then we need to add some condition so before creating the cookie we need to check if the cookie already exists then we need to remove that cookie and then we need to generate the new cookie so if we have the request dot cookies which we have the object so if the request.cookies contains the cookie for the existing user dot id dot id is there underscore id is there which is the mongodb and then we need to add the request dot cookies of that user again we need to write this thing as this i think we need to add here into the brackets and then we need to add then the existing user dot underscore id will be equals to the empty string so we will just add the empty string after that cookie so it means that if we will get the cookie from there so it will be the empty string and then we will just regenerate the cookie so after the token is regenerated then we can add one more log here to check if everything is working fine again we will check again so it is like the generated token and it will enter a new line and then we can add some token after there so it will be the token which we have recently generated and then in the refresh token so we need to go to the refresh token again and then after the token is generated and then we will add a regenerator token here again and then i will add the slash n over there to add it into the new line so now if i will now save and if i will now just go to the note and we need to just run the application again i will now remove everything from there and now we need to check the logs so we need to just expand it now we can see now once the user will log in like one two three four five at the test.com once i will click on the login now we can see now we have the nickel onto the window and in the network we can see everything is working fine for the user and now the response is okay and then now we can see we have a generated token and this is a token it is highlighted and this is the id i think we are also logging the id of the user but now we have to check if everything is working fine and if the regenerative token and the generated token is different or not and if the user is currently again logged in or not so we need to check the refresh route into there so we so now we can see we have a refresh out over there and it contains a user which is the object of the id so now the response is successful we can see the header the get equals v200 okay and it is a green light and then now we can see in the logs also now the regenerative token is different from there and in the end it contains a cqa and it contains a w and mc so now everything is working perfectly fine so now we can check in different browsers as well so i will open an edge browser here so i will open that browser and i will now just send a request from that browser so it will the localhost 3000 so i have now opened that and now i will click on the sign up select a new user as the nikkeil again the email will be nikhil p h a d a n i at the rate gmail.com i have at the email the password will be same one one one one one one i will click on the sign up so now we can see everything is okay and now we are redirected to login so i will now add the credentials here and i will now click on the login again now we can see now we have the user and now if i will now just click on the inspect here again so now everything is working fine even in the chrome browser even in the different user it is working fine and even in the azure browser it is working totally fine so everything is working fine so now this is our application which we have built and now the application is fully complete but one thing is remaining so we are storing the jwt as a constant but it should not be stored as a constant in any way so we should now remove that and now for that we can install a new package as a dot env which will just store the jwt key in the env file and the mongodb password also in the env file so we can now just create and we can now just stop the server and we need to install the dot env through the npm install at the dot env to add all of the things in the env and then we need to configure that also so after the env is installed and now we need to move on to the app.js from there and then we need to just use that so it will be the require so it will be directly we are requiring and now we are now configuring directly so it will be the dot env which we have currently installed or it has a method of the config so the config will be there and now we will call the config so after that the env files will be working and in the backend in the main root file so we can generate a new file i think we have to generate a new file as a dot env so now we have generated a new file so we can just go to the env and we can just set the token to there so then i will now just copy the token from there and i will now just paste the token to in the env file so it will be the jwt secret key goes to the my key and you can define any other key as well so now i have defined that and now you can just go to the user i think app.js and then you can also store the password of the mongodb there as the password as it and it will be equal to the password like into the password or mongodb password will be equals to the equals to the password which you have just copied so you can do that and then in the app.js instead of this so you can just use the template details and then you can just remove that add here the like the process dot env dot the name like we have now defined the e and m name as the mongodb password so you can just use that funko db password and then after that you can use there the dotty and we in the users controller in the secret key as well so whenever we are using the secret key so we can go to secret key here so here we can use the process dot env dot we have the variable as the i think we have the jwt secret key so we can just copy that we can just place there at the secret key so now we have used that and here also in the verify token so we can use that as the process dot env dot the jwt secret key so we can use that and here also we need to add that as the process dot tnv dot jwt secret key and here also we need to do that it will be the process dot env dot the awt secret key so now everything is working totally fine and then we can remove that jwd secret key from there also so i will now remove there and everything will work same as before and now the application is almost complete and the only thing which is remaining now is the logout so we need to build the lockout functionality as well so once the user will log in then we need to show log out and once the user will log out then we need to show user the login and the sign up so for that we need to form some steps in both the applications in the backend and the front end as well so in the back end we need to create the controller function as the logout from where we can just remove the cookies of the user and in the front end we can just create the functionality of the login so when the state is the login then we need to show user the logout and when the state is the log out then we need to login and the signup buttons so for that in the front end we can use the redux which will help us to do that so first we will move on to the front end first we will work on the front end we will install the redux so it will be the command of the npm install and we need to install the redux js toolkit which is a redux library to help us in the react applications it will redux js slash toolkit and then after that we need to install the react redux also that will the react redux so we need to install these two packages for the redux and then we need to work on the front end first so in the front end in the header now we have the two routes for the login and the sign up and then we can create one more tab for that for the logout so we can just move on and we can just copy and paste a new tab and the two will be equal to the default route and then the link component would be same and the label will be the log out now we have created the logout label also so after the logout route now we need to wait till the redux installs and then we can just create here the store functionality of the redux and the redux is used to create just a central data store which is only the one data store in the whole application so it will handle the state of the login and the logout and then we show the user the changes according to the state now the redux is now installed and now we can just move on to the source we can just create a new folder as the store and then inside the store then we can just create here a new file as the index dot js which is the file of the redux and then we can just import the create slice and it will be imported from the redux js toolkit so the slice will help us to create the slice and the slice can contain the name the reducer functions the initial state and everything which we need so we can just create the slice for the authentication so it can be auth slice and it will be equals to the create slice that we have just imported and then we can just provide here the name and name can be the auth and name should be in the string and then we can just provide some initial state so we need to provide the initial state of the application in an object so it will contain the is logged in property and by default in the initial state it will be the false and after the initial state then we can define some reducers so it will be the reducer functions now and it will be an object and in this object now we can generate the functions so first it will be the login function and there is a login function and then they have the logout function as well and then in the login then we need to get the state as the parameter and then we can just change the state as the state dot is logged in property will be equals to the and then in the logout we can just donate at the state state dot is logged in will be equals to the false so we have now generated the state and the logout will also contain the state inside that so in the login we are now changing the state of the login to the true and in the log out we are now moving back the state to the false and after that we need to export the slides also so we can just export the store functionality of the redux so we are now exporting the redux store from having the configure store so the configure store will be then imported again from the redux us toolkit and it will contain an object so it will contain the reducers so all of the reducer will be then exported in there so we can just export to the reducer as the auth slice dot reducer that we have so we are now exporting the reducer only for the odd slice now because we only have the one slice in that application and then we need to just export it and then for calling these functions then we need to export the actions also so we need to export the actions the auth actions and it will be equals to the auth slice that we have dot actions so we need to export the auth slice dot actions here also and now the redux store is completed and now we need to import the redux store and then we need to use the redux store in the application so then after that we can just move on to the index.js which is the main file which is a root file of our application and then we can just import the provider from the react redux so provider will help us to provide some redux store to the main application so we can just import the provider from the react redux that we have installed the package of the react redux and then we can just wrap the app component with the provider to provide the redux functionality over the main app component and then we can just wrap the app component with the provider and then we can just provide the store also in the provider so it will contain the store and the store will be equals to and the store will be equals to the store which we have just generated and which we have just exported from the index.js store so now we have now imported the store from the store index.js so now the app component has the full functionality of the redux so if i will now just save if i will now just click on the npm start if i will just start the server again and then we need to move on to the app.js also and then we can just get the store from the use selector hook so we can just get the state of the is logged in in the redux from the use selector will then allow us to grab the state so we can just use the u selector and it will contain the state as a parameter and then we can just grab the state dot is logged in property so we are now getting the access of this logged in property from there and if i will now just console.log is logged in to check if the state is there or not so now if i will now save now we should see the changes to the application and now the application is compiled and now if i will now click on the inspect now in the console now we should see the state now you will see now we have the redux rate which is the false as of now because the is logged in is now the false and now we can just use that is logged in property in the header also so now we have the three routes in there so we need to check if we have the is logged in so we can just grab the is logged in here also so const as the is logged in and it will be equal to the use selector so we can just grab the u selector here also it will contain the state as the parameter and then we can just grab the state again from this state dot is logged in so we can just add them conditional lending so when the is logged in property will be the true and then only we need to render this tab so if i will now save so now we should see the changes onto the screen once again so if i will now save now we should see the changes like the log out should be removed so now you will see the log out is now not there because now the is logged in is false so the log out is not there and now we need to create the route in the back end as well for the logout so we can just move on to the user routes and then we can just create a new route as the router dot post so it will be the post request and the route will be the log out and then after that we can just create terms here some controller functions also so we can move on to the user controller and then we can just create a new function here as the const logout and it will be equals to the again the request response and the next and for the logout i think now we need to get some cookies again so we can just grab the cookies and the previous token also so we can just grab that so i will now just copy from the verify token and then now you will see now we have the cookies and now we have the previous token and then we can just check and now we need to verify it again so we can just verify it again so we can just grab the jwt dot verify also for that so i will now grab this because now we need to verify the token as well once we will receive from the back end once we receive from the front end so now i have now grabbed the jwt dot verify so we will get the token from the cookies again and then we will just verify the tokens so if the token would be then verified then we are now clearing the cookie and then we don't need to create a new token again so i will now remove this from the console.log generator token as well and then you will see now we have the clear cookie again so i will remove this as well and this as well so now you will see now we are in the jwt dot verify so once the token will be successfully verified then we need to clear the cookie so now we are now clearing the cookie and then we need to just return as the response dot status will be equal to the 200 and then dot json will be equals to it will contain the message and the message will contain that is successfully logged out so we can just grab that so we can just save now and now we can just export the logout route as well so with the exports dot logout and it will log out so now we are exporting the log out as well and now we need to move on to the routes from the user routes and then we need to grab as a logout also so for the logout first we need to verify the token that we will receive from the front end verify token and then we will add the logout so now everything should work fine so now we are now importing the logout as well so now we have imported the logout so everything now should work fine and now we have created the logout also and it will be a post request and now the backend work is complete and now we need to move on to the front end again so we can just move on to the header and then we can just call here some function on the on click of the logout tab that will contain the on click and in the on click we can now call here the api for the logout so we can just have a handle log out function and then we can just create the handle logout function in the header as well so it will the cost as the handle logout and it will be equals to the function and then for that i will now create a new function for sending the request to the const as the send logout request will be equals to our async function and then we can just import the xcos also at the axios so now we have imported the xcs and now we need to create in some defaults of the xeos also so the excuse will contain the defaults as well because we need to send the credentials also so the xcos it will be the axios dot defaults and dot fifth credentials so the breed conditioner property will be equals to the true and then we can just send the request so it will be the cost as the response will be equals to the await because it is an asynchronous task so it will await as the axios dot post so we are now sending the post http request so the url with the http localhost the port will be 5000 and it will be slash api just log out so this will be the route and then the second parameter is we need to send here the data so we don't have any data to send in the logout so we can just send here the null object so now we are sending null and then there in the config options and then we can just send the width credential property to the true so now everything should work fine and now we can just have a condition like if the response dot i think the status equals to e200 and then we can just return response there and then after the if we can just check we can just return the new error if there would be an error in the logout so we can just return the new error as the unable to log out log out please try again so now we are now sending the return statement if there is any error and so we can just call this inside the handle logout so it will send as the logout request and after calling the send logout request then we can use it then after that because this is a promise and then now we need to update the state in the redux to the logout so for that we need to use the use dispatch to dispatch the action that will the dispatch will be equals to the use dispatch so the use dispatch will be then imported from the react redux and then we need to dispatch some action like the logout action so it will dispatch and then indeed dispatch now we need to just import the auth actions that we have just exported from the redux so it will the auth actions dot then we have the logout functionality over there so we can just call the logout function from the auth actions after the login request then we are sending the logout request and then we are moving ahead and then we are just going to the main route which is the localhost 3000 only so if i will now save now we can check the application again i think there is an error so use dispatch is not defined so i think use dispatch is not imported we can just import it again so now the use dispatch is also imported now we can see there is no any error and now we can move on to the application again and i will refresh again and now you can see initially it is false once i will click on the login i will now login now you can see now we have the user and now the login is working fine and we don't see the logout route here because i think we are not dispatching the action on the login so we can just move on to the login again and then we can just create a dispatch again like the cons dispatch so we need to dispatch the login action here also so it will use dispatch again so use dispatch will be then imported and then after the login is done after the handle submitting done and then we are now going to the history user and before this then we can just use on the then again and then this will be a callback again so we need to dispatch here the action again so it will be the auth action actions we will then import and it will dot login function so we will call the login function there after that and then if i will now just to remove the user again and then we can just restart the application now we should see there should not be any errors so once i will click on the login i will now refresh again open the developer tools now once i will click on the login now if i will now click on the login now we can see now we have the login state of the true now we have the redux rate of true and now you can see now we have the logout route as well and once i will click on the logout and now you can see now the log out route is completed successfully and then if i will now just check the network tag also now you will see the logout tab is successfully created and now this data is equal to 200 which is okay and now everything is working fine and now we need to fix one more thing when we are now logged in and then we can still see the login and the sign up so we can just move on to the header again we can just conditionally render these two tabs as well so we can just add here the condition for the if the logged in is false if the is logged in is the false and then only we need to render the tabs so we can just wrap the tabs inside the empty component as well empty tags as well so now we are checking the that if the is logged in property is false and then only we need to render these two links and now everything is working fine and we have still only thing which is remaining because if i will now click on the logout and if i will now just move on to the url and if i will not just directly access the user so now you will see we are now able to go to the user and it will throw us an error because it is showing us an error because we don't have any credentials and we are still moving on to the user so we need to fix that also so for that we can just move on to the app.js and that we need to just create this route as the protected route so we can just create that so we can just create by the by the is logged in so once the is logged in equals to the true and then only this route will work so this is the new condition that if the is logged in property is due and then only we are able to render this route if i will now save so now we should see if everything would work fine now you can see if i will now refresh the page again if i will not just enter the user route without the login that will the slash user so now you can see the error is now gone because it was sending the http request and then you can see now the no routes match for the location user because now we are currently not is logged in now we are logged out and once i will click on the login if i will now click on the login now you can see we are now moving ahead to the user and once i will click on the logout now we are moving ahead to the main route so now everything is working totally fine so we have now just created the full application so congratulations on completing this course and i hope you have learned a lot from this course so thank you so now we have completed the application and we were able to build a secure backend for our application with the jwt authentication and with sending the cookies and with sending the http cookies to the front end and then we were able to build a secure front end where the cookies are not accessible to any hacker and not even you as well and we were able to send back the cookies which we will receive from the backend to the back end as well and the token now cannot be accessed on the front end and even the id of the user cannot be accessed on the url routes on the front end and still we were able to get the details of the user and hence we were able to build the advanced authentication and authorization project on the month stack so thank you for enrolling on this course and i hope you have learned a lot from this course so please subscribe to my channel and please like the video as well so that i can be motivated to post the videos like this and to propose new topics like this so thank you

Channel: Indian Coders

Views: 55,124

Keywords: mern stack project, mern stack roadmap, mern stack ecommerce app, login mern stack, mern stack app with authentication, mern stack full authentication, authentication in mern stack, mern stack login authentication, mern advanced project

Id: gWIbT1fbLlA

Length: 164min 27sec (9867 seconds)

Published: Wed Mar 23 2022