Angular Authentication part - 2 (Handling refresh token + Http Interceptor + .NET Core API) #28

hello everyone welcome to negra techies in this video i am going to explain how to handle the refresh token in our angular application so this is the part two video of our angular authentication so if you are not watched the part one i am going to share the link in our description you can watch it so in our pattern video actually i implemented the ligand from schwalte so once the login gets succeeded so i will get the actual token jwt token so i added in the local storage okay this is the thing we have implemented so after that making any request we have to pass the authentication token for implementing this functionality i use the http interceptor so this is what we implemented in our patron video so this is my login screen here i am going to provide the my credential okay great so now i am coming to our employee page if you see here the all the records are loaded there is no issue so now i am trying to refresh the screen also not on problem after waiting some seconds i am trying to refresh the screen once again now see here there is no data the screen is blank now i am checking in the console in the console saying it's for not one error let me go to the network so in the network so the employee service is in red mark the status quo is saying it's your 401 error and the response headers saying it's invalid token or else the token got expired so in the request to get our side actually we passed our token so that means we have the token but the token is called expert how we can handle this situation so if you are providing this screen to any of the user the user not able to understand why the data's are not loaded so for providing the solution we have two options one is implementing the logout from shuldi so whenever the token got expired we can redirect to the login page in order to use they can enter their credential and they can use the new session so in the real time example if you are booking any tickets they will allocate it sometimes like five minutes or ten minutes time once the time periods are completed we have to log in and we have to reuse the application so in that cases we can use the scenario one the second option is implementing the refresh token so in the real time scenario just to consider creating an invoice you are entering n number of data in the middle of something you are not saved suddenly your token got expired means you will lose all the data for handling this situation we can use the refresh stroker concept so first i'm going to implement the logo from surely after that i will explain this refresh token concept also for implementing the logo from schwalte i am going to create one new function is called the logout so in the logo time i have to clear my local storage also and i need to redirect in the login page for doing any redirections i can use this router so the router is already injected so i can use this one this dot router dot so navigate by url so i need to redirect the login page okay that's fine and also i need to inform the user that session got expired per system expert okay fine now i am coming to the interceptor so in the intersector only we are passing our actual token here only we are going to implement this logout from sualty also the implementing refresh token concept so let me create one new function for passing the token so the name is add token header and it has two inputs one is our http request and another one is actual token so let me implement this function it will return so here only we are passing the token later so let me use this header option so requested headless dot set so this is the authorization header and i need to pass the token also here okay the form salt is done so the token is your bay area token so i need to use prefix as the barrier okay let me call this function in our interceptor so let me remove this line for that i am going to call this function so as i mentioned it is two inputs one is our request and another one is token so the token is already available in the earth service so the functionality was same or whatever code is there i just created the separate function because we need to reuse in the some other places also as i mentioned so once our token got expired we are getting the format one error so we need to capture the error first for that i am using the pipe concept so inside the pipe we can use catch error so this catcher also belongs to rxjs if you see here it's get added so this error data how the complete information of error let me console the error first based on that we can implement our functionality so let me go to the screen once again so if you see here the http error response so the status is 4.1 let me check the error code is for not one error or not if it is your format error here we need to implement the logout or refresh token logic so for the logo already we created the functionality let me complete this one so the art service already we created the object here i am going to call this logout functionality so we can verify this one first ok i am in the login page i am trying to give the credential so if you see the employee screen datas are loaded so after some time i am trying to refresh the screen so it's saying your session expired and if i clicking okay it's navigating into our login page so in this way uh we can implement our login from schwalte now i am going to implement the refresh token latch for handling the refresh token i am going to create one new function is called handle refresh token okay basically this method have true input one is request and another one is this handler next so let me add these two here here after this logout is not required i am going to call this handle refresh token okay we need to pass to input one is request and another one is handler okay now if you see here it's showing some error after implementing our logic in the handle refresh token so everything will work fine first i'm going to show my service for the authentication we have the service here we passed our username and password based on that it will generate the jwt token and the refresh token also so as of now we handled only the jwt token the refresh stroke are not handled so let me come to my component here i'm going to add this refresh token also in the local storage so i'm going to mark as your refresh token so now i'm coming to the service side so i already have a function for login now i am going to create one new function for generate the refresh token it's not having any input as of now so the service name is the refresh if you see in the refresh method so it has two inputs one is jwt token and another one is the refresh token let input equal to in the jwt token side we need to pass the exact token so already we have the method returning that token let me use this one okay the same way i need to get this refresh token also so let me create a new function for get refresh token okay this is done let me call here now i need to pass this input so once we called the refresh token method this will also generate our new token until return we need to add everything in the local storage for that i am going to create one new function save tokens so whatever we added in our login page so same thing we can add here also so instead of having the response data we can use our token data so look like our service said our changes are done now we created one function for generating the refresh token and one method for getting the refresh token and the final one for saving any token okay let me come to the interceptor here we can implement the logic so in the handle refresh token side also we have to use the services so i can create the same object here also so after that i need to call the refresh token method generate refresh token so it's basically don't have any input because we already got everything from the local storage here i am going to use the pipe concept so inside the pipe i am going to use this switch map the switch map the data type may be any basically we will get the object so here i need to call the save token method so the slave typical method i'm going to pass this is the input next to that handle of this dot token header okay if you see here it's expecting one input is request and another one is token so the token we already have the jwt token okay this is done now if you see here the errors are gone so let me add the catch error here also so once it added i will explain why i am adding here also so the procedure is same so here we can call our logo function so that that's it so now we have completed our codings and everything and i am just going to explain so whatever changes we are handling from in our interceptor only so in the initially we are passing our authentication token the token is valid there is no issue if the token is invalid that means the token got expired it will come in the catch error side so in the catch error said we are handling our refresh token method so in the refresh token has two inputs one is our expired token and another one is the refresh docker so we will pass two things so in the service we'll validate both the refresh token and also our actual token based on that it will create the new services with new expiration time so we have to use newly created or jwt tokens in our application and still if you are having any error like in some cases our refresh token also not a valid thing so that time it will come to the catcher side so in that cases we can use our logo from schwelty so first let me verify our refresh token how it's working in our application so now i'm in our login page here i'm going to use our credential it's fine now i'm coming to our employee page the datas are loaded fine so actually i created token with expiration time of 15 seconds only so now we can refresh once again so it's coming to the service side the refresh method gets called and give the continue okay see after 15 minutes also my data circuit loaded because it's generated the new token based on the new token it's loading all the data so this is all about handling the refresh token in angular application still if you have any doubts or clarifications please post in the comment box and also please don't forget to subscribe my channel so as i mentioned the part 1 video of angular authentication i will include in the description and also i am going to include two more links one is for creating the service using the dotnet core and another one is the github link for this complete application whatever we see in the demo i will add the complete source code in the github you can download and you can use it and if you like this video like and share to your friends thanks for watching

Channel: Nihira Techiees

Views: 13,383

Keywords: how to consume external service in angular, Authentication in Angular, how to implement authentication in angular, how to pass jwt token from angular, pass header using Http Interceptor, how to implement login in angular, pass jwt token using Http Interceptor, handling refresh token in angular, how to handle refresh token in angular, implement refresh token in angular, redirecting to login page when token expired, logout application when token expired in angular

Id: 3IDkzcflvaU

Length: 14min 27sec (867 seconds)

Published: Thu Feb 03 2022