.NET 8 Blazor Employee Management System -JWT Authentication & Refresh Tokens in Client/WASM Part 3🚀

hey guys welcome back again to net code hop  Channel I am Frederick as you know and I'm   happy to have you here today in this video we  are going to look at consuming authentication   and refresh token endpoint in client web app  and that is a Blazer web assembly if you have   no idea on what you're are doing then this is  just an employee management system and um it's   a series of videos that we have started check the  video description we have the other two videos in   there you can just watch them to to help you get  understanding for this project you can do any of   the following to support this channel you can  subscribe and also hit on the notification Bell   so you receive an update as soon as I upload  a new content you can also like this video by   clicking on the thumbs up icon so check that video  description can just click on that icon over there   you can also buy me coffee to support this and if  you want to do that check the video description   a link has been provided in there I do offer  training session for people who are interested   in net technologist talking about Blazer server  and bl assembly for web app we have net my and   Blazer hybrid for mobile app and net web API  for web services I also have an email in the   video description so you can um write through  um that mail all right so now let's say in the   last video we were able to create this endpoint we  have our registering endpoint login end point and   we have a refresh token endpoint so user can  now register we registered one over there so   here we use ID one two three maybe you can try it  four so we can now register here and now when you   register you must have um just a respond from  the server if it goes um on well you're going   to have a response after that you can now log in  and when you log in you're going to have access to   our token and a refresh token so so as soon as we  have a refresh token you can see we have account   created so we can also um log in in here let's WR  to log in and now the user here is four so user   four with the same password whereby it's going to  return a token and now that's the GWT token and   a refresh token with a roow as user if you want  to get a refresh token um maybe when this token   expires and you want to retrieve a new token what  we're going to do here is we go to this put refh   token and now going to paste in the token that's  a refresh token in here and as soon as we click   on execute this is going to generate a new token  and I refresh token for so when you compare this   refresh token it ends with HQ so check this one  it ends with IQ check the token itself with ends   with m0 now check the token here it ends with SE  so you can see that they have a different tokens   all together and that is what we have um been  doing in the first and on the second video so in   this how do you consume this endpoint from a web  assembly let's see how to handle that so quickly   I'm going to um close this then this is what we  did now let me close all the tabs in here so we   can have a fresh view to handle this now let's go  to solution Explorer we have our client service we   have all our project added now we have this data  access layer so this contains all the mechanism   the contract and the repositories whereby you  can have access to the database this going to   handle the client library is going to handle all  services related to the client so what we're going   to do here is after creating this Services we go  to the client and we consume the service from this   client Library okay so that's what we are doing  now before we jump right into this we have to   install some packages to this client and now it  Library that's going to be the service project   so let's do that I'm going to click on this client  so and maybe I'll just unload this so once I have   this item group I have these packages that I  need to include or you and I need to include   and that is let me put them here so we have to  install Blazer local storage we have to install   microsoft. ASP net. component. authorization you  need your to install web assembly is there already   so we don't need that it is there we need three  packages and we need Microsoft extension. HTTP so   we need to install this packages so let's save  it so after saving this what we're going to do   here is go to solution then I click on the client  and I click on reload project with dependencies   this going to update all the necessary uh  links that we added the packages that we   added here here if you don't want to do this you  can just copy this the name of the package here   you go to the same solution open the client and  right click on dependencies go to marage n get packages and now in here you can just P it to  the browse Tab and I try to install them now   since I did that I have them installed as you  can see over here let's also navigate to the   client project that is the the the service  project so let's go to solution and I can   see we have this a client Library so I click on  this and maybe we can just go to manage new get   packages now in here we can install this system.  model. token let's install this package from here aside from this we also need  to install the same local storage   from the Blazer local back recent so let's do that and that is this one so let's install  this package um to the client project as well okay so we have our packages installed  and the next thing to do here is to create the service so go to solution and I  we see let me minim all this okay   so you can see from the client Library  open see we have Services folder click   on it and you have this contract  we need to create an interface for this so we need to choose an interface  and the name of this interface going   to be I user account service now  this user account service going to   handle let's say let's for testing  purpose I want us to um add this we going to be testing this later on we're  going to modify this so for now let's have   this method in here we have our general  response to control period Let's see we   have we have to link the reference to this  remember that we we created this General   respond for registration and we did that  for the login okay so we have this now let's see so let's go go to the base library and I want  to check the responses we have a general response   method here and it's a public record and we have  the login response also the same public record   so these are the models that we are adding as  a response now once you have this let's see we   have also same so using responses okay and now  here is a un weather forecast so just this for   the testing purpose so you know when you check  the API when check the server it will have a   default with that forecast so we are going to  move this then put this to the dto actually   when we are done we're going to remove this you  using this for a test purpose you put this in   here now let's change the name space yes the name  space dto now let's put it to the same with that   forecast dto so that's the name space in here  okay now when you go to the weather forecast we   can now make change in there so when you go to  the controller and you can see we are now using   from The Base Library so we need to include the  link in here so control period we have to include this so let's use okay so this is soled so we  have our interface in here we want to create   a syn create an account sign in and also get  a refresh token which is handling with this   refresh token as a payload to be posted this has  only one property in it that's a token and this   is where we're going to pass in our refresh token  um when we have a 401 that is and not authorized   okay so we have this for testing purpose now  let's go in then and create implementation for this so you know do you know where you're going  to create implementation yes I believe you do   when it say we have implementation folder to  the service project and that is where we going   to have all our implementations in here this  going to be a class and the name is going to be   user account service and it's going to inherit  from the interface that is the I user account service so here contol period we have to include  the contract name space this must be public and   we we have to extract or Implement all  the interfaces the four interfaces that   we created to control period you could see  let's Implement all interfaces so we have   four interfaces here for get weather forecast  I want to put this at the last because when   we are done we're going to remove this so this  one to be the last one so we have registration   we have login and we have um signing a sync  so this is going to be signing okay so I want   to arrange it to well registration comes  in then we have signning before refresh token you know with this what you're going to do  here is with the create and the sign in and also   refresh token you're going to Mak an API call and  now we are in the client project so it means that   we going to having access to the local storage  of the browser because when the user logs in and   a token and a refresh token is being retrieved  the best or the good practice way is to keep the   token now where going to keep it you can keep it  in the either a cookie or um a local storage this   time we're going to use local storage you save  the token and also the refresh token so we need   a model to handle the token and the refresh  token after that we need a class whereby we   can inject it or register that class so we can be  injecting into other component or other classes so   we can have access to the Token from the local  storage so anytime that you call that service   you can retrieve you can update you can remove  the item from local storage aside from that you   need to also get an HTP client that client we  have to have it um we have to add the token to   that client header before a request is being made  but you know when you create or when you sign in   this time around the header has no authorization  because we're going to make it as allow Anonymous   on top of the controller so if the user tries  to create an account the user doesn't need to   be authenticated before he can perform that  signing to same and now for the refresh token   the user must login and the user must receive  the refresh token this refresh token must be   kept and now anytime that you want to make a  refresh token we have to go to a local storage   retrieve the refresh token and I make a post in  an API and I retrieve a new token and I refresh   token and I'll do it again so that's what this  going to handle now let's have a model to handle   the the method or to handle the token and the  refresh token which is going to be kept in the   client local storage so with this we're going to  create a class we're going to name this class as   user session in the dto so let's put the dto here  let's add this class as user session now this is   going to handle only two properties that's going  to be the token and under the refresh token so we   have token and under the refresh token this must  be public you don't want to store any information   again onto the client's browser because you  know the client can go to the local storage   and un view all the information over there so  we don't want to save some crucial information   in there what we need here is the token and the  refresh token is that Tres to make an change to   any of the token may it means the authenticated  the authentication State here is going to be um   damaged because the token won't be won't  correspond to what we have in the database   especially that is going to be the refresh token  so that's what we are doing let's close all this   let's save that so here since we are going to be  serializing nalizing model we want to create a   separate um static class to handle that so in  the CL Library let's create one folder to this   we're going to name this as helpers mine is help  us but maybe you can also change it to what you   think is suitable for your project so here I'm  going to create this class and that's going to   be realizations now this is going to be a stting  class and now in that class you're going to have this okay so we have this realization and we're  going toize this object of T so it going to be a   generic so any mod that we pass in we canalize  that and aside from that we also visualizing   this um the same model here and at the end of the  day there going to be a list in case you want to   have a list of model we can also visualize  the list of model in here so for now we're   going to concentrate on the first two later  I to talk about the last one so here we can   control period remove all necessary using okay so  we have this transation model done the next we're   going to create here is going to be um the local  storage service now the local storage service is   going to handle all local storage Crow remove  get and also um set okay so let's do that from   the same helper now you know that this this a  static class so it means eight instance going   to be created once and now we can U be using it  often now with this you're not going to make it   as a static because this going to handle with  an async so let's have that also created let's   add a new class in here and this is going  to be um local storage service that's the   name that I'm giving to this in that we want to  include a local storage service this must be a public we can remove all this then in here we also want to  have a local storage service we   create our local storage key here  let me remove the things we have a duplication okay so we have our loc this the key  and this is a key that you're going to um use in   the local storage then here get token so um  local storage. get item as async we pass in   the key then here set token so this is going to  be the string of item to come in here then we   have the key already we specify the key and  now in here we specify the item then remove   token we get the the key here and I remove from  the local storage so that's what it's going to   do it's going to set get and now remove okay now  the next model that we need to create here it is   to get an HTTP client now this get HTTP client  we are going to fetch the data going to fetch   data from the local storage and append it to  the header of an HTTP client so anytime that   we call the HTTP client it's going to get  the local storage data check if it has it   um visualize it and I append it to the client  or the header of an HTTP client before it makes   it a request okay so let's quickly also create  that and now with this I'm going to make it as   get HTTP client so the same helper I'm going to  create it in here here get HTTP client now they   since we install package of microsoft. extension.  HTTP we can now use HTTP client Factory okay so   in that factory we can create our own client  and give it a specific a specified name this   must be a public and this also won't be a static  because going to be a task we are going to first create let's have our method in here here  now the first method that we are creating   here is when to check this let me  remove this here to clear all the spaces okay let me just include this to okay so control period did we install this  okay so we have to install this package um to   this quickly let's do that so right click  on the that's the client Library that's a   service project go to man get packages  and now in here we need to install Microsoft do extensions HTTP so we need to install this package okay so now this is installed let's come here  control period and now you can see it is gone   now so you can see we are injecting this HTP  client Factory and also we are injecting the   local storage service that we created aside from  that we have a header key as authorization we want   to get a private HTTP client now what are this  private going to do it's going to get you see we   first create cent in here then that Cent that  we are creating we are getting get token from   this local stage service this is going to return a  string so we check if string is null it means that   the user has not loging meaning there's no token  found in the local storage they want to return   a client this time is going to be a new client  because here authorization header has not been   added so it's just a normal client but in case it  is there we want to disiz it into a user session   which going to will be the token and the refresh  token and I we also check if it is not we want   to return but this just check purpose it is not  going to be null because as soon as it found it   you're going to have a data in there that's a  value in there but let's say maybe if there's   some issue here we have it as now we want to  also check it but in case it is not then you   see we are adding the authorization header to the  client so we are say to new system. HSP header.   validation value and then in here we specifying  the bearer and now we specify thisiz what token   we can extract the token from it so we add a  token to the header and after doing that you   want to return the client so this client here  is going to have header appended so this head   client here is different from this client here  this client here has no authorization added but   this has it now this is a get public HP client  so here it's going to check maybe if header it is   there this header key going to remove it because  with this we don't want to add any header this is   for a public Endo like create um or register  account login and even refresh token it's a   public one so we don't need a header attached  in the client before we can make a request to   it and that is what this is doing so it's going  to check if it's there going to remove it then   it's going to return a new client here with no  authorization header added so this all we are   doing so anytime that you call this method we can  have two method in here get public HTP client and   also get a private HTTP client so now that we  have this we can now go to the implementation   and I'll start doing some things in it that is  the user account service so user account service   so first of all what we're going to do here from  the create async what are we going to do we have   to inject the get http client here so let's  inject this after injecting we want to just create URL and that's going to be the public  constant but this what we're going to be using   for the authentication so it's better that we put  here in order not to um be typing typing to skip   typos so we can just put it to one line here and  we can be using the alt URL so what we're going   to do here is first we want want to check you  can even check if user model is now then R to   return by here when you use data notation that  the form validation is going to check so maybe   we can check it but for now let's skip that so  we can see we are created an instance of this   public HTTP client so this public here has no  authorization header attached and we making a   post this must be an async now with the post that  you're making you could say we pass in the all URL   and now the end point is going to be the register  we pass in the user in here we check if the status   code is not equal to success then you want to  return error Ur but in case it is you want to   return content you want to read the content and in  the form of a general response which has a Boolean   as a flag and also a message as a response from  the process and that's going to handle the create   async let's do same for the signing async too so  with this two we're going to have create the same   public client and this must be an aing I believe  you know since it's going to be a task then here   I return login response so we check this route in  here specify with the the payload and I will read   the response here in the form of login response  okay now we're going to test it with the refresh   token we come back to this later on but with the  get weather forecast maybe we can just let also   create the same public one but this is going to  be a private so this will be a private because   you know we are going to decorate this weight  and authorize attribute to the end point so   let's make this as private and now in here let's  go to solution we check the server and now the   weather forecast controller let's make this as  an API slash controller name and now with this   we can specify the as authorized and I even we  can add I want remove this so we can have a get   method and now this you want to have authorized  authorized and now in here let's specify rules   as only admin so only admin can have access to  this you can also change this to user okay but   for testing purpose you're going to make it an  admin later on you can also switch to user and   I'll test it in the and see so we have this  set in here let's go back to the user account   service so here we create a private HTP client  which is going to add token to the header and   now after that you can make a call from this and  I return this coming with an an array of list in   here okay so let's go to the pages in here let's  try to modify that but before modify this in the   the razor component we have to create a custom  authentication State provider what is this going   to do the custom auate provider is going to handle  all user um authentications when switching from   when switching between pages so moving from page  one to page two is going to check it is the duty   of this custom State provider to check if they is  authenticated or not and if they is authenticated   then it's going to use this authorized component  to hide and un show um to show features that you   want to show based on the role that we have added  to the user so it is very important in this so we   have to create the custom aate provider and you're  going to put that in the same helpers folder from   the client Library so in the client Library you  can see we have this a helper let me close the   server now the same helper let's right click  on this let's add a new class and I will say   custom authentication State provider let's add  it now after adding this house to this going to   be a public I believe you know that isn't it and  this is going to hry from Custom authentication   State provider so this is an inbuild from the  component authorization and it has one abstract   class that we can Implement in here so State  provider and it is saying Okay so let's see cont period so we have no method meaning that  we have not installed this component do   authorization let's try to include the name  space here okay so we haven't installed   that it means you have to install  this package in here so let's grab this let's go to solution now from  this client library right click on   this and now manage new get packages  and let's install this package here yes so we have to install this now when we go back to the custom State we  have it now we can Implement an abstract class   from this and that is a get authentication state  asnc so anytime you are switching between page one   to page two this method is going to be called so  anytime that you move from one page to the next   page this method will be called so that is where  it's going to check if the is authenticated or not   okay so let's see now that we have this what can  we do here we have our local storage um service   created which get toen from the local storage and  we also have a calization where we can deserialize   and naturalize modus and we also we have our  get HTP client which we can retrieve public and   private HP client with header and with no header  so what we do here we are going to inject them   and I'll start using them here so first let's  inject the local storage service because we're   going to retrieve token from local storage service  we can do that from this section so local storage   service then we create an instance of this the  first thing is going to create Anonymous as a   claim principal and now it's going to have with no  identity as you can see now we check if we want to   get token St from the local storage initially so  anytime the page look check communicate to local   storage and get the token this must be an async in  the form of a string so we are checking if token   here it is null meaning user is not registered  they want to tell the app that this user is not   registered so you want to return TX from results  New authentication state with KN any mod you want   to do that but in case the user here this token is  found what can we do we are going to digize this   token so first let disiz it into model so into  this user session model and now we also going to   check if this model is null then what are you  going to do you want to also do same although   it is not but it is good that we check it check  it out now the next thing is after distalizing   it we also going to um decrypt the token so how  can we decrypt the token we have to because the   token that we create comprise of the claims we  want to decrypt token now retrieve all claims   and these are the claim that we need to set into  this authentication State provider so we want to   create a method here to decrypt this token you  passing the token in here then after decry the   token this is going to return with the get user  claim so this claim in case it is in case this   claims here it is n we want to also return an  as user it is not authenticated so anytime that   returns now it user is not authenticated it  want to return um null there anonymos to the   user and that nymous here is an is a new instance  of claim identity which tells the user that which   tell the component that they current user it is  not registered or is not authenticated okay so   we need to create this decrypt token now this  decrypt token going to we're going to deip the   Token that we have in here so we need to create  a private method to handle that but before we   do that we um let's also add the next method to  handle it let's say after after we've retrieve   the claims in here what we're going to do here is  once you have the claims we are going to set the   claims and I return it as a claim principal so  after return the claim principal then we going   to pass it to the authenication state and at this  time around we going to return the same tax from   results and now we passing this claim principal  so this is going to tell the app that the user   is not authenticated it there's no mononymous  rather it's authenticated because you have the   claims in here let's define this to um General  models here now the first one here is a decrypt token let's have it down here so what are we  doing there is a private static custom user   claims this custom user claim is the model that we  need to create so quickly let's get this created   and let's create that in the user dto so that's  going to be the The Base Library which contains   all the models and the dto so let's add a new  class and this going to be a custom user claims   now this custom user claims going to handle few  properties and it's going to be a record type so   let's grab this and in here we are just having an  ID name email and a row so this is what we need we   need a name ID email and a row for this token so  this is what we're going to use to authenticate   the user these are token or these are claims  not token it's are claims that we set during   the authentication or during token formation  so if I could remind you let's go to the the   data set layer that is a server library now you  can see from the repository and implementation   folder you can see we have this user account  repository and now when it gets to this create   a sync that is a login async we are creating  claims now what where are these claims let's see let's see from this generate token so you  can see from the generate token we are creating   these claims we have an ID we have name email  and a row so the same token the same claims   is what we are decrypting to retrieve so we  are retrieving them in the user service no   that then you the custom upate you see we are  retrieving the same user ID name email and a   row so create it in the server and I retrieve  them in the client that's what we are doing so   in case we are checking if this is null then  we want to return new instance of this but   in case it is not then we want to get a token  um decrypt it read the the claims from it and   I retrieve all user ID name email row and I  return a new custom since the record type we   can specify this as a parameter to this method  and that's what this user claim is going to do   so here we have this user claim as an object  once we have this model here we are going to   set this model into the set claims principal  so let's also handle that set claim principal method we also create another private method  in here and this going to return return a claim   principal and here it is it is accepting the  has a payload this a model that we accepting   it here so this is a custom user claim and that  is what we are passing here so the output of this   decrypt token is going to be an input of this uh  method uh here that is a get claim so this going   to set the claim to this claim principal and  it's going to return as you can see from it's   going to return a new claim principal with  this um claims in it so we have the ID the   name the email and then the r now we give the  name as a GW meaning authentication and aside   from that we can save this so that's what we  are doing so we are getting data from local   storage crypting it and now we digitalize  the token we get the claims in it set to   the claim princip now return that so anytime  the page loads or navigate from one page to   another this method is going to be called all  the time but of in case the user tries to log   in what can we do we want to Now set a token to  local storage and so call this set claims and   now um I'm set the claims to token I refresh  the page okay so we want to handle that in here so this method is not going to be private  because you're going to be calling this outside   the scope of this so we're going to make it  as public and I will say public asent task   and update authentication States we pass the  user session as the refresh token and at the   token and aside from that we check we create a  new instance of this claim principal now here   we check if token is null it's not equal to null  and US session also user session refresh token   is not equal to null so we are checking from  this if it is equal to null then we want to   serialize it as you can see into a string then  reset to the Token to the local storage see we   have set token local storage ser. set token we  passing the string in here and also we want to   get all user claim so we deip the token that is  is coming in and we set to the claim so the claim   that we created an instan in here we call the  set claims to return a new claim with now with   um a new claims which has retrieved the claims  from the token and now set it aside from that we   call the not notify authentication State change  then we pass in the claim that we have created   in here okay but in case this user session it  is n it tells you that maybe the user want to   remove or want to log out so if the person wants  to log out then we still call this local story   service. remove token then notify authentication  State change so after the token has been removed   this going to get reloaded as soon as this page  um this component get refreshed check here it's   going to come to this and I get the token from  local storage in case it is null there's going to   return a no more mean the user is not registered  so that's what we are doing for this custom or state so the next to do here is we have to  register the services that we have created   so in order to do that let's go to the clients  and now we go to program.cs file and in here   let's register this Services here so we are  using this authorization call and now we add   this Blazer local storage since we installed  Blazer local storage we also want to register   this get ATP client so we can inject it as we've  done Ru it to local storage and now we also um   create the pen injection between this allate and  the custom o that we created from that you know   we have this user account interface and we have  eight implementation service we also um register that the next thing to do here is in order  for this client which has a different port   to communicate with the server which also has  a different port we have to um register Court   okay so course will help it to communicate  from the client to the API so in here to   handle that we go to the server first then  where from the server that is it is over   here now let's go to the properties let's go  to line settings and you know from here we   have from htps since our app is ring on https  we want to grab this okay now let's go to the   program. CSR from the client so this is the  client now in here inste of this bet. host   environment. Base address we want to remove  this and now specify our own okay so in here   let's add the for SL like this so it means the  Base address going to be the API all right now   let's go to the API 2 that's going to be the  server program. CS file and also will handle   that so we go to the server program.cs  file now in here we have to add calls to this so in here too we going to add the course  build services. add course and now here we give   it a name as maybe allow Blazer web assembly  okay so allow Blazer assembly and now here   we need to configure some options with this so  here is going to be the the end point for this   Blazer so to get the the the URL or the address  we also go to the client and I go to properties   and you know from the line settings from the  atps you know it is 7239 so let's grab that   let's go in there and I'll change it in here  so from for htps it is 7239 and also when you   check from the HTTP it is it is 5245 so we can  also grab that and then make a change 5245 by   we are running on https so there's no need for  us to even do this but in case you want to run   on HTTP then you have to include this as well  then allow any method and any head and allow   credential so that the authentication section  or the authorization section could be added and   I'll send it to with an API okay so we have this  done let's use the call that we have created we   can do that down here where you have this  app midw pipeline so let's Implement app.   use course then passing the name of this call  here okay so that is all that we need to do here the next thing to do is to handle or to  surround the cascading authentication State   um around the route the route is found in the  app. Razer so go to the client now you can see   from the client we have this app. raser so within  here we can surround it with a with a cascading   authentication state so we can just make a copy  of this then we have this cascading All State   Control period we need to include the name space  in here and now this must be an authorized route   View and now in that when we authorizing you want  to just display a custom message so please wait a   moment whil we authenticate you anything that you  feel you want to include in here you can um pass   it routin okay by this mine maybe you can also  specified your okay so now we have this let's   see I want us to display something on the screen  so as soon as user logs in we can see isn't it   so let's go to the solution and from the client  you see we have pages from the layout we have   um nav menu so here what when you go top here  you can see we have this a client okay so with   this client maybe you can remove this and we can  just space in here so hi if you are authorized   you want to display the the name if you are not  you want to display hi guest so see isn't this   authorized View and now if you're authorized  display this if you are not then display guest   to the user so this is going to be displayed on  top of the nav bar and maybe when the countdown   here we can have a login and our log out so  instead of having it on top there we can also   um put them here okay it's possible but let's  Che it over there let's put on top so let's go   to main layout and in here we can remove this and  now we can just create one so this is going to be   a class so let's say BTN BTN Nan and now with this  we can just type in something this is going to be   an hre and it is navigating to Identity let's say  account slash log Lo that's going to be the route   for our login then let's say this is login we  can make a duplicate of this and I make this as register so register let me make this a sign  in okay even loging will be okay isn't it all   right so we have this and maybe this could  be let me make this as test danger or test   this okay okay so let's maintain this now  the next one is let's make a copy of this   two and now display BTN BTN this going  to be test danger and then this will be logouts so with this log outs we not going   to implement this you're going  to have an onclick event so at let's have at onclick then we say log out click let's define definition  for this so at the code section we can have   um async task log out click good so so when I  click on log out this what I want to um do so   to implement this method we need to Let's log  out model equal to new and here we need a user session so we need to include this new user  session model which contains the user the token   and the refresh token so let's save this let's  go up here and we can include the name space so using so client library or let's see if this is the base  library. dto so that is where we have this user   session then custom aate provider it is coming  [Music] from the C library so let's say at using and this is the client's Library so let's see this using so client Library dot we have the  helper that is where the castom aate   is coming from now we need to inject this  aate provider so we can have at inject then Authentication State provider and we say this all state provider so this has to  come from the name space of I   think microsoft. component let's say so that's using so microsoft. compon aset call do component.  authorization yeah that's where it's coming from   so we can move all this we can cut this save  that then put it in the import so we can use   it in another page as well so go to the ut.  razor now done here let's past this okay so   I want to group them this where we have all  the inject this is the usern and now in here   let's also inject I user account [Music]  service and I will say this is um account service okay so this is also from the using of  this as using is coming from the client Library   dot Services Dot contract that is where this  also coming from okay so we save this we go   back to the main layout and I can see we have it  so can see we are calling an update State method   that we created we passing now or empty object in  here and now when it gets the object is empty the   person wants to log out then it log the person  out and I navigate to this page that's the home   page and I reload the page again to get a token  from the local in case you couldn't get it then   it's going to return and only mod from the custom  orate provider good I believe you are good right   so now let's see the next to do here is we're  going to create our um component that's a login   and now the register component so let's go to the  solution and now here where we have the pages this   is a page that we have we going to create one  folder in this and I name it as account pages   so account Pages inside this account Pages folder  we want to have just a login component to right   click on this then add a new component as login  component or login page now inside this login   page we want to have a simple edit form in here  so when you check this we have this a r that we   specified and I we have this input edit form  in here that is the handle login and we use   this validation to validate um the model or the  form we have a user email and a user password   when check so you have this user and now that is  an instance of the user um detail that we have   created so we going to use that user as the model  for this edit form if I click on login I want to   submit I'm going to submit to this method that's  the reason why we specifi it here aside from that   we need this nav manager so let's include it  from even from the custom aate this nav manager   so that is a main layout yes you must have this  nav manager so let's include it here at the same inject so in this is going to be navigation  manager then we say nav manager okay so when   it come to the login we as soon as we call this  we see we do the same thing here when we have   the response has through it me user has now log  in then this result going to retrieve the token   and the refresh token so you want to push it  to this update authentication State this time   around we not going to specify as now right  I want to populate it in here as a token is   equal to the result of token and then we  have the refresh token is equal to this   result. refresh token which is coming in as  a respon from the service in here aside from   that you want to also navigate to the homepage  and I reload the page so that the custom orate   can retrieve from the local storage and I'll  append it to the header and do a lot of stuff   with it get the claims and I'll set claims  to the uh um claim principal and I return it   to the component yeah so that's what we are  doing in there too okay okay so we have this   the login now let's handle the registration  but before we do that let's navigate to the   login page let's find this application and  test the login if it works then we can also   handle the registration component as well all  right so let's quickly check it up so I'm going   to make this as a client not a server choose the  client here and now we have to set the client as   a startup project so I click on the server let's  run the server so thebag start with that thebag again so once we have the end points ready  we also go in there and now start the client okay so it is St by you see from the  client we have have an error in here let's   check this app we check the console and it  is saying it is the there's no service type   for this um HTP client Factory okay so let's  let's do that quickly so I I think I forgot   this when you check this where is it our service  user account service you can see from here that   we are creating we create this uh public client  right now when to check this get public client   that the service of this get HTTP client let's  check that service you see that here we create a   new client and I give it a name as system API  client right so when you create this client   we have to register that and I did not tell  you so that's the reason why we having this   error now let's see let's register that so we  can go to the same client session program. CS   file now instead of this this one we can now use  this so builder. services. add HTTP client then   we specify the name in here then with this we can  copy the name of the the port and I rep place the   port let's close this we can comment this let's  save this let's run it again and now check it out yeah so you can see this is ready but we  have login Lo register and log out wow we did   not surround it with the authorized component  and you did not tell me I hope you've done yours   right so let's quickly do that from this where  I have this login this is going to come in at   as an authorized so authorized View and now here  if I am authorized I want to see this if I am not   authorized I want to see this see so if I am not  authorized I want to say log in and I register   if I am authorized I want to see log out I hope  this is clear okay I believe this the first time   of you hearing this you know this and you using  this oh is it let's save this and now let's do   it again and see for now if we going to see this  again all right so this must be a register yes   do that before okay before you forget it so that's  going to be a register although we haven't created   a register component but we specify the name  here and as soon as you create it that'll be all okay so since we are not registered we  are not indicated we see we have login   register I see so let's go to the login now  I'm going to click on this inspect element   you're going to call this endpoint so  let me expand this a little bit go to   the network tab click on register and now  here we have user at user 4 at example you remember we have string as a password now if I  click on um log you can see it is calling an endo   here but the response here is two4 okay so see in  and it was 200 and the page got refreshed so you   can see here we have the log out when we check  the you have high string right so that's going   to be the name when you check our um app where can  I find the app it is here let me open it Tom more   yeah so when you check this go to local storage  open this and you have the token in here this   our refresh token and that is our token so we are  authenticated if I click on log out see has been   removed get refreshed and now you're going to see  hi guest yes meaning you're authenticated and you   see we are now you can now see log in and now  log out so this is working now if I click on um   we forecast we have an issue here why check the  netork tab and now check this with the forecast   click on it again let's see it is not making even  a call when you check this console it is saying   that an invalid request urri was provided okay  so let's handle that so we can retrieve this as   soon as you make a call to to this end point then  we can retrieve it from the database or that's an   API because now we have a token uh added to the  header as well and you can now make a call to   this endpoint now let's see we decorated the API  that the r forast Endo as the row as admin user   four it is not an administrator it's going to be  a user so when this work we must have 403 that is   forbidden forbidden mean is you authenticated  but do not have access to that specific API or   that specific endpoint let me put in that way  okay so quickly let's also handle that let's go   to our source code here navigate to the where we  have this weather forecast um component and that   can be found inside the client pages and we have  weather. Razer so here we don't need to use this   HTTP client anymore all we need to do here is we  have to also clear this because you're going to be   using this we forecast from the base library. dto  so with this we have to use the name space here we   have the name space already so we can now remove  this and I will say that there is an await account   service do get weather forecast so we now calling  from an API let's save this now this is going to   call from the private um HTTP client we going to  get from the local storage append the token to the   header and I return an instance of HTP HTTP client  and now we can make a call to it let's run this again so as soon as the app runs it goes  to the text and I see do you have any um   in the local storage yeah we have it and now we  have hello guest right so with this hello guest   let's log in let's log in here we are going  to authenticated now you're going to have the   data store in the local storage so let let's  check it first after getting the the weather   forecast we're going to check how does this  work right click on this go to the inspect and I in here from the console not the console  this network tab click on whether forecast and   here we have an issue 500 let's check it out  so this is an internal server error but you   see when you check the token you have the  token added to the header that's fine but   the Rue is why are we having this let's go  to the API here the user service and now   from the refresh token we getting it from  an API wether forecast okay let's Che the   controller we have the row as admin authorize  attribute specified and now here this is get so let's let's check the the end point  let's try to get data here and check it up   so no authentication scheme was specified oh  okay so we have not specified any authentication   scheme yet yes so I did not also tell you that  all right so let's asso you that you know I I   keep forgetting things all right so let's quickly  do that this should have been the first thing to   even do before we handle this this has to happen  in the server and I will go to the program. Cs   file from the server and that is where we have  to add authentication scheme so down here you   see we have authorization so authentication  must come we have our authorization in here   so authentication and then authorization let's  save that now let's add the scheme so after the   registration of the service the connection we  want to add authentication then after adding   this we have to also add the bearer that's going  to be the GWT Bearer that is where we are going to   specify our issuer the audience validate Etc and  Etc so you see we have validate issuer validate   audience validate issue ass signing key VI this  Li time and now this a GWT session so where are   you getting the WT section do you remember  that in the second video um we made mention   of the WT section as a model we are using ey  options to map the session in the app Json   so we don't need to use the config anymore  we can use this eye options and to do that   we made a registration here this one so let's  put Let me just remove this and put this on top here and the next thing we need to do here  is we have to cach this so we can be using   it in here so this is going to be used outside  the program. Cs file and now this can be used   inside this file so section we get a session  of this we map it to this so that is what we   doing in here and we are getting the bite  of the key so if you don't know where the   is coming from when you check this app  setting. Json from the server we have   the specified in there app settings there  is a GWT section we have the key issue and   now the audience and that is exactly what  we are using in here okay so this what we   need to do now let's save this and I believe  we can stop everything and I run this again okay so let's stop this and I run this again so I first  have to let's save all let's run the server after that you're going to run the client  and I believe this going to solve the problem so even here when we test this get API we  must have 41 let's see 401 yeah we have 401   meaning it is unauthorized because we have not  registered now let's go in there and run the client all right so it is ready now rightly let's  go to inspect element and let's check it out and   see if there will be any issue again what do you  think if I click on this get will forecast okay   so you see have 403 and what is the definition  of 403 it is for bidding meaning this must be   this is only for administrators but here you are  a user you want to have access to Let's log out we   going to admin then going to make a call and  I see it's going to go through log into this   instead of this user it's going to user let's  log in there going to be there's an admin so   so let's log in okay so you check this you have  a new token and that is an admin token for this   and now if I come to a network tab let me clear  everything click on weather forecast and that's   fine you have it so check it up if I click on  this you see we have the token in here and I if   I decry this token you're going to have it as an  admin we did that in the previous video so go to   gw. pay this token you're going to have all the  claims you're going to have all the the scheme   the header and Etc okay you're going to have  them in there okay so this is working but here   when we check our token formation we made it as  let's go to the user repository from the uh data   sets layer and now in here what we have this is  account repository when generating the token we   specify the expired date as one day so maybe  this is too long for us we cannot be waiting   for one day to get this so let's say add seconds  and maybe we can add let make it as two so as soon   as you create this account and try to log in this  account we have to it has to expire and when it   expired it means the user cannot have access to  the resource again because the token giving the   person access has expired let's check it this  out I'm going to try this now let's find this   and see all right so here we are going to log in  again so let's log out so that the token will be   cleared up from the local storage and now when  we log in it's going to assign a date and time   of an expir date and time to the Token okay so it  can expire as the date or the time specified so login so once you're in right click on  this let's go to inspect and now let's   see when you go to the net tab can just click on  forecast and I'm going to retrieve it so anytime   that I click on it since the token hasn't  expired you see I can able to retrieve and   any c that it makes it happens it has the  authorization header added so we can just   be clicking on it all the time now let's give  ourselves some time so that this token will be expire all right so I went offline and tried a  couple of times and you can see from the last   end that uh it is successful now we have  a call made token has been added but it is   still 401 meaning you are not authorized and  when I check the WW authenticate uh key the   value tells you that the bar error invalid token  now the description here is the token expired at   this date and this time so the the token has  now expired any call that you Tred to make   is not going to go through because the token  is now expired there come seeing the refresh   token as soon token expires then we have to  call the refresh token let's have a look on   how to implement the refresh token there are so  many ways of implementing this I'm going to also   show you the other way around today normally  I do um handle that in the um service section   by this time around you're going to create a  custom HTTP Handler which is going to inherit   from a delegating Handler and now within the  Handler we're going to create going to override   the send async method we're going to check from  the request if the response it is or the request   has a status code of 401 we want to call the  refresh token let's see how to go about that so   I'm going to let's go to the source code of this  project and now let's close everything from here let's go to the solution and now where we have the  user service from the service project that's going   to be the client service so the client Library  see we have this services and we have this user   account service so in here we need to implement  the refresh token and it is it's a post method so   we can just grab this without wasting time we can  just grab this one and now in here we can paste it so we get this is going to be a public HTTP client  also because for the referes token it is anonymous   let's go to the SQL is SQL the solution now when  we check this authentication controller we can set   here as allow an no so it means all the end point  here can be accessed by Anonymous by this need a   key and that's a refresh token to um get access  to this let's save that now let's go back again   and you know saying this a task you must have  annous method and it is also rain the same login   response and here we are not converting or we not  returning this you want to rather return a login   response to the refresh token and now we are going  to post this token not the user that's all that we   need to do and now here it is refresh token so  from controller you can just grab the name in   order not to make a big mistake here let's past  the name here that's all copy this and I return   login response if it works that's fine this all  that we need to do here from the service now let's   go in there and create a custom HTTP Handler in  the helpers folder that we created right click   on the folder add a new class and I'll name it as  custom h HTP Handler or you can name it any name   at all you want to do you can put it that now this  has inherit from delegating Handler so this has in   from this the gating Handler and you know there is  a class so if I click on this it has p definition   it has this meod and it's also inheriting from  this HTTP message Handler and now in that you   can override the me known as a send a sync if it  is not here then the method that we can overwrite   then we can now have access to this request okay  so this what we are going to do this must be a public and now once you have this as a  public we can overwrite the method known as so here you see we have the send a SN this  a method that you want to right now in here   we want to check so first of all if if it is  um this if it is login register or if it is   refresh token we don't want to append header  we want to call the public and I'll return it   so this what we are doing first we check  if the request content there is a refresh token so login URL let make it  URL refresh register URL and I   refresh token URL so it is going  to return if it contains refresh token okay then we want to return so if this  contains any of the these um name here it means   you are calling a public URL and in such that  or in that case we don't want to append the   authorization header on top because because these  are public endo and even without authorization   header we can still make a call to this so there's  no need for us to append the header make a call to   a public endpoint with authorization added to  the header you canot escape that but for now   let's actually make it clean so we want to  remove that so to do that you want to check   you say if login URL that is true or if register  URL which is also true or or if refresh token URL   which is also true so if any of this is true then  this what you want to do we want to just return   this okay that is when it is through so skip this  return don't add any header but in case it is not   and it is other like refresh to um get weather  forecast get employees or any other um method   or any other end point then we want to append  the header so to do that you want to cach or   store the header in here let's store this here  as a result so let me remove this okay so this   must be an async take notes so we store it as  a result now the result we are going to check   if the status code is equal to 401 so if the  is equal to 401 so here must be an await don't   forget if stus code of the results here is 401  that is where we want to specify or return all   this you want to handle this but in case it is  not then you want to return the result that we casted and you know this result that is this  one so if this result status code is equal   to for unauthorized that is a 401 it means  that the token has now expired it could be   that there's no header append or there's not  section append to the header or the token has   expired so there are two ways first let's  check if token is there meaning that this   the link or the token has expired but in  case the token is not there then we can   add a token and I'll make a request again  okay so that's what we are doing we want   to check first and here this could give us um  error so maybe you want to check if token is available okay so here we're checking if token  is available but first of all um if it is an   authorized maybe we can get token from the local  storage so let's first um get token from local storage okay so here we have to inject this  local service so in here let's inject the two   so that anytime that we need an htcp client  we don't need to create any more because we   have one in here let's append it so this must  be yes so we need get HP client which returns   two method that is a private and public the  private one contains the header now local St   allow us to set get and now remove so we get the  local storage in the form of a strength if it is   not return result but in case it is not then we  are going to check if this token here is empty   so this is going to empty in case um there's no  head going to be empty so if this is empty then   what are we doing we want to just add the token  to the header and I'll make a request again so   we add the token you know from here we have  to decp this okay so in order to do that we   are calling this method the digitalization um  digitalize token do token so here we are going   to decrypt this token and to decrypt this token  we have to just create a simple method which is   going to derve from this let's put on top here  so we can use it within this the scope of this   if so can see weiz utilize the token of user  session of this string token that is coming in   as a string then we check if it is now return  but is not going to be null but let's Che for   check sake then in here we are passing in the  seriz the seriz token the token property in it   we pass to the the header that at the end we  want to call it again so here they checking if   the response status code is 41 first let me check  does the HTTP has a header known as alization in   case it is now then fet the to and I'll add to the  header and I'll make a request again that's what   it's doing but in case it is not in case it has  it that is when if this is not now meaning that   the token has expired that is where you need to  call the refresh token okay end point okay so to   do that we have to now get the refresh token so  let's create a method in here to call the refresh   token and on this the refresh token we must Define  it to true period we can just generate a method   for this as a refresh token now this refresh  token is going to come in with a token it's   going to come accept a token as a parameter so  we passing a string in as a refresh token now in that let's change this V to give it as  an appropriate name refresh token now in   that you want to make a call so with  making this call what is what you're   going to do we need to call this we have to  inject let's inject one more so maybe I can   then maybe let me put this here let's  inject I user account and I say this is account service okay so with this account  service we can have a method in here so results is   equal to we can have an a wait account service dot  then get refresh token async this needs a model so   we can say new um refresh token model then with  this we can have token is equal to this refresh token okay so this refresh token that is this one  so you pass it over here then you make a a respon   to this now with that we can check if response  is null because this going to return a response   so here we can even check if this result is  null because this result is going to come   in with a login response if I click on dot you  see we have um token flag we have um let's see   token refresh token message okay so if this is  null then this what you want to do you want to return okay so let's return this in case  this token here it is not but this token   it will never be not because as soon as you  passing a COR refresh token and it's going to   come out with a new token and a refresh token  they not going to be Handle by the user right   it's going to be a computer to computer  or machine to machine communication okay   so in case it is not or even here we can  this must be um let's make it as a string   okay so let's return as a string from the  token so in of this we can return this null here we can return null but in case this  is not then I want to um return or maybe   instead of doing all this stuff we can just  return result straightforward then we go our   away so we can make a check in there  so return this result very simple one   so here I want to return the result from this  let's see with DOT refresh token so this is a token so before we return this token you know  we have to also set it to the local story so   that anytime the person logs into another page  or navigate to page and come back the token will   be there the current one so in order to do that  let's seriz V the new one and set it to local   storage so in that you can have this two method  to handle that so we see weiz the token coming   in thenation doize this object then this new  user we have token is equal to this result do   token and also when you check the next one this  is going to be the refresh token so we have the   model populated here then weord this local storage  service. set token we passing this realized token   token is it's going to set it at the end of the  day we want to return return only the token not   the refresh token we want only the token now in  here we are going to check if this token here   it is not now so we check if okay so we can say  if string do is now empty that is the new token   coming in definitely we know that it is not going  to be n but let's see if it is n then you want to   turn result and now this result is what you  have in here okay so that's the result that   we cat here return this result but in case it  is not then we want to append to the header and   also remake a request or remake the call again  so append to the header so we append the new   token that's the new token and at the end of the  day make a request again so as soon as you have   401 it's going to pause call the referesh token  API get the token add to local storage remove   the current the old one append the new header to  the HTTP client and I remake the same call again   to get the current data that we want this what  that this custom a going to do now after doing   the next thing that we're going to handle here  is going to be let's register this so we have to   do that in the program.cs from the client not  the client server the client section so we go   to the program solution this is the client where  is it this is the server client program.cs file   that is this okay so in here all I need to do  here is to add an HTTP message Handler to this   so let's add HTTP message Handler to this then  call the custom http before that we need to also   register as a transient so on top here let's put  this as a transient and that's all that we need   to do so we are good to go let's save this and  now let's try this again so I'm going to close everything so let me close all these okay all set now let's run say this first now  let's go to solution and now from the server right   click on the server debug this without debagging  let's start it after that we are going to also   start this client then we're going to make a  call as we did earlier on we're going to wait   for some time if the token exp part we click on  it again going to see that going to make a call to   the refresh token and we going to be having a new  token so let's see we have this L from the client to okay so let's now we are still in we navigate  here to the inspect now let's even check so here   is know that when you run this the token expired  already isn't it so if I click on WEA forecast   let's see good so you see now we have a refresh  token called up here right so now let's wait for   the response of this refresh token good good  yes so this working have you seen that you can   see the first time we made the call to this we  had 401 this is the token check the end of the   token it ends with 2 s now ref token was called  and now you can see there's no authentication   header attached to this now when you check this  when you check the payload we send the this is   a refresh token and now this is a response from  the server we have a new token and now a refresh   token and now the same it came and now we made  another request to the header and now check the   first token here it is the OG so check the  old one it is 2s now the new one here it is   what OG so it means that refer token was called  and now a new token has been retrieved added to   the header and I make a call and I have it so all  the time anytime the token expired F token is been   initiated and now we can now have a new token for  ourself this machine to machine communication the   user has no Duty here okay all right so let's see  now we left one that is a registration component   so quickly we let's go in there and create  our registration component let's minimize this so let's go to the solution now what  we have the same the client Pages we have   our account page we click on this add a new  razor component and this ISS register page   now in this we want to past in this it is the  same edit form that we created this a r that we   have handle registration the same as the edit  form for the login that we did the same thing   just that here we using the register component  the register model okay then when you check this   you have the full name email password and now  confirm password we have data notations and   dation summary so to get or to validate it for  us and we have a register Button as a type as   what submit and now that is just going to handle  it so this is what we are saying in case is true   meaning if it works you want to clear the model  in case it is not you want you don't want to do   anything yes we going to be using either maybe  notification and message Handler to handle this   but for now let's see so this what we are doing  let's save this let me close this and reopen it   again so let's let's go to register page again  and now yes so we have it that's all that we   need to do very simple one you call account  service. create Asing we passing this user   model that's fine now let's run the client only  we know that the API is on the way it's alive so   we going to run the client then we're going to  register and I also log in and I'll test this up so let's go to let's log out and  after logging out we are going to   log in again we going to register  create new account so let's click   on register and I can see we in the  registration page let's pass in net code okay so let me increase it then maybe let's  have an email in here we have five then password   string let's maintain the same string now I  click on register as soon as this becomes it   me registered right now let's go to login and  now in here passing net the password click on   reg login and now you're going to have next go  up channel on top here okay this this works we   going to have it here so maybe later on we  can use some buttons to display there soon   as I click on this we can have some um running  feature to tell the that there's a process going   on so click on this let's see all right so this  must be an email the name see so this must be a   user five click on login and now a call is being  made from here and the US is now authenticated   yes so hi net Cod we we are loging and we can  now make a call to this but let's see send this   a user let's see token will be append to the  header click on this come back again yes 401   the token is appended here by still 4 because  the end point is restricted for only admins so   that is it for this we've seen how to consume  our token login and also the ref fresh token   system creating a custom Handler to handle  automatically um call a refresh token taking   the spice and I integrated and keep moving on  that is it for this video thank you so much

Channel: Netcode-Hub

Views: 3,697

Keywords: employee, management, system, building, database, models, web assembly, .net 8, blazor, web, api, .NET 8, Blazor WebAssembly, API, Database Models, Employee Management System., Employee Management System, Building, Create, Develop, Design, Implement., jwt, JWT, authentication, role-base, role-based authorization, authorization, refresh token support, custom auth, identity authentication, Blazor, DotNET8, EmployeeManagement, JWTAuthentication, RoleBasedAuthorization, RefreshTokens, WebAssembly, ClientSecurity

Id: 5r_Az7LhC8M

Length: 92min 58sec (5578 seconds)

Published: Thu Dec 28 2023