Unlock Security Marvels: .NET Blazor WebAssembly - Auth, Roles, Refresh Tokens! 🚀🔐

Hello friends and everyone you're welcome back to  net Cod Hub channel thank you so much for watching   this video now I made a video on Blizzer web  assembly custom authentication and authorization   and I did not include refresh token so I had a  lot of requests asking me to do that and I'm going   to talk about how to include a refresh token in  custom authentication and authorization in Blazer   web assembly so if you have idea of implementing  um authentication check the time stamp you can   skip to the section of refresh token but I suggest  you watch everything all right now if you haven't   subscribed to the Channel please do so and also  you can um click on the notification icon as   well so as soon as I upload new video you also  get it give me a thumbs up to this video if you   think it's helpful to you check the description  and I'll put the source code of this project to   GitHub so you can just check the description  get a link click on it and you can clone it   from the GitHub and review as well so maybe if  today is the first time of watching this video   you might ask yourself what is actually refresh  token it is simply a mechanism to authenticate   user once and the subsequent once the system get  itself authenticated with the help of the client   browser local storage now as soon token is created  it has LIF span maybe one day two days and when   that day is due the token expires it means that  this token can be used to make a call to our API   therefore the user needs a new token now in order  for user to log in by himself we rather handle it   with the code so as soon as the token expires  we initiate iate it a different call to the   API with the expire token or the refresh token  and now get a new token and assign it to the   header of the request which going to be used by  a client to make a request to an API so that is   it all right I've made this already so let's go  through it quick then we start with the project   so we see from here that we have a database open  I have three database table and that is going to   be the registration token info and this the user  Road registration to handle or registration of   user token info to handle or refresh token token  expired date and the user ID related to that token   when talk about the user row as soon as you create  an account you have a ro name and also the user ID   so you have either administrator or we have um  a normal user you can add a lot of rows too now   with this three table let's try to see if what  they're going to contain when we try to register   or create an account here all right so I'm going  to last so there's a app here now see as soon as   you Line the app and you are not authenticated  you see we have hello guest now let's register   an account here and I try to log in so let's pass  in just any name I'm going to put net code up and   I'll check here for the email address if you start  with an admin automatically it's going to assign   you as an administrator so I'm using an admin and  admin has to register once so let's passing just a   password over here so click on register and now um  vest has been registered you see we have there's a   index over here from the database and let's see  so when you click on login before that when you   go to user row right let's refresh it and you're  going to have um administrator so here you have   row name as user and now the the user ID is four  all right so we have real name as user user ID is   four now let's see from this registration let's  refresh this so you can see we have the name and   the email that we we provided the Tok as for the  token it is not yet generated okay now the next   that we're going to do here is we are going  to login all right so let's go to [Music] to   the same app and the login let's provide the  the name so admin and then the password over here so you click on log in you see we have hello  admin you have this as the the icon that you can   switch to log out now you have info this going  to be assigned as soon as you log in as user   now check this when you come to token info the  token has been generated and I have a new token   over here so this is a refresh token and this is  a token expired date all right now how would you   know this token is working when we check this  let's right click and I go to inspect element   by default this token has to expire within a  minute or so so let's go to network tab let me   expand this so you can see from here have this  drop down and if I click on this my info here   we are getting this request or this response  from the server so you have your name and then   your email sent to you so when we click on this  you can see we have this authorization that's a   header for the bar token we have it set over here  now can see there is the last one is a CI that is   the last token you can see it's over here when  you go to this application you're going to see   this token now this token when it copy this you  put it on a notepad and now check it to work see   we have this is a token and we have the refresh  token so this is the refresh token too so we have   two tokens refresh token and we have the actual  token that's authentication token all right now   let's see so let's see let's try again and check  if the time is up I'm going to click on this again okay so the time is now up let's wait so  I'll just pause for some time to happen then   we're going to click on this again to check if  as soon as um the token expired a fresh token   can take over and make a request to generate a  new token for us all right so um let's check it   now think are min minutes have passed so let's  see now if I click on this um my info let's you   can see we have this um red thing here let's  check it out when we click on that you can see   we have 401 that is unauthorized but as soon as  it checks and it is unauthorized a new call was   made that's a get new token and let's see this  is the old token the old token was the CI Now   call was made and now to get a new token and  you can see it was okay it was a post method   and return okay of 200 status code and you  have a new call now let's say the token now   the token is here is PQ right so we see a new  token has now being generated and assigned to   the header of this HTTP client so when we make  a call again now everything works so you see the   same token retained and that is it now when  we check this application and when you grab   this let's get the notepad and now let's spacee  this here if we extract the token from it you   can see here it ends with PQ and now this ends  with um where is it and ends with CI right so   new token has been created and also added to  the header of this HTTP client so let's first   have a look on um how to do this so let's stop  this and let's create a new project so file new project and that is it so we're going to choose  Blazer web assembly and that is this stand alone   so we click on that and now the name name of this  project is going to be demo and demo Blazer was   authentication and authorization with refresh  token right so that will be the name for this   project okay so when you go to get up check the  name up and this is the name that I'm going to   use and the get up okay so let's click on next  and now the free version that we are going to   use here it is 7.0 so we click on that you make  sure we include this Co Hoster to have the the   class Library the server and the client as well so  once you have this project created the next thing   that we're going to do here is we are going  to install packages that's a n get packages   and that is what we're going to use to do this  now what this I'm going to do so we go to the   client we have to install packages to the client  and also to the server right so let me expand it   now this client I'm going to right click and  I go to unload project now in here where we   have this package um item group I'm going to  paste in this so make sure you install these   packages to the client section local storage and  authorization um HTTP features and also you need   um Json and also this Iden mode. token. JWT all  right now the next thing to do here is let's go   to the server to and now with the server we also  have to install some packages to the server as   well now we go back to the server I'm going  to right click on it and I'll go for unload   project and now within this item group to I'm  going to paste in this so also pause the video   and I install these packages as well all right  now save all and I'm going to okay let me do   it again save all solution then right click  on this project reload with dependencies and   I'll do the same thing to the server as well  all right so by doing this these packages are   going to be installed now let's build this  project to restore the packages that we have added all right so you can see that it is  successfully built now the next thing   that we're going to do here is we are going  to create our models and these models you're   going to do them in the shared project  so we go to the shared project and we're   going to create a folder and I'll name it as  model so let's quickly go to that place that   a shared right click on this add the folder  as model and in that that we need to create   login model registration model and also  um register model so let's quickly do that so add new class and now  the name of this class this login model so in that we have this  we do same to the registration   let's create a registration model or  register model so we go to the same place okay then we have um register model so  the reason why we are creating this model is   we're going to add one property such as or  that is the confirm password we don't want   to St confirm password in database  so we need to create that model and   I'll add it so when we want to add to  database we assign it to the register model see we have confirmed password and we  want to remove this this for just um checking   up to see if what the user provided is  what he wants okay now aside from this   let's see let's include the component  model and now the last Model that we   need to create that is a user session  and this what you're going to use to   store the token and the refresh token in the  client browser local storage so we can just   we need just two uh properties in here  that is the token and the refresh token okay after doing this we need to also create model  to the server and now these model are limited to   the server that is what we going to use for the  authentication so we that's why we did not put   the shared project because you're not sharing  between the client it is for only the server   so it is limited now let's create a folder to  the server and then maybe we can name this as authentication and now within this  model Orin this folder we are going   to create token info so let me just add model to this so add a class here and it is token info okay So within this class we have this  ID user ID um the refresh token and also the   token expir we're going to start this  so aside from that we also create Row   for that so we also want to stall this row  so as soon as us a register we have its row assigned and we want to have row name user ID  and now since you're going to start create a   database table we need to provide this ID to it  all right now let's create our Ed dator folder or   that's a context class and now you can do that  in the server by creating a folder in here as data then let's add a new class as app DB  contest now within that class it has inherit   from DB contest class from the ENT framework  call that we installed so you can see it has   added from this EF call that we installed and  these are the tables that we need so we need   three tables the first I'm going to handle the  user basic details second handle the the token   info and the third one going to handle the  row we are not storing the GWT token here   we are storing only the refresh token okay  so that is what we are doing now the next   thing that we're going to do here is we let's  set up a database connection string in the up   setting. Json So within the app setting.  Json we go to solution then upsetting. Jon okay so we have our connection string  over here and the name of the database is   let me add demo DB we have uh this is the  connection or this is the settings that we   need for the token we need the key over here and  we can Generate random keys from this site and   the keys should be at least 16 okay at least  but could be more so and we have the issuer   and and the audience so this is the local host  and the port is 7054 so to get your Port you go   to the server and you go to properties lunch  set check for the https so it the same over   here as 7 54 so you can just maintain grab  this and you can just go in there and I'll   keep it so 7054 just replace it for the issuer  and now the audience okay now once you're done   with this the next thing to do here is to  register the database connection string and   the authenication in the program.cs file okay so  you have to go to the server program CS file here and now before this app. buil here we have to  register a connection string in here that's a   database connection string so let's let's  register that and asside from this you can   see the name we are getting the connection  string from this up with the name default so   you can see when you check here that is a default  connection okay and that's what we are getting if   not you throw this exception and we using this  SQL server and this is a class that we created   okay and the next thing to do here is we have  to add the authentication settings registration   as well so let's add that service and we adding  this authentication Service by adding this GWT   Bearer so we validate issue and the audience  and the lifetime so here to get the issuer you   see here we need to get from the Builder that  configuration the section name is for the GWT   now the key here is the issuer when you check  this you see we have this over here okay and   now we have the the here so there's a one that  you want to refer to okay now once you're done   with this what you need to do here is we have  to add authentication and authorization mware   Pipeline and this can be added here so down  here you add the two check the arrangement well   authentication first then authorization second  okay so we are done with this what we going to do   here is going to update or going to add database  migration but before that let's build a project first so after successfully built this  we're going to do go to package manager   console and click on the tools you get  package manager and I'm going to find   it over there okay so in here you're  going to add- migration and add a name first so before we do this I think we have an  error here let's check here settings so go to   set this server a startup project okay then  let's write it again and let's see so add- migration and the name that I'm  giving is first so let's check it up all right so you can see it is  now done now let's go to update database so this is going to run this um EF  code is going to run this migration file here   to create this table into a database and I create  a database itself so let's wait all right so this   is also done so database is sucessfully created  now you can save everything and maybe you can   close all of these now what we're going to do  here is let's create the controller so we're   going to create an API controller so I click on  the controllers folder and now in here you see   me we have this weather forecast let's change this  to authentication controller and now when it come   in here let's remove all the method here we don't  want them so what we're going to do here is you're   going to create a fat controller you're supposed  to create a service and where by this service or   this repository be called in here but since we  doing just authentication and authorization then   we can just put it in here so let's first create  a Constructor and I inject our configuration and   also um inject our appdb context class so we can  have access to database and also the app setting   Jason file to get the GT settings or the section  that we added aside from this we create um public   endpoint and now this public endpoint the first  one I'm going to talk about here as an account   registration so if I want to register an account  what am I going to do so as you can see from here   the route is it is a post as a verb and the rout  here is register is coming in with a registration   or register model now check if user email contain  admin and admin row is already occupied so you   can see here we create a row right here then we  check if the name of the email starts with admin   then we're going to check to the the user row and  see if admin is found if it is found then you're   going to return admin already registered but in  case it is not then we assign this rule to this   admin else then we're going to assign this  R to user so here we can add else statement here so as soon as your email start with admin  automatically you're going to ass sign admin to   you but it's going to check the admin has  to register once okay so that's the first   registration by the administrator the next  one going to have admin already registered   now here we check if the email is already in the  registration form so after ass signing the row   we're going to check is your email already  in the system if yes return this if no then   we're going to add registration by creating a  new register model we just grab the email the   name and the password and the password we are  going to encrypt this so in the first of the   previous video I made we have to write a code  to encryp this by here we using this a b.net   to encrypt it and now here the algorithm that  it is using is sh 384 okay so that's alth that   it is using if you want to um use a different  algorithm such as the 512 sha1 and I've made a   video on how to use this b.net so I'll put in  the description you can just um click on it to   to check more okay so this what we are doing  over here now you can see from this that we   are saving the row so after saving adding this  registration table we are going to save row so   save the row assigned to data database now this  what we are doing we are creating this user row.   add okay so do add let's add this this supposed  to Authentication model so we are referring to   the model that the user row model that we created  and I we assign the row name to row and then the   user ID to this entity. ID when we when we  save it you can append an entity to it so   we can have access to the current data that has  been assigned to the database and we are going   to retrieve the ID and assign to this model so  we add it and I we save return the ID of the   user to to the person right so you can maybe you  can check up and I'll use this ID ID to display   a message the user or other stuff all right  so this is for the registration now let's see   for the login system if I want to log in what  I'm going to do so let's handle the login as well so for this login you can see I added some  attribute right here allow Anonymous it means   whether you authenticated or not you can still  have access to this okay because this a public   API that anybody can have access to now you can  see it is coming with this payload that's login   then check if this email exist so we check if  this email it is in the database if it is not   then return and let's also check we have to also  check if the password exist yeah so we have this   um that is a we using this the bcrypt so we are  going to verify so to write a whole bunch of code   to verify no this what we are doing using this  package and we verify we provide the raw password   and this is encrypted or the hash password we can  get this hash password from the data that we we   made here the query that we made here we can get  the password in there aside from that in case it   is true this is going to return boan expression  as either true or false in case it is true then   we want to go into that way in case it is false  then you see we are returning null over here now   in case it is true what is the next thing to do we  want to get that user specific row so we can use   to create the token so we get the row stable but  we find the user that can just get the token so   generate token we pass the user email and the the  RO name so these are the claim that we are using   for this token just two claims the email and the  token no the email and the RO name and also after   generating this token we want to also generate a  refresh token because they must go together now   if the user has already refresh token already or  if the user has created or logged in and has um   refresh token already we make a search out of  it in case it is there then you can see we are   going to update it so this I'm going to update  see we assigning this field to the current one   here then we save changes and also assigned the  the expired date and also the same thing applies   to this you can see if it is not it is now then  we create a new you can see we are adding token   info table do add new token info then we populate  the the variables in there the properties in there   refresh token user ID and I'm toking expiring here  we adding one minute and then here we are adding   seconds wow so it's supposed to be the same so  let's make this as one minute for this purpose I   mean it to be okay all right then we save changes  and I return token and Al return the refresh token   so when the user logs in successfully it's  going to return token or the refresh token   and henceforth you can just go ahead and now save  this token and the refresh token into the client   browser local storage all right so we have these  two me generate token and also generate refresh   token let's get them done so in here let's grab  the tokens so down here let's see where the token is okay so let's paste this here now from this  refresh token is just one line of code we are   converting to be 64 string and generating random  numbers of for 64 bytes as you can see from this   and this going to return the token that's a  refresh token now to generate the token you   can see we accepting an email and the RO name we  get the security key from the key that we specify   in the app. Json then we create a credentials by  encrypting this key with this algorithm name and   also we provide our claims remember that we are  providing two claims username as an email and also   the road name and we formulate our token creation  so issuer audience claims and everything we add   expir date as what 10 seconds so our token has to  expire in 10 seconds but I think this is let's add   so here add minutes right so let's say let's add  one minute and now for this refresh token let's   add 2 minutes because here the refresh token  may stay longer the the real token must stay   shorter Okay so there's no instance whereby the  token the the real token will have and a life   span longer than the the refresh token no then  let's so after that going to return as a string   as you can see from here there a return type as  a string all right now once you're done with this   we can create and these are the login and the  registration the public um API endpoint so we   can create private API endpoint now now this  private API endpoint needs an authentication   before you can have access to and we have even  specified using the RO base um method so we can   also assign even not all authenticated users can  have access to the first one here it is get new   token that is when a refresh token is being  made here getting a new token and as you can   see from this attribute allow an inos everybody  can have access to so we are getting we check the   incoming session here this session has to come  in with the token or the refresh token although   the refresh the token is has expired but we  still need over here to get the claims from   that token so we get the token from database and  check if we have it over there in case we have   it then generate new refresh token if the token  uh refresh token date has expired then generate   new token so see we create a Str refresh token  then in case the token expired date is lesser   than today's date then generate a new one okay  then after doing that generate a new token by   extracting the claims from the O token the O  token can be found in the user session so we   are extracting the email and the Rogue remember  that when creating the token we added only two   claims so we extract them here then we call this  generate token passing the claim that we have here   to get up a new um token as a new token here  then update the refresh token in the database   so you can see from here that we want to get the  user from the registration then based on the user   you want to get the token user from the token  info then we want to update the token refresh   token date and also the refresh token itself so  that we keep track of all the tokens all the time   so here user has to have one record of um token a  refresh token which keeps updating itself anytime   a new token is generated or new refresh token is  generated but normally you can actually keep them   so that you can know the number of times user has  um called that method okay but for now this just   a practical aspect too you can also do this or  do that any one that you want you can do it as   well now after that then return a new token so you  can see token is equal to new token refresh token   is equal to new refresh token so this method is  going to be called which going to extract claims   from the token o token which is which as which  is dying dying or which is dead okay then use   the claims to formulate a new token and I return  to the user all right so aside from that we also   create this private API end point2 now here the RO  here must be an admin if you're not admin forget   it and here if you're not user you forget it here  you are return the number of count the user the   number of user that we have in the registration  so we are counting it and now here we are just   returning the in this can be done by the user and  it is accepting an email then make a query from   the registration table get the email information  and return so this what our um API is going to do so now let's work on the client section  and we're going to create a service with   an interface and implementation for that  okay so we can just close this we go to   the solution and now in here we can just  close a server so now we are done with a   server then let's work on the client  section but first of all this we're   going to do we are going to create a folder  in the client and I'm going to name it as CLI services and this folder is Client Services we are   going to create an interface  and implementation class in here so I click add a new class and I make sure  you choose choose an interface and now let's space   this you want to have just four interface two  public method and to private method or protected   methods so this what we have registration  registering account a login aing these   are public anybody can access without even an  authentication header then for protected you need   an authentication header and also you need a ro to  be assigned to you either the user or an admin to   have access to this okay we save this let's create  a class and this is going to be an implementation   so I'm going to grab this then solution right  click on the same folder this time around we   are going for a class and it is client service  so within this client service what are we doing   first here is we're going to create a Constructor  with local storage and our token free HTTP client   instantiated so let's see now you can see here we  created Constructor here for client service we add   our ilocal storage service then we include this  HTTP client over here now this HTTP client here   is header free it has no authorization header on  top so this token or this HTTP client here has no   authorization header okay so this is a free one  that's why I said is token free HTTP client all   right so aside from this let's create our public  method um which do not re reir any token now in   doing so it means we are going to use this HTTP  client so there it we log in a sync we call this   API and that's our route here authentication then  we log in it's a post method so we uh specify or   we add the the payload Here and Now from the  response you can see it is coming in with it's   coming out of for user session so we have to  handle that and a return and also this register   account here turnning an object that is an integer  or a string so that's why we don't want to specify   that so we made an object to handle anything okay  that's for for the public one now let's look at   the protected want so the protected want we need  to create a new HTTP client whereby we can have   access to the token and append the token to the  header okay so we can call so from the protected   method which need were token get user account you  see from here that we are creating an instance of   this secure client then within that client this  client here is coming in with a authorization   header app to okay you make a query or a call from  this then we check if the status code here is not   equal to unauthorized okay then you want to return  the results as soon as it is unauthorized it means   that either one the the header or the token has  expired and in case the token has expired then   this is what you want to do jump to the next one  call in for get new token and now this method call   this method itself again start the response and  I return the response this very simple thing so   there's going to like a um a cyclic event um as  soon as the it is unauthorized it's going to call   this method whereby this method is going to call  the API get a new token and now append the token   to the the header and use that header to call this  service again so in such case a new token will be   appended then we make a call we get a response  and I return the same thing applies to this you   see they all the same thing and that's what we are  doing okay so where from this secure client it's   very simple method that we created let's let's  have a look here so for secure client let's first   look at the general method that we need and that's  where we can have access to the secured client as   well so I'm going to copy this and in here give  a space and I past it here so these are General   method that the they going to be called often so  that going to be called frequently so see this is   a get new token and as you can see we get a token  from the local storage and now we return if they   are now in case it is not we get we push it to the  API then here we are distalizing it you know from   the we want to serialize it in a one string format  so we can store to the local storage so as soon as   you get from the local stor you have to distalize  it into an object so since we have to post an   object to this API we have to visualize it to get  an object okay then the response that is coming in   here we read it and now we have to serialize it  again then remove the old one from the the local   storage and now insert the current one after that  call this method secure client now this is secure   client method as soon as you get it called it's  going to also retrieve the data or the token from   the local storage and now visualize it and also  add extract the token and appen it to the header   as a bearer append it and I return this client so  as soon as you call this it is returning this HTTP   client with um a header or authorization header  added to this HTTP client header okay now this   meod is going toize it and also this meod going  toize it so you see all this meod you can actually   put them in one um um class where you can just  register them and now be using them but you know   I don't want to confuse you let's maintain this  okay now so we are set with this everything is set so the next thing that we're going to  do here is we're going to create a custom   authentication State provider and this provider  going to tell it's going to be call frequently   anytime um you want to do page navigations or  login or log out okay so so it checks if the US   authenticated or not so we do that let's create a  folder here um new add new folder let's give it a   name as authentication and now within that you  know we have to create let's name it as custom   authentication State provider very long but  it's meaningful so custom authentication State   provider and now in here you need to also create  a Constructor so let's generate our Constructor   in and now this class has to inherit from  authentication State provider so we put   it over here and you see we are injecting this  iCal storage now there's a method that we need   to override that is known as get authentication  State a sync so let's overwrite that method and   in doing so we can have this method so this is  a method that we overriding and I can see from   here we get a token from the local storage now  this token is has been um serialized okay so when   we have this token this is what you're doing in  case it is now then return Anonymous you see we   created Anonymous here as a claim identity with no  claim so it means that as soon as we pass in this   Anonymous user is not authenticated so in case the  storage the the token from the local storage is   now to it means user is not authenticated that  return this but in case we find something then   since it is serialized then go in there now deize  it so call this method disiz user this method has   been used in the client service that is why I said  we could create one base class and I be using it   but don't worry we're going to make a copy and  paste and I leave it put it over here then aside   from that we call this get claims from JWT so the  token that we have you want to extract the claims   so we can assign to this claims principle okay  which has the claims identity okay so first of   all we have to disiz it after distalizing get this  you're using the two which means you're making an   explicit what outcomes email and AR R that's  what we are expecting from this claim method   passing this token then aside from that call this  notification State and now passing this set claims   principal it's also a method that we need to do  by providing the email and the R so we're going to   have the is authenticated let's have that method  so after creating this the next one is we have   to update the token anytime um user logs or locks  out so you can see from here it is acception user   session and now in here we create a claims for  principal and in case coming in here in case this   is n then we want to remove it so that is if you  pass it now to this object it means user has now   logged out to remove it from the local storage if  not then also um get get it from the no set it to   the local storage so from here set item is sync  we provide the key and the value weize it and I   we store it over there we can get the claims from  it then we also set the um claim princip part to   this at the end of the day then we going to notify  this as soon as you notify you can see this claim   principle going to handle with the email now the  the row as the claims then it's going to refresh   the application and I make the user authenticated  um um access okay so now we have this so let's go   in there and create this method so so this  I call them General method so the first one   that we need to do is we are going to talk about  the set claims so this is going to set claims it   return the claims what principal we input email  and the r and I can see we are setting it over   here and I return this CLA principle the type  of order that we using isw you can just rename   it to any name that you want the next one that  we are doing here is we want to um get claim   so here here we have to extract the JWT decrypt  it or decode it and now extract the claims from   it so you can see from here we decrypt the the  the token then we extract only the claim section   then we we look to it and then get the rule and  then the user the email okay from here then you   return the email then return the row as well okay  then the next the last one here it is the same   method that we use in the client interface and  now within that it is just decrypt and now seriz   and now disiz this we've done this already that's  why I said you could have put this in one class I   don't worry put it there and let's move on okay  so we also done with this authentication State provider the next thing that we're going to  do here is we have to register the service   that is authentication State provider and also the  interface and the class that we created you have   to put them in the program.cs file so within the  client CS file let's um do that in there so inside   that you first have to include the service let  me just have all these we first have to register this add B local story you have to register  that we have to add the scope of this I   service and so this client service and we  have to include this authentication State   provider then we append our customer that  we created after that add authorization core   okay to to this now this is saying let's  see so I client service service control   period okay let's check it out so we go to  solution and I service for the interface   public interface we have that set the client  service this has to inherit from this I client service okay so that is set and this going to yeah  all set and done the next thing that we're going   to do here is we are going to update the app.  Razer so let's update that and we have to use   the cascading authentication state to to cover it  to contain that and that's we're going to use for   routing so you have to check all the time are you  authenticated if not then we pass it to the right   channel okay so cascading authentication  State then we have to include it over here all right so after doing this let's  see what we need to do next is we are   going to create our registration component  so registration component and you're going   to do that in the pages okay so let's go to  the pages we create a registration component   in there we have our Pages then we even have  counter so let's P let's change it registration   component and now in that we want to use this  so we inject our HTTP client over here and now   even when you check we are injecting this I  client service we don't have to inject this   because we not using we using the service okay  let's save this let's close this and open it again okay so yeah so we have this control period  let's include the reference and as you can see   from this we are creating just a simple form and  with the name email pass and confirm password and   I register so as soon as you register you click  on the button we have to call the service and I   pass in this model and I return the results  to the user you see is very simp present it   we inject this IGS run time then we invoke it to  display and alert to the user now let's work on   the login so the log is a very simple one that we  are going to um create so inside the pages folder   we are also going to let's change this fetch  data to the login and now within this login   we also have to use this let's say this closes  up then open it again so we can have the color   one okay now there's no HTTP client so let's  remove it then control period let's include   the name space for the client service then  authentication state two let's include the   name space as well all right so we have it set  and this is the model as login model and now   within that when this login is clicked we call  this service and as soon as we call this service   and it it Returns the object of user session you  will see here we are creating we are calling the   method in the Au authentication State provider  that we creat that's the customized one then we   append we call the update or state we pass in this  object so this object here it is a user session as   soon as he gets to that um the method he going to  digize it and now insert it into or set it to the   local storage and I navigate to the homepage  and I refresh the app okay that's what we're   going to do now let's go to the main layout now  inside this main layout we are going to um enable   the logout and create a log out function so go to  the shed and our main layout in here let's space   this here so we include a name space of this  I normally have to close this up then re open it all right so we can see from here that  you have the same authentic ation State we   have to also include the name space over  here now this is an authorized view so if   you're authenticated then display your name  and now have a button or have an icon as a   logout in case you are not then display hello  guest okay if we if you click on the log out   here then you want to call this method update  the method passing now you passing now here it   goes to the method and now as soon as it is now  it's going to remove from the local storage and   now return anonymous so you're going to remove  out from the local storage okay now let's see   if this let's close this and reopen it  again and check it out if it is what we want okay so we need to add this name space so we  can have access to this all right now let's say so   let's also go to this nav layout and now within  the nav layout let's make some small changes in   there so solution then this nav layout we are  going to make some changes in here just that we   are using this authorized view to cover the page  so if you're not authorized you see you want to   see register and our login if you authorized  then see this if you're authorized display app   user right and this is going to uh be done by  the administrator so administrator can see this   my info going to be seen by user click on this  make a call here so we are making a service call A   service here get user account and now here to get  info we need to call a service and I'm pass in the   the name the email so in doing so we have to use  this cascading um parameter which from the upate   and then we can have access to the user context  then we can fish out the name from this identity   we call this service and I pass in the get my info  which requires um email over in there all right so   um that is what we need to do so far now we going  to build this project and I run it and test it   out over there and see if everything is working  then we say who we are done with that project so   let's let's build it and see so see everything  and solution explor right click now let's build solution all right so you can see that it   successfully built now let's run this  application and I'll test it out and see all right so you can see that it is now  opening now let's see we set our token to be um 1   minute for for the expired date so let's register  an account in here let's put in there a net code and with this I'm going to say  admin at gmail.com and the password   let's see so click on register okay so  nothing happen let's click and see okay   so nothing still happen let's check  at database and see if that has been saved so SQL server and  database the name is demo DB so tables now let's open the data the registration  table and see so view data let's open the token also view data and let's set up for the  row too view data okay so for the token nothing   happened and registration nothing happened  all right so let's let let's see to register   okay so nothing happens now let's check it up  and see what the issue is so when you press   on F12 and I'll check let's see the route here  from this register the route here it is an API   authentication and register so let's check and  see so you can see we have the authentication   for the controller name but there's no API here so  let's add the API all right so let's refresh this again okay so let's do the  registration again let's see   next code uh one two 3 one two 3 click  on register and now let's wait for the response all right so you can see we have  one now when we check the database uh user   row refresh it going to be assigned as an admin  since we had an admin startat and token info no   nothing because you can see no token now when you  check the registration we have the information   over here with the password encrypted nicely  and email as you can see now let's go in there   and now login so let's try to log in with the  same information now um with email address you   pass the email address and a password one two  three click on login and now let's wait so you   can see we are logged in as can see you can see  an app user and now here we can see an admin at   um email.com so we can just log out here see we  are back let's create another account and let's   use um test and let's use red at gmail so WR at  gmail.com so password the same password now click   on register it must have id2 then let's click  on login so um red then one two three log in   and we see we are now so we see user can have  my information admin can say get user account   right and we can just log in so when we check the  database table to we have the same information and   when you check the row now you can see we have  an admin set and now this is um let's user let's   try to create next admin so let's sign this  out and now which register let's see so this   is TS okay the same test by this time around  it is an admin at gmail right so let's even   admin this and let's see the password to one two  3 one two three so register and I also you admin   already registered so we can use that okay so  now let's log in with the the red one this as   a user so one two three click on login and now  we in here so our token is now activated and   now we have one minute I have um a watch here so  let's see now let's go to let's make it in this form okay now U when you click on my information  see we have my information here let's right click   and I go to inspect element and now where you have  this network tab click on this then in here click   on my info the call is made and you can see from  this call we have the token over here that's a   bar token when you go to the application so when  you go to this application and go to um Loca and   now can see we have this token when you copy this  token and now you open notepad so let's see if I   have notepad now with this notepad and you paste  this here you can see we have the token here this   is a refresh token the token ends with the de you  can see it's over here so it ends with d now when   you check this token from the header Network tab  you see ends with de so that is it okay now don't   save let's wait for almost let's wait for the  one minute to to up then we click on it to see   if the refresh token is going to work as soon  as the state becomes an authorized a new call   will be initialized and we can now generate a  new token for us okay so now let's try uh with   a new request and now if I click on this yeah so  we have it you can see we have the response over   here and I can see here um we had this red now  this red line is saying it is 401 meaning it is   unauthorized as soon as you unauthorized what we  are doing here is we call this method to get a new   token and as you can see there is a new token that  we have and now with this new token we app it to   the header and I can see we can have a new token  here that ends with um X y-1 when you check the   previous one you could see it is different from  it different from this all right so that is it   that is a way out to create a refresh token there  are so many ways of doing that this is just one   another one to is you can also create a custom  um HTTP Handler that can used to intercept all   request and responses then we can append or check  in case it is unauthorized then we also make a   call it's also there so there this one maybe next  time we're going to have time to also go through   the other one as well and maybe similar ones  to thank you so much if you think this video   is helpful to you please give thumbs up because  when you do that it's help the channel a lot thank   you so much in the description and I'll leave  a link to the GitHub so you can just clone the   source code thank you and take care of yourself  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 1,040

Keywords: .NET, Blazor, WebAssembly, Security, Auth, Roles, Refresh, Tokens, Unlock, Marvels, Web, Development, C#, Tutorial, Guide, Step by Step, How to, Learn, Setup, Create, Build, Deploy, Publish, Host, Backend, Frontend, Client, Server, App, Application, Razor, Component, Communication, Data, State, Management, Storage, Sharing, Transfer, Passing, Sending, Receiving, Handling, Manipulating, Updating, Changing, Modifying, Altering, Transforming, Converting, Processing, Accessing, Retrieving, Displaying, Rendering, Showing, Hiding

Id: iHg5jwYkc3E

Length: 60min 10sec (3610 seconds)

Published: Tue Oct 24 2023