JWT Role-Base Authorization & Refresh Token Support in .NET 8 Blazor Web App with Interactive Server

Hello friends and everyone welcome back to net  code H Channel I am Frederick and I'm happy to   have you here today in this video we are going to  look at how to implement Ro based authorization   and refresh token support in net a Blazer server  with interactive server ROM mode you know I do   offer training session or coaching session to  people who are interested in Blazer and also.net   technologist talking about the Wei Mari and my  blazer hybrid if you're interested the video   description I have an email there you can just  write me through it so in the previous video we   had a look on how to create that controller and  also how to create a service and consume this   controller API end point in the component that  we created and that is the login and the register   component okay so that's what we did so let's  first look at how to implement refresh token then   we talk about how to also add Ro 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 identified 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 we're going  to do here is you know we're going to post the   token to the server anytime the token expired you  know the token contains all 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 claims   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  expire 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 the HTTP hether 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 Spy token so keep it in  mind this mod we going to create here is going   to handle as what an expire token so I'm going  to close this up then we go to our solution now   in here you can see we have a dto 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 content  what the 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 GW  token so this the property that we have so this   going to handle the Spire token you can also name  this as a 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 set layer which get connected   to a database and make some queries and Etc  if you've seen yours go to the repost fold we   have this interface I account and the account  repository from the interface you 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 you have   the token in here okay so when we call refresh  token we also going to return flag 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 storring this token in the database all   right because the reason why we are not staring  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 start the information again so   we can just cross check no we can check it based  on the token we are going to receive 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 let's so create a table   to handle a token or the 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 say save   let's go to the implementation and when you 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 cre it as a class then we can register  it to create dependency injection or we cannot   even dependency 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 we 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 here is our constant we have App 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 JWT 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 past this up   right this must be public as you know since we  want to have access 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 here might public see public  as well all right so we have this custom um claims   going to 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 you're going to add 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 we're 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 customiz state but make sure you save this   custom State 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 who we not having thep token   service oh this one GWT 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 v   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 is it   a controller that is a implementation or 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 got to stock create   this variable as an instance of this custom user  and you can say decrypt token JWT service. decrypt   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 see 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's it you know they have you   seen the payload here so we need an application  user and we have to specify that for now we 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 from solution you   go to ab. Json and we can do that by the help  of this key so this is 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 pass in the new  token from this gener token class Cod very simple   one once you have this let's implement this in  as 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 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 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 expired 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 have I said the client talking about   the component the razor 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 a 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 and   check it out so if I go to the app yes can  see we have this token in here once it tries   to read it tells you that the token GWT it  is not well formed this 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 cat block so instead of waiting for the app to  get it own message you want to customize   this message isn't it so try cat then then  in this TR cat we want to return this you   know they 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 you 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 a f output than let getting this  what we got earlier on okay so let's check 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 tokens or 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 that response it's   also incorrect or token now we don't not have  any exception again we've handed exception and   now 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 very simple you know from here we call  this we used 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 implementation we check if it   is null meaning when it catches the exception  it's going to return null so we're checking if   it is null then return inquiry token in case it  is it isn't then we can now go ahead and now 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 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 be 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 set here as you can   see Inc 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 you're going  to just copy this token and now put it a refresh   token we did not Implement a mechanism where  going to check 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 it automatically  tells you that the token has Aire and that   exactly when we want to call this if you are  to implement there from an API endpoint like   this then we you should have created and  check if the token has expired or not but   since it's going to be expired you don't to do  it again 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 past our token in Here and Now  check it out the name is what string right check   here this is expired date and it tells you that  it is Sunday January 21st 2024 at 17:15 GMT that   expired date this is a isua 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 naming here 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 take this end  with j0 now check the new one has been created it   ends with juk isn't it let's grab this also copy  this go to the app now let's clear this this nj0   the new one ends with J UK K see you P this one  juk K now check it out the same email the same   string now check the expir date you can see the  same Sunday 21st by this time right 1720 you see   so 20 and 04 so here we are adding the is it the  the date is well we can actually check for the   expir 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 we  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 expir 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 21st isn't it  so when check the be 21st um January 21st and I if   today's date is 19th so 19 plus 2 it's going to  be what 21st isn't it yes so that is it now you   see we have our date also working so you see we  have the same claims and and being set up in here   and if the token had expired this expired could  should have have been or could have been um in   um increased to two days by since it is the same  day that I am calling this we have the same two   days added that's fine so this working perfectly  okay so I have new token then how can you 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 need to create  maybe let's put it in between so we have a task   now say 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 sess 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 we  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 in here we're going to make a call to an  endpoint okay and at endpoint the controller   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 Endo as you  can see from here okay so we can have a copy of   this and I'll paste it in here so see we have  post as Json async we passing our base URL and   SL refresh token then we passing our Moto 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 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 make another another   call let's have a look on that but for for now  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 be happen   what 2 minutes and that going to be the expir  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  we make a call with it in here and I 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 you have to copy add the  header again then be call repeating ourselves no   we want to follow the drive principle we don't  want to repeat oursel all the time so can we   have one generic class that we can use to aend  header to the to the token no I been talking to   the header of the client then we can now make a  call and in case the it Returns the response of   41 as status code can we also have another method  to call a refresh token so we can use this method   in all our calls 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 hand 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 you're going to use for only this maybe we   can put it here so we can s it with it well we  have this private void get protected client and   now here we're going to check if constant T token  is equal to null it means here we want to return   so if 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 a t data in there or it t  value then add it to the header as you can see   that's a beer added 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 CL going to contain a header   that's going to be authorization then you can  now make a call with this okay aside from 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 on author as you can see from here then  want to return through I want to return false we   only want to check you we only want to call or get  a refresh token when the respon stus 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 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 should be an async so  can see post as a SN refresh token then we need   to provide the user session and that's what we are  doing here so user session is equal to this 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 these three method in here how can  we use them since we 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  the S 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   execute 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 you to return un authorized  isn't it so here the response in here we're going   to check if it is true meaning it is unauthorized  then you want to get a refresh token or if a token   is added and I still get a call and I returns 41  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   is going to call this method again and this method  is also call this method that's the parent 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 column 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  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 thatly 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 me mean when it   talking expires you're going to call this if you  don't expire then you're going to call this let's see all right so let's log in and see so after logging in we have to see WEA forast  in here and any time that we click on it to make   a call yes so we have weather forecast and  we have flug you can see how welcome string   string that what we used so welcome now this is  a weather forecast so as soon as I click on this   we see that here a call is been made now let's  click on continue and let's see yes it's going   to check it is false right so is is it equal to  another SI no it is FAL then it's going to return   the list of employees there is that employees  the list of wether forecast yes so you 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 it 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'll 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 to 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 Endo you see the status code is 401 and   when it checks here it's going to return two and  if it's through 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   dig let's put a break point so we can R the old  value for this token click on Contin and we are   in if I see this is the old 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 cross 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 continue and yes  so continue from here okay so we going to we've   call this method and I calling this method again  from here so there is the point that is click on   continue and now let's check it out so if I  click on on this you you see now the status   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 we not having the  data from this handpoint isn't it let's check it out oh okay it seems like we have a breako  yeah that's a break point so we have a new   token let's copy this now let's compare with 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  m ww r m this is s o n u all right so click on continue and finally you can 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 here if I click on this inspect element from   the network tab since is a server here you're  not going to see the car 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 expired yet good so our first  token system is working perfectly yes all right   so 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 based authorization so here I  want this to be accessed only by the Admin if you   are 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 your 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 break  point isn't it yes we've done that okay so so so   so yes okay so right some all good all right so  that is it let's work on the next one so before   we can do this this for you want to do you know  we don't want to expose our registration system   to the public that anybody can just register if  you want to do that then you have to assign the   the RO automatically in the code but here let's  assume you're creating a system for a company   and it is only administrat 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 role to you  and that's going to be the default rule 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 role 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 we 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 in that 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 it means that   you have to update our dto as well and that's  going to be the register dto so instead of this   confirm password we're going to say row now  this row could be null because it terms could   be a normal person by the Admin doesn't want  to assign a row to so you're going to have a   default n 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 rle isn't it let's do that before we you and   I we forget get 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 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 D does not implement  this confirm password and that's true so here   it is having a row property 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 soft 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 that we're going to do   here is we go to the solution then let's check  the interface or the implementation where 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 but before we do that you  know the custom where is it this application   is a haset 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 for us to do when preparing the token um   the custom save this this can be found in the  custom DWT or the cwt service that we created   you know 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 R yes this is  set let's go to the custom aate and here we   going to set the claim right so when setting  the claim principal we have to also add the row so here we say row you see good so it means  that we 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 even the name GWT bler  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 what okay so I'm not sure is this  one let's check it out from the upset.   Json it is demo server DB so demo server  D this this one so tabl then okay so this one so can see 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  it's 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 net code Hub V1 that's the version one and  there going to be an admin right you're going to   say add admin at admin.com password is string as  you know and the row here I'm going to say this   is admin so click on register and then this must  be registered let's wait 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 admin  rather going to be user click on register and   succeeded so let's go to the database refresh this  and you have to see the rowes 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 up or um   try to convert this into a token then we can now  go to .io 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 do you remember this this is an  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 C SEC be terminated to see this you show   this through in the upet then we 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  user account service and now here we having the login so this is a login returns this  okay when you go to the login page Log component oh I like not the 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 you know from this update   State we passing in the token isn't it good now  we passing the token we the token must contain   the claims and the CL 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're going to  decrypt the token and I get the claims so with   this method the cryp token service we pass  you get a token then we you're going to get   the claims from here that's is 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 TR catch  block but since you know what we're doing we   can decide to skip that TR catch and I'll passing  um this in here let's save this and let's reload this see we going to try this once more before we  log in in here I like us to put a break point   so we can get the token and I'll check from the  gt. 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 now the password is string  click on login and now this must work so let's see yes so you can see we are H never 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're going to take   this let's go to ww. 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 have V1 admin   and I check there is an email I check the row  you can see the row here it is admin right so   so this 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 and now we have   welcome so we can just go to weather forecast  and we're going to have the data in here but   let 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   the 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 install 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   controller 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 rules we   saying only admin can have access to so let's  save this let's hand this again you log in as   an 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  wait 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   call this API point we not going to see  the network if not could have been here   if I click on this wether forecast let  me clear this oh again oh it's a still   cam right okay so if I click on this s is  it still there are you coming again okay   hey it's still coming don't mind let's cck  on this for that forecast and I can see it   is calling this here going to have an issue  here let's see so fet we have failed let's   see can we have we 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 there 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 41 you're going to be 43 that  is forbidden okay now let's have a look again   so I'm going 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 R 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 get hidden if you admin  get 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 in and if I log in I'm not  going to see what forecast because I'm a user and   you can't see it let's see you can see I have  log out right so I can see reg 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 it's not beautiful   it's 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 is going to help help you and I plan   to also come out with GT no authentication using  cookie as a customized one you're going to use a   individual account you're going to create your  own customized one using identity manager so we   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 to work with  it in blizard server. net8 with 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: 1,995

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

Id: xSCvswBEGdI

Length: 56min 36sec (3396 seconds)

Published: Sat Jan 20 2024