JWT Authentication Masterclass: Access & Refresh Tokens | Secure Your MERN Stack App

uh hello everyone welcome back to code with of YouTube channel uh this video is all about marack authentication uh using GWT okay Jon web token uh we will use access and refresh token in this video before we had a video for using JWT token but in this video we will use access and refresh token which is more secure than that okay it provide the security uh to use the access and refresh tokens uh as you know that the token based authentication uh provide as a stateless mechanism uh it is just that the token help with us in the security okay instead of traditional that we were using username and password uh nowadays we use the token okay what the token do it is just provided by the authentication server to a user to use it to access um a protected resources okay resources from the server we are using tokens nowadays okay this is for the security purpose okay it help us uh in this video we will use access and refresh token the axis token is we these are two tokens that we are generating or generating okay the axis token is just a short loot it means that the lifespan of access token is just for 10 10 or five minutes after 5 10 minutes it will expire okay so whenever a user would like to access a protected route from the server so he must provide a token so the access if the access token was expired then the refresh token is used to generate a new access token for us okay two uh tokens first the access one which is just for five or 10 minutes that are used to access resources from the server site and the refresh token is used whenever the access token expire after 5 or 10 minutes uh this in the we are using the refresh token to um provide or generate a new access token for us okay now in this video we will implement this logic okay to use access and refresh token so let's get started okay I have uh created um this is the visual studio um uh code editor that I have opened and we have a folder I have opened the folder right now in this folder I will create two apps one for our server node app and the second one would be our frontend react app so let's get started okay I will move to the terminal open the terminal control back TP uh so in the terminal I will use um npm create wait okay to create a react app press enter so it will create a react app for us so project name we will name it like yeah like client okay just I will name it client press enter we are using react JavaScript and now let's move to the client CD client npm install it will install all the dependencies and packages we will wait for it yeah it is yeah the packages has installed now let's run our react app okay so to run it we will simply write npm run du so it will run our react app now let's move to this URL let's open it let's move to browser see this is default react okay so now let's move to install a few packages that we would like to use just simply let's move to the terminal take a new terminal and CD client here npm install bootstrap that we are using for the design AIS which is HTTP request and response library and reactor to which is used for routing reactor D these three packages press enter these packages has installed uh now we would like to create our server side app okay our node app so to create that let's CD go back after coming there let's create a new folder okay so I will create a new folder name it server inside the server I will just let's move to the CD server folder and there um let's clear the terminal and here I will write NP name in it okay what it will do it will just initialize it and it will create a package adjon file uh package name let's assign a package name which is like I think so let's close it we will use like npm uh in it hypon y okay so press enter so the package has do Json file has been created uh now let's uh install the those packages that we would like to use npm install the first one is the express that we will use the framework of nodejs um mongos nmon nmon is used just to refresh our server site uh whenever we make some changes in server side up so it will refresh that and mongos express cars uh Json web token and also cookie parser press enter so we will install all these packages yeah the packages has installed now let's create a file inside This Server folder okay so we will name it like index.js so inside this index.js we will write all our code and now let's come here to make some changes in the package.json file let's close the terminal and here we will add start okay start nmon we will just use that nmon uh index.js okay we would like to use the nmon okay to refresh our index.js file whenever we make some changes inside our server app and also to use import by default the import is not working okay to for example we are importing something we use import for example Express from Express so the input will not work okay so for that we will add here uh type module okay so then it will work so these two changes we made inside package that now we will start our coding okay first of all I will move to our react up so let's run our server up also okay so to run the server up for the that we are simply using um first of all I will just import all those the packages that we have uh installed okay I will import those packages so I have imported these packages now let's create an app con app is equal to uh Express okay we will call the Express method now let's run our server app okay so to run that app. lesson we will use this method and we will assign a port number okay so for assigning a port number I will write in the port number inside a EnV file okay so we will create a EnV file now so I will not use that file okay because that will make the video lengthy so in this I will just simply write the put number like 31 for example okay a call back function here I will just trite console. log server is running for example server is is running save it okay now let's run our um uh server set up okay let's move back to the terminal CLS and npm start so it will start our server side up Okay C server is running so now our both front end and server side app is running now I will move to the react app and I will simply create a registration um okay page okay to design write the design of that let's come here to remove the default code so I will just remove all this default code also remove this remove these that we don't need and also let's remove the CSS code I don't need that remove all this code and come here to the update GSX uh first of all let's create um a new file and name it for example example registration registration. GSX or afce okay it will generate automatically code because I have installed the react extension so after that we will use bootstrap okay so let's import the bo strap here import bootstrap I have installed the bootstrap yes/ c/ bootstrap.min do CSS this is the CSS file of bootstrap and here in the up. GSX we will use react autodom here uh first of all let's um design okay the registration page so come to the registration here I will simply write the code for the registration P okay HTML code so this is the HTM the registration Forum code okay that I wrote see simple HTML code with bootstrap design bootstrap classes first of all a name fi email field and password fi and two buttons so and then I have imported it inside the up. jsx okay so now let's check it okay it looks like this this is the design of registration page now let's design our login P before um uh moving to the login page we will just register a user okay we will use registration Forum to register a user inside the um database so for the database we are using um mongod okay I have installed mongodb Compass locally which we can use locally for local development you can also use the online mongodb Atlas so let's mongodb Compass open it okay this is the GUI tool for that let's um create connection so this is the URL that we will use and press the connect button it will connect with the database okay these are the databases that we have so first of all we will just pass the data from this front end to the server side up okay so to pass the data for that we need to first of all create two State variables const uh name sit name is equal to U State we will use use State hook and I will duplicate them and the second one would be email sit email and the third one is a Sit password password okay so after creating them now we will store the values inside these variables okay whenever we write something in this input field for name so I should store the value inside name variable so for that just come here simple we will call unchange event create an array function and here we will call sit name okay sit name method and we will just name it let's pass event e. target. value same I will do for other two Fields okay what it will do it will just store the value that we are writing in this input field inside the new uh variable and let's do it for email instead of sit name we will call sit email me and also let's do it for the password set password so after that we we press this register or sign up button so what we we should call a function okay for that come here to The Forum element and here I will call unsubmit handle submit I will create the this function const handle submit is equal to passing even to that e. frent prent default submission and after that we will use AXS okay AXS so let's import first of all the axis HTTP request and response library that we has installed at the start import axis from axis now let's use it access. uh we will use post okay to pause the data x./ register and sorry we should use the server side URL it is not an endpoint uh that is HTTP SL Local Host then the port number okay the port number that we has installed in index.js okay this port number 31 after that we will just call register endpoint okay we will create this register End by there in the server um app okay in the index.js then we will pass the data name email and password so after passing the this data we will get a result okay so let's first of all console the result console log result result do data okay we will just print that do cage error console.log error if there was any error print that for us on the console so we have did everything we pass the data to the register now let's create this register endpoint okay so for that simply come here to the index.js first of all I will just use up. use um express. Json what it will do the data that we pass from print end it will convert this data to the Json format and also op. use we will use cars later we will add um options to this course but right now we will write like this and now before creating register end point we will move to create a model okay for the user for the moo database we need to create a model okay for every collection or table so let's create um a model just come here to the server side folder let's close the client server and here I will create a folder models inside that I will create um model by the name of for example let's name it employees or students okay student. js6 so inside this student now we will um just write um define the properties of a student so I wrote the data for student model okay it has three Fields name email and password the type is string okay we can add other properties also for example email should be unique okay simply we can just add those properties like this okay writing in the curly braces type string unique true and default value whatever you want so you can add those also but I simply write the type of these three Fields okay and this is the also we have created the user this student model and we exported okay so now we will import this um student model inside our index dgs we can also create a separate files for routes okay in controllers but in this we in this authentication we have just two end points login and sign up I will write the whole code in this index.js file so let's first of all import student model from slod SL student uh now let's create a connection with the um mongodb okay so to create the connection we will use mongos object. connect and here we will pass the URI okay so for that simply come here to the Mong be pass and just right clicks on these three dots connection string after copying that just come here back to our code paste it here okay so now here at the end we will specify the database okay if the database was existed there so it will use that uh database otherwise it will create a new database okay right now we don't have the school database let's name it school for example okay/ school so after that now we will just register a user okay so to register for that we will use up. poost we will use SL register route then we will get request and response and here we will use a user model to insert a recard inside the database the student student model okay we will use this now first of all we will just take the values from this request okay like const name email password is equal to request. body so it will extract these values so we can also use a library by the name of bcrypt okay to Hash the password but we will not do that in this video I have already that I have already did that okay in a separate video you can watch that video okay uh but in this video I will just um store the plain text inside the database student model create then we will pass the values okay name email and password this means like this okay name is equal to we we can write like this okay but both names are the same in the server side in the database and here in the front end okay so we can simply write like this that then we will get a result a user okay in the response we will get the user then we will return um a response to the front end okay so for that response. Json I will just return like user okay I will return the record of user but in the real life application we should not do like this we will just return like loging successful or something okay whatever message you want so you can return that. cage error uh response tojon return the error okay so this was the code that to insert recard so now we will um try it okay what happened so let's check it first of all both um yeah there is an error inside the our front end okay in the server set up okay we we paste with an error what it says cannot find module student okay import it from close it okay student model save it come here to the server side up yeah the error is that student model okay so let's rename it okay I will just rame it to GS now GSX okay so let's save it now let's check it now see again that the import did you mean to import model student judges yeah absolutely we should to that like student.gs see here that is export name default uh let's move to the student and here we should yeah the problem was that we we were not exporting it as default so I have I I defa I exported it like this okay export defaults to student model like this okay it's working right now okay so now let's move to our front end and browser just come here and this is our register uh let's move to the console what we get in the result okay whenever we just insert name youf for example okay sub gmail.com the password is 1 2 3 4 5 and let's Press Register button what we get in the result okay so we faced within AIS error uh registration. GSX okay so let's move just come here to our frontend registration B bolded Local Host 31 register name email and password yeah the the whole the problem is with the connection okay with this connection string it means that instead of writing Local Host we should write um the IP address 127.0.0.1 okay we should write this um IP address instead of that okay so now let's check it again just come here and Press Register see we got the user okay it means that I got has inserted successfully now let's move to our mongodb compass and refesh it see school students okay in that we have this first recard so we have registered successfully okay so now we you register a user s successfully we should move directly to the login page okay so for that we will use react router Dam okay just come here close the terminal and we will move to back to our front end to the update G6 here I will import the react toam okay import browser router routes and route from react router D react router D why it is not importing yeah this is from not for yeah that is okay let's save it and let's use it now here I will use browser router and then we will use routes and here we will use route path is equal to register it means that yeah register and the element is equal to with the Reg registration that is okay and also let's create for homepage we will create a separate component for home okay just route path is equal to slash element is equal to we we will create first of all home component just come here home. JX FC and this is home and let's import it there home that has imported now let's create same like this for login this would be log in and the element would be login let's create that login. G6 save it and now let's import it there L that has imported uh one another component would be for um just protected routes okay for example dashboard the dashboard should be protected just the authenticated user it means those who are logged in those users can access the dashboard let's create one another component dashboard do j6 see save it so we did it okay so now just come here to the dashboard uh to the registration okay so weever we successfully register or recard so there we will move to the uh login page okay so for that we will use navigate okay let's create an instance of navigate is equal to use navigate hook okay from react it has import it see and here we will use that nav weate SL login now let's move to the login okay so to create the Lo page just come here we will create the design of the login page okay the design is the same as the registration but in the login we will have just email and password field I will what I will do let's copy the whole code copy this whole code and come here to the login and I will paste it here after pasting it I will change it to the login and change this to the register say just a button and don't have account like this and here let's remove the name field yeah I will just remove this name fi we have just two Fields okay email and um password Also let's copy the code this code okay because we need to implement something like this the same thing we want to implement in the login page also we would like to store the data and pass the data to the server site just let's remove the name field and here we have the let's first of all copy this whole thing contrl C save it okay um yeah the email and password we would like to store these data and here inside inside the um handle submit okay whenever we press the submit button it means that we insert the recard login whenever we insert the recard just come here we paste with the that is say react has already been declared just come here here we have twice the react save it let's move SL to the login see in the L whenever we enter email and password we will pass the data to the server side and there we will write the end point for the login okay just come here whenever we press the handle submit the whenever we press the submit button so we will pass call this handle submit function there we will now call instead of register login okay to login the system and we will pass email and password Okay so so here we will console do log just response. data what we are returning and close this right now I will comment this line okay yeah now let's create this login um route endpoint okay in the um index.js here up. post slash log in get a request and response so here first of all we will distract the email and password request. body after distracting this so now we will use student model again do find one and we will pass the email to that okay then we'll get a res user F user so what it will do it will find a record based on the email if that was existed it will run this query based on email if the user was existed so okay else we will return response to Jon no record for example no record existed the same thing we can do for the registration okay okay we first of all we will check if the email was registered so then we will return a message that this user is already registered with us okay the same thing we can do for registration also so find one by email if the user was existed what we will do then we should check the password also okay so before checking the password let's first of all console the user okay console.log user I will print it here and also instead of this I will just console. log no record we'll do something like that okay and here cage error if there was any error conso response Json error or instead of this we can response. Json we can return the user okay and also here we will response. Jason no record let's first of all check it okay first of all let's move to the browser and let's move to the console on the console I will check just the result okay we have @gmail.com 345 let's press the L see we got this record okay it means that based on this email there is a record but if I write a wrong email and Press login see no record existed okay so now we will check the password also okay if the if the user was existed so then I will check the password Appo user. password wasal to equal to with the password that we distracted from the body if these two are equal so then we will just generate two tokens right now okay the first one is the access token and the second one is the refresh token okay we will use Json whb token okay this package JWT so let's do it const access token is equal to JWT doign first of all to this sign method we will just insert the payload okay the data that you would like to store I will just store the email uh that would be like email okay I will store the email and after the payload so then we will write here uh secret key okay the secret key we should write it inside EnV file okay and the second option is that it should be at least 32 character or that should be50 180 okay unique characters no one should know about this okay this secret key I will right now for just for the learning purpose I will simply write JWT access token secret key okay I will simply write like this and finally um at the last step of the optional um properties are that I will add the expiration okay in which how many minutes are as we see that the access to token has a short time so we will just expires in we will add for example f 1 minute I will just add 1 minute okay then I will show you when it expires I will show you okay it will just expire in 1 minute select this and ALT shift down Ari it will take a copy of that and this is refresh token with us so here again we will store the IM mail and this is the these two the access and refresh token this secret key should be different okay so here I will add a refresh token token secret key expires it in 5 minute okay it will expires in 5 minutes right now the time of this is days and weeks even for months but just for the learning purpose I will show you when it expires the result of that okay because I enter the 5 minute expiration date for it and after that what we will do now part the storing of this um these access tokens um the people use different okay some people developer use the um local storage par access token and the cookies or sessions okay uh and for the refesh token um uh the people prefer to store in the database are stor in HTTP only uh cookie uh but in this video I will store the both access and ref token in the cookies HTTP on the cookies okay that we cannot read through JavaScript uh I think the prefer way is that um to store inside the ref token because that is for the long time we we should store that in the database and we should just store the ID of refresh token we can generate an ID and we will store that inside the database for the security purpose but that would be a separate kind um um video but in this video we will store them in the cookies HTTP only okay it is also a secure way okay because we cannot read the Packer cannot read it through JavaScript so let's do it we will use response. Cy and we will name it access token and the value will be axis token after that the optional properties are like max age for this would be like 60,000 okay this is in millisecond we should write the value of this message in millisecond okay and let's take a copy of this and this is a rep token replace token replace token and mixage of it is three Lu and this other properties are like HTTP only true secure true and same site strict okay we have added these properties that we can this is just HTTP only we can access just through HTTP we cannot access through JavaScript so after storing these tokens so now let's move and uh response. Json we will return on this uh just successful succeeded okay succeeded login Success full yeah everything is okay yeah so now let's move okay back here and let's Press login so no record right now let's insert a correct email and also I will show you now the cookies okay there is no cookies with us let's check it see cies Local H we don't have any cies right now let's l in now Lin let's write a correct email this lugin so let's move to the console what happened log in successful but let's check the cookies application no the cookies yeah part to store the cookies so yeah for that now I will handle that errors so the error is first of all we should add the options okay just come here we should handle now the cars come here to the cars origin origin is that our fronted URL we should add here this URL copy control V after adding it and also we should add credentials true okay credentials true what else we should do let's check it okay let's first of all let's Now log in again the Cod case has not stored for that let's move to the log in and here I will just add accs do defaults do with credentials do with credentials is equal to to through store it save it and let's check it now I'm just showing to you okay step by step let's press again Lin button see now the error has solved and we store the cookie successfully okay repace token and access token we have these two um tokens so this uh access token will expire after 1 minute okay when let's I will pause the video for 1 minute then I will show you so now let's check it okay let's come here back see the access token has gone we have just the repace token it will also expire after 5 minutes so after logging successfully we should move back to our homepage okay or we should move to the dashboard okay so to create the dashboard uh that should be protected okay to the dashboard who should access the dashboard just authenticated users if we had rules in this if we have roles for example admin inv visitors then just the admin should access the dashboard right now we should just protect the dashboard and just the authenticated users should access that okay just come here and we will create the dashboard right now so first of all let's return uh wallet message from login okay here I will just return response. Json return response. Json let's remove this and L in true okay and message we can I will not return any message but this should be in object that is okay Ling true okay and here um I will return log in false comma message like this so now let's check it there so here we will handle that like Appo response. data. log in was true so then we will navigate we will directly move to/ dashboard dashboard else we will navigate it back to homepage okay to move to homepage so now let's move to the dashboard okay so to the in the dashboard what we will do in the dashboard we will call use use effect okay first of all I will change this H2 and here I will use use effect hook okay to render at the first start set here in the uh let's use accs dogit SL HTTP Local Host 31 SL dasboard that then we will get a response right now I will just console. log the response. cage there was any error console. log the error save it and now let's move to create the dashboard come here to the index touches up. kit SL dashport request response return response. Json um valid to message authorized that is okay okay so here now we will create a middleware okay so whenever we come here to the dashboard um route here endpoint so we will create a middle where we will call that okay if that was an authorized user with us so then it will be allowed to access this dashboard okay this whatever we we have written here U so he can access the dashboard okay but but if it was not authorized it means if there was no tokens so then we will just say it is unauthorized with us okay so now let's create um the Middle beare const where ify for example user is equal to request response and next the next is we will I will show you it what is the job of next so here first of all in the wari user what we will do we will just uh point if the token was existed with us so then we will let us okay so first we will check the tokens the existence of tokens so con access token is equal to request. cookies do access token we have stored like this okay the name of that was access token okay now if the access token was existed so let's check it EO not access token if the access token was not existed then what we should do okay so I will Implement that logic okay to renew refresh the token later but first of all I will uh implement the logic of if the uh access token was existed so then if the access token was existed I will verify it using GWT do verify and here first of all I will write access token then I will just write my secret key okay the secret key was GWT access and then secret secret key this was the um secret key and after that we will get an error or decoded value app error if there was an error so what we will do we will just return response. Json valid false message invalid token else if there was no error it means it was okay the access token so then we will call next before calling I will just request. email is Al to with decoded decoded. email this decoded is the payload okay that we have stored uh decoded. email okay and also here I will just next call the next what what is the job of next okay so request. email is equal to decod it do email so yeah we should right Cur brace is not this okay so this decoded is the um data that we have stored before okay this value okay this email okay that we have stored and the next is that we power these all things so what it will do next will directly call this okay back it will come here and it will uh think it as valid it is valid with us okay it will come back to the dashboard and it will return it will execute this code for us okay so now if the oxy token was not available it means it if it was expired so what we will do so for that we will create um a seate function so the developer use different methods um some people just uh whenever if that is expired so they are uh returning request back to the front end then from the front end they are um calling back and they are creating an end point here for the refresh to refresh the token and back then return the result to the front end but I will will implement the logic here in the server side I will create a Cate function for that to renew a token it means like this okay let's implement it like this I will create a Cate function like C renew token okay is equal to I will pass request and response to that function and there in this renew function what I will do first of all I will check the refresh the existence of refresh token so for that we will implement me something like this okay just I will copy this code and I will paste it here first of all I will check the refes token okay just come here refresh token and this is refresh token with us refresh token if let's copy this paste it if the refresh token was not available then what we will do return response. Json a message uh in object valid false false and message would be in no uh refresh token else if that was existed then I will verify it instead of access refresh secret key error decoded if error then I will return false invalid refresh token okay else if that was okay the refresh token then I will generate a new token access token and I will store that inside the ciese we will do something like this okay just come here as we did before in the login for of all I will just generate a new access token here okay then I will store it inside the cookies contr C after storing that inside the cookies then I will return the result back to the this function okay where I am calling the renew token function so I will just create a variable here let exist okay exist is equal to by default value is false I will make this value true when we generate a new token okay so here in the lse area I will assign exist is equal to true and at the last I will return exist okay save it what we did so here if the access token was not available then we will call this renew function okay so let's do it app renew token okay if it return true I will pass re and response to that if whenever we call this renew function okay we call this for example we the access token is not available we call this renew token function and here we check the refresh token if that was not we will return to the front end this message if that was available and if it was okay then we will generate a new token store inside the cookies and we will assign true to exist and we will return the exist it means we will return true if we return true so then we will execute this function and we will call here next okay because everything is okay we generated a new token we will call next and we will come here back to the dashboard okay and the dashboard will return on this message now let's check it okay what happened let's move to here right now uh we don't have any cookies okay uh for example we would like to um access the refresh token okay we never yeah no no no just come here to the dashboard we would like to access the dashboard okay so here whenever we return a result so what we will do okay just come here so here we will check now the result Apple response. dat. valet if it was okay it means we return to true so what we will do so let's create a variable const Mage is equal to sorry we should just message is equal to use State and here I will call that se message response. data. message if it was not valid what we will do we will use navigate to move back to the homepage or login page okay const navigate is equal to use navigate Hook from react autod down and let's move back to the homepage okay navigate SL homepage and let's print the message like this save it now let's go back refesh it right now we don't have any cookies let's login five Press login login see okay we have generated these two tokens and dashboard authorized okay we have returned this message just come here with the dashboard see authorized we have return valid true because right now we logged in and we have these two tokens if you refresh it by back so we have right now both tokens okay it will expire uh after 1 minute the access token and refresh token will expire after 5 minutes so first of all I will try Okay after 1 minute okay now let's check the access token see we have the token is like this okay at the end of the token we have E90 okay so after 1 minute then I will uh show you E90 is at the end so yeah I think the um access token has expired okay right now we don't have the access token let's rep it again what happened see again authorized now the access token has not stored the result the reason is that from the dashboard we should call we should use this axis okay uh let's use axis dot defaults dot with credentials is equal to True save it okay so we will try it again okay so I think I didn't use this verify yeah we didn't use this verify user middleware okay so let's call it sorry we will use that here comma okay let's save it now now we will check it okay verify user ory user now let's come here and now let's move to the login back SL login so here I will just enter the credentials and press Lin see we have two tokens and right now we didn't um see the message there is no message me to the console and we paste within error let's appre it so again the problem another problem is that we should use the we cannot access this access token okay from cookies because we should use this cooki paror okay so just come here up. use cookie parer and here also whenever we are generating a new token here where was that the r new token okay this is not we cannot access directly the email but we should write like I think get decoded decoded. email like this email save it and now let's check it let's check it okay what happened let's refes it we paste again within error so let's check it again where is the error so I will just check the error that is server side error access token is not defined that is in index stgs here no access token yeah that is refresh token okay refresh token we should check the refes token okay and yeah that is okay let's save it and let's check it again uh we directly came to the homepage because uh we don't have let's check the application uh we have just the ref token okay let's we have the ref token it means that it didn't generate the um we have the rep token but um it didn't generate cre the access token for us come here to the console no error server site server is running okay but the to access token has not generated this new refresh token has not generated for us so let's check it once again from start let's move to the slash log in and we will log into the system.com five and let space lugin so we came directly to the H page uh it means yeah we we we faed within error I will just print the error whenever we log in yeah whenever we log in we are result. data. login if it was true so then we should directly move to the dashboard okay come here to the login page yeah in the login the login was okay if you password wasal password we have generated the cookies we have jon. le true we have return this result let console. log response okay slash login. Five press l in so we got this data so the error was that we were writing the secret key run okay in the index. Gs file here in the Lin end point we have written GWT access token secret key but there we were using um just without token okay here we should add the token also okay token and also the Rish key here we should add token the ref token it was the error that we were facing with and JWT here is the access token okay secret key here is okay but in these two places we are facing with this error now let's move to to the login page and we will check it come 1 2 3 4 5 and let's move to the cookies let's Press login so we have these two cookies and we are authorized so now after 1 minute we will check it okay this is the token this is the AIS uh token with us after 1 minute it will expire then we will refresh it again okay so what the end is this just remember these correctors so let's check it see the access token has expired with us we don't have access token right now let's repeate what happened repeate see again we have the access token it has it generated the access token for us again okay so now let's check the value see a change value for the access token so now uh 5 minute after 5 minute it will expire okay it will expire the refresh token also so then we will check again what happened okay so let's see the rep token has expired or not yeah expired both tokens has expired right now let's refresh again what happened okay let's refresh it see we directly came to the homepage because we are not authorized to access the dashboard the dashboard is just by authorized user we cannot access the dashboard again if you would like to access dashboard so we cannot access that we will directly move to the homepage so it was all about that we implement the um access and refresh token I hope this video was helpful for you you have the code um in the the code Link in the description okay you can access the code and check the code and test with your own self so if you like this video don't forget to subscribe our YouTube channel like the video and comment down uh thanks for watching

Channel: Code With Yousaf

Views: 17,716

Keywords: jwt authentication, mern stack, access tokens, refresh tokens, user authentication, authorization, secure mern stack, jwt tutorial, mern security, jwt auth, jwt token, json web token, jwt, jwt authentication node js, auth0 react

Id: iQ8kJ8h8z_0

Length: 64min 45sec (3885 seconds)

Published: Tue Dec 12 2023