JWT Authentication | MERN Authentication | React and Node Auth with Jsonwebtoken

hello everyone in the previous videos we just created this login and sign up registration form uh in this video we will just use GWT for authentication okay to create the tokens and store them and check the authentication back okay so this is the previous code that we use okay this server site code for the login and also we hashed the password and this is the register code okay register API and this is the client side up okay or the home login and Pages inside of pages okay so now let's create the GWT it use JWT token so first of all we should install that so just come here to create a new one say the mode to the server side to the server node.js app there installed in beam install Json web token yeah let's press enter yeah the token has installed successfully so now let's import it and just come here can't see WT is equal to require Json web token and also let's import const cookie parser yeah we should use the cookie parser also cookie parser is equal to require cookie parser okay I have installed this one also and now let's use it up dot use cookie parser after that so it will lead the cookies for us it is for the cookie okay and yeah everything is okay so now let's move and create just the um whenever we come to the login we should use uwt token to generate a token Okay so whenever we create account whenever we login successfully okay let's just make it every login successfully and we compare the password the password is okay so then in this area we will generate the token just come here to generate the token const token is equal to with the GWT DOT sign we will use sign method and this is the period that we should write so for the payload I will write ID just I will assign the ID you can assign ID name email whatever you want okay so the ID is that or I can assign email and that is the user dot email okay the user this is the record that we have okay user.email and the second parameter would be that the secret key okay this should be a unique and private and secretary okay no one should know about this key this should be in a separate e.inv file but for now we will write JWT Secret key okay just like this and the third parameter is in optional parameter just like edit expire in let's write one day okay it will expire in one day so this is the way that we have generated the token so now let's just assign this and store theme in the cookies just throw this in the cookie we will use this response okay this response will we will use that response start cookie and we will assign for example a name um that would be like token and then the value that is token so now let's check it okay let's move to the Chrome browser just come here to the login I will log in [Music] gmail.com I have already this account and let's move to the inspect and move to the network in the network area so let's press the login uh yeah we have this so let's check it that we have the cookies or not thank you so we should come here to the application yeah to the application and here we should check the um cookie come here see we have this cookie localhost there is no value for that so we don't have any video for that so let's check it okay where is the error see everything is okay let's just try it here um to in this course we will assign some properties that would be first of all the origin yeah the origin would be which origin we we should allow okay so we should allow the front end our front end let's copy the code of our front end the URL let's write it here let's remove it okay this is our front end and also let's write credentials that should be true and one thing else which was the methods and let's just write methods D would be it and post yeah we will use just these two methods and let's save it now one thing else so let's first of all try it okay just come here back and we will try it five and let's again uh we logged in but we don't have the cookies so let's one thing else we should write just come here to the login page here yet the login to the front end and here I will light we are I'm using axis axis.defaults dot with credentials with credentials is equal to true yeah I hope it will work so let's just come here again it's represent and just come here um five and let's press the login button yeah we faced with an error so where yeah here the email here okay come in let's login button so we logged in but we have the cookies okay this is the cookie which has generated okay the token and this is the value for the cookie so we successfully stored the cookie in our front end so now let's come back whenever we come to this route okay to this home so we should check is it allowed or not to access this home page okay so just come here and whenever we come to the home page just come here here I will use use effect hook yes sorry should use use effect hook instead of this use effect tool and let's just try it like this something and just come here I mean here I will call just the route okay then I will check there so here I will use the code like this okay something like this let's just copy this code and just come here and paste that code here now I will change it to the git method and we will move to the home route and we should not pass anything here let's remove it and then we will get a result here I will just show something I will write something like this okay Apple result dot data was equal to equal to with success so then we should move to um the home page otherwise we will just navigate to um login page okay if resulted data was not equal to equal to which successful success so then we should go back to the login page yeah let's do okay this is the home page route and now let's move to our index page and we will write code for this home Home Route and just come here up that git route is home with request in response sorry but something else here I should call immediately okay first of all let's create a middleware so for that we will create another function and we will check the token there in that middleware so first of all let's create a middleware accounts let's name it verify user okay user is equal to so now let's call a method that we will get here request response and next it this next is the the method that we will call okay whenever we call this next it means that it will go back to wherever we call this verify user so we will see it okay come here so here first of all we should pitch the token const token is equal to uh so to read the token we will use request okay request start cookies cookies dot token the token is the name that we have assigned before okay this name okay we were assigned so let's first of all consulate console.log token okay is the token available or not and we will call this middleware uh here okay after this let's delete it okay so just come here and let's come here to the login page yeah delete login or I I will directly move to the home page okay yeah Press login button and let's come here and see the result server is running we didn't print that git slash home and just come here to the home axis I think we didn't import the axis let's import it import axis from axis yeah nothing else is yeah the navigate also we should import the navigate and we should not use it right now okay let's commit it save it okay let's come back right now we can access our home page okay let's press again refresh it and come here what we see yeah the token is undefined it means that we didn't cheat our token okay just come here to the server site code and request dot cookie start token so let's just use again that here axis dot default start with credentials is equal to true let's save it and let's come here back stick it now let's replace the page yeah if we read the token successfully okay it is okay now so let's close it and now let's write our code back for our server side so here we read the token successfully so after reading the tokens so now let's see if there was no token if the token was not available so then we will return response dot Json um in here okay the token the token um was the token was not available for example okay but if the token was available so now we will verify we will use GWT okay JWT now dot to verify so first of all to verify it we will pass the token and then we will just pass our secret key okay our secret keywords ticket this was our secret key okay just copy this and just paste it here and after that let's we will just create a function and we will get an error in the coded code here decode it this decoded is the code or the data that we have decoded before okay here see this was the data okay this email you will get this this email back there here okay from this decoded variable so now let's check it if there was any error then we will return result.json and there would be token is right and if there was no error so now we will just let's call next okay and whenever we call this next so what it will do it will come back here to the home page so here we will return result success let's save it and let's come here back and let's move to the console let's replace the page so success okay so we should this try let's delete the token first of all just come here to the application here and let's delete it yeah that has deleted so let's replace it back yeah the token was not available see the token was not available okay and again deficient see the token was not available so if I move to the login in login yeah let's login .com okay let's login to the system we logged in and see the success okay it means that we are success if I come back and deficiate again okay again we will get that message success okay it means that the token is available with us so it was all about the uh GWT token authentication in node.js with the model stack so I hope this video was helpful for you so if you like this video don't forget to subscribe our YouTube channel and like our video and share with your friends thanks for watching

Channel: Code With Yousaf

Views: 5,959

Keywords: jwt authentication, authentication, jwt authentication node js, json web token authentication, react authentication, jwt authentication react, node authentication, jwt authentication node js tutorial, authentication tutorial, json web token authentication node js, authentication with react, react login and registration authentication, token authentication, jsonwebtoken authentication, node js authentication and authorization, node js and jwt token authentication

Id: yHdkG33l7tQ

Length: 16min 12sec (972 seconds)

Published: Wed Jun 07 2023