Angular 17 Login Refresh Token using interceptor | Angular Login | Jwt Token

uh welcome back to learning Partners so in this video we are going to see how we can implement the login page and that login API will be a token base so we will implement the JWT login plus Interceptor after we login we get the token that token we need to send along with all the API call in the header section so we will implement the Interceptor then an additional functionality the token I will be getting will have some expiry time so with my API I have set it for the 1 minute only so after 1 minute that token will expire so once the token expire again you need to call another API to get the new token so this is just the login form I will be using so what I have done is like simply HTML CSS login page code pin and in that I have open this page so let me just go over here if we open this website you will get turns of the login page you can easily Implement just copy paste the CSS and use it so around I think third or fourth page I have this login page which I have implemented let me just check it okay you can Implement anyone so now this is the login page I'm going to use then these are the apis I have so in JWT controller you can see registration API is there login API is there once you do the login you will get the token and the refresh token also and refresh API token is also there and the one API is there which is authenticated gate all users so if you try to integrate this API in your component and if you don't pass the token along with the API you won't get the response but if you pass the token you will get the response so these are the apis we are going to use now coming back to like how token based and refresh token Works actually so you consider like you have a client side application so from client side application what we do we make a authentication so we give a call to login API it will go to the server and server will validate that credential and it will return the access token this is what I'm talking right so once we make the API call in the response if the details we have provided are correct we will get the token now token will be of two type one access token and one will be the refresh token so now you will get two refresh two tokens one access token and one a refresh token now the in Interceptor you will pass just the normal token but when you hit the refresh AP so that time you are going to need that second token that is refresh token now so we will get the token back in the client side we will store it in the local storage on session storage or cookies anywhere in the client side then in all the API after the login API what are the API call we make we need to pass that token in the header section so that on the API side it will validate that token and if the token is valid then only it will return the response otherwise it will give 4 400 or 41 like unauthorized API response right so with my API let's say I have provided the session timeout as 1 minute only so you get the token let's say after 1 minute you try to navigate to another page and you hit the API but that time that token will be invalid because it is expired so again once it is expired you have to again call the refresh API token because we cannot ask user to again go back to the login page and again login so internally we have to hit the login API get the new token and store it in the local storage and then again do that API call in what API call you got the error this is how our authentication or the authorization Works in a token based APA now so uh just a normal angular 17 project I have created now whatever the code I will I will be explaining same code will be uh same code will work in the previous version also just like with the angular 17 some code syntax or the syntax is different but logic will be same whatever I do over here you can implement the same with the older version also now while creating the angular project I have created it with let me just show you the command with Standalone false so you can see this is the project command NG new this is the repository name I have created same name I have given to the project with st with stand alone false right so this is the command which I have used to create the project let me just paste it over here NG new this is my project name and with Standalone false so this is an angular 17 project but if you say Standalone false let me just show the package so you can say this is a 17 project but if you say Standalone false you will get the old structure with app module but if you don't provide this Standalone FS now you won't get app model the whole structure will be different the angular 17 structure right so so in this project I have created three component dashboard layout and the login so in second terminal I have created this component so login component layout component and the dashboard component and I have installed the bootstrap and the font some also so for that uh I mean I have installed it but it is not provided here because I use the reusable node module folder but in angular.js I have added it so you can install the bootstrap and the font ASM if you need after that the basic thing what I have done is ready now once you do once you create the component next thing you have to do is the create the routes so this is an empty route file which we create so let's start now so first path I will create is the default path so path route will be empty redirect to I will redirect to login and path match strategy we need to pass and here we need to match the full path this is my default route after that we need to create a route with login so login and component I will be opening is the login one after that so this is a basic project right after once you create the project app component will be your parent component so once if you are not logged in your parent component will be app component but once you are logged in your parent component should change so that's why I have created extra component that is layout so in this layout component I will have my nowar so once you do the login all the component which are accessible after the login all those component will be loaded into this layout component so once you log in your parent component will change so that will be layout component so I will need one more route so path will be my empty only component will be layout component now for this layout component I will have children's so now in children what are the component you are going to display after the login all should be part of the children of the layout component so again here I will create the route so for I currently I just have created one component so that is dashboard so I'm creating route for that component dashboard so this is just I'm taking for an example so you can create or if you are following this in your uh actual project so you might have several component so all those component will go over here right so this is the route structure you need to have when you are trying to implement the login functionality again this is not with the website if you are working on the website you don't need this kind of structure but if you are working on the admin panel like you need to show just the login page and once you do the login you need to show the now bar or the sidebar in that scenario only you need to create structure like this but if your application is kind of a we site so you don't need this structure all your route will be like this only not uh with any children so routing is done let's close this after routing so I have already completed the copy pasted the this code into my login component so this is the HTML I have copy pasted from there just the extra thing what I have done is I have created a class with parent and whatever the CSS were there with the body that I have replaced with the parent so now now uh in app component we get this basic structure we created right in angular so I need to remove everything and I need to add router Outlet over here so now if I save the default route will be executed and the default route is login so I have run this application on Locos 420 so now if you can see even if I don't have anything now by default it is navigating to the login so on the login page the login page is visible ible uh but my API won't give response API response on this port so let me just run it back so here will you will see one more thing like if you need to run angular project on specific Port so let me just stop this compilation NGS iphon ion Port 35 so I'm running my angular application on this particular port now first I will create a service because I'm going to make an API call so I need to create a service before making service I'm going to use forms so I'm going to use the NG model and the uh HTTP clients also so for that I need to add HTTP client module and the fs module over here client module and forms module I have to add if you are if you are going to design the form with reative so you need to add the the reactive form module as well so our app module work is done now we have to create a service so in app folder I'm creating a folder that is services and inside the services I'm creating one service so new terminal and here I have to create the service when generate service let's say user service I'm creating so I'm just creating one API call there only uh one service there only I will create all the API call functions now here first thing like private HTTP colon HTTP client now in this service first API call function I'm going to create that is for the login so registration part I won't do uh I will use uh the uh reg user registered already there because that is not the aim of this video so function name will be on login now in this function we have to do the API call so and whatever the API call data we get that we have to return so this do HTTP do API call is post if you see the Swagger so login AP is with the post one and we have to send the object also so this function will have a parameter that is obj I'm not creating interface or class just to limit the video length and here we need to pass the API URL so let me just get the URL So This is My URL and we need to pass the object so obj now this function is rning a data type of observable so you can either provide a data return type also over here or you can skip it doesn't matter so our in user service we have created login functionality now login page API call now in login component we have to create our object so if you see email ID and the password two things are there so this object we need to create so let's copy now we have to create an object over here so login obj r any I hope pasted let's remove this so I have created an object with two Fields now this object I need to bind to my form so this is a form where we have this square bracket down bracket NG model login object dot email ID and password also so I will just copy paste this over here and the second is password F now as we are using NG model inside a form text so name attribute name attribute becomes mandatory so we have to add name attribute also in name attribute you can pass the same whatever you have written over there in the NG model otherwise you will get the error right we don't have the register and everything remember me also I'm removing and forgot password also now instead of type submit I'm making it as button let's just save and check if we have any error so as a front end developer while working every time our console should be on so we should see like if we are getting any console error or not nothing error is there now on click of login we need to write our API code so click login this is the function we have to create so let's go tops here login function again after variable we need to create instance of our service so Constructor private user SRV it will be instance of user service so once I select you can see input has been automatically added now in this function we have to write uh we have to consume that particular function from the user service so user service.on login now this to this function we have to send one parameter the object so object is nothing but that the login object which we have created and we have to subscribe to the response whatever we get so result colon any so if RS dot result now all my API return the object of object where result message and the data fields are there so I'm just checking uh check where API call is success or not now so if you see the response of the API so you get result as true uh this is the data you get user ID also you get email ID also you get token and the refresh token all these four Fields you get so now this data whatever the data you get from the login API you need to store it into the local storage otherwise how your application will know like which user is logged in so we need to store data in the either in the local storage session storage or the cookie somewhere you need to store or in the service also you need to store but once you refresh service variable get deleted so obviously you need to store either of three so once we get the data if login is Success we have to store the data so local storage do set item now we are going we are getting the object right so angular just a key I'm giving angular 17 token data this is the key and to local storage when we have have to store the data into local storage always we have to convert it into the string so we have to use the method that is already provided by JavaScript so json. string evine we need to pass r. data because in data we have the DAT actual login object now once we uh once we store the data in the local storage we have to navigate to the dashboard page right so here we have to create object of router so router colon now now in angular 17 rather than creating like this we have one more way so I will just show it over here we can make use of inject also constant router sorry not a constant so here what we can say router is equal to inject you can use and for inject you can pass router so this is equ equivalent to this what we do in the Constructor okay so with angular 17 we had this new things because if you implement theara there now in angular 17 aard is a arrow function so in Arrow function we don't have Constructor so if we have to create the instance of router you can create like this now so this router do navigate by URL what are the things where there same thing will be available because just the object creation is something different but things will be same only so once we do the login we have to navigate to the dashboard so let's get the dashboard URL let's put it over here so on click of login let's add a debugger again make a habit whenever you are writing the code first time try to put a debugger see what data you are getting right once we get the API call again we will add the debugger and in else also we will add the error like wrong credential or whatever the error we are getting from the API so RS do message message now let's save and debug the code now the data I will be using is one data is there that is I will just use so now here I have to use uh Rahul atate gmail.com this is the this is the registered email ID I have already or you can register from the Swagger also and the password is 22 33 44 but for now I'm just entering the wrong password something just need to check like if we are getting the wrong over here now once we click on the login okay sorry we have run the project on the front Port let it load yes let's type again R Gmail I'm passing the wrong password once you click on the login now you can see that event got CAU now if you hover the object so you can see whatever we have typed that we have got but this password is wrong okay but now if I continue why it is saying unauthorized API JWT lockin payload we have sent it should not say unauthorized let me just check if I have written something else in the API so this API I have return like that if you pass the incorrect credential so I'm returning unauthorized like that that's why we are getting the unauthorized over here now so even if we get the unauthorized we need to show some error right so that you can handle over here by adding a catch block so after subscribe error and here alert you can show like uh wrong credential if we get the error from this API we are uh this aler error block will execute and we are showing the wrong credential so let's just check one more time so Rahul just the wrong password login continue so you can see it is going to the else error block now let's try to enter the correct password so 2 2 3 3 4 4 now just pay attention so if we click on the login now our success block should execute continue so now you can see our subscribe block got executed because API was success now in the result you can see we have got result as true and in data we have got email ID refresh token and the token and the user ID whatever the user we have logged in that we have got so now that out of that data only we are storing so whole object whatever we have got from the login API that we are storing to the local storage so result is true it will go to the if block we are storing we are storing the data into the local storage and after storing we are navigating to the dashboard so you can see it is navigating to the dashboard but here you can see only layout work is visible that's because in the layout component we have not added the now bar so here we need to add the nowar so let's go to W3 let's get the code again don't waste time to design the UI and everything try to copy paste whatever we have readily available because our time should be wasted on the actual coding only not the designing part so this is the now bar I will paste it over here and after the as I said once you do the login your layout component is going to be your parent component so you are going to need router Outlet over here so sometimes when interviewer asks you like can there be more than one router Outlet in your uh angular applications yes as many as router Outlet we can have so because as you have seen in angular app component also we have router outlet and again in the layout also we have the router Outlet so let's just [Music] save let's check now you can see dashboard component is loading now if we see the local storage so many datas are there let me just what is the key we have stored that is angular 17 token data let me just remove the remaining token also I'm removing email ID also I'm removing so now in the local storage you have got the data whatever you get from the API that we have successfully stored now in the dashboard component I need to integrate another API that is user API so that API is authentic ated so this gate all user this API I need to integrate in my dashboard component so that we have to check like uh if we don't pass the token we will get unauthorized to if we try to integrate this API let's let's create a service Callin and use service I will just copy it's so here we have to write the API call for getting the users so this is my API endpoint this will go over here this is a gate API call so we don't need the object so let's remove this so this function is responsible let me share it again so this function is responsible to get all the users right so now this function we have to integrate into our dashboard component so let me just close everything thing now we have to write the code into our dashboard component so in dashboard component first thing like we have to integrate our service so private user SRV colum user service now we are going to get the user so that I will store into this variable any now here here get users function I'm creating and in this function we will make AP call to this function get users are col any we need to get the response sorry do subscribe Ison any Arrow function now whatever the response we get that we need to store into this variable so this do user list is equal to rs. data because in data you will get the actual array now this I'm just calling it in the Constructor but normally we should implement the NG on in it and there we should call it so let's just save it because I just want to show you like if we make this API call without the token you will get unauthorized so now if you see let me just reload so on the page load Constructor will execute and our function will get call so you can see G all user API call is there but we are got we are getting the unauthorized because we haven't send the token because this API is restricted unless you send the token in the header here you won't get the token you won't get the data it API will say like the uh user is unauthenticated right so now in angular to send the token either you can create a custom header there in service only but that is not the right way we should Implement Interceptor so in service I will implement the Interceptor so right click on the service open new terminal and here we will create the Interceptor so NG generate Interceptor and then my Interceptor name will be custom so normally if you are working on the actual industrial project so you might see uh two or three interceptor one will be for processing the ongoing uh outgoing request one will be for processing the incoming response error Interceptor will be there token Interceptor will be there another Interceptor will be there so many interceptors can be there in an actual application now so once the Interceptor is there we have to write our logic over there so once you create the Interceptor that Interceptor you need to add into your app module in the provider section so now in providers it will be object use class you need to provide your class name that is custom Interceptor and one more property that will be provide what we are going to provide is HTTP what is it underscore Interceptor this will come from Interceptor so we need to add the input C for this and multi true this is one one more property we need to pass right it is saying right so one just small modification like with the project is created with angular 17 so before angular 17 this used to work we used to register Interceptor in the provider like this but with angular 17 even if you create the project with the normal structure you have to register your Interceptor like this so you need to write provider provide HTTP client with Interceptor and you need to provide your Interceptor class name just like this okay so this is the small thing is there but if you are creating your Interceptor with uh uh sorry if your project is with the older version you need to write like this same this code will be over here instead of this this now so we have created Interceptor we have added that into the app model also now next thing is like in Interceptor you need to clone your request so whenever you make the once you implement the Interceptor all your APA call will go through the Interceptor so whatever the request you get that you need to clone clone request is equal to let me just get the code this is the Clone so we need to create a clone of the incoming request so this is the incoming request we have created a clone of it and inside that we are just adding a headers so now you need to connect with your API team and you can ask him like what kind of token you need to send is it a beer token Identity or something else there are so many ways uh you can create a token from the API s so they will tell you like in header what you need to send so with my API I pass the token in the authorization and this is my BR token so here we need to add the BR token now when we log in we have stored the token into our local storage in this key right so I need to read the data now so I'm just copy pasting this we have to go it over here I'm creating local variable data is equal to local storage now instead of set item we need to read so get item so in the Interceptor we have created a local variable we have read the data from the local storage now in the local storage we have stored the data in the string format so once you we have we have got the object that object we have converted into the string and then we have stored that into the local storage but once we retrieve it we need the particular token from it so we need to convert this data into another uh parse object so I'm creating one more variable loged user data assigning it with empty object or let it be anything it will give error yeah so let it be empty object now we have to add a null check over here if local data is not equal to null otherwise it will throw the error so that's why we have to add this null check so if local data we have got the local data so then in this variable we have to assign the data data so that will be while storing the data we have used json. stringify to convert the uh string data into again object format so we have to use parse method and we have to pass this thing over here instead of cons it should be L because we are change reinitializing the value now in this variable we have got whatever the data we have stored over there now here in this variable we have the token also let me just show you the local storage data so here you can see token is that what we need to pass so this variable this property we need to get it over here and this is the new request this is the incoming request we have cloned that saying token does not exist okay let's try to access that with square bracket because when still it is giving error let's try to provide any over here now it is not throwing error yes so we have got the incoming request that request we have created we have created a new request and inside that request we have added our headers now this new request we have to pass over here now let's save and check but by now token might have expired so still even if we send the token now we won't get the uh response so you can see in the header now we have sent the token but my API is like the token is valid only for 1 minute so let's try to login again let's go to login page let's try to login again 22 3 3 4 4 let's click on login continue continue so now if you see we have got 200 and we have got the response so in the header you can see over here authorization be token we have sent whatever the token we have got from the login so you can see in the login we have got the token starting from EJ so same we have passed it in the header again from the reading local storage only now this token is valid for uh 1 minute so let's it's for uh 231 so let's wait for some time again I will refresh so now you can see after login we have got the successful AP call but again if I make the apaa call after 1 minute token will expire so again you will get for unauthorized let's try lay load we are getting see after 1 minute you can see again I have got the unauthorized because now token got expired right so now here you need to add a functionality like if tokon got expir you need to again make an internally only you will ask user like you do you need to continue session you will ask user to uh that do you want to continue this session again internally only we will call another API to get the new token so in the local storage if you see we have got one more token that is refresh token so this token you need to pass to this API that is this API refresh API so here you need to pass the refresh token token is not necessary over here just the email ID and the token you need to pass okay so now let's create this function in our API call then we will write the function so just like on login I'm just copy pasting here function name will be get refresh token API will be refresh refresh and the object whatever we get we will pass it now where and how we should in uh we need to once we get the unauthorized we have to integrate this API call then we will get the token and that token we will again store to the local storage but where we should do this so we have to do this API call function in Interceptor but in Interceptor we have uh this is just an Interceptor from here we cannot make an API call right but here we need to add a catch block once we get Interceptor what is the purpose of intercept after it will match it will monitor incoming request and the outgoing request also means whatever the uh request are going and once we get the response that also we can check so here you need to add a cach block so here pipe we can use and then catch error round bracket round bracket error and it will be op to http error code something is there HTTP error response okay then Arrow function and we have to return also return through error and inside that we have to pass the error so this is your cach block so remember what I said if you see in your actual industrial project now there will be multiple Interceptor so you will have error Interceptor in error Interceptor you can find this code okay so if your API frow in error now this block will execute now here we need to write the check so now if you see once the token is invalid we get 4 not1 so with this particular status we need to write the code so here if error do status is equal to 4 not1 means if it is unauthorized then we need to show a uh what do we say confirmation box like do you want to continue so here I'm creating a cons confirm box is refresh is equal to confirm dialog box I'm using and here I will show the message let's say your session is expired do you want to continue so this kind of message you might have seen in very very application mainly banking you will have it is expired do you want to continue but in banking application they won't ask they won't let you to refresh the token you again need to login blogin back so once user clicks on okay so means in his refresh we will get true then we need to make an AP Cod but again I what I said in Interceptor we cannot create an API call so in this function we have to create a subject now so here I'm creating a subject so that will be Public public dollar refresh token new subject with the data type let's say Boolean through we will pass so we have created an subject now this subject we have to emit once the 41 is there and user clicked on okay so again we have to create an object so constant user service so again this is an arrow function so we don't have intercept we don't have Constructors but we need to create an object of user service so we have to use inject round bracket user service but if you are working on the previous version so you will get uh in I mean normal class will be there so you can create the same into Constructor now user service here user service dot refresh token do next you have to use and we will pass just over here so once API call is there and if your token is expired this catch block will execute and here if the error respon error code is 41 we will show the confirmation box this if user clicks on okay we will get true in this variable and if it is true this block will execute and from this we are emitting now this same this to this subject we have to subscribe in this service only so this do refresh token do subscribe I'm subscribing to this token right and in this subscribe token I have to call this API but if we do yeah so here instead of passing this object over here we can create whatever the object we need to send to this APN here we here only we will create but just understand this once we get the 41 we are showing the popup like do you want to continue if user clicks on okay we are emitting this subject once we emit that this will execute and in this uh subscribe we are calling this function so now here we need to create the object what we need to pass to the API so here you can say this is the object we need to pass let's me copy this let me paste it over here now email ID and the token token doesn't matter if you uh you don't need to send the token just the email ID and the token is mandatory again the data is stored into the local storage so we need to read that data so in the token in the Interceptor we already read that so I'm just getting that copy and in this function only I will paste it so now in local user data we have got the whole data so here local user data. email ID it will be in the capital case and in the refresh token we need to pass so refresh token is like what we get from the login API and this object we have to pass over here so let me just add a debugger I will explain the code here also I'm adding the debugger in cat block also I'm adding the debugger so let's just save all and let's check still some functionality again remaining because once we get the new token we need to again store it back to the local storage but I just I will just show the half part now you can see APA call is there but we have got unauthorized so you can see Catch block got executed now in error you can see we have got 41 status unauthorized everything so if it is unauthorized 4 not1 we are showing the popup so you can see your session is expired do you want to continue if we click on okay we will get true over here and once we get the true we are emitting this subject once this subject gets emitted let's add the debugger in that service also so this subscribe will execute if I continue from here so see currently debugger execution point is over in the conom Interceptor from here we are emitting this subject once we we continue so now you can see this we we have got executed now once this is executed we are calling this function let's continue now again we are reading the data from the local storage we have got the data in that data we have got the email ID and the refresh token also so currently we have just created the object object is created wait why it is not created okay again it is in the small case so you can see while storing the data it is in the small case so we have written that in the capital case it should be in the small case only but once we do the APA call this function we should not return anything here only we need to subscribe so because once we get the new token that we need to store it also right so R is col any so whatever the code we have written in the login to store the data that only we will use it so this thing we have to use it over here and capital RS so we are just repacing the uh resetting the data whatever we have got I'm not sure if we are getting the email ID let's check in from the refresh API let's reload again so token is expired we have got error okay now we are in the user service now here we have read the data from the local storage now let's check the object so object is proper email ID is also there and the refresh token is also there now we are making the APA call so continue so now from this we have got 200 and the response we will get the new token so in the response we have got the new data so you can see refresh token and the token is there but we don't don't have the email ID because in the refresh token I have not sent the data this email ID and the token so in the login we need to store the loog user ID and the uh email in a separate token so token email and this is user ID because in the refresh token I'm not getting the user ID and everything so that's why I'm just uh storing the user ID and email ID in a separate variable data dot email ID and here user ID so let's just save now one more thing like what in the dashboard component we make we make this API call and this API got failed that's why we have again call the refresh token and we have got the new token right so now once we refresh and we get the update updated token we should see the API call properly let's just test the whole functionality so we have got the error we have shown the response so now here we have created the object and that object we have send to the API call let's continue again we have got the error why something is wrong let's try to see the same functionality again because login was not there that might be the issue let's try to login again 2 2 3 3 4 4 login so on click of login now I'm storing the data into this email ID and the user ID or here so now we are storing the email ID into another variable another variable in the local storage so in user service where we read the data now same same thing like that we need to instead of reading it from over here I'm reading it from or from this variable get item because I'm storing the email ID into another property so that's why I have done like this that's it so let's just reload one more time now we can test finally so Rahul 223344 login continue now we have got success 200 is there because currently token is valid so in the header you can see token is also passed now in the application you can see we have got three variable token data email ID and the user ID Also let's just wait for 1 minute it is Success after 1 minute my token will expire then we will get unauthorized then we will show that okay popup and again we will get the new token so now you can see in in case of 200 our API catch block is not executed but once we get the 41 now that catch block will execute one minute is not over it so now after 1 minute you can see Catch block got executed we have got 4 not one we will show the popup on click of okay we are sending the uh we are emitting the subject we have subscribed to that in the service we make the API call over here so once we get the data why we are sending unauthorized again okay that's why so you can see in the email ID email is not gone proper that's why we are getting email not match so we have stored the data while storing in the login component we have made the mistake so we don't need to convert it right so it's a string data so we don't need to convert it that was the mistake because in local storage because of this we have got uh some slash over there let's just save now everything should work properly now let's go to login page again so Rahul 22 33 44 login So currently API call is Success let's wait for another one minute so I will keep this apis free so everyone can use it on the particular Port I will remove uh like other apas are not free you cannot use it so I will keep this API free so that everyone can use it let's reload let's wait pause some more [Music] time mhm so again I'm I have not added the log out button and I have not shown the email logged in email ID but if you are practicing it you should do that also you can show the logged in username over here and the log out button on click of logout button you can remove the local storage data and then you can redirect to the login page that thing you can do let's try it now yes so now the token is expired and we have got 4 not one let's continue cck on okay we are in the service APA call is also there now you can see we have got the success and whatever the token whatever the data we have got that we have stored into the local storage with angular 17 token data so now refresh token is success but now if I refresh you will get API call success but how user will know now like he has to refresh so whatever once we get the refresh token in whatever the page we have that AP call need to be Auto triggered means this gate user AP call should be automatically again HED right user is not going to refresh again so that for that also you can create one more subject let me just create a subject then you will understand refresh token received and once we get the token we have to emit that so this dot refresh token receive dot next so the newly subject I have created I'm emitting it from here means this this subject will denote that we have got the refresh token and it is stored into the local storage also and this we have to subscribe into our dashboard component over here so user service and we have to subscribe and inside this one function we just need to call this so now you will understand I don't need to refresh you will get the API call properly again we have to wait for 1 minute yeah so 1 minute is expired so token is expired already so now if we click on okay refresh token is there and once we get the data we have S why it is still we are giving error if call is proper let's try to do the login thing again Rahul gmail.com 223344 let's click on login now let me just one more time repeat we have created two subject one is for refresh token this subject will get triggered once we get to know like a token is expired from here we are emitting that once we emit we are subscribing the same in the user service and in the user service in this function we have written the code to get the new token once we get the new token we are again emitting another subject that is refresh token received and this this subject you have to integrate uh this subject you have to subscribe in all your component currently I just have one so whenever you are whatever the page you have you are if the token export that APA call whatever the API calls are there in the on page load you need to make those call again right so here I am I am subscrib subscribing to that and again I'm making the call so let's just save and see if it is working let's reload so that we don't have to reload again so we have got the error continue okay refresh token received we will go to the ref token function we have created the object we have made the AP call let's add a debugger over here we have got the new token we have stored it also and we are emitting the subject and once we emit this it will go to the dashboard component here and another API call will be there so you can see after refresh another API call is there that is g all user so user doesn't know like if internally after user just given the permission like yes I need need to extend my session so internally we have did all these things we have got the token that token we have stored to the local storage and again we have make the API call whatever the user we currently on so this subject thing in all your pages this API call Will API call should be there subscribe should be there because whatever the API call you need to make on the on page load all you have to do over here also again so this is how we implement the refresh token functionality again it is dependent on the API so if again you need to contact your API team like what kind of token in what header you need to pass they will tell you like where you need to pass it just like I have provided in the beer and the authorization key so they will provide you like in which key and value you need to pass like that you need to pass so this code is available on the GitHub so that name is angular JWT login with token I will just push it so you can also access the same and you can practice the apis are provided over here in the JWT controller you can access this that's it with the current video

Channel: LEARNING PARTNER

Views: 5,086

Keywords: angular login, angular jwt token login, angular jwt token, jwt token, refresh token in angular, how to, Angular Login using Access & Refresh Tokens, Use The JWT Token In HTTP Interceptor, Angular Authentication, Angular Authentication and Authorization, How to use Http Interceptor in Angular 17, Implement JWT token in Angular, Interceptors in Angular, token refresh in angular, how to get refresh token in angular, token based login angular, angular 17, angular, angular tutorials

Id: HBemrC8NDZU

Length: 56min 14sec (3374 seconds)

Published: Mon Feb 19 2024