JWT Authentication with Node.js, React, MySQL | Node JS Authentication With JSON Web Token

hi everyone this is a very important topic in how to implement JWT authentication with no.js in previous video we created our sign up and also the login pages and we saved the records in my SQL database and in this video we will Implement how to use GWT with node.js okay in the previous previous video we implemented our sign up forum and we registered the account and also we implemented our login Forum okay and we checked that whenever we logged in successfully we should go to our home page okay so we implemented it in the previous video so for that video you have the link in the description how to use it we use session cookies and also saved registration and also back check the login pages so we did all this in the previous video so in this video just use the gw2 or Json web token how to use that okay so the first thing is that we should install that in our server side Okay so so in this server side we will install Json web token we will come here to the terminal into the server side inside here we will add NTM installed Json Vapor token if you are using yarn just yarn add Json with token so I have already installed that let's check it see Json web token I have installed that okay so now let's use that so before starting let's check it how it works okay how this this Json web token works okay for example um here is the user okay the user logged into the system okay this is the login and they press the button okay and it log into the server okay the server verified okay it login successfully okay it generate a token for user a generator token for the user okay it's stored on the client side and this user okay whenever the user again request to an API okay to the server okay it requests for example like a Facebook okay whenever you log in you are requesting for posts for comments for your profile for something else so again it should check that yeah so it we should login again you whenever you are requesting for example for posts okay you need this should verify you is it the user that you are logged in with us or not are you authenticated with or not either so it to can help with us to just verify it based on the token okay this is a user which is logging with us which is verified with us which is authenticated okay no need for again to login uh back for the posts or comments are for the profile so let's see just the choker the token if that was uh authenticated it means the token matched with the server where there is the the token it that match so no need again to login for that uh API okay so let's see for example there are money users okay so it will check all the users so it just shows the data the related to that user okay so this is very strong um the token is very strong okay so it it is just simple when we are requesting for other apis so it helps us um and it authenticate the user that is it the user that he is claiming or not so it is all about that so let's move now back so to use that first of all we will come to our server side code okay server side okay here we are logging it to the system okay this is the login route API that we have written okay in the login whenever we successfully logged into the system okay so in the login system here this is the code that we are plugging successfully okay it means that our password and username is correct so here we will just use now gwg so first you will import JWT so for that we will write import JWT from Json web token after importing that let's use it so whenever we logged in successfully so here we will use that now okay so first of all we will just take the ID from our records okay this one the ID that we have okay we will just take this ID so let's come here to our code and const ID is equal to the data we are getting here okay this data this is in our HIV that's okay whenever we run the query we will get an array so we will just take the 0 the first row and we will take the idea of that after getting the idea of that now we will use the GWT foreign [Music] key this should be a private key okay um in the real application that should be in that EnV file okay you should have a DOT EnV file in your startup site code and you should store that there in check from that eme file but now we are just testing so I will just write something like uh GWT if I just write like this or secret key okay secret key and after that we will pass another object so in that objective like we will pass expires in for example expires in like 300 okay it will just take around five minutes okay so I thought so it will generate a two conference okay let's assign that to our variable const token is equal to so this method will just generate a token for us and we will store that in the token variable so after generating the token so now we will just pass a return that is our client said okay to our front end so to return that instead of just forcing this message we will just write message or I have it right let's assign login true okay it means login is true and also we will pass our token and also we can pass uh the data okay that will return okay let me just simply fast that to our front end so whenever we logged in successfully we will generate a token and we just pass that to our front end so now let's move to our front-end site code okay in let's come to the let's uh let's come to the login to the front end and here to the SRC to the login in this league log in whenever we submit our button this is the submission code okay so we will pass this like in API in our server side and here we will get the results so whenever we succeeded but right now we are not getting this message we will get some result .data that let's check it we will return this login okay data.login whenever we return on the login if it was true so it will run this code okay so we will come to this party so just simply let's stick it okay that we are returning okay we are going to pack our home page or not let's check it now let's come back and refresh it and let's come in here enter the password let's login Crystal login button C yes correct so whenever we come here so now we will just so what you will do now with our token so we will store our token in your local storage okay it is a good way maybe your yeah we will store that in a local storage so before storing that and the local storage we will come here yes the user interface we will create a button here okay whenever we press that we will just check is the user authenticated or not okay by pressing that we will access the for example user information okay so whenever the user free starting that button so we will check is to access this information or not this first of all create a button yeah let's come here to the home page just come here Yahoo and here create a button inside this uh check art okay okay check out so now let's whenever we click on this on click let's add a class name to this button button primary and whenever we press the this button so we will call let's create this function um yeah and the lot is equal to it will create a function and here we will call our backend API so for that I will use axis reported that has imported data um just git okay and we will call Sim Sim to this API this will be our route and let's assign it but instead of this we will just check auth we will call this route okay check out we will create that later there okay so then we will get a result we will just cancel log the result cage if there was any error console.log here okay so we never replace this button we will call this function inside that we will just call this route and we will check we will then display the result so let's create this route okay let's come here to the server and let's click that here he will just up that gate in here cheek okay same to that we will create a like this okay so after that we will get request and response we will just return CDs are authenticated so before running this route okay for example we are passing this authentication message to the front end we will check is the user authenticated or not so for that I will create another function so I will name it verify JWT I will create this function now and before running this we will call this function if that return result true so then we will learn this otherwise not okay so let's create that Advanced verify GWT is equal to we will create a function we will get request response and that's your next middleware let's run that now so here first of all we will get our token from the headers okay we will write counts token is equal to request that leaders [Music] and from the edges we will get access for example we will name it axis token first we will get our token okay now we will check if the token if the token was not available okay so then just return s we need token please provide it or next time okay else if the token was available so then we will just verify it now so so verify it will like GWT dot verify in inside the verify the first we will then we will like our secret key okay the key that we had before we assigned before yeah this key okay we should write it manually like this it okay so after that we will just edit a function there will be error or decoded so if we get an error we will just return result.json not authenticated okay else we will just return um first of all we will write like a request dot user ID for example is equal to decoded decoded dot ID so it means that we are passing our ID to the next route okay so the next round to go further for the next rounds so we will call next uh middleware now yeah so after writing this we did we implemented it in our server side so now let's move to our front end so their whenever we get this response okay first of all we should store our token okay the token that we got in this login we should store that and local storage so let's come here and in the login so whenever we log in successfully yeah login successfully so we should store that and the local storage local storage that's it item and we will name it token and after that we will assign a result the data that token that we returned okay the name of that was uh token okay so let's check that see the token that we return okay so after that when we return the token so we should now use it let's move to our function that we created let's come here yeah we were at the home page okay we were at the home page so we said whenever we click this button so we would like to call this function so after that we never recall this so we should call this authentication okay this API cheat auth okay we should call this check out this one okay so we should do uh pass our token also so here we should pass with the headers at this token okay that we used okay this one access token we should pause this in the heaters so let's write something like this heaters and we will name it like this that we did in our server cell okay access token and we will pass our token to this local storage that git item the name of that was token yeah everything is working so now we will check that so let's move to our front end so to run this okay so first of all let's refresh the page yeah let's log in okay after logging so let's move to the console what we are getting from our server side okay let's to the console so let's press this check out okay to check that let's press it see regard the result that authenticated okay so if I remove the authentication the token so let's come here to the application let's come here local storage and here let's remove this okay let's delete it so let's come back to the console and let's press now this uh check out okay so let's press it see we got we need to please provide it for next time okay it means there is no token with us okay so it was the response that we got from our server side see if there was no token so please provide it if that was verified so we will get this result okay if that it means that there was no error so we move back to the next round so we got the result that authenticated so it was all about implementing uh JWT in node.js so I hope this video was helpful for you if you like this video so please subscribe our YouTube channel and also like this video on coming down if you have any questions so please comment down that thanks for watching

Channel: Code With Yousaf

Views: 18,036

Keywords: jwt authentication, json web token, authentication, jwt authentication node js, json web token authentication, json web token authentication node js, node js authentication, node authentication, token authentication, token based authentication, jwt authentication node js tutorial, how to do authentication in nodejs, passport nodejs authentication, node authentication tutorial, authentication with jwt node js, authentication tutorial, authentication with jwt

Id: Ct9O9YZp2UA

Length: 17min 27sec (1047 seconds)

Published: Wed Mar 29 2023