Implementing JWT Refresh Token In .NET MAUI Blazor App (Login Flow Part 2)

hello guys welcome to my channel in this video i am going to show you demo about implementing jwt refresh token in dotnet mavi blazer application here i already added code related to generating refresh token and also requesting for new token using access token and refresh token so this authenticate user now returning access token and refresh token so this token i can use in our dot net mavi blazer application so i already created a video about implementing complete login flowing.net mavi blazer application so just click on suggestion link to see that video so in that project only i'm just going to implement refresh token so let's go through it okay so this authenticate user api now returning data in this format is success error message and contain and content containing access token and refresh token so let me just create one class so here in models i am just adding new class call main response so here this authenticate user wave api returning data in this format is success error message and contain this three property it's returning so i'm just going to add that here also let me add another class like here authenticate user containing authenticate response so i'm just going to create one class that contain refresh token and access token property so another class i am just going to add is called authenticate request and response in that i am going to add this to property access token and refresh token now this api authenticate user api let me change response before i was just returning access token only that's why i here i set as a stream but now it's returning as a main response also here in interface i am just going to change it to maintenance points now let me change this content into main response and this i'm just going to return from this authenticate user also let me just add here uh part 8 188 that i'm using here in a base url now here in login dot razor component i need to modify this code because before i just returning token as a string now i'm just returning in different format so here i will check like if response dot is success then here okay so from the contain i'm just going to deserialize it to authenticate request response class and let me just and from token response now i'm just going to read accessed token and here also i will select from token response dot access token now here in user basic detail class before i was just storing access token now i'm just going to store another property called refresh token so let me just modify this property name to access token and this will store refresh token so here on the click of login like if the user is valid that time i am just going to store access token and refresh token in this user basic detail object and that i am just going to add in secure storage so anti-user basic detail object is going to store in sql storage and after that i navigate to dashboard page now when the application launched that time also i added some logic so here in app launch component i was checking here if the access token is expired that time i just navigate to login component but now i will do one thing and let me add another method for refresh token uh api request token api so that api going to check is is it valid access and refresh token that time which is going to written new access token and that we can use for calling other apis now let me add refresh token and here model i am just going to use authenticate request and response so here in if you see this api refresh token api is just accepting access token and refresh token so that i am just going to pass from here authenticate request and response class so in apis list i just added refresh token api and that i am going to pass here okay so this uh refresh token api also returning data in main response format let me show you so this refresh token api returning data in main response format so here i am passing expire access token so it it just validating all the detail so like my access token key detail and all stuff is valid then it just a returning claim principle and using the claim from the claim principle i'm just fetching email and by email i'm just fetching user detail and i'm just checking like if user detail is not null and also checking like refresh token like user request token that i am storing in sql uh this sql database so i am just checking with this refresh token so if the user refresh token is not equal to whatever the request token i'm passing in this request token request model so that is not equal then i'm just returning invalid request otherwise i am just creating a generating new access token and new reference token and that i am just returning from this replace token api okay so now let me implement this refresh token here in app launch component so here i'm just adding app service now from here i will call refresh token api like when the access token is expired that time i will call refresh token and here i will pass access to console expire access token that i will get from user basic detail because we already stored in that and refresh token also i will get from user basic details and here i will check if the refresh token response is dot is success is true that time i will just set this new access token and refresh token in this user basic detail otherwise otherwise i will just simply navigate to login page login component so from the content now okay so from the content i'm just now deserializing that access token and refresh token and i will just set that to this user detail object so user basic detail dot access token is equal to new access token now i will save this in secure storage like we did here in login component so i just did like i just serialized the user basic detail and after that i saved that information in secure storage and in that i will pass key as a user basic detail and value that i just serialize so same thing i'm just going to copy copy and i will paste it here okay so i'm just setting value in this used uh existing variable user detail sdr and that i am just setting in secure storage and after that i will just navigate to dashboard page okay here also i need to save as a interface otherwise it is going to throw error okay here i need to add refresh token api declaration here let me decide okay so now it's gonna work now let me run the api let me run the project and let's see okay so here uh login is done and i just said token expiration as a 30 second from the api so when i open after 30 second that time it is going to invoke refresh token call let me show you till that access token related stuff so here when i click on authenticate user that time it calling this method generate access token and in that i just set token xy lesson as a 30 seconds so after 30 seconds uh this access token is going to be expired so i need to call refresh token so let me read an application okay so now this condition is executed as a token is access token is expired so now this refresh token is going to return new token and that information i'm just going to set in this user basic detail uh access token and refresh token so new access token and refresh token will be stored here and that information again i am just going to replace in secure storage with the existing information and then i am navigating to dashboard page and if i again driven the application that time it's just going to check uh token expiration detail of access to con this is a new access token so that time now this condition is not going to execute okay so i need to set expire time more than 30 seconds after that this going to work so let me set as a one minute so here in generate access token i'm just going to set now add minutes to one minute and i'm just going to driven vbpi so here i am just going to log out i am going to run application again so okay so now it's logged in and after one minute if i again open that time it's just going to request the token and before one me before one minute again if i open the app that time it's just not going to check for this request token call because new token expiration again set to one minute now here in a patch data i'm just going to add student detail and that i am just going to display here so let me add api call here in app service okay so let me add here get all student api this api written data in so from the student controller that all student api returning data in this format so let me add student model in models folder so i'm just going to add new class student model and in that i will add first name [Music] last name and email and this am just going to return in desktop student model format let me add here api also that all students from the students controller now as this controller using authorized annotation so i need to pass authorization token also here access token so let me just add that so in client.defaultrequest header i am just going to add authorization and token i will pass font from user reject detail access token so i will convert now main response contained into list of students okay now this get all student let me add in here in iaf service interface also and i will call this get all student from patch data component so here i'm just going to set now so so students i will hatch from app service dot get all students and now from each student from the students object i'm just going to display now student.firstname lastname and email now let me run the app and let's see it's displaying students or not okay so it's displaying and i said token expires expiration again to 30 seconds so let's see after 30 second if i call this patch data so it's returning student detail or not okay so after 30 seconds it's that response is empty because access token is expired so here in get all student if i see here response so is success status code is false and it's returning 401 unauthorized so here i will check like if response dot status code is unauthorized then here i will call refresh token api otherwise i just display that data here this refresh token we are just written in data in main response format uh but we are not storing this refresh token detail in uh secure storage uh which is uh did that in here in app launch so instead of doing here this all information storing in secure storage here i will just say that here in refresh token call and instead of main response i will just say return boolean flag like this token is or not by default i will set as a false so here if the main response dot is success that time i will just save this information let me just start here okay so here i'm just fetching token response after that i'm just saving this all information in setting dot user detail object and same detail i am also setting in secure storage so when user open next time that time user will get updated token details and from here i will just set now is token refresh to true so when this refresh token api is called that time it is going to return boolean value now same thing let me set here in ir if services so here i will return in boolean format so here in get all student i will just call refresh token api and let me also set something here in refresh token now i will not pass any object here i will directly set here new authentication request and response and the first token i will just get from setting dot user basic detail dot refresh token and an access token also from user digital so i no need to pass token detail in refresh token method here now i will check like if his token is refreshed then i will just again call this get all student and it is going to return all student record now here in app launch now instead of calling this refresh token like this way and storing this all information because we already did so here simply i just check like this token refresh and here i will call have service dot refresh token and if the token is replaced then simply i will just navigate to dashboard page and also let me set this user basic detail here above because now refresh token patching token detail from setting dot user basic detail dot refresh token so because of that when the application launched that time if any user information is available then first i will set that in a user basic detail object so after that all api can access from data from this like authorization barrier token and all stuff from this user basic detail now let me run the application and let's see so i think now first it's going to call request token because 30 second is almost the 30 second is done and after that let's also put debug point okay so it's called refresh token and if the token is replaced then it is navigate to dashboard page now after 30 seconds right now it's displaying user details here after 30 seconds from that all student detail api it is going to written unauthorized so that time again i am calling refresh token method and here i will check like if the token is refreshed and i'm just simply returning that all student detail otherwise it just written empty list of students okay so now after 30 second this refresh token is calling and here it returning response as a success and it just simply written data and it display here okay here now if you see i've written condition like if the success code is unauthorized then i am refreshing token but uh this like for one api i did like if you know one uh in one application there are lots of api we need to call and writing uh in this way like uh uh checking for status code on authorize for each and every api is not a good solution for that we need to create a generic api method that just going to handle all the api request like either it's at repeat force boot delete any request that just going to handle by one api so we need uh we no need to write every time uh http client request then we need to pass this all stuff so for that i'm just going to create a video uh next video on creating a generic http method and in that also i will handle uh with refresh token so i continue with same project in a next video okay so that's all for today i hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 3,994

Keywords: JWT Refresh Token in .NET MAUI Blazor App, JWT Token in .NET MAUI Blazor App, .NET MAUI App, .NET MAUI Blazor App.

Id: 7o2XMI-1iDc

Length: 32min 48sec (1968 seconds)

Published: Sat Sep 03 2022