Complete Implementation of JWT Authentication in .NET 8 Clean Architecture with Blazor Web Assembly🔥

hey friends and everyone welcome back to net Cod  help Channel I am Frederick as you know and I'm   happy to have you here today in this video we  are going to talk about how to implement JWT   authentication in clean architecture I have  made a separate video explaining what clean   architecture is so if you actually don't know  what clean architecture is maybe I suggest you   watch that video also in this video I'm going to  give you an overview uh just a brief of this CLE   architecture and how to implement the um Jason web  token in clean architecture all right before we   Dive Right into this if you know you have not  subscribed to this channel then click on that   notification Bell once you subscribe to receive  an update as soon as I do upload new content also   like this video click on that like button to  like this video okay to help this Channel and   also support the growth of this channel idea of f  training session to people who are interested in   Net Technology talking about Blazer web assembly  server um web API marry blizzard hybrid and a lot   so if you're interested I have an email in the  video description check it out and write to me   through it clean architecture it is a software  design philosophy introduced by Robert C Martin   and we normally call him as Uncle Bob it is just  a set of principles and pattern that aim to create   maintainable scalable and testable software by  stretching code in a way that create consent and   dependencies so we don't do everything together  we put them into Basics uh we put them to units   and we connect the unit together that's all about  this architecture put all your code into units and   now join this unit together like that's what  you call the separation of consense and also   the dependency so each going to depend on the  other one and at the end of there we're going to   have the base one they're going to build going to  build this up uh with the dependencies okay clean   architecture consist of several layers by this we  we going to talk about one of the implementation   that is having the entities or the domain having  application layer having presentation layer and   also the infrastructure layer four layers and  that is what you're going to have a looked in   this video okay so we're going to um create  this now we don't going to consume this API   or this um authentication J authentication in  Blazer application we're not going to do that   I'm going to show you how to implement this  J authentication in architecture Maybe I know   about that one you know how to do it isn't it  yeah I believe you you can do that but if you   think you cannot do it then just let me know  you can put at the comment section there and   I'm going to have a separate video to consume  this architecture that we're going to create   this authentication in the Blazer web application  isn't that nice all right so I'm going to create   a new project in here so click on make sure you  have a vis Studio 2022 or higher launched and   click on create new project yet so this since  we're going to work on um authentication in   clean architecture I would like that to create  a solution blank solution let's give it a name   yes so demo jb2 authentication with clean  architecture you know if you want to grab   the source code I'll make it available as well  so you can check this video description now that   is a solution so actually I want to add solution  to this yes very long but it it it makes meaning   isn't it okay so we have it here when you go to  solution Explorer you're going to have just your   solution name here I click on this solution  you're going to add three classes and I'm   going to name them separately so the first one  I'm going to choose for C library and this is   going to be the C Class take note and here we're  going to say this is domain okay so we have your   domain in here we're going to create this in net 8  take note and also you're going to create another   class and this going to be um um application  we're going to have infrastructure and going   to have presentation okay so let's see we're  going to once you have this domain we're going   to add the next project it is the same class  Library so choose that there's going to be an application okay so this is ready we're going  to create another one not this I click on this   solution click on add new project and this is  going to be infrastructure so the same class Library so infrastructure so let's get this created  so we have three classes Now application   domain infrastructure and we need one more  but by this time around it is not a class   we need a presentation so this is going to  be a new project in here and we're going   to choose web API so with this we know  this presentation but I'm not going to   say presentation I'm going to make it as web  API okay so web API and for authentication   type you choose none because we're going to  create our own then let's click on create yeah so when we check this one the the  presentation of the architecture we have   these four layers now these four layers they are  dependent to each other so when you check this we   have the presentation layer that is a web API  we have the infrastructure we have the domain   and we have the application what does each mean  or does it do the presentation layer as you know   that is a UI okay so this is going to consume the  application layer so let's add this dependencies   add project reference add this application  layer okay now that is it so the in the UI or   the presentation consumes only the application  layer okay aside from that the infrastructure   here is going to consume this application layer  because we're going to create an interface in   here and we're going to create our repository in  the infrastructure so I click on this I dependen   add project reference add the application and  now when it come to application it also going to   consume the domain the domain are the entities  so we right click on this application and add domain you see so the domain is independent it  doesn't depend on anyone any one for Survivor   yes okay now let's start so once we have this  relationship and dependencies issue solved now   this what we can do we going to let me just clear  this the default class created for each of the [Music] model then let's check for  the application we also have this okay so now that we have this set we going to  the application and install packages which are   the EF tools EF SQL Server okay these are the  three packages that we need for now and we want   to do that maybe we can also um download or use  bcrypt to encryp the password we're not going to   use identity manager now we're going to use an own  way to encp the password so we're going to install   these four packages let's get going so let's build  this project first let's make sure we stall the   new default new get packages needed to run this  app after that you're going to install these packages that's right it is built I see  that yeah and four projects acceded and   that's fine cuz we have four project in here  now we're going to install these packages in   here now what we're going to do here is  we go to the infrastructure that is a   data assess layer so that's where we're going  to have all our connection to database okay   I on dependencies and click on ADD package  references not this one man to get packages   this guy so we're going to install EF core  so click on the browse Tab and I will need EF call so it's .0.2 as I speak that's the current one we need tools then we need SQL Server so  there's the next one that is this one we're going to encrypt  the password so let's install bcrypt b.net this one okay now when we are done we're going to  create a dependency injection that a service   container and we need to register in the web API  now when you register we're going to also register   the service in there and perform migration  against the web API but we going to select   the infrastructure as a default end to run that  so in that we need to install another packageing   here to dependencies of the API and I we need  only the EFC do tools that's all that we need to install so TOs that's fine we can close all this cuz we are done   with them and now let's go  and run this uh build this again yeah so suceeded now we go to we're going  to work on the infrastructure because that's   going to have a data access so everything that  get connected to database and migration every   stuff is going to be in the infrastructure  project so we're going to create a folder in   here and I'll name this as data assess maybe  data will be okay we need a modos and this   model must come in the domain so we're going  to create this and I'm going to name this as entities now this database  entities we going to add a   class with this and maybe this is going to be a user so application user and now in that what are  some of the properties that we need so before a   user register system we want to have an ID  and this ID is an integer automatically as   a primary key in that we also [Music] need let's  see okay so let me just remove this we also need name so we need name then we need maybe email address email and the last one we need password okay so we need these properties in here  from every user who wants to register an account   with us ID going to apply automatically  so we need the name email and password   okay now when we come to the data we going to  create our class and it's going to be the DB contest so DB contest okay now this DB contest since we've  installed EF call. SQL Server like just just   the EF core we can inherit from this DB contest  class and this coming from EF call so we install   this we need to create Constructor  for this one and I'll passing this DB contest now we need to create a DB set which  going to be the database table so so application user and now this is coming from  the domain so with this application user we're going to have maybe users or something  like that okay so that's going to be the table   name and I going to use the properties in here  to create columns that's fine let's save this   now let's go to so once we have this created we  need to set our connection strings in here in   the upsetting. Json from the API so in that you  can have connection strings and let's say this is   default I'm going to have server equal to local  referring to my computer database is equal to DWT with clean architecture okay so I have DB very long but it makes sense then I have   trusted _ connection set this to  true the last one is trust server certificate certificate set this  to through as well yes that's fine done now we go back to in here solution Explorer now instead  of creating the service in here no we're   going to create dependency injection  so on the infrastructure we're going   to add a new folder to this now let's call this dependency injection the reason why we are doing this is  we want this presentation L is just consuming   the application layer that's the only thing  that's going to do okay and I'm going to r a   service from this aside from racing the service  from the infrastructure and also um consuming   the application it's not going to do anything so  anytime I want to change that presentation layer   you can change it without having to go through a  lot of stress because what you're doing here is   you need only your controllers in here and that is  all you're going to create everything in between   the infrastructure and that application so this  is going to be a consumer consumes it and off you go so in we're going to create a class  and maybe we can name this as service container with this service container we going  to to create a class in here and I'll register   this and now this class is going to be a static  class so you're going to have a static container   and it's going to be public in that we need to  create a class in here as a static and whereby   this you need to pass in the I service collection  so I call this as infrastructure services and I'm   making this as an explicit so I'm passing in  this service collection creting at service and   I passing that configuration so I can retrieve  the connection strings okay now in here I need   my appdb contest connection and that is what  I'm doing in here you see the appdb class that   we created from the same layer and now we not  going to use SQL light we're going to use SQL server and now the name here do you remember  is default okay then we going to specify the   liftime here as scope enti application to create  an instance for the whole application okay now   once you're done we need to register service  in here but before we do that let's return   Services okay now we're going to remove all this  let's go to so this what we need to consume in   the application layer now let's go to not in the  presentation layer sorry don't want to confuse you   today let's go to the API and now from the program  we need to add this but before we do that then   we need to consume this infrastructure in here  once for the service okay so this is what we can do dependency going to add project reference  and we're going to add infrastructure in here   and now the infrastructure the session  that we're going to inject going to use   here it is only for this service that  we created so here we're going to say   Builder do Services dot infrastructure  but before we do this we need to include   the project itself so we say using and  infrastructure dot dependency injection and now in here we can have access to  infrastructure service dot infrastructure   service and now this needs um configuration  so we're going to say Builder do configuration   yes that is all so now once you have  this we have our connection registered   maybe you can cross check and see if it  is the same from here yes same we save that and all right so we're going to perform  database migration before this let's build this suceeded now we're going to perform  migration so let's go to you know an API   supposed to be the startup project click  on the output not the output package   measure console now you're going to choose the  infrastructure and I say add migration this is first so BR suceeded now let's wait for the file  to get created so the file is created update database there is done very simple one so  we have a database with one table known   as users only one because we created one  okay and now this table has the following   columns ID name email and password okay  let's go to solution and in that we need   to create a repo for this but before  we do that you go to application and   then in here we're going to create our  DT so let's create a folder name it as d with this dto we going to add user so a class  now let me say this is maybe register user D in terms of registration what do I need you go  to the same application user model and I in here   I'm going to copy everything and I'm going to  paste it sit in here just I'm going to exclude   the name the ID cuz I don't need ID is going to  be provided automatically so there's no need to   add the ID let's make this as public okay  we can also set this as um a record so we   can just stand here as record and instead  of having all this we going to say string   name you're going to cut this and you're going  to put it here string name let's cut the email   oh okay it has even suggested for automatically  so let's see are you coming again oh there's not coming are you coming again  okay so this is not coming now   let's see let's do it to ourselves  okay and the next one we have the password we can close this  and we can get rid of all these okay but you know we going to  implement something in here we're   going to implement model required attribute  and some attribute in here so maybe to add   those attributes we have to get it as  a class okay so that's the reason why   we need to use this and now this no more  you don't want to make it as a record you   want to have this as a class now in here we  want to specify an attribute on Top This is required maybe we can just grab  this and it's equal to string. mty same and we're going to do same here here and on top of this we have  this required attribute here to   we have the same required attribute and  here we're going to have email address   okay and then password we need one more  and that's get confirm password and now this we going to say confirm by passw and now here   we can compare so we're going to have  compare and we're going to have name of so name of password you're comparing  to this okay and that is all so this is   what we need to create for this  application or this registration   model okay we save this and now we going to  the login so we can just grab password and   our email address and grab it from here  we create our login dto so add a class this login dto now we're going to add them here so   this is going to be public  let's remove the necessary ones okay so this what we have now let's  go in there and create our repo so we go   to our solution and in here from the  application we need to also create a   first not a first let's create this  and I name it as contract that's a folder so in the contract folder we're  going to create only one contract and   that's one interface don't let me confuse with the   contract an interface oh see what I did  it's supposed to be let's say this um I user and this is public okay so we have to change the name of the interface and you're going for login and  registration so this is Task okay so this   task maybe we can have is it some model as  a response to handle this or we need to okay   let's create a Class A D to as a respond  so maybe we can have this is D let's add   one here okay we want to make this simple and  this is going to be response okay so this is registration response and  now this regation response   is going to be a public and it's going to be record and in here we're going to have just  maybe a m or a Boolean let's have as a flag   and I believe you know this and you have a  message in here okay let's set this to now a default okay now let's go back and let's  close this cuz you don't need them let's   go to the interface and task we're going  to say this is registration response and you're going to have registration  response yeah so this is register user I'm going to make it at async  and now with this we need a register dto okay as we've done for this you know with our   login we need to have a token so maybe  we want to you have another class for this and we're going to say that is login response you know there's going to be a record and we need to clear this and now in here you're going  to have the same flag we going to   have string message this equal to  now and we're going to have string token let's go to now as default let's remove all this now let's go  back to the interface and this going to be task like response and we're going to say  login user async whereby passing login D we need these two interfaces isn't it  let's go to the rippo and there going to   be the infrastructure and that's we going to  have our implementation so we're going to add   a folder here and let's say this is let make  it as repo not implementation now with this   repository we going to have a class this is  user repo and this going to H from which one   I user let's implement the interfaces in here  can remove all this CU we don't need them so   now we have this log in and I register what  are going to do login so let's see let's get user and we need to create Constructor  for this CTO let's inject our appdb contest and we're going to say  that appdb contest. users. find   a sync by this asnc we need to find  by ID but here let's use first or default of default Asing so we specify our  own what we need so U Dot and now here we're   going to check if the email is equal to log  d. email so you want to find this we check   if this get user equal to null then it me I'm  not found we can return new instance of login   response and then here we can specify for as  a flag and now the message here is going to be us not found sorry yes okay that case us is  found then what I going to do we're going to   check the password so check password that's equal  to you're going to have let's say um bcrypt net do   bcrypt dot verify password then we need the old  password so want check here you can see that we   need a string test and a hash so what is a test  here login d. password and a hash get user do password so we say if check password is  true like okay then we need to generate   a token so let's see generate token  and this going to be DWT token now   with this token we're going to pass in  get user we pass in this model then at   the end we're going to return new login  and this is true maybe you can say login successful or then we're going to have so Lo  successfully and also we're going   to have the token and we can create we can  say token is equal to okay or we can call   this method this going to return a string  and we can call this method in here so we   can get rid of this get rid of this get  rid of this one line we close this else   what do you do you return the same thing  so in case this is false then we can say return new login user login response for okay and now here we   say invalid credential so we  can just write something like that that is all okay now we need to create a method to  generate the token but for now let's come   to registration so we first want to check so you  see that here we first want to check so this what   we can do we can just cut this we want to apply  Drive principle so let's SC this one and I just   going to be this going to return application user  then we say find user by email and passing string   email now this is marking to this so now  this method send this a task it must be an async so we can now call this method here  so instead of this we can just assign this   one now this method that we have is equal  to a wait call this and passing login d.   email let's check if this is not null okay  now here we're going to also do same so we   can just copy this line of code and now  put it here to get a user this must be an async and now instead of this you wouldn't  say login rather register dto so we say if   user is found if get user is not equal to  n if us is registered already then what   can we do we want to return this but this  is not um login this is registration okay   so we want to say invite credential because  check it so user already exist else what are   we doing you want to encou the password so we  can say that user or we can say appdb contest   do users. add okay then new application  user then we can extend this after that   we say app I wait appdb contest. save changes  asnc then we return new registration model or   response whereby this we pass it as  through and we can say registration completed okay so what are we doing we need  to specify ID is going to be automatically   generated so we need name now name is equal to  the registration d. name we can have email and   it's equal to registration email you're going to  have password this password is equal to you're   going to have. password okay but before we  do this password they're going to enp this   so you're going to say that bcrypt net. bcrypt  Doh password then pass in the password you see   that yes and after that receive it because  these are the properties that we created   name email and password is what we need then  receive it and I return that's what that we   doing very simple so now what we're going to  do here is we're going to work on the generate   token if the password is correct or it matches  with what we have already then we're going to   generate the token so before we generate the  token we have to register JWT service and we   have to create our audience our issuer and  the key okay so let's get this job done so   there's one package that we need to install to the  infrastructure so I click on infrastructure go to dependencies and let's man get the packages let's   manage the packages so okay so  in here we're going to write GWT bear this is the package that we  need to install it is coming from   the microsoft. aset cor authentication this one so install so there is done now let's  go to the service container that we   created and now in here we're  going to ra Authentication service so within the servicing here we're  going to have service. authentication then in   here we're going to also specify the JWT Bearer  whereby in this we are going to specify all the   necessary service that we need so addt Bearer  and as you can see from here we need issuer   audience uh Lifetime and now we want to grab  the configuration from this okay because here   you know we injected the configuration with  an instance and that is where we are using it   from and once you have this we need to specify  the the key and now the issue and the audience   in the app.js okay so let's actually do that  but before we do this let's register the rippo   that we created so maybe down here we can say  services. add scope and I user and this is user repo okay so this is working let's go to  the solution we go to the API and I we see   from the program on top of this let's add app.  use we have authentication on top then we have authorization okay so in order to specify all  this we go to the API upserting dojon now here   we need to specify the key the is and at  the audience for now we want to maintain   the IP for the same project as an audience and  the issuer so from the application properties   line settings we can grab the https that is  7044 for htps we go to the upsettin and let's   replace them this key should be a random keys  and now here it should be let not LED and 16   characters so this is around 40 so you can just  create your own key this what going to use to   create a token okay so this very important  and you must keep it secret okay so we have   this set we've added the service and now this  working so the next thing to go in there and I   create our repo not the repo generate token and  we can find that in the user report where is mine so we can create it at this method so this is a method  and going to return return string so in this method we can just quickly  create our own and now this what we are doing   so when you check this we create our security  key we get it from the configuration and now   this configuration to get this we need  to also inject our configuration here we get configuration we get the key that we  stated and in here we get our credential so   this are credentials from the key that we created  or we retrieve in here res as a credential okay   using this algorithm um h mark 256 and also we  specify our claims So within the claims let me   make this as user so we have the name identifier  and that is the user ID from an application layer   application model do we have user user do ID okay  two string since it is um integer we convert to a   string we have the name and I have the email so  these are claims that we want to use to generate   a token aside from that we get they issue the  audience we specify our Clips in here we add an   expired date of the token as 5 days then there's  signing credential as we got here at the end we   want to return the token um in this format as  a string so this return a string as you know   the method return a string and now everything  is solved okay what left here is to create our   controller so let's go to the endpoint the UI  inside the controller we going going to create this a controller in this and this going  to be an API mt1 and you want to say user controller you want to create conru for this  then we're going to inject our repo so we're   going to consume the application layer  so I user say user cont period create an   assigned field then the first method here  we're going to login so let's say this is   HTTP post I'll specify a new RI as login  this is public faing task let is specific   on action result types so action result and  now we are returning login result so log user in and now we need um login dto and in here we need to results  equal to await user Dot Login the   sync we passing the2 after so that you want to return result by this result it is not  the state that you want to make it is   okay okay then we let's copy the same thing  in here next line we're going to say say what   that's fine register so register user and now  you know what this going to be what register d d so copy this chip it in here and I'll change  this to register and that is all let's with this application yeah so this is done now we're going  to um run this app and test it out out yeah this   ready so now let's see click on login so  if I click on execute this let's see what happens so I have user not  found sorry now let's register user so the same thing confirm pass we're going  to register this user in here so registration   completed now let's log user in now you must  see the token yes so this is the token we can   just grab this token let's go to jw. and now in  here let's paste the token you know we have our   string there's our username email there's an ID  and there's a issuer and that's an audience this   is a expired date so if I click on it we added  five days so we see we have March 14th you see   so we have this 5 days being added and that's  fine today is 9th so we have March 14th 9 + 5   is in the 14th yes we have it in here okay  today it's working isn't it so when you go   in there now check our system you can see that  what we did here to the UI we did not actually   work massively on the UI what we did here  is just just consume what we have created   so anytime you want to change the UI it's very  simple you can just change the controller add   the controller and also add all the service or  raise all the service in here and that's all   that you need to do very simple yes I believe  by now you can consume this in your API no in   your blaz up assembly isn't it good if you  think you cannot do it okay put that comment   section and I have a separate video to show  you how to do that as well now let's go to this let's go to this our controller in here where   is weather forecast controller we want to  make this as required okay so here this authorize so now we have this let's  refresh this app and then check it out so let's test this weather forecast so try  this out execute now you see we have 401 it means   we and un authorized user we are not authorized to  access this content okay in order to get this we   need to have a section A feature that we can pass  you can log in get a token and I'll authenticate   ourself and I get access to this so let's do that  we go to the program.cs or even where we have the UI so solution you go to program. CS file from  the API since we have you have the controll we   have the Swagger registered in here we can then  specify maybe this Swagger let's remove this one   and now let's add this so we specifying an option  to this and now this option you want to add the   version this V1 we can give it any version of  your choice there a Titan description this a   for swaga Doc aside from that you're adding the  security definition the type here the scheme is   with be and where do you want to specify it  that is the format iswt the scheme is a be   and as an API key the name is authorization  from the header also when it come here we   want to put it inside the the header and now  this going to be the header session name and   there the format or the scheme okay and the  type of the format here is what the WT and   in that we have it in here okay so that's all  that we're doing now let's save this run this again that's fine so you can see that  we have this feature set up here so   this small featur is what we added lot  of code to my feature okay so let's try   to log in again but before that let's  test this and see and confirm that yes   we are not authorized now let's log in so  we've ra it already we're going to log in now so we are in let's grab our token then let's go to the authorize and now the  value here is you're going to pass in this value   okay so you type in our bar space then paste  on this one click on authorize then you can   close this now check it out click on execute and  now you have it so now we going to consume this   token and after consuming this token we try to  get the claims from this token and set this to   the application as a UI in the Blazer web assembly  okay so I'm going to close this and now that is a   project that we we built we're going to add  um web assembly up so click on new then add   project and now with this we are going to add  Blazer web assembly so we have web assembly in here so that is the name Blazer we assembly to this net 8 for authentication is none  because we have our own authentication   system that we're going to implement click  on create to get this project created and added yeah so this is ready so when you check the  solution you can see that you have Dev assembling   here then you have your web API okay so in  this we need to build this project to update   the dependencies um to make this app complete  so let's update it I click on this and I'll   let build the project so you can see that the  project is suceeded as you can see from here is   built then we need to add the project reference  dependencies go to Project um references and in   here we're going to add the application  layer so let's click on okay to add this project so after doing this we need to create  a service whereby this service is going to be   in the composition of interface and um  implementation now this service we going   to use an HTTP client and in that we're going  to have a post as Jason asnc so we can post to   the controller endpoint that we created and now  within that endpoint you know it has a model to   return we can return it as a general response  or login response and in that we create our um   authentication State provider we register it and  now we try to log in and set the claims that is   all that we need to do in know very simple  one okay so let's start we need to create a   Service First and the service need to be created  in the application layer so from this we have our   contract we have our DS we're going to add another  folder to this and maybe we can name this at services so within this Services folder we're   going to add another folder  and maybe this going to be authentication so let's add  let's create our interface   in here so interface and now this is going to be I account so that's an interface I want this  to be public as you know yes so within this   two method within this interface we need  the two interfaces here we need um this   reg account async can also log in account  async now this need General response so   this is coming from General response from the  application layer let's check it out so we go   to the application layer at D and here  we have register um response so it's not   General response this is register it is  limited to registration so this register response register or registration response yes so in here we need a register user dto and that is the model and for the  login response to we need a login dto   okay so that's all we need we need  just two method in here very simple   one okay we then save this we're going to  create the interface not implementation   so right click on the same Services  authentication now let's add account service and now this account service needs to   inherit from I account so let's implement  the interfaces in here we need to create Constructor C you are now in that this must  be public and I believe by now you know this   let's inject our HTTP client create an instance  of this control period let's create an assigned   field we can also use primary constractor but for  now we are not working on that let's keep going   okay so login account we're going to make a post  so we say a VAR response is equal to a wait HTP client so this is HTTP client this client  yeah so let me copy this dot then it's   post adjacent async and in here we need to  specify API and that authentication slash login is it login account or just login so  we can just cross Che from here from the API controller that is the user even authentication  is user so you see that user login okay so it   is user and just login so from that  we pass in the model so let's get the response so this could be result now  since you want to grab it not in an   um in our string format we want to grab  it in model format okay so we need to   convert this and here we can to off. read  from jonn then let's specify the response   type the response type here it is login  response and at the end we can return results we're going to do same so  I'm going to copy this then inside   the registration I'm going to past this one  this must be an sync and I want to check the controller so when you check this  controller this must be user controller okay so user controller and  when you check in here you see that we   have user SL register so let's go in there and do same so user slash register then passing  the model and now here it is returning   a registration response and that is  all that we need to do in know very   simple one copy and paste okay so we  are done with our service we can now   we have to register the service so  we're going to consume this let's go to the Blazer app and here you  have the the Blazer assembly   and that is seen over here from the  program.cs we can now register this here then that is an i account and this is account service okay so now that is done we can now log in  we can register because we've created the endo and   also we have a service whereby we inject an HTTP  client to make a request now when you receive it   you are returning when return we need to to the  authentication State provider so you must create   an instance of the Au State provider and we can  name it any at all that you feel you want to give   it it today okay so but I'm going to give my as  cast authentication State provider so that as soon   as you get the source code you know what you're  going for okay what it means so we're going to   create a class for that and this class I'm going  to make it related specifically related to the app   so in here from the web app or the Blazer assembly  I'm going to create a folder and I name this as States so with this state I need to  add a class now this class going to be custom authentication State provider so this class needs to  inherit from authentication State provider but since we haven't installed  it so we need to do that we need to   install microsoft. as. core. component.  authorization so let's wait and install this package yeah so this this has been installed  and now here this an abstract to we need to   implement the class so we have this in here we  would also need to to save the token somewhere   so that anytime I want to make a request we  add the token to the header okay so in that   we can use cookie um cookie storage you can use  um local storage so for now let's use the local   storage and in order to use the local storage we  can use a package created by centi and that's a   blizzard local storage so let's also install  this package and right click on the Blazer   assembly dependencies and then you get packages  and here you're going to install blard local storage so that is this by recent click on and install Okay so this is done let's register   the service so it's going to  be Builder services. add BL storage let's see for Blazer loc stage so do add  Blazer loc stage yeah so we add the service and   we are good to go okay so in the custom we first  need to create an instance of um identity user   and we're going to be null as for default  one so let's create a claim principal and   now within this we need to for this we need  to create a Constructor and inject our local storage the service so create this an assigned field and we  can just create a key here so private constant string so look at the key this is OD so here when the app get loaded the  first time this method get called we   want to retrieve the local storage so  let's say say there going to be string   say token is equal to a weit local storage  dot get item as string async then we pass in the local stage key so we can now check this must be an aing task  okay so what you have in this now check so here we can check here  so not even a wait if string do   is null or empty then we're going  to find a token then you want to return authentication um TP from result then we  passing in this one Anonymous that is the instant   that we created here it the user is not registered  so if token is not now then we want to get all   the claims so let's have um public or private  and this could return let's create a model for   this we want to return the name and now the email  Isn't it so maybe we can have task this is string   string you want name and our email so here we  can say um get claims and now you're passing the token So within this we need to now  check if user or if this is equal to   null so string dot is now or empty  passing the token that you want to return now so in case it is not now then  we want to set the token so let's   get all our claims so this package we  need to install um system. identity.   modus let's find the latest version and  install and I we need to pass in this token okay so let's add in here JWT token then we get our token in here okay  now in the token we want to get maybe   user ID you want to get only username  an email so we can extract the claims   from this we get the name we get the  email and at the end we are going to return we need to return this return  the first one is name and I return email okay you can make this as static  then when you can here we're going to   say that V we can use two P so we're  going to say name and email is equal to and here we call the method as get claims we   passing the token we have our  claims here so we can check if name we checked here right already or  we can check if string do name is empty   or string dot is now empty talking  about the email then maybe we can   have in their mind of the same thing  so we can grab this and I'll paste it here although it won't be null but let's  check okay all right so the next thing   that we're going to do here is after we get our  claims we need to set the claims so how do we   set the claims so we can now create a simple  method another method here then we check we   get the claim principal set a claim return the  name and email if they are now return this new   in case they are not then set the claims type  to name and I pass on the value so in here we   going to return so we can say that V claims  is equal to then set claim then passing this   name and email okay so here we can say that  if string. mt2 we are still going to check so claims so you can have claims dot  so here we can have we're going to   retrieve the user claim so here this what  we can do we can say that if claims is null then we want to um return same although it  won't be null but we going to return but in case   it is not then we're now going to set the claim  then in here we need to so we can include this   else then you want to return TX from result then  you pass in the claim that we retrieve from here   you save it so all that you're doing here is you  get a token from the local storage we make sure it   is not now if it is not now we want to get all the  claims that is an email and password the email and   password email and name let me get the email and  name we want to set the claims we passing the same   parameters and now we return from the claim that  we have in here to this authentication State okay   now we have this done what of in case I want to  un log in for the first time I need to Now set the   claims and Al set the token to the local storage  so let's have a method to also handle that and   this going to be maybe public asyn task and let  me call this update authentication States and now   within this I'm going to pass in string token I  like to use the WT token let me be specific here   okay so in here I'm going to check so if string do  is null or empty talking about the GWT token what   do I want to do I want to make sure if this is not  null or empty but in case it is what do I need to   do that I'm going to use await local storage  dot remove item async and I need local storage   key okay so when I'm done what I need to do here  is I'm have to notify the app to reender and in   that I can use this simple method to do that what  you do here is is I need to create claims in here   so let's say I have a claim on top so there  going to be claims so I initialize it in here   beautifully now in case we have this then I need  to get the claim so I'm going to say silver and I   need name and email then I'm going to say it's  equal to get claims I'll just call this method   and passeng WT token in case I get this so if  string. empty do is not for this name or string. Mt do is n or empty okay so if this I want to return you see by in case it is  not then this is what I want to do I want to now get claims so once  here I get the claims I need to Now   set it so how do I set it is the same method  in here so set claims so I need to copy this so I'm going to say set claims equal to Now call this  method and I need to specify in the   name and now the email okay so this can be  the next line and now here so if set claim is null then I want to return as well but this it  won't be now we are checking okay else what do we   do we notify this and I'm passing in the claim  that we have in here in case this is also null   claims is also null I'm going to pass in here  and our in clipse and is null it means when it   mean token is going to be null and the token is  now then it tells you that here we're going to   return noos no is a new instance of the claim  identity and it tells the user that hey you're   not registered so you need to register  okay so that's all that we need to do in here okay so now let's save this let's  go to let's go to the web assembly now   from the pages you need to create pages  in here that's a form so with this you're   going to install a package um created  by net code H myself and let's use that   okay because a floating div and we can  use that to um Us in an edit edit form   for the login and now um registration  so we can do that from the web assembly   I click on dependences go to m get packages  and in here just type in net code let's goe H and I will need components the  validations this package so let's   install this the C version is 1.0.1 as I  speak maybe there will be a future update   which will move to 1.0.2 so let's see for  this we install after this successfully   installed we can check from the dependencies  packages and like can see we have it in here   okay let's go to our page from the pages  folder we can now create a login page here and now let's call this as login  page the route of this app is going to be login okay so in in here we can have okay so we have our login let's include the name space  so at net code and this will be using so at using net code hub. pack cages so do components dot validations do  on input now in here we can straight ahead   so let's have our div class now let's  say this is row we going to have the closing then in here we have a  div class again and this is column lg5 okay so in here we need to have the  floating test and now with the floating   test maybe we can specify this I want us  to use let's close like this I get rid of this okay so we need label and now  this label this is going to be this   is login so we have a email address we can  have a placeholder and maybe John do at mail.com that's a placeholder okay aside from that  you can specify the type in here the type is email address then we need a password so we're  going to use them label is going to be password and we don't want to have  a placeholder here the time type is   password you see this is very simple  isn't it yes very simple then we have   our button so we can also have class in  here and this is form control we can have mb3 class as form control mb3 then in  here we can have our edit form and I   edit form we can have the model  as maybe login model on valid submit you want to say login asnc so here we have our data anotations  by data and I we go in and add this two form okay aside from it we can  have a button and this button   we have the class as BTN so BTN primary  and so the type of this button is just submit login okay so that's all that we  need to do we can decide to add a validation   message or we can use a validation summary  so maybe down here we can add a summary so mb3 then down you can use the summary  okay and now here we can have um test danger and let's St or test the  creation as none that's one you   can actually format this okay now  once we have this simple form when   we come here we need to create a method  to this so we're going to say Asing task login and also login model  so you must have a login dto and there coming from this we a  login model is equal to new so we have   this set okay now here the service  that we created and registered we   can inject it so in order to do that  go to the import. Razer and maybe in   here we can talk about using not using let's  inject I account then we say this is account service now this account service you can just grab  this we go to the login page and now here we say results equal to a we account service. login async  passing this login model now the response we can   check if results dot flag that is through that  is where you want to specify this what you want   to do you want to update the custom orate so you  want to call this method and I'm passing the token okay so let's go to the import and maybe  in here we can inject the Authentication   provider that we created so this is the  default one not the one not the one that   we created sorry I don't want to confuse you  this is the default one that we inherited form   it is not what we created now let's go  to we say this allate provider we go to   a login and now in the login we can just call  a simple method to actually do that so we can   use if the response is true we create a custom  allate then we're going to use a custom allate   provider that we created from the state  folder then in here we pass in result. token then at the end we want to navigate but  before we do that we have to inject nav manager   so here maybe we can put that in the import  and we can say that use this nav manager when   you go to login nav manager to navigate to  the login that's the homepage okay then we   have um Force Lo to through so it's it can  check for the authentication state of the   user okay so that's all that we need to do in  here in case it is false maybe we can have a string message so thisal to string. empty so when the page start to load we can  say this is called to n and in case you have   any issue that is else then we want to  say that message is equal to results. message and I we need to display this  so maybe on top here we can display this message okay so maybe here you can have span or div and this will be alert alert info  and let's display the message on top here we say MB is3 okay so we have this now  let's try to log in and see but before we   log in we have to configure course since we are  connecting from one port to another Port we need   to configure cost so let's save this let's  go to the solution from the um API where is   it this is API right so go to properties line  settings and in there have you seen this https   there is a port so we're going to grab this we  go back to the web assembly from here where is   it have you found yours um okay program CS file  and now from the base you have I we're going to   remove all this we don't need this anymore let's  pass in this save it and let's use cascading atit so do add cascading oate now when you  add this you can decide not to suround the   route with the Cascade authentication  States okay because this is the service   that you adding and it it it works  the same I think so yes now let's   go to the API program. CS file we need to  add cost so we can add cost to app do use cost SS cross cross origin resource sharing okay now  with this cross we need to specify some things   in it so we can just remove this and I replace  this one and here I don't need I don't need this   we don't need it okay so you want to allow here I  want to allow methods and so here we're going to   change it with the port of the client so from the  dependencies from line setting we have the is as 7044 this is not the talking about assembly  so we assembly where is this one is here yes   and now we're going for the https 7270 grab  that go to the program and I here paste it   okay save this and I think everything is all right  everything going to be fine what do you think are   you missing something as soon as we successfully  log in we have to get the token set to the local   storage okay let's try this out and see so bli  assembly run this and I'm going to run the API to so you run both projects you can use H  set mple project setup run together what   I'm doing choose one that you want  and and follow it okay so we wait   for the clients the there's a client and  where is our API wait let's wait for the API API in here and that is it okay we have an error here  let's go to inspect and check it out no service for this aate provider  has been registered yes I knew it so   we go to the program and I  we need to register this so   builder. services. adcope then here  we need to add authentication State provider and let's add a custom orate provider let's run this up all right so it is ready and this  I'm going to do let's navigate to login let me right click and go to after  everything after a call is been made whoa   we have an error here let's check it  out so required uh value for this we   did not yes I believe you did the  necessary Corrections isn't it you   go to a login page and we did not B yes see  did not B it and here you need this ad mine value and this is login model dot email and  now the same thing applies to this at bind value login model do password all set and done so this is ready again we click  on inspect element we go and check for   a call now here you must have a call be made  here we have to see it here and also when we   check the application and check the local  storage we have to see the token with a   keyn as OD and you have to get it here well  let's check it out so let's go to and R is login so we are in and now let's have user at example.com the password is user  at 1 2 3 I think so so because want me check let me check the the API log in  try this out okay so it is string and   I use example.com and the password  is string okay so this is string now   let's click on this now let's see log  in a call has to be made and now here   yes so you can see now the app has reloaded  let's check from up but you did not see the key you see we did not see the key so although  we logged in but we haven't seen the key in be   set let's check the UP State so from here  after we set it we need to set this to   the local storage so we're going to say I wait  local service. set token and now what you need   to provide provide the key loc stage app key and  the token itself that's all we need to do we miss   this out it is not just token it is rathert  token okay let's reload this and check it out again now let's go to inspect and now  we're going to we're going to the same   place that's application so we check this  application from this end we make sure we   have local stage open currently it is it  is blank it's empty okay so let's navigate to that's a log in now once  you log in please do check   here and see what you going to have a key being startall now you have a email set already  credentials yes we have it up yes that is   this one have you seen so it's working now  we are logged in so how do we get the maybe   you want to display the name or the email here is  it possible yes of course quickly we can do that here let's go to the rout and this going to  be the main lay layout and now here maybe   you can display button so this is going to  be in of this about you're going to say log out and now with this log out is going to be let's let's actually create  a page for that so this is lout okay and this should be okay let's  maintain it let's also have one let's   display so we're going to have this and  um this is going to display the name so   in know this is going to be four  authorized so if you're authorized   that is only when you see this but in  case you are not then you know what it means so this what do you think this  will be here isn't it we also going to   have at contest do user do identity  do name you want to display that okay and in here I think we it's  better that we put this in the span then let's have class test muted maybe um margin to Etc  okay you can have maybe ml 2 ml2 we have our   contest so we want to display the name then  we have our log out so when this is Click   you're going to log out page in case you are  not then you want to have this if it is not   login then it is register and now we're going  to login and now this we going to register you   see that so when you check the login we don't  have register yet but you're going to have it   soon okay now let's save all this let's see if  the page will reload itself if not then we do   it manually now we know that we have this  working we can close this let's reload it ourself we have an issue  here let's check this issue out okay so we need to add auth a call no  and this could come from the program. Cs file this solves the problem so SL login and for now we are logged in so you have  log out you see that oh we must separate   this there there must be a space there must  be a space so log in that's a main layout   that's where this there be a space here okay so  maybe this what we can do uh let's set Marin to two and maybe P into your so too so we can have a separation from log  out and and this name you see that but I   think we've done it so now if I click on  log out nothing happens so you can see now   we are logged in we have the name in here and  we have this we can also display the email if   you want to do that let's see so maybe once  you have this if you want to to display the   email store at contest. user dot identity do we  have email no we don't so we need to use claims   so dot claims here first or default then where  claims marks to claims. type is equal to claim types and this is coming from Dot and then email  so claim types dot you know we have to do it well okay so claim types Dot email you want to grab the value so we're going to have the email  we're going to have the password why I   keep saying password you have the  email and the name okay in this so yeah so this going to display us um display  the email to us you're going to have the name   on top going to have the email in this bracket  okay now let's work on the logouts so if I click   on log out you know it is going to log out  component so in here we can just create a log out and this will be log out so on top here you know we have to specify the route and that is log out when the page  initializes so we can use over right un   initialized async we want to go to login  and now within this login we're going to   copy this we go to log out page and now add it  here so instead of passing the token passing now so we need to include the state  reference this must be aning and that is all okay now let's work on the registration want need to take the registration  component or the registration dto what are   things that we need so registration dto we  need just email name email and password and   confirm password so let's go to the pages let's  add the components here and this is register page now with in this you can go to  login grab everything here and I come   here and I'll paste this all that I need  to do here is change this to register and also this is not loging the sync register  async this is not login model register model we have we need to include name email so let's add one to this  let's add one to this for confirm   password you see so this is going  to be password and now here it's   going to be confirm password we can  add confirm to this password this is name and now we can can just type in full name so example is John do  so we can have this as an example and the type is test that's all  that we need to do very very simple one so   all you to do here is register model  we have to replace it with this on and that is all when it come here in of  the um dto login we have a register dto   so we have to just replace this here  and now you copy this into this this   is not login it is register account async  so if this is true you want to navigate to login so go to login in case it is not so we're going to say that  if this is false this is what you want to do or we   can check if it's true okay so now that we have  this then we can use this as an and get rid of this if is true navigate login  if it is false display the message okay yes save this  let's close this and open it again yes and there's no error in here  just I we need to include the D register   dto or registration dto want to  check there it is register user dto so where is the register let's go to solution  register page and we use this that is all we need   to do very simple one you see now let's have a  method for this register async and now that's all okay so let's run this and check it out yeah so you can see that we have it  here we have the name we have the email   in here so we are logged in yes now I click  on log out see what happened so we are we   out right click on this let's check the local  stency you can see we have login and register   I need check the local storage do you have  anything any token let's have a look oh no   there's nothing there yeah it is off so when  you click on login maybe register you're into   the page you can register okay let's show  on and see so I'm going to say this is net code hop then email is admin at um gmail.com  let's say password is admin at123 so it's admin   at one two 3 you know one thing about this  is you know using this floating text by net   code up you do the viation progressively so  once you you you type it does the validation   so let's check it out we have to get a  call and I respond from an API so let's   say from the network tab click on oh see  change it so that's your tax this so can   see register and our registration completed  right so we are in here and I want to check this you can see that we have the see the payload  that the payload let's see the response this the response okay so um it's through registration  completed now go to login that's fine let's   log in and see now you we want to use this admin  at admin click on login yes so we have it being   rendered and and uh let's see are you going to  have net code Hub SL admin admin G as Gmail or   email yes we have and we are in okay so the next  thing is how do you make a call with this you know   this is getting it from not the API you want  to get it from the API and the token that we   have uh received we want to add this token to  the header so we can make a call because when   you check here check this if I click on get  this try this out without specifying see 401   because there's no token attached to the header  so first of all let's call that okay and on the   route of this you're calling from the web API  let's say from we go to the this and now in   here from the Blazer assembly from weather  forecast not the weather forecast weather.   Razer we have HTP client injected and now here we  are not calling the file you're not calling oh go back where is the weather is missing okay  so you see let me go back again and check   it out so when you see here We call we have  HP client in ejected it looks like you're   are calling from an API but we are not it's  just a static file so we're going to remove   this and let's check the route of this now  this one the API and now here we can copy this go back and now paste this here okay  so 7044 as a port where forecast   you want to get this now it this  let's try and see we must have the 401 although we are logged in I click on this  inspect let's go to network tab click on this   we have an error yes I know what is the status  code 401 you see that it means we do not have   access to this because the call that was  made does not have a header not actually   any header okay talking about authorization  header check here and see check the call from   the header you can see that from here there's  a response check the request we don't have any   authorization you see this this and there's  no token also added so that's the reason why   we not get this Let's do let's create this so in  now to do this first we need to inject we have a   local St injected already so this what you're  going to do you're going to say that string token equal to a we local storage service  okay so we have to inject a local stage here   maybe you can just move it to the um you  can move it to the UT Razer to inject it   once and use it multiple of three application  but for now let's use this so inject I local storage and this coming from blizzard. Lo  storage and let's let's give it create an   instance of local storage service so  now we grab this and um here we say   loory service. get item as string what  is the name here let's pass in that is   an art okay so when we have this what we're  going to do here is you're going to say HTTP client dot default request header do authorization do authorization is equal to  new system. net. HTTP do Heather authorization   Heather value okay so in here we need to  specify the the schema and the schema is be aside from specifying the schema what do  you do again what is a parameter and that is a token this all that we need to do it is very   simple isn't it yes now let's save  this let's rerun this and check it out okay so this ready again let's go to inspect  element and then here from the call that we're   going to make let's see counter home click on  that forecast just now we have it now check it   out you you see the status code is 200 it is fetch  type and I if I click on this you will see now you   have authorization header this the schema or  the scheme that is for the bearer that's the   parameter that's the token so the call is being  made whil you have the token attached to the   header that is all thank you so much for watching  and I think um you've learned something here as   well the sub of this project will be available I'm  going to catch you up again till then take care

Channel: Netcode-Hub

Views: 3,004

Keywords: web assembly, .net 8, .NET 8, API, Develop, Blazor, WebAssembly, implementation, controller, .net blazor, nugget package, create package, install package, download, clipboard, clipboard in blazor, copy in blazor, read clipboard in blazor, validation, form validation, toast notification in blazor, clipborad service in blazor, modal dialog in blazor, file upload in blazor, clean arhitecture, domain, application, infrastructure, jwt authentication, consume authentication

Id: 5XZ0zh1_UV0

Length: 118min 11sec (7091 seconds)

Published: Tue Mar 12 2024