Complete JWT Authentication, Roles & Refresh Token Support in .NET 8 Blazor App Interactive Server

hello everyone welcome back to net code Hub  channel I am Frederick as you know and I'm very   very happy to have you here today in this video  we are going to look at how to create custom JWT   authentication system in Blazer server that is net  8 using interactive server rendom mode so before   we dive into it this what the system going to look  like we're going to have our own custom system   whereby user can register and also can um log in  as soon as the user logs in you have the token   created in the same Blazer whereby you're going to  expose an endpoint to it after that you're going   to consume this endpoint in the various components  and you're going to create a custom authentication   State provider okay so that's exactly what we're  going to do then we consume this and what making   a call maybe we can attach the token to the  HTTP client before we make a call let's have   a look so you can understand this with a partical  aspect IDE of our training session for people who   are interested in Blazer and also.net um API  and Blazer hybrid and Etc so I have an email   in the video description you can just link me  up through it okay so let's see now make sure   you have a visual studio launched and let's go in  then and create project this going to be net 8 I   believe you aware so click on create new project  and I'm going to select the template for that's   a Blazer web app this one the name is going to be  demo Blazer server GWT authentication let's click   on next and now here we're going to create our  custom authentication system so we don't need any   here right you don't want to select the individual  you want to maintain what we have the the N since   we're going to create our own the server that's  going to be the interactive rendom mode make sure   you choose a server and for the location just  leave it as it is page or Global anyone let's   click on create to get this project created so the  next thing to do after the project creation is to   install our new get packages and that is what  we're going to use to create this talking about   the ADV models and also EF call server and also  tools and other package as well we are not going   to implement identity manager here we're going  to create our own one so we need a mechanism to   encrypt user password by doing so we're going to  install bp. net. nextext that is the package I'm   going to use to encrypt password so let's install  these packages here so this what I'm going to   do since I have the package references here I'm  going to click on this but if you're not having   the reference you can just right click on the  pendencies then go to man new get packages and   I try to um install them one after the another  I'll go to the project itself then I'll unload   this project then the package that I'm going  to install here first let me just have the item group so we need the b. next net. next WoW and  now this is going to be for the server so let's   have a label here there a server and now so we  need a Swatch back since we're going to expose   an API so we want to um get it used we also need  system. identity model. token. JWT s that's we   going to use to create a token aside from that  we have to we also have to use Microsoft identity   model. token so let me also add this here okay  after that we need EF core tools and our package   so EF core SQL server and our tools and the last  one for the server is we need um microsoft. net   called authentication JWT be we need that as well  so once you're done we need to also include this   microsoft. aspet call component. authorization  this going to give us access to cascading and   authentication State provider in the component  that you're going to consume the token so let's   have that here you have a label known as a client  they going to be used by the server and then this   going to be by the client okay that's it Pages  I'm talking about okay all right so let's save   this and I think that's all that we need to  install now maybe later on in case we need any   we come back again and do that now I'll save this  save everything click go to solution then I click   on this and I'll go to reload project with with  dependencies now the packages are being installed   okay so let do here is once you have the package  installed we quickly have to create our modos and   dtos for the login as for registration so let's  create a folder here and I name it as modos and   also dto so we have our folder so modos or entity  that's fine you can also create another one you a dtos okay so let me make this as small s you  know D2 is what data transfer objects okay   so for our models we we only need one model I  think so because since we're going to use for   registration we need only a model now so let's add  a class with to this and the name of this class is   going to be application user in the application  user class we want to have just name email and   password maybe you like to add more properties  to this this what you want to have for now and   also let's go in and create our DTS and now with  the D2 we're going to create a register D2 that's   we're going to use to transport data from the  user to this model okay to access to database so   and oh this application must come to the modos I  believe we've done that okay so you make sure you   do the right thing so this supposed to be modos  not dto so that mod we have it here now I click   on the dto let's add a class and this going to  be register D for the register o we are going to have the following properties we need  an ID and for the so yeah maybe we can   decide maybe ID since I'm not going to  do any update so we can scrap off the ID   so we need the name we need email address  password and our confirm password right so   maybe let's also create the login dto  so when you go to the login dto right   click on this and add a new class to this  login D and now you know with this we are having we having email and our password isn't  it now when you check the register dto it has   the same email and password so we can remove  this email and password from here and we can   inherit from this login dto inheritance yes  you can do this All right so the next thing   that we're going to do here is after creating  this we need to have a custom user claims these   are the this is the D2 that we're going to  use to contain the token or the claims that   we need we need a username and our user email  so we want to create a specific model to handle   that so let's add that before we forget it so  we say custom user claims and now this just a   record which has only the name and now the email  so this is going to be the claims so we have two   claims here you could add more but for now we  maintain this too we have a name we have an   email and that's we're going to use to populate  or to create or generate the token aside from   that what else can we do again maybe we can  have access to um user session user session   for now we're going to have only one property  in this and now this sess what we're going to   use to maybe well what can we do here for now  let's let's pause user session and let's go in   there and um create our responses so let me create  a folder in here and I we can name this folder as responses so new folder responses and now this  responses we're going to create one class and this   class going to be custom responses so going to be  a class in here custom responses and now in that   custom responses we are going to have two record  I wanted to say two record class two records okay   so we have a flag for the first one that's going  to be for registration and that is going to be for   login the here is the login has a token but the  registration has no token property okay I think   our model and our NT dto are done let's go in  and create our repo so this rep going to consist   of our interface and an implementation  so let's create a folder to also handle this I'm going to say repost has a respository  maybe you can just um add the whole name okay   shortcut is the key okay so I click on the  repost let's add an interface to this and   definely we're going to have two interfaces so  click on the interface the name is going to be   I account you can add you can add another name  okay you can change the name so here we have the   registration response and you can see we have  the login response and each has this payload   now we need to create the implementation  and that's going to be an account isn't it   so let's create a class and I name it as an  account in the repost add new class and now   here we say an account and as usual since going  have an interface and you have this you're going   to implement the interface so control k then  implement this interface we're going to create   Constructor and now inject the appdb contest  which going to have access to our database but   you know we have not created this rdb content  so how come can we inject it so let's do that right click let's click or let's add a new  folder and now this is going to be maybe data   in that let's create this appdb contest class  in it so appdb contest class and now once you   have this class what is the first thing  that you're going to do since we have our   DV contest or efco installed we can now inherit  from this DB contest this is coming from the ENT   framework call the reason we are not getting  this is I can see we have some issue here so   let's build this application so we can update our  dependencies here to get this package installed completely so I click on this go to build project  and you're going to restore packages as you can   see down here we have a n get packages being  restored now they are done so if I click on   period still it is not I have to have access to  the ENT framework call let's see okay DB contest   is not it's missing yes I know all right so now  it is done you can see now we have access to this   and we have to create a Constructor and inject  this which inherit from the base aside from that   let's create a table to handle this the data the  record of um people who going to register so once   you have this ad DB is ready we can go back to  our repo account repo and now here control period   we can inject it here that's fine configuration  is what we're going to use to get access to our   audience and our token no our audience and now the  issue and the key but we have not set that up so   we can do that from the up setting. Json and now  in that we can just include this in there quickly   Let's do an app setting Json I believe you found  yours now maybe down here we can add this session   okay so appear twice remove one so we have JWT you  see that is a section name and we have um this is   a key we have issuer audience and now we have the  key itself okay so this must be a random numbers   or random strengths okay less than minimum is 16  okay so be maximum do I know the maximum okay so   minimum is 16 so you can actually add a lot in  here now here we need an a port so to get a port   solution you go to the properties in here line  settings and you can see from the https you can   see have 7255 can just grab this you come here  and this is going to be the port you going also   have the same thing for the audience since you're  going to have the same API in here we're going to   consume by ourself okay so we do that all right  so let's create our connection string on top here   so we say it is is a local this is database name  I'm going to say it is demo server DB then I have   this transet connection and certificate set it  through okay so once you have this set let's go   back to the what is that is it not the interface  no that is a repository the account repository   so in here we going to register so to register  first of all we can just maybe find user that   is the best thing to do first want check if Des is  available we have to create a method this must be   an async as you know since you have a task it must  be an async and control period I can just simplify   the name I can remove everything now from this you  must create a method known as get user and passing   the email this method is going to put down here  so we can call it anytime anywhere not anywhere   within the scope okay so here we are saying that  first of default get user first default which has   the same email as what we are passing through  so get the email if it is not equal to null it   means us already exist we won't allow the person  to create an account but in case they use it is   null it means the new person and then we can  enable this person or this guy to create a new   account so this is what you're doing we are going  to this is a verified password this supposed to be   and create password first US isn't it so we have  to add this this must come in the login to verify   password so appb content. users so the table  we're going to add a new application user and   now we going to Pate this three properties name  email and password now for the password you see   we are encrypting the password we hashing it then  restore after that we need to uh save changes and   uh return this is very simple thing that we are  doing so here we I wait updb contest. save changes   and you know what you're doing supposed to should  come after this control KD and now this method as   you can see from here you come here I don't want  to mess this up okay so this is how supposed to   be all right so we save changes and I return this  through and success all right so we have this set   now for the login to what can we do for the login  we are also going to find the same user so let's   do it here so you know we create one method and  we using it here and there right this must be an   async as well since you have a task then we now  going to go and return response we're going to   return login or registration response this is  going to be login response right so in here we   can just um use this lugin response the reason  why this is set off and we don't have any error   here is when you check the responses default you  have the default value so if if you don't set the   value it's going to be the default one now in case  it is found the email is found in there we want   to verify and see if the password are also same  now if the password do match we want to generate   token so we call this it's going to be a string  form generate token and that's going to return   the token to the user so let's have a method to  implement this token generation and it is just   simple do I say simple Yes simple method to handle  the token generation let me put it down here so   generate token then we pass in this application  user and that's exactly what we are getting from   this find user we can get this from here so you  pass to this method and that's the method that we   are calling in here now when it come here we can  see we are getting the key and we are getting the   issue and at the audience we set our claim so we  need we don't need even an ID here you don't want   to use an ID for the claim you want to use only  the name and the email okay this going to be for   the claims so from that we have the expired date  for the tokens could supposed to be we're pushing   up to two days okay that's my customized one  you can just set us to one hour one minute or   even some seconds all right then we going to  write a token in the form of a string and our   return because you know the return type here the  string so we can catch it in here with a string as   you can see from this and when it come you see I  response and you can see here is a string as you   can see from here all right so that's what we're  going to do to create our token you see this is   very simple isn't it and I believe we know how to  do this right that's fine now the next thing to do   here is we have to set up this to have access to  controller that's an API so let's do that we go   to solution Explorer go to the program. Cs file  first of all we need to add controller so build   services. add controllers aside from from that the  next thing that we need to do here is we need to   add the swaga Gen and specify in some option and  this going to be my API so you can just choose   any any name that you want the tit and give it it  any version your make sure the version of this and   this version is the same okay then aside from that  what else can you do you let's actually register   our DB context we doing it together we don't want  to do this and do that so we register database   connection string in here and aside from that  we we have to also register our JWT service so   we can have the token generated as soon as we try  to login so as you can see we add authentication   then we specifying this aside from that you need  to add our DWT beer and after adding the beer we   need to specify some options in it you can decide  to skip this option but they are very important   okay so don't skip so we need to add you see addt  be and these are the options we have date issuer   the audience and remember that we've said this  in the config file so you can see we are getting   them here Val issuer VI audience because we have  a configuration then there's a session name and   that is a key so we want to retrieve eight value  section name key and eight value so the value is   why you want to store it here there is a key we  also want to use it and here has a isua signing   key all right so once you're that you know the  service that we just created the repo and the   interface the repo in interface the rep compris of  the interface and now the implementation we need   to create di that's dependency injection so you  can a copy of this and attach it to this anywhere   that you call this interface it must go in with  the um repository okay aside from this you know   we need to set up what again for now what can  we do for now for now for now yes let's try to   include the midle pipeline for this swager so  we can just navigate down here where have this   app do map then in here let's map the Swagger  and the Swagger UI and now in here you can see   your API name V1 so just add your API name I  intentially made this so you can understand   what actually meaning so that is what I need to do  to set up a controller or make this available or   yes available to open AI L Swagger once we have  this set what we need to do here is to perform   database migration but first of all let's build it  and see if everything is working as expected then   we perform migration yes as you can see we it is  suceeded so let's add migration you go to package   manager console from the tool session if you're  not having this tools then M you get packages   and I click on this package manager console so  add migration and I'm going to say this is is first now let's update database so update database so this is done as you can see it  is done from this we have a table created   only I think only one table cuz that's what we  specified okay so once you have this what the   next thing to do we need to create a controller  so we can display this endpoint that we have as   a rppo in it so in here let's go to the solution  I click on the project then add a new folder to this and the name is going to be controllers then   inside this controller we need to or  we're going to create One controller class then here the name of it going to be an  account controller so this is not what you want   one right so it's supposed to be controller so  add controller and now this must be an API mty1   and then going to be account controller and you  know we have to also create um constractor and   then inject our the repo that we created that  is the account service not the account service   this must be an account triple yeah so we have  an i account and I is an account service so so   maybe I can decide to change this to account  report because you know you're going to also   create a service here and I don't want to confuse  you guys all right so let's make this account repo then control K we can include this now here   we need for registration so this  is very simple one the endpoint is register and now the next one too we have the  endpoint as login you see very simple one now   this is an account triple no more account service  so you can make it account triple save that so   once you have this set we can run this and see if  it's going to launch to our controller so the app   is ready now let's see so here slash then let's  have Swagger and see if it's going to launch yes   so see we have our register then we have the  login so you can see in our server we having   controller available okay now here this is going  to work let's see if I click on execute this okay   so it is having a response code of what 404 why  is it having 404 we have this password name and   I confirm password execute this okay so let's find  out and see the reason when you go to this a repo   that we have in here and I register a sync and  now when you go to this account repo where is it   have you found yours you go to the accounts and  now with the account that is a register in here   so we inject our abdb contest then we adding this  receive changes and I will return um this response so let's check from this if I click on inspect  and when we check from this session click on   execute and you can see 404 we have from the  header let's see you can see we have this 7255   as a port an API account and I register um but  let's see we have to register the Base address   is this so we have to do that from the program.cs  so let's come to the program CS file and now in   that let's specify the Base address of this  and the Base address we can put it down here   and you know this 7255 isn't it if you're not  sure yourself please go to the line settings   now make sure you do the right thing so https  7255 grab this go to the program and I replace   it with this one save this so after doing this  we have to map the controller I think it's very   important and also we have to use authentication  and authorization so let's put it down here you   see so map controllers then use authentication  and use authorization all right so now let's see so let's navigate to the swaga okay so let's try to register an  account there and see what we're going to have so these are the credential that we are  passing in the detail that we passing in email   password name and a confirm mail confirm  email yeah you can see we have suet so the   account is created now let's log in and see so  from login let's even have access to our token   okay so user already asist wow are you creating  another account are logging in so why is you   supposed to ask user already exist okay so maybe  there's an error in there I believe you saw that   isn't it let's quickly check it out so from this  account you know from the login let's check from   the log in there is a login so find user if user  is not equal to n then user already exist that's   Lin and I think if user is now user is okay  so it is supposed to be if us equal to null   it means user is not found right so we can  say user not found not already exist because   you want user to be in in a database you want it  to be to exist yeah so we have if it is equal to   n that is where you want to do that let's do it  again and see is already not found these are not found okay so swagar swag and now let's log in try this out  execute and you must have the token here okay so   still loading yeah so you see we have a token so  this is our G token that has been created for us   all right now once you have this token how  can we consume this in the component how can   implement the custom authentication system  and to get this done yes let's have a look   on that now this token comprised of two claims  that is a email and the username remember that   the expir date for this token is two days as  I did it you can make it your own okay so we   have two days for this token so you're going  to going to expire today maybe tomorrow next   okay so let's see from here we go to our app  in there since we have our dis working we can   then close all this close all tabs the next  thing that we're going to do here is we have   to create a service to render this uh repo into  the service that the pages so right click on the project add new folder before  that we have to terminate this and this must be services so in the services  we need to create an i account service it is the same interface that we are creating so in here we're going to say I  account service oh this supposed to be an   interface not a class I believe we made that  correction right good then we going to have   the same thing as we had in the repo interface  so we have I account account service register   and login now the um the implementation going to  differ from what we have already we have account service so let's add a class to this and this how inherit from the interface yes so we need to implement  the interfaces in here and you know   since you're going to make an API call  we need to include an HTTP client then   from the login we can just call the login  using post Asing here you're posting to   the login and now for the register you we  are also making a post you see soos to the   same thing but here the the difference here  it is the the route this is an API account   and I log in this one is an API account slash  register okay so we have this set let's save this let's go to program and I'm try  to include or register this in there so it can be found in the solution  Explorer then program we have the   first one is the interface and this going  to be a service so service can be down here these are service I account service  and account service um rippo now aside   from creating a service in here what is the  next thing to do we have to create our custom   upate so let's let's do that solution  let's create a folder and I'll name it   as maybe States or what do you think what  should be the name state will be okay for   me what of you so let's have our custom  atit so in here let's create this class now you know custom oate you  inherit from authentication State provider control period we need  to implement this interface in it and once you have this method um implemented  the next that we going to do here is let's create   an instance of claims principal which has access  to this claims identity and in that we want to   first check we're going to create a constant  class now this constant class is going to handle   the token that you're going to receive from the  call the API call so let's copy this let's go to   the same state folder right click on this let's  add a new class and it's going to be constant   okay so that's the name that I'm giving to mine so  maybe we can decide to also change yours now this   constant has just a single property for now you  could populate this later on but for now we have   only one property as wwt token let's save this so  here this what we're doing this must be an async   I believe you know that now we're checking if it  is null it means user Anonymous there's no token   start so get this user return anonymous anonymous  means not logged in not indicated okay but what if   in case the user is now logged in not the logged  in the user has the token stored in there then   we want to decrypt the token because the token  contains the claims so we want to decrypt the   token in here and if it's equal to not you want  to return this but trust me as soon as it's not   now we not going to decrypt and get now but still  you know for checking sake let's do that and the   next thing that we going to do here we going to  create a claim principal once you have the token   you have the claims um set you need to once you  have the claims retrieve from the token we need   to also set it to the claim principal after doing  that then we call this out State then we pass in   the claim that we have retrieved then with this we  are using this TR cats Maybe in case you have any   fter error we want to use the TR card to handle  that then so in here we have this so control KD   all right now we have this so in case everything  is working we're going to return um this with the   current claim that we have we have two method  that we need to create the first method that we   need to talk about here that is the setting of  claim principal so let me put it down here now   set claim principal so we passing this custom user  claim do you remember this method if I peep this   it tells you that it has two properties has the  name and the email so when it receive this from   here we are going to set it to the claim as you  can see you have the name and the email in here   and this is the name that we giving or we adding  to our custom or state okay the next we're going   to do here is we going to decrypt the token and  now get access to the CL CL so the next method   here is going to actually do that as you can see  from here we retrieve the claim or is a payload   coming in here we check if it's not now then  we're going to retrieve it get only the token   then read the name and read the email after  that return a claim user claims is claim user   claims custom user claims that it comprise of the  name and now the email okay so that's what we're   doing but in case the user logs in for the first  time what what you want to do we want to set it   up in there so here in case I log in or I log  out we want to call this method update and now   set this in here for now we not going to use  local storage for now we are setting the the   value the the token to the constant token which  going to handle that so anytime I want to make   an API call we call this class which has a token  you can retrieve it and now put it to the header   of the ATP client then we can make a call with  it it's very simple one okay then here we are   also decrypting the token and I reset the same  claim okay now the claims that we set in here   we're going to assign as soon as we set the  claim the response going to handle with what   claim principal then we set in here and now we can  call this Au State and pass the claim principle   very simple one else we're going to set this in  null it means we want to clear this as soon as   you clear this you're going to reload this page  as soon as you're loading this page this method   is going to get hit hit now when you get here  it's going to first check if this G token is n   then going to return and anym so this system it's  going still going to work you know okay so we have   a custom um authentication stem created let's go  in there and I register this create di between   this and the custom not the authentication State  provider so we go to program Cs and now done here so you know we have this aate  provider then we have a custom allate provider after doing this we need to use  the cascading allate provider so we can   go to the where is it is it is it is it is it  where is it I think it's found here data we   have a login D2 model St and let's see where  can we have access to our components route   we need an apps. Riser not the apps rather  routes then in here we need to include the   cascading orate so maybe on top here we can  put this cascading aate provider then at the   end we can um close it up in here aside from  that this must be an authorized route view so   authorized route view okay so in here maybe  we can say authorizing what do you want to say so authorizing we can say maybe um please wait okay so we have this set after doing this  let's go to solution then we check our component   our layout you have a nav menu we want to actually  put up maybe two links in here for register and   login so we have login and register and you  you see the reference here is login and our   register which tells you that you need to create  component to handle that isn't it yes so that's   what exactly what we're going to do here I have a  very simple login page which has I put inside the   the pages which has just a form that's an edit  form in here which has this login model and un   valid submit you see login clicked we have just  an email and a password and at the botton type is submit when you check top here it is for render  mode and it is interactive server since it is a   server render mode that Pro that we are creating  we are using okay now where from all this okay   so this this is the name spaces that we knew it I  think this going to be demos um demo Blazer server   authentication I think so or let's take the name  here we need to demo Blazer sert Authentication okay now you go back to the login page  so do we have this you have that this   that yes so we have the services and  that's the folder which comprise our   services we have our dto you know what  it contains responses you know what it   contains States you know what it contains  and this authorization which giving access   to this authentication State provider so to  do this you can just move all this straight   then we can solution let's go to the import  and down here let's space it here okay so all   these have injected and we can use this we  have account service and now we can use this   in here so when you go to our login very  simple one it's not simple yes all these   are going to be solved now yeah so that is it  now l in response control period I think this   should come from Lin response okay so this  also solved and we can move this to the same import I think so this is going to work right  yes it will work so we have this we when when   this button is being called when this method is  being called we can see we call the service in   here you pass in the response you check if it  is through if it is false you want to alert it   but in case it is not then we are going to call  a custom orage in here this is going to be the   instance of the authentication State provider that  we created then in that there's a method known as   update or state we passing the token that we have  retrieved or received from an API aside from that   you navigate to this then we force load the page  so that Au system can work okay that's what we   are doing now with this I think soloft let's run  this for the login but here it's going to log in   but we are not able to see unless unless maybe  you have a mechanism to display okay so maybe we   can just navigate to the home let's see from  the Sol let's go to the this a home that's a   homepage isn't it now inside this home maybe we  can have something similar or maybe an authorized   view displayed here so that as soon as we are  loging we can see something all right you want   to see something so let's add it here so can see  we have this context. user identity. name want to   return the name and I say welcome in case you are  not you are not logged in so save this and has it refreshed no unless reload it again so let's see reload it as soon as the page loads you you see you are  not logged in now let's say so if I click on this   login then we use this email at example.com now  there is the string that we use right so if I   click on login let's see the response here so we  wait and see yes so hi string welcome so you can   see we've been able to log in isn't it yes so we  have it in here then if I go to this our source   go to the constant class and now let's have a  break point here all right now let's say if we   try to reload this let's set it up and see if we  can have access to our token so I'll just try to   reload this then let's see so you can see this is  a token everything have been stored in here so for   the use or for the entire use of this application  by the user this token is going to have a variable   this prop going to have a variable that's going  to be what the token now this value here no is   value isn't it the variable is what you see here  the value it is the token itself so this variable   has it value and this value going to be stored so  anytime I want to make a call we can call this and   I'll get this token in here isn't that beautiful  very simple as well isn't it yes the next thing   I'm going to do here is what of the ra system can  I create a form to do that I believe you can do it   so let's continue on click on this I'm going to  stop this then I give you 2 minutes work on the   registration and I let see if you couldn't then  let's continue on and I'll do it together and I   believe you can do that so try hands on it and now  let's see so were you able to do it now let's see   we just have to go to the same just make a copy  of it you know so let's see you have the login and   I'm going to make a copy and I'll paste it here  and change this to register right very simple one so I'm going to collect this and here reg page now the r is going to be what register and now in here instead of the login  it's going to be register so register click   and let's change this to register when  you come down here we just change this   to register not this one and here must  be register D and we can say this is register now register response  so here it's going to be registration registration response is equal  to then we're going to register async and I'm   passing the model so you can see it is the same  thing that we are doing now here we need not   to okay we can check okay so if it is false then  return the message but if it is true maybe we can   just make a copy of it the same thing here and uh  before we return we want to clear this container   so you want to say that is register equal to so  we can clear the container all right that's what   we're doing maybe we can navigate to the page  the login page but well you can also decide to   leave it there so let's leave it here so here for  this register model let's say this is a register   model now with this model that we have in here  we have um name first isn't it so we can just   make a copy of this in here and on top we can put  put it MD must be three imine top let's say three   and now this is not email address rather it is  what good good job so there's name so there's   going to be name in here we have email we have  password and we can have another one and this is   going to be confirm password so here we can say  that confirm password and then this going to be same H that is it very simp okay so instead  of the login instead of this you know we have   to change this to register and now here to  register here also register and that is it   I believe you've done same right good so that's  all that we can do for now let's save this let's   run this two and see if this is also going to  work so you want to log in you want register   and also log in then we're going to have  access to our token you're going to store   that call an API then we're going to add the  token to the header and that is all so let's wait yeah so it is ready you're log  out we know so let's go to um that   is a register so click on this register  okay so 44 register let's see the r here   is register and I think let's grab this  so login that is a login let's see the register okay I I believe we didn't do this  right you wrote the correct one that's good   let's see register still yeah we have it because  we need to refresh i t reload is working H reload   is working not knowing it is not so let's  refresh manually then we can test it up and see yeah reloaded click on register we must  have the form yeah that is it so this is our   form now let's fill in something and see so  I'm going to say this is net code Hub okay   the channel has been added already that's great  and I'm going to say user one then password and   password is the same if I decide to in this  you see password do not match so I make sure   it's the same string here click on register oh  he supposed to register because we have login   now let's switch call has been made let's wait  and see yes so success right you see as soon   as I click on okay this content is going to  be cleared because yes it is cleared now we   can log in so let's go to login log in with the  same one and that's going to be the user one the   same password let's log in and see so hi let  C up Channel welcome so say is working isn't   it our token has been stalled now let's have  one form and that's going to be the is it is   it is it the weather forecast I think so so we can  use use that to um test this app so let's create   an ATP contest or as an HTP client we create our  forecast component then we're going to make a call   attach this to the header and that is all so I'm  going to Let's close this up let's actually stop this let's go to this solution and now see  from here we have this weather right so now   with this weather we can just navigate this  soest streaming let's go to the import is it   the import uh no no no not the import let's  go to na menu and in here let's make a copy   of this and now let's add it as weather so here  we can say this is weather now we are navigating   to the same weather but with this we want to  have this authorized View and this is going to   work when you are authorized so you're going to  see this only when you are authorized if you're   not authorized then bye-bye you're not going to  see this trust me yeah so whether now let's go   to the page we have for weather component and  that is this one okay so in here maybe we can   just add it to this account service right the  interface so before that when you go to weather   component there's a model here so we can cut  this model or we can just copy this quickly   we go to our let's put inside a dto isn't it so  the dto add a new class and now this is going   to be weather forecast in weather forecast we  go to the weather component and I'll try to   cut this and instead of having here as private  this is going to be what public that is fine   okay now let's go to the weather pag in here  and with this we are going to move all this so   with this I'm going to move this let's cut this  from here let's go to the controller and where   actually is the controller have you found yours  that is this one right so we're going to make   a copy in here and this going to be HTP get  and now let's give it a route we say this is weather then we have this public let's  make it an action result or maybe an   action result will be okay then here  let's have this weather forecast let's   make it an array then we're going  to be the name that is get weather forecast okay let's space this here  so instead of this we're going to say return okay return return okay is that so then  in here let's close that yes we want to   return wether forecast and that is it let's  save this okay so when we test an API when   we test this let's see if we can have  access to this weather forecast in our API so let's see from here if I click on oh  you're not seeing the weather because you're   not logged in so let's go to swaga and we have our  weather click on try this out execute this yes and   we have this weather right that's fine so this  working now let's try to consume this so we're   going to implement that in the service interface  that we created you and I created together and do   you know where it is find mine here can you so  find yours now this supposed to be a task and   here's going to be we forecast and you know this  is going to be an array and let's say this is get   with forecast it needs no parameter control k  d save let's save that as well let's go to the   is it account service and we need to implement  this so control period impl this interface now   with this we can um let's remove this now it has  been implemented down here where is it okay so   get this weather and we can just make a copy  of this isn't it or we can just one line can   help can solve this let's say this is going to  be an await right then say let say updb contest   not knowing we are KN the data layer so a client  dot this is get from Jason sync and this is going   to be um forecast oh weather forecast I nearly  forgot it this must be a list then in here it   is an API slash account okay slash then we have  our weather very simple one so we can yes I think   so yeah so this what we want to do one of course  going actually help as completed so API account   and I login so see you have the same thing same  thing same thing so maybe we can extract this and   now use we can extract this APS as account now  maybe you can have private constant string okay   then we say this base Ur is it Ur right now let's  space this here then from this base we can just   use it in here so instead of calling this we could  call something like this so string interpolation   put the dollar sign here then and in that paste  this now we can just grab this and in here we   can replace it you can uh replace this too yes so  this what we want to do very simple one okay so   once you have this what is the next again we have  this C so we go to weather. Razer and we have this   class injected that service injected so in here  is so going to do when the page initializes we   don't want to delay any task you want to say um  this weather forecast so this forecast equal to   await account service dot get with forecast isn't  it yes very simple one so that's what we are doing   and you know what this can be in a in this form  so control KD let's save that and let's see so   if I run this this is going to work but they  don't have you have any button to navigate to   but as soon as you try to navigate to this weather  we're going to have access to this let's wait and see so you can see there's no button here  because you're not authorized now let's   click on this and I'm going to say weather  now see loading because we have the weather   in here because this we this this call is  made while the authenticated okay let's try   to authenticate this and see so have the same  user One log in and we must see that guy here   yes so see we have it have you found it that's  right so if I click on this I'm still getting it   okay so this what we're going to do we go to  the API from this controller and now here we   can from this we can allow Anonymous so anybody  can have access to this the same method applies   to this because when logging in we don't need  anything but as soon as we get to this weather   you must be authorized right if authorized  you can never have access to this trust me   let's try that and see so from the controller  endpoint from the API endpoint you're going to   test this and from our app you're going to test  this whilst you're not logged in yet so let's see so let's navigate to the Swagger and here  it should give us 401 soon as we try to access   this 401 meaning unauthorized let's see yes 401  that's unauthorized and there is this a 41 okay   now let's see let's try to navigate to the same  page from the app session the front end and maybe   you want to pack the back door back door let's  pass this WEA forecast and you can see we have   it here 401 have you found it yes response status  code does not indicate success 401 and that means   unauthorized so we can never have access to  unless we authenticated but trust me see if   I log in here and I click on login although I am  logged in yes we wait for it to get loaded yeah we   are logged in click on WEA forecast and we still  have it do you know the reason why okay so don't   be surprised because we have not added the header  the the token to the header of the ntp client that   the reason why we have the so quickly we can do  that very simple way remember that here before we   call this we call no no not here I don't want to  confuse you okay not here forget about this let's   go to the account service you can see we're using  HTTP client here right so before we do that we're   going to say that HTTP client dot uh um default  header do authorization is equal to you're going   to have system.net dot so new oh it is not coming  okay yes system. net. header then in here we need   to we need to specify let me actually make it  in this form now if I open the first one that   supposed to handle is the scheme and you need a  scheme that is a bearer and now the parameter is   what so we want to add which one do you know that  is a constant constant dot T token but before we   do this actually don't you think we have to check  so if string or if constant do GWT token is equal   to this then return so do not call it this API  this end point at all is going to return it but   if not so return this will be no yes okay so  return no but in case it is not that is where   we call this now let's see here click on reload  this page and now let's check it out now this is   ready so let's log in loging in here whoa yeah  it is it is spark so we log in here and let's   wait and see for us to get this guy okay so right  click and go to inspect but this since is a server   you're not going to see the call that's going to  make in here click on okay let's try and see I'm   going to CL this click oh yeah it's still here  see what it's doing I'm going to clear again is   it coming okay so click on this weather and now  okay so we still have this for authorized let's   see the call that is making there is the call  do you have any header attached okay so we have   the snow header we just making a call let's try  this again so get this weather weather forecast   we are not getting 10 days we have the cook  keie that's what we want okay so let's let's   see this what we're going to do we can just put  a break point here okay so let's see before we   do that let's put a breako here then let's put  a break point here and I'm here now let's go   to the page and I click on weather you see that  this is not even called at all because weather   Raz it is just streaming and let's check  it out from this calling of this from the Navar okay so let's see when we navigate to this  page okay so let's see we making a call when the   page initializes we want to call this ass say get  weather forecast and let's try this [Music] again   click on this it gets hits so let's say we have  our HTP client that is 7255 there's a header so   for the header do we have have authentic  authorization so this is no oh okay so it   means it is not working now let's see so if I  put breakpoint to the account service here oh   see what see I know I know you've done the right  thing right there is a register you want to call   the weather forecast and see what we've done  oh okay so no problem you can just move this   very simple way cut this like that and now where  we have the weather forecast this supposed to be   you must P this as a method okay down on top here  let's past this then we say return I think I just   hit on this no edit code so here you're going to  say return a wage HB client. getet async and Etc   yes so here this going to work let's save this  let's reload this again and now let's check it out okay so let's log in again and I'm sure by  this time around this must work let's see so once   we log in okay so get weather forecast if I click  on this maybe I'm Network tab I'm going to click   on weather and you can see we have it you see so  do we have the token here but we not having the   call the call is not shown yes since the server  is call isn't shown but you see we have this here   right so it means that the token has been added  to the header if you want to try that let's see   let's put a break point in there let's go to  the account service now here I'm going to put   a breakpoint right let's go to the page let me  try to reload this and now let's see the break   point going to be hit now it is hit click on this  HB client and I check it up see we have the header   and that has added in here so the Cod that's going  to make this header has been appended up to the   expired date do you remember two days so we still  have a lot of days to do it yeah we are going to   look at how to implement Ro base authorization and  refresh token support so let's first look at how   to implement refresh token then we talk about how  to also add row authorization you know when using   JWT authentication the server becomes stateless  what do I mean by that it means that it doesn't   store any information related to the the client  or the user when the user Make a request all the   necessary information that needed to identify  or process a request of that client has to be   included and it must be found in the token that  is the reason why we're going to use a JWT token   so the token here that we created earlier on  contains the username and now the user email   these are the claims right in this video we also  going to add row as well I'm going to authenticate   the user based on the row in the client section  that's a component we can also do same in the   API section as well to make it secure so the very  first thing they're going to do here is you know   we going to post the token to the server anytime  the to token expir you know the token contains or   the claims we don't want to store um client claims  in a database you don't want to waste our database   like that okay because everything is found inside  the token so when we get a token we can extract   these claimes from it and I'll use these claims  to regenerate another token and I'll send to the   client that is what we are doing you know there  are other ways of making this happen but in this   case we want to extract the claims from the token  there's asire token and now based on these claims   you're going to generate a new token and I'll send  it or give it to the client for the client to add   it to an HTTP header anytime that you want  to make request to our server I believe this   is clear are you sure okay so for us to do that  since um sending or communicating from a client   to the server we want to actually make it as a  post request Okay so let's create a model which   is going to handle the Spire token so keep it in  mind this model we going to create here is going   to handle as what an asire token so I'm going to  close this up then we go to our solution now in   here can see we have a dtoo so let's create one  class here to handle that and you can give it any   name that you like if it suits with a contest V  that you're doing you can make that work so here   let me name it as maybe user session well so in  that we can have one property and with this let   me increase here it's going to be what JWT token  so this the property that we have so this going   to handle the Spy token you can also name this  as spy JWT token whatever it's still going to   work okay so now let's save this now let's go to  our solution you can see we created our repo which   compris of our interface and implementation which  is the data assess layer which get connected to a   database and make some queres and Etc if you've  seen you go to the repost folder we have this   interface I account and the account repository  from the interface we want to add one interface   here and that is what we're going to be using  to make a call or we're going to call to get   at the refresh token so here you know when you  log in this login response here if I peep this   it has some properties that I'm going to use to  populate that is a flag we have message we have   the token in here okay so when we call refresh  token we also going to return flag you to return   message maybe when you have any supplementary  message you want to return that and we need the   most important thing here is the JWT token okay  so we're going to do same here but since you're   not going to have any access to database we are  not using the task okay it is not in connection   with database here we have the system to generate  the token so we don't have to get connected to   database and do anything and um take note we are  not also storing this token in the database all   right because the reason why we are not storing  here is I know maybe you be asking this question   the reason why we are not storing this here is  the token compris of all the information that   we need the server needs to authenticate that user  so we need not to store the same information again   so we can just cross check no we can check it  based on the token we we are going to receive   it so we don't have to do duplication of data we  don't have to put it in keep it and I'll be going   through in that again but well if you want to do  it you can go ahead and also create a table to   handle a token or the token that you're going to  um create but take note don't do that okay don't   waste your server or don't waste your space okay  so once you have this let's save let's go to the   implementation and when go to the account we have  to implement this interface so control period we   can implement the interface in here okay so  that's the interface we have the definition   that we're going to write some logic in here  to get us the token you know we are going to   now this model here contains the GWT token so how  would we receive here we're going to make a post   request isn't it now for example let's say we have  the token at hand what can we do we're going to   extract the claims from the token isn't it and do  you have a mechanism to extract claims from token   yes we do if you've watched the previous video we  created one method or one class to handle that so   this what we're going to do since we have that  class we don't want to copy and paste it in here   we want to um follow a drive principle do not  repeat yourself so the best thing to do here   is to create it as a class then we can register  it to create dependency injection or we cannot   even dependenc injection we can just keep it in  a static class then we can now make it referred   or we can reference it in here and now use it  very small class so you can actually do that so   let's quickly go to maybe in our constants you  know we have a constant folder created where is   it yes who I can't find mine have you found yours  so we have it D2 a constant we have up State yeah   so that's our state so from this state we have  this constant right so you want to right click   this then create let's create a class and I name  it as decrypt GWT token service so this service is   going to be responsible for doing that okay go to  custom All State provider and now there's a class   I hope you've seen this we're going to move this  class from here cut it straight away and cut it   and don't throw it away please hold it on so save  this go to the service in here then paste this up   right this must be public as you know since you  want to have access to it globally uh we want to   do that and here let's make it a static so that  it instance will be created once and we can use   for application so oh he might public see public  as well all right so we have this custom um claims   going to return return a custom claims which has  if I Pip this it comprise of the name the email   right so see it has the name and on the email  later on we're going to add the road to this but   for now let's maintain what we have in here now  we're going to check if the token here is null   we want to return but in case it is and we know it  will never return null because here it is computer   to computer communication there's no human being  involvement here all right so here we're going   to take the token and I'm going to extract the  name and the email and I return to this uh return   type right so once you have this let's go to the  customer state by make sure you save this customiz   it and you're going to have an error here isn't it  yes so here I'm going to say that the cryp token   service I can just copy this then in here let me  paste it and I add a service to it then dot s is   a static we can have this method in here control  period whoa you're not having token service oh   this one be JWT so JWT service yeah that's fine we  got it now let's go in and replace it with all the   method that has this now this can be see this can  be void so no async in here can have a void method   and with this we can Implement dot that's fine  set what again yes so we are done with this so   let's go in there and I use the same class the  same static class in the controller this is a   controller that is the implementation of the repo  okay so we going to first do some small magic in   here to get this token created what are we doing  see what we doing we going to start create this   variable as an instance of this custom user and  you can see the cryp token WT service. de equp   token then you passing the token in here isn't it  good aside from that we get a new token then call   this new token and um prepare this because you  know this token has to do with what application   user check you could say we need an application  user and that's what we also passing in here now   this token here generate token that is a method  where is it there is it you know have you seen   the payload here so we need an app user and we  have to specify that for now we are not adding   row so we come back to the row later on let me  just clear this off we have only two properties   in here name and our email Isn't it good so this  small method is going to generate a token for us   we are not storing anything in the database  because anytime there's a request in there   we can make a check and see the kind of person  the request is right we can do that that from   solution you go to ab. Json and we can do that  by the help of this key so there a private key   that you should never give to anybody even when  you're dying don't give it to anybody okay so this   key is What going to use to ENC a token and that  is what going to use to decrypt and I'll check   or verify so our token is secured all right good  then we have to get claims from this and now set   claims this you know oh we're not talking about  this you're talking about the account repo so we   return this as new token then we passing the new  token from this gener token class Cod very simple   one once you have this let's implement this in  that's a account controller let's have this set   in there so what what do you do you go to solution  then find out the controller folder and there's a   controller called called account we created this  in the previous video so controller then account   controller then in here we are going to create  another one so let's put another one here you   see so you put this here now remember that this is  going to be anonymous because if you make this an   authorized it means that before you can access to  this method you must have an active or unexpired   token we call this when the token a spite right  so it's an opposite way so we have to make it an   anonymous so that everybody can have access to but  it's not going to be accessed by humans through a   call Api call by the system that's going to call  this end point okay we have our weather in here   and that is it okay so when we save this let's  try to test this out in the controller then we   talk about how to create service and I consume  this in the client I I said the client talking   about the component the r component I believe this  is good isn't it very simple let's run this and see so the app is ready but we want to access  the AP the Swagger so this what we need we have   you see we have a refresh token and that's  what you see in here but if you click on   this the payload needs a token we not having  the token so if I pass in anything see and I   click on execute is this the token let's find  out and see the response of the system so you   can see it is still loading mean it tells you  that there's an issue in here let's go in there   and check it out so if I go to the app yes  you see we have this token in here once it   tries to read it tells you that the token JWT  it is not well formed this is an exception you   see so we can even handle this we try catch  block maybe invalid token can do that isn't   it good you see so that's what we what we  want to do so here we let's have a TR catch block so instead of waiting for the app to  get it own message you want to customize   this message isn't it so try catch then  in this try cat we want to return this you   know the custom um this to maybe we can just  through an exception or this you can return now you see okay so when you have any issue  here we try to catch it and I return now it   means it couldn't form you couldn't decrypt  the token and it tells you that you're going   to have an error here let me save this up again  and now let's try to run this and I'll see if   we going to have for f output than let getting  this what we got earlier on okay so let's Che   it up from the refresh token if I click on try  this out I can pass in this or let's say this   is a token so train token that has been added  in here click on execute let's assume this a   token and let's see what going to happen so  click on this and I see the response it's   also incorrect what token now you don't have  any exeption again we've handed exception and   incorrect token but do you have any idea what I  did for us to get this can you do it okay let's   see now it's very simple you know from here we  call this we us try and catch to handle this   and return null so we check from the call from  the control not from the controller is it from   the controller no it is not from the service  that's an account inter U implementation we   check if it is null meaning when it catches  the exception is going to return n so we're   checking if it is n then return inquir token  in case it is it isn't then we can now go ahead   and I'll do this magic in here okay so let's  say this we're going to pass in the correct   token and now let's see if we going to generate  a new token for us and we going to check to see   the claims that we have if the new token going  generated we're going to also check the claims as well so let's see if this open up we can now  check all right so we have it it's set here   as you can see incor token now we going to log  in log user in use that example and I click on execute now we wait so here we can going to  just copy this token and now put it a refresh   token we did not Implement a mechanism where is  going to check Che is the token coming in here   is it expired or not okay we are not checking  because this system is going to be handled by   user anytime we have 401 that is where you  want to call this so when we have a status   code of 401 from an API call automatically  it tells you that the token has expire and   that exactly when we want to call this if you  are to implement it from an API endpoint like   this then we should have created and check if  the token has expired or Not by saying is going   to be expired you don't to do it again  you don't do it anymore so because it's   going to be expired and it it costs when the  token expired okay this our token let's grab this so now let's go to JWT doio so we can decp  the token and now see the claims okay so let's   clear this let's paste our token in here and  I check it out the name is what string right   check here this is expired date it tells you  that it Sunday January 21st 2024 at 1715 GMT   that expired date this is a issue 7255 that's  a port as you can see from here 7255 and we   have the same for the audience isn't it good now  you can see we have the claims for we have name   in here and we have the email address that the  second one and email address in here isn't it   so we're going to extract this to generate a new  token for us now let's go to the same controller   we have this copied we can just close this let's  go to refresh token let's paste this token in here   then paste like this then click on execute now  check this end with j0 now check the new one has   been created it ends with juk ke isn't it let's  grab this also copy this go to the app now let's   clear this this end j0 the new one ends with J UK  K see we P this one J now check it out the same   email the same string now check the expir date  you can see the same Sunday 2 first by this time   right 17 20 you see so 20 and 04 so here we are  adding the is it the the expired date is what we   can actually check for the expired date in here  from this account you know where we generate the   token generate token and in here you can see  add two days okay so when you call this it's   going to add two days to it to the current day and  that's going to be the expired date isn't it okay   now let's Che it up and see if the expired date  corresponds with what we're going to create now   so let's say this going to for two days and that's  going to be be 21st isn't it so when check the be   21st um January 21st and now if I today's date is  19th so 19 + 2 is going to be what 21st isn't it   yes so that is it now you see we have a date also  working so see we have the same claims and and   being set up in here and if the token are expired  this expire could should have been or could have   been um in um increased to two days by saying it  is the same day that I am calling this we have the   same two days added that's fine so this is working  perfectly okay so we have new token then how can   we consume this in the client service so we can um  get this token remove the old one and I'll append   this new token to the header let's have a look  on how to handle that as well so let's close this up okay now we can clear all this so save then let's go to solution  we go to the service that we created earlier on so   from the services folder we have the interface so  I account service we're going to make a request to   um an API so we need refresh token request and  this going to be an interface that we need to   create maybe let's put it in between so we have a  task now send is going to use an HTTP client that   is why we're going to make this as a task because  going to make a call to an API aside from having   this we pass in a user sessioning model and  as you know we did this earlier on close this   then I'll save that not close save it I go to  the interface for the account service and you   know what you have to implement this I believe  you've done it already isn't it or you're doing   it now then do it as I do so there is a refresh  token method and I in here we're going to make   a call to an endpoint okay and at endpoint the  controll that we created was account controller   so as you can see from this you have to make a  point uh make make a call to this endpoint as   you can see from here okay so we can have a copy  of this and I'll paste it in here so can see we   have post as Json a sync we passing our base  URL and SL refresh token then we pass in our   model that's this model coming in right this  must be an async then we read from the login   response and I return this this is all that we  need now once you're done with this what can   we do again let's say when we make a call to  this a token has expired how can we get this   refresh token and I'll assign it to the header  before we make another another call let's have   a look on that but for for now let's let's  see good solution then we go to our account repo okay so in here from the token or the token   generation we don't want to say  add two this maybe we can just add minute so add minute and you want to say maybe  10 or 15 or 20 or Etc all right so we can make   it five or two okay now let's save this so  anytime my token is been generated it's going   to beend what 2 minutes and that going to be the  expired date fine so after 2 minutes exceeds the   token has expired and if you want to make a  call with it you can do it but for now let's   see let's go to the account service and you know  what you check from the weather forecast it adds   the token to the header then it makes a call with  it isn't it now when make a call with it in here   and it returns 401 as an authorized it tells you  that token has now expired in this case what can   we do when we have another method do we have to  copy add the header again then be call repeating   ourselves no we want to follow the dry principle  we don't want to repeat oursel all the time so   can we have one generic class that we can use to  append header to the to the Token no I token to   the header of the client then we can now make a  call and in case the it Returns the response of   401 as status code can we also have another method  to call a refresh token so we can use this method   in all our call that you're going to be make there  are several ways of doing this one you can create   an HTTP um Handler to handle this or you can  implement this in here if you want to check or   if you want to know how to use the Handler I've  made a video already on that so I'll check that   and I put out the description but for now let's  focus on the the simple way okay that's what you   want to focus now so here we can create a method  since we going to use for only this maybe you can   put it here so we can um Swit it with it well we  have this private void get protected client and   now here we're going to check if constant WT token  is equal to null it means here we want to return   so even when you call this meod going to return  and now if when it returns it tells you that the   HTP client here has no header meaning the token  is null so it has nothing to be appended on okay   but in case we have it has data in there it value  then add it to the header as you can see that's a   beer add it to the HTTP client header in the form  of authorization good and as soon as it does that   you're going to have this client in a header  form so this Cent going to contain a header   that's going to be authorization then you cannot  make a call with this okay aside from that that   when we make a call we want to also check if maybe  the call or the response here it is unauthorized   or it is not authorized so this what we are doing  we're going to pass in an HTTP response message   and that's going to be the instance and I we're  going to check if the status code here it is 401   that is unauthorized you can see from here they  want to return true I also want to return false   we only want to check you want we only want to  call or get a refresh token when the response   status code is 401 only okay so if it is true  it means the code is 41 and it mean the token   has expired then we can call the refresh token  okay then how do we make a call to the refresh   token this is also very simple we are going  to call this refresh token in here so let's   put it down here so we call this refresh token  get refresh token and it's a task and since we   going to communicate with the API we're going to  make it as a task and it should be an async so   see post as async refresh token then we need to  provide the user session and that's what we are   doing here so us session is equal to this D token  here is equal to the constant the token that we   have time from that we're going to read response  and assign the token here to the response token   that's coming from the API very simple one okay  so we have this three method in here how can we   use them since you have only one method that  is using this private token let's try to use   this in there okay so the first of all the first  thing that we're going to do here is we want to   remove this since we are we have checked this and  we have also um added to the header we can use it   so first of all we're going to get the protected  client so get it means it's going to come to this   method check if this is not done return so when  this method executes and now um it could be in   the two way the HTP client could have a token  and it could also have what token so any way   or anyhow is it it's still going to execute that  now in case it has token they're going to use the   token in here and I call this weather in case it  doesn't have token then you're going to tell the   user that there's no token in here and this token  or this API needs to be um called using the token   okay then here after calling this we're going to  check the response is the response we're going   to check if it is equal to unauthorized if it  doesn't have token then you're going to check   to return an authorize isn't it so here the  response in here we're going to check if it   is true meaning it is an authorized then want  to get a refresh token or if a token is added   and I still get a call and I return 40 one we  want to check this going to become what this   will become true and you want to get a refresh  token so call this method now see if I come to   get refresh token it's going to populate this then  send to the API read the response set it again so   now we have this um constant value your property  here value set so when you call this itself again   it's going to call this method again and on this  method also call this method that's the method   and now when it checks in here you're going to  see that the value will be there so it will skip   this and I add to the header it returns up and  I going to make a call since going to have an   active or the current um token this one will have  the unauthorized it's going to be false if it is   false then read respon or read the content and I  return in the form of a list so any time or any   method that you create this is what you need to  call you need to just call this check it up and   call and that is all use this and now you move  forward okay so this method can be used for any   other API call that you're going to be using you  see good so that'sa what we are doing in here all   right so when we save this and what left for us  to do again um okay so let's put a break point so   where is going to make the call we also going to  check this okay then here meaning when the token   expires you're going to call this if you don't  expire then you're going to call this let's say all right so let's log in and see so after logging in we have to see WEA  forecast in here and any time that we click on   it to make a call yes so we have weather forecast  and we have fluger you can see how welcome string   string that's what we use so welcome now this  is a weather forecast so as soon as I click on   this we see that that here a call is been made  now let's click on Contin and let's see yes it's   going to check it is false right so is is it  equal to authorized no it is false then it's   going to return the list of employees no is that  employees the list of weather forecast yes so we   see we have this so it means that the token  here it is added to the header and that's the   reason why we can make a call with this okay if I  click on this again click on the same weather and   let's see is it going to check what is the status  here it is still okay so I'm going to pause this   video so click on continue I'm going to pause  this video and I'll wait for some time then we   come back and I see if there's any response so  we're going to have 401 when the token expires   then we can check if the refresh token will work  so I keep trying you should keep trying yours and   let's see let's see if you're going to hit this  point then we can now quite refresh token and move on hey okay so unfortunately I couldn't click on  that button with you guys because I kept trying   trying trying and I got it so you can see from  this end point you see the stus Cod is 401 and   when it checks here you're going to return through  and if it's true then have to execute this isn't   it now before we go on let's go to the solution  go to the constant here and that is where we have   digit let's put a break point so we can rri the  old value for this token click on Contin and we   are in if I this is the O token so let's grab  this it ends with RM I'm going to open notepad   in here so we can just paste this and I'm cross  SE with the new one which going to be created for   us so I'm going to put it here and I believe you  can see as as as you can see from here isn't it   good is the old one now let's click on Contin  and yes so Contin from here okay so we going   to we've call this method and I Rec calling this  method again from here so this is the point that   it is click on Contin and now let's check it out  so if I click on this you can see now the stus   here is 200 it is set isn't it now let's click on  Contin and we have going to have the the data are   we having okay seems like you're not having the  data from this endpoint isn't it let's check it out oh okay it seems like we have a breakpoint  yeah that's a breakpoint so we have a new token   let's copy this now let's compare with the the  old one that we have and see if they are the   same or not so I'm going to past this here now  with the same Jil let's put a break point and I   can see we have a new token isn't it so this is  a mww RM this is s o n u all right so click on Contin and finally you see we have the data in  here you see that so this means our refresh token   is working we have a new token created in here if  I click on this inspect element from the network   tab you since is a server here you're not going  to see the call is going to be made in here but   trust me the token has been received and it has  been added and that's exactly what we are doing   so you can see from here you can see now it's  skipping all this since you have a new token which   is not aspired yet good so our first token system  is working perfectly yes all right so um the next   one that we're going to do here is what is it  which one we have one left isn't it and that is   a rule base authorization so here I want this to  be accessed only by the Admin if you're logged in   and you are normal user you cannot have access to  this unless the administrator the log out system   is also working and you can see it is logged out  okay so let's have a way to implement this as well so let's close this up and we can stop this  break point because we have achieved the aim of   putting this breakpoint isn't it yes we've done  that okay so so so so yes okay so very small code   all right so that is it let's work on the next one  so before we can do this this what we want to do   you know we don't want to expose our registration  system to the public that any anybody can just   register if you want to do that then you have to  assign the the row automatically in the code but   here let's assume you're creating an system for  a company and it is only administrated who can   add employees they can sign up you and now they  can create a default password for you later on   you can now change the password right and now  during your account creation they assign a ro   to you and that's going to be the default Ro that  going to assign to you could be an admin could be   administrator it could be any um user any Ro at  all that is what you want to use you know there   are several use cases that you can implement it  so here you want to use like a company whereby   the administrator it is creating an employee so  when creating an adding employee you're supposed   to add your name your email address and it may  be going to assign a row to you right you can   decide to also skip the row or you can decide  to also assign a row to you the user as well so   that's what you want to do so before we do that we  need to update the the model then we can perform   database migration to update a table column as  well so check up from the model folder and index   we have an application user so we have password  we want to add another one so let's say this is row okay now once you have the it means that  we have to update our dto as well and that's   going to be the register dto so instead of  this confirm password where we're going to   say row now this row could be null because  it temps could be a noral person by the   Admin doesn't want to assign a row too so  you're going to have a default R now it's   not mandatory to assign a row okay so once  you have this it tells you that you need to   perform database migration so we can update  the r isn't it let's do that before we you   and I we forget it so go to package manager  console and in here we can say that um add migration update table row and let's add a migration since the file has   been created already it's going to run it  and I'll add only the specific column that   we are specified to the account or the  user table then we update it to get it created okay so we have filled let's build  this manually and see the reason why it is filling okay so register D2 does not implement  this confirm password and that's true so here   it is having a row property that that  we need to so we don't want to add any   confirm password because the admin is going to  create a default row default password for the   user so we have this I think everything  is going to be solved so let's build it again and that is it it is built  okay so add migration update table   and this must add the row or the  table row column to the table okay oh I said it row let's update it updated all right so it is done we can just  close this and the next thing that we're going   to do here is we go to the solution then let's  check the interface or the implementation where   we we are creating the token from the token  generation we need to also provide the the ru   as what claims so we can just do it but before  we do that you know the custom where is it this   application is has it isn't it so let's make  a copy here then claim types. row we can get   it from this user type. row okay so we have  this so before or after the creation of the   token you're going to have row also inclusive  all right now we're done we have to save the   row so let's say this is also row and it's  equal to model. row what let's want to do   when preparing the token um the custom save this  this can be found in the custom DWT or the cwt   service L we created you know it's it returns  a custom user claims so from the constant the   cre service it returns this so here we have  to extract the claims or the row so we say   this is row and claim times do what row we can  ex that we have to make this available in this   class so let's go to go to definition and I  in here let's add string you say row and this   equal to null for the startat let's make this s  yes this is set let's go to the custom oate and   here we going to set the claim right so when in  the claim principal we have to also add the row so here we say room you see good so it means  that you have to clear the content and now create   new because when you go to the SQL Server object  Explorer let's have a look on the table so desktop   database and it is what is it in the name DW BL  server DB yeah I think it is this one so from tables it's we must have a user  table okay so there's one if I   click on view data the row column is empty or it's null okay so I'm not sure this one let's  check it out from the upset. Json it is   demo blard server DB so demo blard server  DV this this one so tabled then okay so this one so okay so you have the rule and  nothing is here so let's delete this two records all right so deleted now  anytime that you try to register   is going to be added in here let's run this and see let's register a new user so there is going to  be the name here and I'm going to say this is net code let code Hub V1 that's the version one and  there going to be an admin right we're going to   say admin at admin.com password the string  as you know now the row here I'm going to   say this is admin so click on register and now  this my be registered let's Swit yes success   that's fine let's add another one this is V2  and here it is user here it is an admin one   at admin password is still string and our  row here it is not add rather going to be   user click on register and succeeded so let's  go to the database refresh this and we have to   see the rows and everything here yes we have  it so admin row and the user row you can see   that good so once we are in here we going to  log in and now once you log in it must pick   the row here and I'll try to check it out or um  try to convert this into a token then we can now   go to jw. and I'm trying to check it out before  we do that when you go to the account interface   we getting the claims from here and that's  what you're using to populate or to create   GT token right so you have the row email and  then the name as well okay now let's have a   look so we're going to log in and we're going to  use admin at admin.com right you remember this   there is administrator so click on login now  we have an error here right so let's see the   reason why we having this error from the console  it is saying that there was an handle exception   the current cute this current cute will be  terminated to see this it show this through   in the set then we can Okay so let's see from  the call that is going to make from the login   call where is it so we have this user service  use account service and now here we having the login so there's a login returns this  okay when you go to the login page login components oh I we like not the dto supposed  to be the component and I'm open the dto from   the login page we have we provide this you call  the service in here but I know from this update   iation State we passing in the token isn't it  good now we passing the token we the token must   contain the claims and the claim supposed to  be the name the email and the r let's go to   the custom upate and that is where we call this  update is a token we get the claims from this   token so get claim principal Here and Now from  this we going to decrypt the token and I get the   claims so with this method decrypt token service  we pass you get a token then we we going to get   the claims from here that's going to be the  row after getting the row you know we are not   specifying the row in here so the row is going  to be null in that case going to have an issue   here unless maybe you handle that with try catch  block but since you know what we're doing we can   decide to skip that TR cat and I'm passing um  this in here let's say this and let's reload this and see we going to try this once more before we  log in here ID like us to put a break point so   we can get the token and I'll check from the.  so from the constant you know this going to   handle the token for us constant where is it  solution from here constant that is this one   then let's put a break point so we can retrieve  the token okay now let's go in and check so you   log in admin and at the password for the string  click on login and now this must work so let's see yes so you can see we are hit now I click  on this you see this is a token so let's copy this okay now we have this here we going to remove  all this then with this token we going to to take   this let's go tow. IO and I'll check the claims  in here so we are in and now let's let's paste   the token in here and I'll have a look the row is  what this is the name next code help V1 admin and   I'll check there is an email now check the row  you can see the row here it is admin right so   so this is also working all right now let's click  on Contin we can remove this break point now let's see so you can see that here we are logged in  isn't it now we have admin now we have welcome   so we can just go to weather forecast and we're  going to have the data in here but let's try to   navigate from this you want to show um admin  you only admin can have access to this right   let's do that if I log this out and I log in  again let's admin the admin one this is a user   so string let's log in and you can see this  admin store sees this that is a version two   you see but you can still as a user but you  can still see this so let's handle that here   if this try to make a request how's it going  to work let's go to the service we go to our   control from here solution go to the account  controller can have you found yours there's   mine okay now on top of this weather forecast  here we can specify the rowes here and now this   rowes we say only admin can have access to  so let's save this let's hand this again log   in as and a user we call this end point and  now let's see so we are protecting the back   end but not the front end when we are done with  this we also protect the front end and then the   app becomes what compact isn't it okay so let's  seeit for this to get loaded then we check it out let's log in so remember it's an admin  one admin one as user then let's log in so with this we can go to developer tool  F12 or I click here we go to the inspect   when calling this API in point we not going  to see the network if not could have been   here if I click on this we forecast let me  clear this oh again oh it's a St cam right   okay so so if I click on this weather is  it still there are you coming again okay   hey it's still coming don't mind let's click  on this weather forecast and I can see it is   calling this here going to have an issue here  let's see so fet we have filed let's see can   we have we're not having the end point here  but it is failed if I put a break point here to the account service do you know where account   service is yes so this is  mine if I put a break point here that is to get this then from here  I'm going to put this break point you're   not going to have 401 you're going to be 403  that is forbidden okay now let's have a look   again so I'm going to to navigate to this  component close this up then click on this   again now here click on next and now let's see  it is 43 and that is forbidden have you found   that this means that the person is authenticated  by the person here the person I'm talking about   it is you you are not allowed since you have  a user since you have a ro of a different role   from what this expect this expect was  an admin role all right so now how do   we um introduce an admin Ro to suit this use  case it's very simple one let's continue with this so you know from here we go to our nav  menu and that's where we have our links so   you want to hide this from the user so  if you admin get hidden if you are ad   if you are user gets hidden if your admin  gets shown right so from the authorized   view we can also specify rows here so we are  protecting both the back end and uh the front end then this row we're going to say admin  now let's save this and now let's run this   again so save everything from here now let's  run this so now we've updated the front end   we also have the back end also updated  and now let's see how it's going to be done okay so we going to log in let's see for  the first one admin one as you know for user   isn't it click on log and if I log in I'm not  going to see where forecast because I'm a user   and you can see it let's see you can see I have  already log out right so I can see register log   in home now where is where the forecast it's off  click on log out yes now let's log in again and   in here admin the password is string and I log  in again and I let's see ah we have it is not   beautiful is not nice yes it is you see so if  I click on that forecast oh I have it and it's   working that is it for this video If you haven't  subscribed to this please do so like this video as   well you canot support this by buying as a coffee  and I would love to um I'll love you forever all   right so thank you so much for watching I believe  this content going to help you and I plan to also   come out with ADD GT no authentication using  cookie that's a customized one you're going to   use a individual account you're going to create  your own customized one using identity manager   so you're going to be JW authentication using  um identity manager this we implemented our   own system but the next one we're going to talk  about maybe using the Microsoft identity manager   in there and to I'll show you how to also work  with it in Blizzer server. net 8 which interactive   server random mode thank you for watching and I'm  going to catch you up again till then take care

Channel: Netcode-Hub

Views: 2,992

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, Create, Develop, Design, jwt, JWT, authentication, role-base, authorization, custom auth, Blazor, WebAssembly, user, login, logout, relationships, one-to-many, implementation, controller, generic controller, pdf.excel, role-base authorization, refresh token, complete, combine

Id: lxgSzOw-TUI

Length: 122min 55sec (7375 seconds)

Published: Sun Jan 21 2024