Part-1 VueJS3.0 JWT(JSON Web Token) Authentication(Access Token Implementation)

hi everyone today we are going to discuss about jwt authentication integration in qs3 application so jwt is a json web token where we are going to implement user authentication with token based authentication so let's jump into create a sample application uh before going further i want to mention that this entire session has been made as a blog the link for the blog will be available in the description this is my entire blog you can if you want you can read the blog it will be available in the description link okay so let's go to creating our sample application command is like view create endeavor application name i want to name it as jwt view my application has been successfully created let's open the application in vs code cdjwt hyphen view need to go to the path under code dot dot dot opens my visual studio code so here is my application if you go to package.json here you can observe your version is three okay so make sure to have a version three while creating the project now now we required three main packages for this demo like router for configuring the routing and another is ph state for maintaining the state and next is axios for calling the rest apis so first let me install you router let's search like view router 3 on searching you will see a github link please go here you router next to your router next here is the documentation if you want and if you scroll down you can form the command so let's copy the view router command and let me open my terminal and paste in here so now it will install view router library for me so it is completed installing and if you observe in a package or your router is added if you observe your router is fourth version right this is the correct version which is compatible with the view js application 3 okay next i need to install is ux okay let me search for and if you click here here go to fourth version here you can see the node this is the dock vx3 which works for v2 okay vx3 works only for v2 if you are looking for the docks vx4 which works for v3 either you can click here or you can click here so view four point x is the compatible version for the view three okay now click on installation you can found here npm command command is like npm install ux next so let's copy this command and paste in our terminal so we have successfully installed our ux store also so if you go here you can observe now let's install axios so let's search for axios it's a normal third party library which supports for rest api calls so now here we can observe all our required packages like view router ux and axios has been installed now the first step is we need to create some components which will be rendered as a page to us based on the url configuration so let's go to our components folder and here i am going to create two first component is like home view from that view it is like a home page for my sample application so this is the html part okay now intelligence is coming for me okay just some text like heading nothing else okay this is my home page now let me create another component for login this is my law this page will contain my login form so let's create login form right here we need to implement our login form so for this sample i am using bootstrap for styling so let's go to bootstrap on docs here in the introduction page just please copy the css picture of reference and now go to our public folder where our index.html is there click on index.html just above the closing head tag please add our footstep link let's save it okay now we have enable bootstrap let us design some simple form go to layouts copy the form let's different form type and paste inside of it okay okay this is my form okay let's do some changes for it txt and name make this type as password enter password okay let's add a button right control button process slide pretty okay this is the basic html and let's create some data here for model binding i want to create two properties like username password so let them bind with html using vi for modern we have implemented model binding now just create a login callback method just i'm going to write console for now okay let's register with login button so this is our basic form we have created two input fields for username and password and we have enable model binding like creating properties like username and we have created a login callback method like which will be executed on clicking the login button so we are done with this page for now and now next step is to let's add a simple nav menu so that we can click on law we get a single page for residing single-payer page experience let's check for now now go to app file just get rid of the existing code do okay remove this and remove this okay now once copy once again and open into deck so let's remove let's remove some unwanted data our final is like that just duplicate this ally one more time and for routing links we need to use router link default view component so for this we need to use two properties to configure the url this is my home so i am going to given as home page and i can copy this class over here okay let me copy this router link and paste it here and i am going to new as link login and here change over to login and okay this is about navigation and to render the content of the page based on the route url we need to configure router view router view component in this area the routed data content will be rendered okay nothing but if you are in working home page home page will be rendered in this component if you are in working login page login page will be rendered in this component so that's all about configuring main case and everything and now we need to enable routing to our application for that let me create a i like app router dot js so here let's define our routes this variable takes area of our loads so the routing configuration is like the properties where we configure our path and to that path we need to configure component means for that part which component to be rendered okay so let's import our components so those are the route constants okay now let's create a route router method we need to export this config so this is the method that comes from view router this will create a instance for our routing so it is also like configurations only one properties like history we need to create create web history this will maintain our state of our application history browser history another property is like routes so here we need to assign our ropes so now we have our configurations with the routing now we need to register our routing into the view application instance for that go to main.js let's break down this code and import our route file so now we have integrated our routing into our application okay so let's try to access our page now let's start our application now let's navigate to our application here it is not showing why here we need to give route config this is nothing but here we are exporting property that one see now we are getting our home page if you click on login page we are getting our login page as well right so we have a sample application with this login form next step is uh since we are using jw2 token for the authentication in normal in any application to maintain the user authentication data like access token or refresh token we should have to store in the either cookie or in the local storage in our sample we are going to use the local storage but along with local storage for retrieving and for fetching and serving the data or storing the user information more efficiently we will use vh store management as well so first let's begin by creating a basic skeleton for our authentication state management create a folder like in that store in the store we are going to use the mod modules architecture means each each functionality will have its own state management here my authentication i am going to make maintain a separate state for entirely for authentication only so for that inside of it let's create another folder like audio inside of modules let's create our state management file like author dot yes this will be my uh authentication state management file so let's create a skeleton like okay let's for suppose in the state state is nothing but object where we will store all our data to be accessed into our component so here i am going to create one property for authentication user named it as auth data in this object i will store all the information like token refresh token username user id and token expiration okay these are the properties i am going to maintain in this state so that's about the state object let's define vectors getters are nothing but uh methods that are going to access this data in the components so if you want to access some data into our components we need to use getters only okay we cannot use state directly constants hyphen actions so actions are nothing but they are like i think they will do asynchronous jobs like calling api and saving the data into the state uh but saving data actually directly won't do they internally call the mutation so let's defend mutations as well mutations are nothing but the carriers are state changes are for state management so if you want to update or create or add or delete any information from our state we we should always use the mutations only okay that's it now we need to export our entire module so different state okay and i will define one more property like this defense uh when we are using any actions or getters or mutations of this state the earth state management we should use namespace because if any of if we have multiple modules store modules in our example and we have same kind of method name then store may get confused and execute all those methods when we invoke characters actions or mutations so to avoid those kind of convicts it is always good practice to use the namespace so i am enable the namespace for my authentication module now next step is we need to register our auth module into the vh store for that go to store folder and create a new folder like you file like index.js let's create constant store under so if you observe this create store methods comes from the ux this create store contains property link modules where we are going to all our child modules here so my what we have created now earth.js is our one module right i specified so we need to register our module in here so i will name my i am going to import here so i have registered earth model and this here you are seeing name as authrite for this module this name should be used as a namespace while accessing any of the functionality from this earth module so please remember that this is the important name for name spacing so that's it we have registered our our child module into vx store now we need to integrate our va store into our application similar to what we did in router so let's go to main.js sorry i have not exported my main module so here i'm exporting okay and let's import store so now we have successfully imported our store as well so let's save this and now first thing i want to mention is that for a jwt authentication we need a server endpoint right either that server endpoint may be written in java.net or any other node framework right so as a friend and developer we may not require to know much about those endpoints so what we will do is initial step we will use a mock jwt token for our authentication later we are going to replace that mock jwt authentication with real api so for that let me get in there yeah it's not equal to semicolon okay for that i am going to copy marker jwt authentication so from my sample i am taking the jwt token so here we actually jwt token will come from api right which is not which is a asynchronous job so all our asynchronous jobs will be taken care by actions so in actions let's create a method like login it is asynchronous right let's use async for access token so here my mocked jwd access token let's create refresh for now let's let it be empty okay this is our markup data now so in actions when we when our asynchronous job is completed we need to store the response into mutations so to call mutations actions the first parameters like the commit of commit we object with a commit property this is like a command to trigger the mutation so this will this need not to be password while accessing this login method this this commit object automatically passed by the vx store indirectly that means developer need not to bother to pass the commit object and after that we if you want to send any kind of payload some so payload is nothing but username and password right so for that we can create one another parameter like payload this is the object which which will contains username and password for now i am just console log it payload when we replace this data with the real-time example then we post this payload to apa okay and next thing is we need to use commit so now we can use commit to invoke the mutations so in mutations we don't have any method to update the user store so entire logic now i want to implement is in this process in the login method we need to get the access token then then that access token we will pass it to mutation and mutation will update the center of the data object okay so for let's begin mutations so let's create a method like set auth data earth data earth data here first parameter is state it is nothing but the state only passing state to this method is automatically taken care by the ux store library only and second parameter is our data user input so let's make his data okay now equal to okay now in data we have access token data dot access token in data we also have data dot refresh on this refresh token this refresh option so how this data is coming we are thinking right we need to invoke this mutation so to invoke the mutations uh from the action i have said right we should use commit prop commit command so for the commit command first prop first variable is first input variable is uh mutation method name so here my mutation function name is setup data so i am passing first parameter and second parameter is payload payload is nothing but here it will go this state parameter automatically be passed by the library itself so we know no need to pass the state of parameter explicitly so here i am passing my uh x tokens data as plata so this data is this will be passed to this parameter in the setup data okay state will be automatically taken care by the library so once this is this entire object is prepared we need to uh change our state so using this state variable we can access this auth data property so now i am updating my auth data state like state dot data equal to new auth data so i am changing the data if you observe here we doing nothing with these properties like username user right expiration because this information is encrypted inside of the token so we need to decrypt it and then uh those decrypted values assigned to here into our auth object for that uh decryption of the access token we need to have a helper method like let me create let's create a folder like shared okay instead of shared i am going to create a file late jwt helper so we need to write implement a method here that can decrypt and written a javascript object letter which contains the all information inside of the jw token for that i am going to copy a method so this is the method you can search for this method in internet like jwt decryption method using javascript so this is there is nothing to learn here this is a fixed one any kind of jw token can be decrypted using this method you can find lot more different uh helper methods if you want and if you want you can also have libraries as well but this is a small piece of code right so i am going to take the manually implemented code so i am going to paste here so this is my helper method let's go to my earth module state module let's import that method okay we imported our decrypter helper method what i will do here i am going to write some logic so once our object is decrypted will get data like so this data might be different based on your data author token so i know what kind of object will be written by my auth token so i am creating those properties only if your earth token returning different kind of properties you need to create your own properties so for better understanding i will also log here my properties i already know right what my properties will be so i am assigning directly so that is about the mutation which will change the state of our auth data object now we have created action method right where we are fetching where we have dwt authentication data and using the jwt authentication data we are decrypting and assigning all the values into our state object so now we need to use this login method into our component so that whenever the user entered his password and login will trigger this action okay so now let's move to view page so where is our jwt authentication logic in the actions so to access the actions into our view component we need to use red operator and map action and i need to import map actions as well here import the map actions map actions so these are the predefined methods like uh mappers where we can access the actions from the our auth module state so here we need to register our actions so my action is what is my action and login so i need to register here for that i am going to create a new property like action login and i am going to register login so this is my nothing but my action here okay i registered so here we are seeing another property here is the namespace we have to mention about the earth model what is our auth module namespace i have mentioned right the property here we have created for registration auth this is the namespace my auth module so let's copy that give it here okay that's it and now what we can do we need to invoke our action in the login method for that i am going to do like this dot yeah this action is asynchronous login action so i am going to do i have it here we can call like this and we need to pass the payload this payload will be passed to this payload parameter in the action so what i need to pass username and password name equal to this dot username password equal to this dot password okay and let's create one more uh state object where we it will notify whether our authentication is successor failure this will be more helpful when we have a real-time endpoint when we replace this data with real-time authentication api that we need to know right whether api is the successor false so for that we will going to maintain one property like this maintaining status can be do it any of your way this is not the mandatory way so this is this is one way what i want to say this is one way to notify the from the state so for notifying the state of our api i am going to create login apis i have created new property in the state so in the mutations i have to create one method for to change the state of the login api shape set login api status your first parameter will be always be state which will be provided by library and next is user posit data so state dot let's copy the property go to data so i want to invoke this mutation in my login action method as well action method can invoke a number of mutation so commit and action mutation name is next state for now it value always will be successful now i want to create one more getter methods where i want to fetch the our state object data into my login page for that i am going to create a getter like get login apis your input parameter state will be automatically passed by the library written a dot i want to return this status so that's it okay now we need to read the status into our login view component so to read the uh getters we have another mapper like map dot status if you if you observe action methods are registered in methods property but getters should be resisting computed properties because getters are nothing but the getters will return the state object state output always changes rate based on the actions like mutations so to get always up to date or most latest data from the state we need to register our getters in the computed properties because computed properties always watches for the changes more similar way i can simply say name naming convention is over one so i have registered my getter here i need to mention my namespace auth so no after uh triggering the login action method login my action method updating state right status so for that i am going to check for comma so if it is success message written success message let's open alert like login is success else login login success [Music] let's save and go to our application here we have gather status is non-defender okay we need to use this property once we registered our this any getter or action methods we can call them using this only okay let's see okay let me enter some dummy data in real-time application you should write some validations in this is sample demo right i am skipping the form validation so please make sure to write validations for your real-time example let me open this okay i forgot to mention one more like along along with updating state we need to store our refresh token and access token in local storage as well because once application is closed these changes will be lost right but if we store our refresh token and access token in locker browser it will be it will stay since next time when user re-opens the application we will load the access token and refresh token directly from the local store browser instead of hitting the api let's store them here now we are saving our data to two places like one is locker storage browser and another is vx state management store okay let's say refresh again so let me enter some fake data fake login see i am getting login successful and i want to show you two things go to console see here i am that getting username and password or login to my console right where it is login here console if you check here so this from this we can understand this payload is our password data and this commit is automatically taken by the vh store library okay and you can also observe one more object is like username is test sub b is one and expiration in seconds milliseconds every some object is there this is nothing but the decrypted object of our jw trucking where it is there in mutations we have written console this one so based on my decrypted jw token i have created the properties in the auth data if your jwt token returns some other kind of properties then please write your own properties okay this is my jw turkey and these are my properties and one more thing i want to show is if you go to application and local storage here you can see my access token is saved and my refresh token is empty later we will populate refresh token also now the problem is uh i'm closing this application and i will open again not the problem the reason to store in local browser is i still have my access token but my state is changed means i lost the vx store state but my access tokens are still alive in my browser so later steps we will try implement code how to retrieve the access token refresh token from the browser as well so that we can reestablish our react state with our user data so i i think video is becoming more bigger i want to stop it here in the next video what i am going to explain is uh replacing our mock data with jwt authentication and also how to sort our routes based on the user authentication guarding is nothing but accessing the pages only few users like authenticated users only like that we will explain routing gods as well next is how to refresh the store when application closes and opens how to retrieve the access token from the local storage and reassign them back to the our vx store that will be explained in the next video so i think this video has been delivered some useful information to you all so if you like my video please subscribe to my channel i will see you soon with a new video until then signing off

Channel: Naveen Bommidi Tech Seeker

Views: 930

Keywords:

Id: NANhSx94mvE

Length: 56min 18sec (3378 seconds)

Published: Fri Dec 18 2020