Custom JWT Authentication & Authorization in .NET 8 Blazor App with Interactive Server Render Mode

hello everyone welcome back to net code Hub  channel I am Frederick as you know and I'm very   very happy to have you here today in this video  we are going to look at how to create custom JWT   authentication system in Blazer server that is  net 8 using interactive server rendom mode so   before we dive into it this what the system going  to look like we're going to have our own custom   system whereby user can register and also can um  log as soon as the user logs in you have the token   created in the same Blazer whereby you're going to  expose an endpoint to it after that you're going   to consume this endpoint in the various components  and you're going to create a custom authentication   State provider okay so that's exactly what we're  going to do then we consume this and why making   a call maybe we can attach the token to the HTTP  client before we make a call let's have a look so   you can understand this with a partic aspect  iidea of our training session for people who   are interested in Blazer and also.net um API and  Blazer hybrid and Etc so I have an email in the   video description you can just link me up through  it okay so let's see now make sure you have a   visual studio launched and let's go in then and  create project this is going to be net 8 I believe   you aware so click on create new project and I'm  going to select the template for that's the Blazer   web app this one the name is going to be demo  Blazer server GWT authentication let's click   on next and now here we're going to create our  custom authentication system so we don't need any   here right you don't want to select the individual  you want to maintain what we have the the N since   we're going to create our own the server that's  going to be the interactive rendom mode make sure   you choose a server and for the location just  leave it as it is page or Global anyone let's   click on create to get this project created so  the next thing to do after the project creation   is to install our new get packages and that is  what we're going to use to create this talking   about the Adent models and alsoo EF call server  and also tools and other package as well we are   not going to implement identity manager here we're  going to create our own one so we need a mechanism   to encrypt user password by doing so we're going  to install b.n net. nextext that is the package   I'm going to use to encrypt password so let's  install these packages here so this what I'm   going to do since I have the package references  here I'm going to click on this but if you're not   having the reference you can just right click on  the pendencies then go to man new get packages and   I try to um install them one after the another  I'll go to the project itself then I'll unload   this project then the package that I'm going  to install here first let me just have the item group so we need the bc. next net. next WoW  and now this is going to be for the server   so let's have a label here there a server  and now so we need a Swatch back or since   we're going to expose an API so we want to  um get it used we also need system. identity   model. token. JWT s that's we going to use  to create a token aside from that we have to   we also have to use Microsoft identity model.  token so let me also add this here okay after   that we need EF core tools and our package so  EF core SQL server and our tools and the last   one for the server is we need um microsoft.  net called authentication JWT be we need that   as well so once you're done we need to also  include this microsoft. aspet call component.   authorization this going to give us access to  cascading and authentication State provider in   the component that you're going to consume the  token so let's have that here you have a label   known as a client they going to be used by the  server and then this going to be by the client   okay that's it Pages I'm talking about okay all  right so let's save this and I think that's all   that we need to install now maybe later on  in case we need any we come back again and   do that now I'll save this save everything click  go to solution then I click on this and I'll go   to reload project with with dependencies  now the packages are being installed okay   so let you do here is once you have the package  install we quickly have to create our modos and   dtos for the login as for registration so let's  create a folder here and I name it as modos and   also dto so we have our folder so modos or entity  that's fine you can also create another one you a d2os okay so let me make this as small s you  know d2s what data transfer objects okay so for   our models we we only need one model I think so  because since we're going to use for registration   we need only a model now so let's add a class with  to this and the name of this class is going to be   application user in the application user class we  want to have just name email and password maybe   you like to add more properties to this this  what you want to have for now and also let's   go in and create our DTS and now with the D2 we're  going to create a register D2 that's we're going   to use to transport data from the user to this  model okay to access to database so and oh this   application must come to the modos I believe  we've done that okay so you make sure you do   the right thing so this supposed to be modos not  dto so that mod we have it here now I click on   the dto let's add a class and this going to be  register D for the register o we are going to have the following properties we need  an ID and for the so yeah maybe we can   decide maybe ID since I'm not going  to do any update so we can scrap off   the ID so we need the name we need email  address password and our confirm password   right so maybe let's also create the login  dto so when you go to the login D2 right   click on this and add a new class to this  login D and now you know with this we are having we having email and our password isn't  it now when you check the register dto it has   the same email and password so we can remove  this email and password from here and we can   inherit from this login dto inheritance yes we  can do this All right so the next thing that   we're going to do here is after creating this  we need to have a custom user claims these are   the this is the D2 that we're going to use  to contain the token or the claims that we   need we need a username and our user email so  we want to create a specific model to handle   that so let's add that before we forget it so  we say custom user claims and now this just a   record which has only the name and now the email  so this is going to be the claims so we have two   claims here you could add more but for now we  maintain this too we have a name we have an   email and that's we're going to use to populate  or to create or generate the token aside from   that what else can we do again maybe we can  have access to um user session user session   for now we're going to have only one property  in this and now this sess what we're going to   use to maybe well what can we do here for now  let's let's pause user session and let's go in   there and um create our responses so let me create  a folder in here and I we can name this folder as responses so new folder responses and now this  responses we're going to create one class and   this class is going to be custom responses so it's  going to be a class in here custom responses and   now in that custom responses we are going to have  two record I wanted to say two record class two   records okay so we have a flag for the first one  that's going to be for registration and that is   going to be for login the here is the login has a  token but the registration has no token property   okay I think our models and our NT dto are done  let's go in and create our repo so this rep going   to consist of our interface and an implementation  so let's create a folder to also handle this I'm going to say repost has a respository  maybe you can just um add the whole name okay   shortcut is the key okay so I click on the  repost let's add an interface to this and   defin we're going to have two interfaces so  click on the interface the name is going to   be I account you can add you can add another  name okay you can change the name so here we   have the registration response and you can see we  have the login response and each has this payload   now we need to create the implementation  and that's going to be an account isn't it   so let's create a class and I name it as an  account in the repost add new class and now   here we say an account and as usual since going  have an interface and you have this you're going   to implement the interface so control k then  implement this interface we're going to create   Constructor and I inject the appdb contest  we going to have access to our database but   you know we have not created this rdb content  so how come can we inject it so let's do that right click let's click or let's add a new  folder and now this is going to be maybe   data in that let's create this appdb contest  class in it so appdb contest class and now   once you have this class what is the first  thing that you're going to do since we have   our DV contest or EF installed we can now inherit  from this DB contest this is coming from the ENT   framework call the reason we are not getting  this is I can see we have some issue here so   let's build this application so we can update our  dependencies here to get this package installed completely so I click on this go to build project  and you're going to restore packages as you can   see down here we have a n get packages being  restored now they are done so if I click on   period still it is not I have to have access to to  the ENT framework call let's see okay DB contest   is not it's missing yes I know all right so now  it is done you can see now we have access to this   and we have to create a Constructor and inject  this which inherit from the base aside from that   let's create a table to handle this the data the  record of um people who going to register so once   you have this ad DB is ready we can go back to  our repo account repo and now here control period   we can inject it here that's fine configuration  is what we're going to use to get access to our   audience and our token no our audience and the  issue and the key but we have not set that up so   we can do that from the up setting. Json and now  in that we can just include this in there quickly   Let's do an up setting Json I believe you found  yours now maybe down here we can add this session   okay so appear twice remove one so we have JWT  you see that is a section name and we have um   this is a key we have issuer audience and now we  have the key itself okay so this must be a random   numbers or random strings okay less than minimum  is 16 okay so be maximum do I know the maximum   okay so minimum is 16 so you can actually add a  lot in here now here we need an a port so to get   a port solution you go to the properties in here  line settings and you can see from the https you   can see have 7255 can just grab this you come here  and this is going to be the port you going to also   have the same thing for the audience since you're  going to have the same API in here we're going to   consume by ourself okay so we do that all right so  let's create our connection string on top here so   we say it is is a local this is database name I'm  going to say it is demo server DB then I have this   transet connection and certificate set it through  okay so once you have this set let's go back to   the what is that is it not the interface no that  is a repository the account repository so in here   we going to register so to register first of all  we can just maybe find user that is the best thing   to do first want check which Des is available we  have to create a method this must be an async as   you know since you have a task it must be an  async and control period I can just simplify   the name I can remove everything now from this you  must create a method known as get user and passing   the email this method is going to put down here  so we can call it anytime anywhere not anywhere   within the scope okay so here we are saying  that first of default get user first default   which has the same email as what we are passing  through so get the email if it is not equal to   null it means us already exist we won't allow the  person to create an account but in case they use   it is null it means the new person and then we  can enable this person or this guy to create a   new account so this is what you're doing we are  going to this a verified password this supposed   to be and create password for us isn't it so we  have to add this this must come in the login to   verify password so appb content. users so the  table we're going to add a new application user   and now we going to Pate this three properties  name email and password now for the password you   see we encrypting the password we hashing it then  restore after that we need to uh save changes and   uh return this is very simple thing that we are  doing so here we I wait updb contest. save changes   and you know what you're doing supposed to should  come after this control KD and our this method as   you can see from yes you come here I don't want  to mess up okay so this is how supposed to be   all right so we save changes and I return this  through and success all right so we have this   set now for the login to what can we do for the  login we are also going to find the same user so   let's do it here so you know we create one method  and we using it here and there right this must be   an async as well since you have a task then we  now going to go and return response we're going   to return login or registration response this  is going to be login response right so in here   we can just um use this lugin response the reason  why this is set off and we don't have any error   here is when you check the responses default you  have the default value so if if you don't set the   value it's going to the default one now in case  it is found the email is found in there we want   to verify and see if the password are also same  now if the password do match we want to generate   token so we call this it's going to be a string  form generate token and that's going to return   the token to the user so let's have a method to  implement this token generation and it is just   simple do I say simple Yes simple method to handle  the token generation let me put it down here so   generate token then we pass in this application  user and that's exactly what we are getting from   this find user we can get this from here so you  pass to this method and that's the method that we   are calling in here now when it come here we can  see we are getting the key and we are getting the   issue and at the audience we set our claim so we  need we don't need even an ID here you don't want   to use an ID for the claim you want to use only  the name and the email okay this going to be for   the claims so from that we have the expired date  for the tokens could supposed to be we're pushing   up to two days okay that's my customized one you  can just set us to one hour one minute or even   some seconds all right then we going to write  a token in the form of a string and our return   because you know the return type here the string  so we can catch it in here with a string as you   can see from this and when it come you can see I  response and you can see here is a string as you   can see from here all right so that's what we're  going to do to create our token you see this is   very simple isn't it and I believe we know how to  do this right that's fine now the next thing to do   here is we have to set up this to have access to  controller that's an API so let's do that we go   to solution Explorer go to the program. Cs file  first of all we need to add controller so build   services. add controllers aside from from that  the next thing that we need to do here is we need   to add the swaga Gen and specify in some option  and this going be my API so you can just choose   any any name that you want the tit and give it it  any version your make sure the version of this and   this version is the same okay then aside from that  what else can you do you let's actually register   our DB context we doing it together we don't want  to do this and do that so we register database   connection string in here and aside from that  we we have to also register our JWT service so   we can have the token generated as soon as we try  to login so as you can see we add authentication   then we specifying this aside from that you need  to add our DWT be and after adding the beer we   need to specify some options in it you can decide  to skip this option but they are very important   okay so don't skip so we need to add you see addt  be and these are the options we have date issuer   the audience and remember that we've said this  in the config file so you can see we are getting   them here Val issuer VI audience because we have  a configuration then there's a session name and   that is a key so we want to retrieve eight value  section name key and eight value so the value is   why you want to store it here there is a key we  also want to use it and here has a isua signing   key all right so once you're done you know the  service that we just created the repo and the   interface no the repo in interface the rep compris  of the interface and now the implementation we   need to create di that's dependency injection  so you can a copy of this and attach it to this   anywhere that you call this interface it must go  in with the um repository okay aside from this you   know we need to set up what again for now what  can we do for now for now for now yes let's try   to include the midw pipeline for this swager so we  can just navigate down here where have this app do   map then in here let's map the Swagger and the  swager UI and now in here you can see your API   name V1 so just add your API name I intentially  made this so you can understand what actually   meaning so that is what that need to do to set  up a controller or make this available or yes   available to open AI That's Swagger once we have  this set what we need to do here is to perform   database migration but first of all let's build it  and see if everything is working as expected then   we perform migration yes as you can see we it is  suceeded so let's add migration you go to package   manager console from the tool session if you're  not having this tools then M you get packages   and I click on this package manager console so  add migration and I'm going to say this is is first now let's update database so update database so this is done as you can see it  is done from this we have a table created   only I think only one table cuz that's what we  specified okay so once you have this what the   next thing to do we need to create a controller  so we can display this endpoint that we have as   a repo in it so in here let's go to the solution  I click on the project then add a new folder to this and the name is going to be controllers then   inside this controller we need to or  we're going to create One controller class then here the name of it going to be an  account controller so this is not what you want   one right so it's supposed to be controller so  add controller and now this must be an API mty1   and then going to be account controller and you  know we have to also create um constractor and   then inject our the repo that we created that  is the account service not the account service   this must be an account triple yeah so we have  an i account and I is an account service so so   maybe I can decide to change this to account  report because you know we going to also create   a service here and I don't want to confuse  you guys all right so let's make this account repo then control K we can include this now here   we need for registration so this  is very simple one the endpoint is register and now the next one too we have the  endpoint as login you see very simple one now   this is an account triple no more account service  so you can make it account triple save that so   once you have this set we can run this and see if  it's going to launch to our controller so the app   is ready now let's see so here slash then let's  have Swagger and see if it's going to launch yes   so see we have our register then we have the  login so you can see in our server we having   controller available okay now here this is going  to work let's see if I click on execute this okay   so it is having a response code of what 404 why  is it having 404 we have this password name and   I confirm password execute this okay so let's find  out and see the reason when you go to this a repo   that we have in here and I register a sync and  now when you go to this account repo where is it   have you found yours you go to the accounts and  now with the account that is a register in here   so we inject our abdb contest then we adding this  we save changes and I will return um this response so let's check from this if I click on inspect  and when me check from this session click on   execute and you can see 404 we have from the  header let's see you can see we have this 7255   as a port an API account and I register um but  let's see we have to register the Base address   is this so we have to do that from the program.cs  so let's come to the program CS file and now in   that let's specify the Base address of this and  the Base address we can put it down here and you   know this 7255 isn't it if you're not sure  yourself please go to the line settings now   make sure you do the right thing so https 7255  grab this go to the program and now replace it   with this one save this so after doing this we  have to map the controller I think it's very   important and also we have to use authentication  and authorization so let's put it down here you   see so map controllers then use authentication  and use authorization all right so now let's see so let's navigate to the swaga okay so let's try to register an  account there and see what we're going to have so these are the credential that we  are passing in the detail that we passing   in email password name and I confirm mail confirm  email yeah can see we have suet so the account is   created now let's log in and see so from login  let's even to have access to our token okay so   user already asist wow are you creating another  account are logging in so why is you supposed to   ask us already exist okay so maybe there's an  error in there I believe you saw that isn't it   let's quickly check it out so from this account  you know from the login let's check from the log   in there is a login so find user if user is  not equal to n then user already exist that's   Lin and I think if user is now user is okay  so it is supposed to be if us equal to null   it means user is not found right so we can say  user not found not already exist because you   want the user to be in in a database you want it  to be to exist yeah so we have if it is equal to   n that is where you want to do that let's do it  again and see is already not found these are not found okay so swagar swaga and now let's log in try this out  execute and you must have the token here okay so   still loading yeah so you see we have a token  so this is our G token that has been created   for us all right now once you have this token  how can we consume this in the component how   can implement the custom authentication system  and to get this done yes let's have a look on   that now this token comprised of two claims  that is a email and a username remember that   the expir date for this token is two days as  I did it you can make it your own okay so we   have two days for this token so you're going  to going to expire today maybe tomorrow next   okay so let's see from here we go to our app  in there since we have our dis working we can   then close all this close all tabs the next  thing that we're going to do here is we have   to create a service to render this uh repo into  the service that the pages so right click on the project add new folder before  that we have to terminate this and this must be services so in the services  we need to create an i account service it is the same interface that we are creating so in here we're going to say I  account service oh this supposed to be an   interface not a class I believe we made that  correction right good then we going to have   the same thing as we had in the repo interface  so we have I account account service register   and login now the um the implementation going to  differ from what we have already we have account service so let's add a class to this and this how inherit from the interface yes so we need to implement  the interfaces in here and you know   since you're going to make an API call  we need to include an HTTP client then   from the login we can just call the login  using post aing here you're posting to the   login and now for the register you we are  also making a post you see soos to the same   thing but here the the difference here it  is the the route this is an API account   and I log in this one is an API account slash  register okay so we have this set let's save this let's go to program and I'm try  to include or register this in there so it can be found in the solution  Explorer then program we have the   first one is the interface and this going  to be a service so service can be down here these are service I account service  and account service um rippo now aside   from creating a service in here what is the  next thing to do we have to create our custom   upate so let's let's do that solution  let's create a folder and I'll name it   as maybe States or what do you think what  should be the name state will be okay for   me what of you so let's have our custom  atit so in here let's create this class now you know custom oate you  inherit from authentication State provider control period we need  to implement this interface in it and once you have this method um implemented  the next that we going to do here is let's create   an instance of claims principal which has access  to this claims identity and in that we want to   first check we're going to create a constant  class now this constant class is going to handle   the token that you're going to receive from the  call the API call so let's copy this let's go to   the same state folder right click on this let's  add a new class and it's going to be constant   okay so that's the name that I'm giving to mine so  maybe we can decide to also change yours now this   constant has just a single property for now you  could populate this later on but for now we have   only one property as DWT token let's save this  so here this what we're doing this must be an   async I believe you know that now we're checking  if it is null it means user is anonymous there's   no token start so get this user return anonymous  anonymous means not logged in not indicated okay   but what if in case the user is now logged  in not the logged in the user has the token   stored in there then we want to decrypt the token  because the token contains the claims so we want   to decrypt the token in here and if it's equal  to not you want to return this but trust me as   soon as it's not now we not going to decrypt and  get now but still you know for checking sake let's   do that and the next thing that we going to do  here we going to create a claim principal once   you have the token you have the claims um set  you need to once you have the claims retrieve   from the token we need to also set it to the claim  principal after doing that then we call this state   then we pass in the claim that we have retrieved  then with this we are using this try cats Maybe   in case you have any fter error we want to use  the TR card to handle that then so in here we   have this so control KD all right now we have this  so in case everything is working we're going to   return um this with the current claim that we  have we have two method that we need to create   the first method that we need to talk about here  that is the setting of claim principal so let me   put it down here now set claim principal so we  passing this custom user claim do you remember   this method if I peep this it tells you that it  has two properties has the name and the email so   when it receive it from here we are going to set  it to the claim as you can see you have the name   and the email in here and this is the name that  we giving or we adding to our custom or state   okay the next we're going to do here is we going  to decrypt the token and now get access to the CL   CL so the next method here is going to actually  do that as you can see from here we retrieve the   claim or is a payload coming in here we check if  it's not now then we're going to retrieve it get   only the token then read the name and read the  email after that return a claim user claims is   claim user claims custom user claims that it  comprise of the name and now the email okay   so that's what we're doing but in case the user  logs in for the first time what what you want to   do we want to set it up in there so here in case  I log in or I log out you want to call this method   update and I'll set this in here for now we not  going to use local storage for now we are setting   the the value the the token to the constant token  which going to handle that so anytime I want to   make an API call we call this class which has  a token you can retrieve it and now put it to   the header of the ATP client then we can make  a call with it it's very simple one okay then   here we are also decrypting the token and I reset  the same claim okay now the claims that we set in   here we're going to assign as soon as we set the  claim the response going to handle with what claim   principal then we set in here and now we can call  this Au State and pass the claim principle very   simple one else we're going to set this in null  it means we want to clear this as soon as you   clear this you're going to reload this page as  soon as you're loading this page this method is   going to get hit hit now when it get here it's  going to first check if this G token is n then   going to return and anym so this system it's going  still going to work you know okay so we have our   custom um authentication stem created let's go  in there and I register this create di between   this and the custom not the authentication State  provider so we go to program Cs and now done here so you know we have this aate  provider then we have a custom allate provider after doing this we need to use the  cascading aate provider so we can go to the   where is it is it is it is it is it where  is it I think it's found here data we have   our login D2 model St and let's see where  can we have access to our components route   we need an apps. Riser not the apps rather  routes then in here we need to include the   cascading orate so maybe on top here we can  put this cascading aate provider then at the   end we can um close it up in here aside from  that this must be an authorized route view so   authorized route view okay so in here maybe  we can say authorizing what do you want to say so authorizing we can say maybe um please wait okay so we have this set after doing this  let's go to solution then we check our component   our layout you have a nav menu we want to actually  put up maybe two links in here for register and   login so we have login and register and you  you see the reference here is login and our   register which tells you that you need to create  component to handle that isn't it yes so that's   what exactly what we're going to do here I have a  very simple login page which has I put inside the   the pages which has just a form that's an edit  form in here which has this login model and un   valid submit you see login clicked we have just an  email and the password and at the botton type is submit when you check top here it is for render  mode and it is interactive server since it is a   server render mode that Pro that we are creating  we are using okay now where from all this okay   so this this is the name spaces that we knew it I  think this going to be demos um demo Blazer server   authentication I think so or let's take the name  here we need to demo Blazer sert Authentication okay now you go back to the login page  so do we have this you have that this   that yes so we have the services and  that's the folder which comprise our   services we have our dto you know what  it contains responses you know what it   contains States you know what it contains  and this authorization which giving access   to this authentication State provider so to  do this you can just move all this straight   then we can solution let's go to the import  and down here let's space it here okay so all   these have injected and we can use this we  have account service and now we can use this   in here so when you go to our login very  simple one it's not simple yes all these   are going to be solved now yeah so that is it  now l in response control period I think this   should come from Lin response okay so this  also solved and we can move this to the same import I think so this is going to work right  yes it will work so we have this we when when   this button is being called when this method is  being called we can see we call the service in   here you pass in the response you check if it  is through if it is false you want to alert it   but in case it is not then we are going to call  a custom orage in here this is going to be the   instance of the authentication State provider that  we created then in that there's a method known as   update or state we passing the token that we have  retrieved or received from an API aside from that   you navigate to this then we force load the page  so that Au system can work okay that's what we   are doing now with this I think solved let's  run the for the login but here it's going to   log in but we are not able to see unless unless  maybe you have a mechanism to display okay so   maybe we can just navigate to the home let's see  from the Sol let's go to the this a home that's   a homepage isn't it now inside this home maybe we  can have something similar or maybe an authorized   view displayed here so that as soon as we are  loging we can see something all right you want   to see something so let's add it here so can see  we have this context. user identity. name want to   return the name and I say welcome in case you are  not you are not logged in so save this and has it refreshed no unless reload it again so let's see reload it as soon as the page loads you you see you are  not logged in now let's say so if I click on this   login then we use this email at example.com  now there is the string that we use right so   if I click on login let's see the response here  so we wait and see yes so hi string welcome so   you can see we've been able to log in isn't it  yes so we have it in here then if I go to this   our source go to the constant class and now  let's have a break point here all right now   let's say if we try to reload this let's set it  up and see if we can have access to our token so   I'll just try to reload this then let's see  so you can see this is a token everything   have been stored in here so for the use or for  the entire use of this application by the user   this token is going to have the variable this  prop going to have a variable that's going to   be what the token now this value here no is  value isn't it the variable is what you see   here the value it is the token itself so this  variable has it value and this value going to   be stored so anytime I want to make a call we  can call this and I'll get this token in here   isn't that beautiful very simple as well isn't  it yes the next thing I'm going to do here is   what of the ra system can I create a form to do  that I believe you can do it so let's continue   on click on this I'm going to stop this then  I give you 2 minutes work on the registration   and I let see if you couldn't then let's continue  on and I'll do it together and I believe you can   do that so try your hands on it and now let's  see so were you able to do it now let's see we   just have to go to the same just make a copy of  it you know so let's see you have the login and   I'm going to make a copy and I'll paste it here  and change this to register right very simple one so I'm going to collect this and here register page now the r is going to be what register and now in here instead of the login  it's going to be register so register click   and let's change this to register when  you come down here we just change this   to register not this one and here must  be register D and we can say this is register now register response  so here it's going to be registration registration response is equal  to then we're going to register async and I'm   passing the model so you can see it is the same  thing that we are doing now here we need not   to okay we can check okay so if it is false then  return the message but if it is true maybe we can   just make a copy of it the same thing here and uh  before we return we want to clear this container   so you want to say that is register equal to so  we can clear the container all right that's what   we're doing maybe we can navigate to the page  the login page but well you can also decide to   leave it there so let's leave it here so here for  this register model let's say this is a register   model now with this model that we have in here  we have um name first isn't it so we can just   make a copy of this in here and on top we can put  put it MD must be three imine top let's say three   and now this is not email address rather it is  what good good job so there's name so there's   going to be name in here we have email we have  password and we can have another one and this is   going to be confirm password so here we can say  that confirm password and then this going to be same H that is it very simp okay so instead  of the login instead of this you know we have   to change this to register and now here to  register here also register and that is it   I believe you've done same right good so that's  all that we can do for now let's save this let's   run this to and see if this is also going to  work so you want to log in you want register   and also log in then we're going to have  access to our token we're going to store   that call an API then we're going to add the  token to the header and that is all so let's wait yeah so it is ready you're log  out we know so let's go to um that   is a register so click on this register  okay so 44 register let's see the r here   is register and I think let's grab this  so login that is a login let's see the register okay I I believe we didn't do this  right you wrote the correct one that's good   let's see register still yeah we have it because  we need to refresh i t reload is working H reload   is working not knowing it is not so let's  refresh manually then we can test it up and see yeah reloaded click on register we must  have the form yeah that is it so this is our   form now let's fill in something and see so  I'm going to say this is net code Hub okay   the channel has been added already that's great  and I'm going to say user one then password and   password is the same if I decide to in this  you see password do not match so I make sure   it's the same string here click on register oh  he supposed to register because we have login   now let's switch call has been made let's wait  and see yes so success right you see as soon   as I click on okay this content is going to  be cleared because yes it is cleared now we   can log in so let's go to login log in with the  same one and that's going to be the user one the   same password let's log in and see so hi let  C up Channel welcome so say is working isn't   it our token has been stalled now let's have  one form and that's going to be the is it is   it is it the weather forecast I think so so we can  use use that to um test this app so let's create   an ATP contest or as an HTP client we create our  forecast component then we're going to make a call   attach this to the header and that is all so I'm  going to Let's close this up let's actually stop this let's go to this solution and now see  from here we have this weather right so now   with this weather we can just navigate this  soest streaming let's go to the import is it   the import uh no no no not the import let's  go to na menu and in here let's make a copy   of this and now let's add it as weather so here  we can say this is weather now we are navigating   to the same weather but with this we want to  have this authorized View and this is going to   work when you are authorized so you're going to  see this only when you are authorized if you're   not authorized then bye-bye you're not going to  see this trust me yeah so whether now let's go   to the page we have for weather component and  that is this one okay so in here maybe we can   just add it to this account service right the  interface so before that when you go to weather   component there's a model here so we can cut  this model or we can just copy this quickly   we go to our let's put inside a dto isn't it so  the dto add a new class and now this is going   to be weather forecast in weather forecast we  go to the weather component and I'll try to   cut this and instead of having here as private  this is going to be what public that is fine   okay now let's go to the weather page in here  and with this we are going to move all this so   with this I'm going to move this let's cut this  from here let's go to the controller and where   actually is the controller have you found yours  that is this one right so we're going to make   a copy in here and this going to be HTP get  and now let's give it a route we say this is weather then we have this public let's  make it an action result or maybe an   action result will be okay then here  let's have this weather forecast let's   make it an array then we're going  to be the name that is get weather forecast okay let's space this here  so instead of this we're going to say return okay return okay is that so then in  here let's close that yes we want to   return wether forecast and that is it let's  save this okay so when we test an API when   we test this let's see if we can have  access to this weather forecast in our API so let's see from here if I click on oh  you're not seeing the weather because you're   not logged in so let's go to swaga and we have our  weather click on try this out execute this yes and   we have this weather right that's fine so this  working now let's try to consume this so we're   going to implement that in the service interface  that we created you and I created together and   do you know where it is find mine here can you  find yours now this supposed to be a task and   here's going to be we forecast and you know this  is going to be an array and let's say this is get   with forecast it needs no parameter control k d  save let's save that as well let's go to the is   it account service and we need to implement this  so control period implement this interface now   with this we can um let's remove this now it has  been implemented down here where is it okay so   get this weather and we can just make a copy  of this isn't it or we can just one line can   help can solve this let's say this is going to be  an await right then say let say updb contest not   knowing we are KN the data layer so a client dot  this is get from J sync and this is going to be um   forecast oh weather forecast I nearly forgot  it this must be a list then in here it is an   API slash account okay slash then we have our  weather very simple one so we can yes I think   so yeah so this what I want to do one of course  going actually help as completed so API account   and I login so see you have the same thing same  thing same thing so maybe we can extract this and   now use we can extract this APS as account now  maybe you can have private constant string okay   then we say this base Ur is it right now let's  space this here then from this base we can just   use it in here so instead of calling this we could  call something like this so string interpolation   put the dollar sign here then and in that paste  this now we can just grab this and in here we   can replace it you can uh replace this too yes  so this what we want to do very simple one okay   so once you have this what is the next again we  have this C so we go to weather. Razer and we have   this class injected that service injected so in  here is so going to do when the page initializes   we don't want to delay any task you want to say  um this weather forecast so this forecast equal   to a wait account service dot get wether forecast  isn't it yes very simple one so that's what we are   doing and you know what this can be in a in this  form so control KD let's save that and let's see   so if I run this this is going to work but they  don't have you have any button to navigate you   but as soon as you try to navigate to this weather  we're going to have access to this let's wait and see so you can see there's no button here  because you're not authorized now let's   click on this and I'm going to say weather  now see loading because we have the weather   in here because this we this this call is made  while the is authenticated okay let's try to   authenticate this and see so have the same user  One log in and we must see that guy here yes so   see we have it have you found it that's right  so if I click on this I'm still getting it   okay so this what we're going to do we go to  the API from this controller and now here we   can from this we can allow Anonymous so anybody  can have access to this the same method applies   to this because when logging in we don't need  anything but as soon as we get to this weather   you must be authorized right if authorized  you can never have access to this trust me   let's try that and see so from the controller  endpoint from the API endpoint you're going to   test this and from our app you're going to test  this whilst you're not logged in yet so let's see so let's navigate to the Swagger and here  it should give us 401 soon as we try to access   this 401 meaning unauthorized let's see yes 401  that's unauthorized and there is this a 401 okay   now let's see let's try to navigate to the same  page from the app session the front end and maybe   you want to pack the back door back door let's  pass this WEA forecast and you can see we have   it here 401 have you found it yes response status  code does not indicate success 401 and that means   unauthorized so we can never have access to unless  we authenticated but trust me see if I log in here   and I click on login although I am logged in yes  we wait for it to get loaded yeah we are logged   in click on WEA forecast and we still have it do  you know the reason why okay so don't be surprised   because we have not added the header the the  token to the header of the ntp client that the   reason why we have the so quickly we can do that  very simple way that here before we call this we   call no no not here I don't want to confuse you  okay not here forget about this let's go to the   account service you can see we're using HTTP  client here right so before we do that we're   going to say that HTTP client dot uh um default  header do authorization is equal to you're going   to have system.net dot so new oh it is not coming  okay yes system. net. header then in here we need   to we need to specify let me actually make it  in this form now if I open the first one that's   supposed to handle is the scheme and you need  a scheme that is a bearer and now the parameter   is what so you want to add which one do you  know that is a constant constant dot T token   but before we do this actually don't you think  we have to check so if string or if constant do   GWT token is equal to this then return so do not  call it this API this end point at all is going   to return it but if not so return this will be  no yes okay so return no but in case it is not   that is where we call this now let's see here  click on reload this page and now let's check   it out now this is ready so let's log in loging  in here whoa yeah it is it is spark so we log in   here and let's wait and see for us to get this  guy okay so right click and go to inspect but   this since is a server you're not going to see  the call that's going to make in here click on   okay let's try and see I'm going to CL this click  oh yeah it's still here see what it's doing I'm   going to clear again is it coming okay so click  on this weather and now okay so we still have this   for authorized let's see the call that is making  there is the call do you have any header attached   okay so we have the snow header we just making  a call let's try this again so get this weather   weather forecast we are not getting 10 days we  have the cook keie that's what we want okay so   let's let's see this what we're going to do we  can just put a break point here okay so let's see   before we do that let's put a breako here then  let's put a break point here and I'm here now   let's go to the page and I click on weather you  see that this is not even called at all because   weather Razer it is just streaming and let's  check it out from this calling of this from the Navar okay so let's see when we navigate to this  page okay so let's see we making a call when the   page initializes we want to call this ass says get  weather forecast and let's try this [Music] again   click on this it gets hits so let's see we have  our HTP client that is 7255 there's a header so   for the header do we have have authentic  authorization so this is no oh okay so it   means it is not working now let's see so if I  put breakpoint to the account service here oh   see what see I know I know you've done the right  thing right there is a register you want to call   the weather forecast and see what we've done  oh okay so no problem you can just move this   very simple way cut this like that and now where  we have the weather forecast this supposed to be   you must P this as a method okay down on top here  let's past this then we say return I think I just   hit on this no edit code so here you're going to  say return a wage HB client. get async and Etc   yes so here this going to work let's save this  let's reload this again and now let's check it out okay so let's log in again and I'm sure by  this time around this must work let's see so once   you log in okay so get weather forecast if I click  on this maybe I'm Network tab I'm going to click   on weather and you can see we have it you see so  do we have the token here but we not having the   call the call is not shown yes since the server  is call isn't shown but you see we have this here   right so it means that the token has been added to  the header if you want to try that let's see let's   put a break point in there let's go to the account  service now here I'm going to put a breakpoint   right let's go to the page let me try to reload  this and now let's see the break point going to   be hit now it is hit click on this HB client and  I check it up you see we have the header and that   has added in here so the Cod that's going to  make this header has been appended up to the   expired date do you remember two days so we still  have a lot of days to do it yeah I know you guys   can implement the refresh toen yourself and a  whole lot of stuff with it yes so that's where   we're going to end today I'm going to make this  available so maybe check the video description and   going to have access to this thank you so much  for watching this and I hope you guys enjoyed   it as I enjoy teaching as well and I'm going to  catch you up in the next video till then take care

Channel: Netcode-Hub

Views: 4,084

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

Id: EFvR2EXDam8

Length: 67min 31sec (4051 seconds)

Published: Thu Jan 18 2024