.NET Blazor | Authentication with Client-Side Blazor using Web API and ASP.NET Core Identity

[Music] thank you hello guys welcome back to this channel  in this video we are going to talk about   authentication with client-side blazer  using web API and asp.net core identity   nowadays when you create a web application  or a website security is very important   so how do you protect the  application from an authorized access   how do you restrict how you provide registration  and how do you provide login credentials as well   now if I create application whereby you want user  to log in anytime the person logs in do you want   the person to be using his name and password  all the time no when using visual studio or   when using.net framework you can able to design an  application whereby here you can provide a token   and this token is going to be put into the  headache any time a request is being made it   goes in with the header and the header contains  the token the token contains the details of your   registration so the server can now access the  token and respond back to the user it is possible   in.net framework so that's what you're going to do  in this video we're talking about authentication   with client-side blazer using web API and asp.net  core identity I have um I have made this already   so that is what you see on the screen now I can  just log in and log out this is a it's very simple   so if you're planning to have a system or a  protection mechanism against application a simple   one of course then you can use or we can use  this to do it let's see so first of all I have to   register first but let's see with the source code  I want to refresh and see if I have any account   registered here let me delete that first so I'll  delete this first van then I just go in there to   register so I click on register now you see I have  home I have fed data counter now you see this at   the default apps or different default buttons when  you create a new blazer webassembly application   now I added these two but instead that's a  register and login if I click on register it   takes me to the registration page now if I click  on login the same thing applies to it okay I   have the button that can submit and log into the  system the same thing applies to this to register   now once I haven't registered let's right  click and go to inspect or click on the F12   to go to development tools now if I come to  the development section let's see with the   Network click on the network resources now let's  refresh this application so refresh it and get the   whole items loaded now if I click on fetch data  let's what happened here so fetch data now because   I have the controller yes weather forecast it is  returned a status code for 200 their verb type   here it is fetch because that's the HTTP get we  have the initiator and we have the size and the   ETC now if I click on the controller here because  I have a header preview response okay and cook it   now let's see let's go to one after the other  now there is the general information on top so   the method is get the status code is 200. we need  this already so you can now hide this the next one   is the response header and if you see the content  type is Json it is returning Json object from my   7 which is a castle server a default um Blazer web  assembly or that is a visual studio ever in it and   let's close that you have the smart server header  already now when it comes to request header now   you see we have Authority without authority over  here because I can see it well and that is for   let's see that's for the the localhost and the  port the method here it is get we have the path   that's the controller the scheme is https because  I just secured once you can see from here https   and now if you check the next one we have cookie  so differently if it is a or if application   doesn't have an authentication system we have  a cookie that is it's registered for every web   browser that gets connected to the application  for the website now this one has its own cookie   and that's a asu.net identity.application and that  is a cookie over here so it starts from this side   and it ends up to this okay so you see you want  to check here we are not having any better token   that is talking that the user logs in  and it generates for the user to keep it   now let's try to login and see what happens  here so what you see you're not having any uh   talking about there so let's register account  first so I'm going to register with example at   example.com the password that the password is  going to be admin at one two three I'm gonna   repeat the same thing over here admin at one two  three now I'm gonna click on submit now after now   you see it's been submitted and now if I click  on account you can see I have the same thing   that's the same cookie that is retaining in the  header okay there is no talking about yet let's   log in and we see that this is going to change  that's what we did here the method is closed as   indicator so you can read the header details here  but what you want to actually Focus here it is a   cookie so there is Cookie that is when we haven't  logged in we have application cookie that gives us   the access to the application and the stores and  application for us in the header now let's login   to admin at one two three let's not start login  Watch What Happens here that's nice I login here   now I am logged in so let me close this so guys we  have hello I have my email here and I have logout   okay now if I log out I have login and sign up now  because as soon as I log in because I have this   Also let's go again inspect and now let's  click on fetch data now let's go to network   now it is fetch data click on this  let's go to the headline reader   information over here so you see we have  authorization and here we have better   token now this there are here there is a token  aside from the UI and ends at 4 h i now this is   a cookie there okay so we have a new token here  now this new token here that you as soon as you   register it gets installed into the applications  local storage how do you follow car storage not   allowed to get here start from the is ey and the  last one is 4-H I go to application and I'll go to   um local storage and open that and click on  the localhost storage so we see we have the   start from the ey start from the ey and it ends at  what 4 1 8 I so this token is being added to the   header as soon as you log in anytime you want to  communicate with the server it gets to the server   it checks before it gets out the information  that we need and that is what exactly what you   want to do so we need how to provide username  and password at a time this talking that you   see contains the username password in the rule as  well so that's what we have over here as a claim   so how do you do this that is also going to have a  look in this video so we're going to start a fresh   from scratch so you can watch the whole video and  it's going to help you when you want to secure   your application by I'm adding the identity that  is there authorization authentication mechanism   in okay so I'll just close this and I just log out  as you can see as soon as I click on logout let's   click on inspect and now let's go to application  again now you see a look after it I have nothing   looking stored over here now if I click on  the fetch data let's go to the network and   now let's click on that let's see the headache  we see the better token authorization it is off   only cookie left so this time of the user is now  logged out and it has to login again to get this   access token okay so now when the user logs in  there are some rules that you want to allow the   method that you want to use that to apply or  um perform there are some feature that you want   to add as soon as the design logs in either  as a user as administrator maybe this video   aside from this video the next video I'm going to  talk about that add-in claims or rule base to the   authentication method by this time around you're  talking about Json Authentication and the topic   is what authentication with client side blades  are using web API and asu.net core identity and   remember that this is in the Blazer webassembly  project so let's start going now the first thing   that we need to do here is we have to create a  new Laser Web assembly project so let's close this   so I'll close this and click on file open or line  to visual studio 2022 click on new now project   so this project we're going to choose laser  webassembly app we wait for the template to   load then we go in for Blazer web assembly this  is a Blazer server app you don't want you want   the assembly app so click on that and I will  click on next if you actually want to know the   difference between Blazer web assembly app and  a blazer server app you can check the playlist   of this channel I have a video explaining what  Blazer webassembly and the Blazer server app   what does it do very simple so click on  that and then next that's the ability of   assembly now our project name is going  to be demo so let's make that JWT demo   so JWT demo now that's the location and the  solution name click on nest and as I record   this video the karen.net framework as I call this  is 7.0 and that's exactly what we are going to be   using so we click on configure for https you want  to want application to be secured as well and we   have the co-host there this gives us the access to  the client web the API controller for as a server   and a class Library as a project or ASL as Library  as a tech project so we have shared project as a   class Library we have a server doesn't API as the  server and we have the web assembly as the client   so click on Create and now let's wait what  question is being created so we wait for   it so it is ready now and as you can see from  here we can close these tabs you can close them   when you go to solution Explorer you have our  project over here so there's a default one as   I was talking about you have the client project  you have a server that's the API and we have a   class Library as a search Project now you can go  ahead and run this application and see the default   that it has so click on this to  run that now we wait for it to run   so now you can see it is building it after  building then it's going to run to see the default   app okay now I know we are starting from scratch  so I want to I want everything to be open to you   see the steps you can follow so  you can get any any errors in yours   so that's why we are starting from scratch  okay so let's wait now it has been built   and it is loading so this is the old one  you can just now clear or close this old one   so the current one that you have the port  is seven zero nine seven two five zero   if you have hello world now about nothing else  again no register no login because you haven't   added that is a new project now um fed data and  counter everything is here right click and go to   inspect element or click on the F12 key and when  you go to the network tab click on the FED data   the data controller click on that you see we  have the cookie right here there's no bar token   here so this is the default one that we see  when you go to your application local storage   now because we have to know assets took in the  stored here so that's the default one because   we just created this application and there's  nothing in so we are about to configure or put   everything together to make it beautiful as you  saw in the displayed or the the one that I use   for the explanation okay so once you have this  application created what's the next thing to do   the best thing to do is we have to install  some naked packages and that is what you're   going to use for this whole project okay so  what are this package that we need to install   let's see so first of all since you're  going to connect a database we need an   SQL we need anti-firmware core we need enter  framework code.2 as well okay and we need   the authentication.jwt that's a Json web  token Vera that's authentication type and   we need yes.net core identity since there's  an identity that we are creating we need   attention UI as well and we have to install the  diagnostic.entiformal core we have almost about   five yeah five or six and package that we need  to install to make this happen so let's get going   so go to the project and with this we are first  going to work you see we have three sections   in application client server and shed the  server here the controller and that is a   API so we are first going to work on the API  first to come to the set then we go back to the   client so all what you're doing now is based  on the server take note so right click on   dependencies in the server project and now let's  go to manage nuget packages so these are going to   install these packages onto the server okay so  click on the browse tab and that is we're going   to make a set so first we need authentication.jwt  better so you can type in the WT bear that's that all right so let's see next we have  microsoft.asu.net core authentication Dot   JWT better that's what you want to install by  Microsoft turn around 7 million downloads wow a   lot so let's click on install the current Table  version is 7.0.3 click on install let's install   to the server project that is there API web API  accepts the terms and conditions and you wait for   the installation to be done when you are done next  year is done when you click on the output we have   success okay so finished now we have to install  another one as well that's identity.ui so identity so identity dot UI now let's wait and  see if we have any package as identity.ui   so you can see microsoft.asu.net core identity.ui  so click on this now install okay but let's   install this as well 59.5 million downloads  accepted by Microsoft as well output it is done   we have to install diagnostic.nt framework core  so let's install that and that is a diagnostic   dot anti-firmware call not because I have done  downloaded them already so I type the name here   that's as soon as I start typing I get a pop-up so  we're not having unless you type everything so a   diagnostic dot entry framework call you're going  to see the pop-up and that is what you want to   use diagnostic dot entry framework call 70 million  download by Microsoft 7.0.3 stable version click   on install accept it if you don't have time to  read everything here yes accept that and go away   now we need to install SQL Server so I close  this and type in SQL server so there is a   database management software that enables us  to create database so that is it Microsoft   not the extension you want this one Microsoft  anti-firmware code.spr server click on installs   7.0.3 accessible version and when you go to the  output it is your style packages so you can see   let's accept that and we are done now the last one  that we need to install is two so type in tools so with this tool that is a Microsoft  that entry framework core.tools click   on install and let's install that accept it so you wait for it to get  installed then we can proceed all right so everything is okay now if you if  you're not believing that you have all these   packages installed you can now do it manually  check how do we check it out solution Explorer   now on the same server project dependencies  right click or that you click on this drop down   now if you see expand that and go to expand  the packages now you can see we have all   these packages here DWT better um server we have  diagnostic identity UI framework core.sql server   and we have the tools so we get them right we  are here and we can now move on with a project   okay now once you're done the first thing that  or is it the first thing the next thing that   we have to do here is to create or set up our  connection string how do you set a connection   string so let's do that and in a connection string  we can set it up in the app settings.json file so   click on the up settings now take note that we are  working on the server project so not the clients   several insteps so after the Json file now  click on this and we want to pass in here so   you want to pass in connection strings   and this connection string you have to give  it a name as what so that's the default default connection now this default connection are server  is equal to that's a looker then   you can close this database name is equal to  JWT demo okay then let's see trusted connection   trusted connection let's set this to  true and Trust server certificates let's set this to true now it means we are going to create a database  known as JWT demo currently we are not having   the database yet now when you create a  database you want to track the connection   you want to also try the certificate so  anytime that you want to make access to   database you want to have access database  it becomes possible for us no hand runs okay   let's save this now take note make sure you  bring this comma here let's save that so   that's exactly what we are doing here now in the  app settings I also have the script now you see   we can also pass in Sarah look at DB you can  pass and slash my ssql local DB okay database   name or here we can also use initial catalog  and this is a Transit connection multiple active   results set through and we can also use a trust  server certificate to True okay now the next thing   that once you have a database lesson set already  there's nothing to do here is we have to create   our application DB contest now this application  DB content is what we use to generate a table our   identity table for us in application database or  that the SQL database so let's do that we first   have to create a folder here and name it as data  you want to organize our work okay so let's set it   here as a new folder the name is going to be data  and now let's create a class in now at this class   the name that we're going to set this class to is  application DB contest so I just have to copy this   and let's go to application right click and let's  add a class to it so add then we go for class   the name is application DB contestdb is  database contest so we have that and this   watch we have to do I just have to grab this and  let me just grab this and paste it right there   okay so now well there's not GWT  login online there's going to be a JWT this jwc demo okay so yeah Contour plus  period and now let's see what happens Control Plus period now we have a loading  suggestions we wait so we can actually add what   they need to use now you can see we have install  package Microsoft um the identity core framework   so we have to install this as well and let's  see if we can actually install this let's have   all right so we wait once we get that  installed now we see it has finished   the installation and let's see if this error  is going to be cleared off yeah it is gone so   it means you have to install that package  as well and that's the name of the package   dependencies and let's expand that let's  see the name that is empty framework call   we have it over here so we obviously.net  core component web assembly server   um you have Diagnostic and you have what  microsoft.nt that's a call.identity.ng framework   so that's what we just installed okay so that is  where identity DB contest is coming from so we   have that installed as well so as you can see from  here we create a Constructor out of this we pass   in this DB contest option then that's the name of  the class that we created application DB contest   then options then going to inherit from this base  options so we are done with this not really not to   provide any table here this has everything in it  and as soon as you run our migration it's going   to create a database table for us the database  name we specify the database name as JWT demo so   the tables for identity of authorization is going  to come from this identity BB contest take note   all right now we have this done the next  thing that we can actually do here is   we can now go to our program.cs file  and register our connections right there   so how do you do it let's save all the solutions  program now in a server project we have to locate   program.cs file so click on that and we have  to set up this over here okay so in here that   is what we are going to do we have good other  services dot add result pages so we can add   these services by calling the Builder that  Services then we pass in the server that you   want to add so what are the services that you  want to add you can just grab them from here   um I have program.cs file now let's add these  Services first and the first one that we have   to add here you have to add a database connection  service and that is this as I'm going to copy this and I'll just have to place it here so today  is builder.services.rdb contest so that's a   class that we created the application DB contest  you pass an option then you're going to use the   SQL Server that we just installed as a [ __ ]  package then we are getting a connection string   names that will be default connection relocate to  app settings that is the name over here default   connection so you can just copy these and I'll go  in there and I'll paste it again to see if we are   right okay so that's what we have to add first now  the next thing that you have to add is we have to   add our default identity okay so edit for identity  that's what we have to add here I'm going to copy   this and complete this and let's go in there  and paste over there so down here we have to let   me give a space so it won't just okay so we are  adding these are also services that we're adding   and that's the default identity and this identity  user I remember this identity user is coming from   data and identity divided we just added remember  that we added this another application DB contest   that's identity DB contest okay so we can grab  identity user in that so that's identity user that   we are added over here and we added that framework  store and we pass in this contest class when my   desk and desktop container can I send and it is  that is what's going to create a database for us   okay and this contest class also inheritance  from application that's identity DB contest   take note so we have that okay so we have this  set and the lesson that we can actually do is   also quite simple let's see so we can have to  set up the identity database so by creating   database so now we have these two Services being  registered connection and identity user let's   perform migration to create database table so go  to views and I can see we have solution or SQL   Server object Explorer I have my over here click  on that and click on this refresh button over   there so if I expand my database okay my server  database because I'm not having JWT demo I have   ewtdb I'm not having a demo take note that the app  settings will specify JWT demo we're not having   any database name and demo after perform migration  we're going to see that table and the various   tables database and the various tables that can be  created by this identity DB contest so let's see   let's click on tools and now click on magnet  package manager and then click on package   manager console or package managed console now  in here you see Server is being selected that's   what we want you can click on this job done to  choose the client the set by this time around   we need a server so we can clear this screen off  so CLS you can clear this off okay so that's what   you're going to do so add Dash migration and the  name that you're gonna name is is initial because   that's the starting one you can change the name  to anyone that you want even your name you can   put it over there and this is going to generate a  folder and migration files in that folder where do   you want to keep this folder and all this file you  want to keep them in the data field remember that   we created a folder here known as data and that is  what everything concerning can I send supposed to   be so that's the data so you want it to be here so  we can specify that as Dash o so that's an output   and let's pass this data folder slash then the  name is what migrations so we specify them the   folder name that you want to get so oh another  data slash migrations click on the enter key and   let's we're gonna happen so we're going to build  application first after building is going to just   run the query that is a migration and when it  is done we are going to update the database to   see the table database name and the table so you  can see it is done now if you check the migration   file we have the name as es.net rules let's build  next user so you can see all these table names   create table create table table name the next  one let's see create table name create table name   created we could see all these tables where are  they coming from you're coming from the identity   DB contest okay so that's what that's where you're  coming from because we didn't specify any database   here or table name here we just specify the  database name as JWT demo but we didn't specify   any table by since we are inheriting from this  identity DB contest we can now get the various   tables in our migration file okay so kindly when  you go to server um object when you refresh this   we are not going to see database yet because  it is not there unless we update the database   to see the JWT demo now let's update that to the  same thing and let's see to update Dash database   click on the enter key and let's go happy  so we see it building started and we want   to create that when you click on solution  Explorer the data folder you could see we   have either for the name as migration when you  open it that's where you have everything in   okay so you have it here okay so you can see  it is done now it is writing some queries for   us and this uh this is done by the anti-framer  core all these queries has been written and run   by the entry frame of core that's very good so we  need not to type everything else ourselves so now   once you're done let's go back again refresh open  the server database let's see uwt then we'll have   it right here so click on this expand now expand  tables and we see we have all this table but the   one that we are interested in most is the asu.net  user that is what we are working on today so click   on view data now let's see what happens here so we  see we have ID username normalized username email   and Etc analyze email a lot okay we're going to  fill all this what you're going to feel here is   the password has security stamp email um username  normalize name and ID these are the things that   we need for email confirmation you can actually  add that in there and as far as you start build   the project you want to confirm my email and Etc  I have to run a check if it was too fantas is   getting enabled and all these types of that you  want you can actually do more with the help of   this table and that is good out of the identity  DB contest okay this table name provided by   default as soon as you heard from the identity DB  contest you get everything here rightfully as you   can see okay so we have database created we have  a table names as well now our table is empty so   what is the right now what is the next thing to  do so we can actually now enable Authentication   and now with the edible authentication we can also  register what the services so the next step is   to enable authentication in the API and this how  do you enable or how do you register the service   so let's see we go back to our program.ts  file now in here down here okay let's go   to application now this is what you  want to do so you can now grab this and paste it here okay so this is what we just  added build that Services there's also registering   so we're registering service bernard.services.ad  Authentication so we are adult education and we   are adding DWT better default dot authentication  scheme remember that there is a mechanism that   are going to use other authentication type now  with the add JWT better we pass in this options so let's see what we can actually do here so we add the GWT better and we pass an option  so options are talking validation parameters   you create new out of it we set this at the  parameters so by date issuer through the audience   is true now this issuer it is the one that is  our server that is because it's going to work   within the server and a clients remember that in  a service network you see we have seven a client   so by date issue who is issuing the the code  always issuing the authorization or the dedication   that is a server so we want to write in this the  issuer an avoided audience the audience is a plans   anyone who is coming in the invited lifetime  so if you want maybe in a token we can decide   to set it expiration date yes you want to write  data because maybe if you want we don't want to   accept a spa token so you have to validate that  time being added and taken as well and avoided   if you're assigning key through and where do  we get this issue in the audience we get them   from this builder.configuration um then we pass  this JWT issuer so with this we haven't set them   yet we're about to set them and now if you are  signing key so we get it from JWT security key   so all these that's not you here build that  configuration it means you can grab them from   the app settings.json here now yeah do we  have any key here do you have any JWT if   you are audience and security key no we don't so  let's go in there and set them up let's get them   so the next thing that we have to do here is  we have to provide those keys and after 10.json   these are the keys that you  want to add we grab this one let's go in there and now here you can paste  this so make sure the last one has comma   now this uwt security key now this any random key  that you want to pass in but I know they should be   equal to or more than 16 characters now there is  more than 16. if you think I'm lying just count   yourself and see so it must be more than 16 or  equal treatment but not less than no I'm not going   to work on that so use more than 16 characters  here and the the issuer is a local host and the   audience is a local host now JWT expired in this  how many days I want to add one day so 24 hours   a token is supposed to be expired meaning you  can use a token in the header to access content   in the application you have to register again you  have to login again with your credentials so you   can also generate another token for you okay let's  save that now we are done with our token or a keys   the next thing that we have to do here is we have  to enable authentication by adding the middleware   pipeline so what are the middleware pipeline if  you go to program.ts file middleware uh what you   can see as app.use after all these are middleware  path lines so we are going to configure that and   what I'm going to do we have to use app dot used  authentication then we can use the authorization   as well so our program.cs file now take note that  authentication comes first before authorization   so apply the right here take note authentication  first before authorization if not it's going to   attack the user before the skating and that is  very bad because you can give the person access   then you decide to check if I do qualify to have  this access it doesn't make sense right so you   have to check first you qualify to have this  access yes then what assets can I give it to   you that's a authorization you'll assess the  person and after that very simple and clear   let's save this so once you've added a middleware  pipeline then we can now go ahead and create our   controller now this Contour is what we're going  to use to register as a account controller okay so   account controller now this account controller  let's go in there to our server now in our   controllers we're going to add new controller  and that's going to be an account so let's see so we are done with the app settings  you can now close that off right now   the FDB contest and you can also want  to close that up as well okay so now   um with our account controller we can grab this  account controller then you can go to application   right click on the controllers folder  and you have to add new controller   and the name gonna be an account so we have  to go in for API API controller as empty and   then here let's build accounts controller click  on that we have this controller added okay   what are the things what are the  methods that we need to use in there   we can get all this method here so first of all  let's create a Constructor and I'm passing the   identity user as user manager so in here to  create Constructor click on this Control Plus   period or dot you can now generate Constructor  over here but since I have my I'm going to   paste it over here direct so we have account  controller we create a Constructor we pass in   user manager as an identity user then we give  an object name or that's the instance as user   manager we initiate this inside a Constructor  so when it is ready to be used anywhere anytime   nothing to do if you don't  want to create an account   which method candies are passed on to create  an account that is this method pushed so this   the method name is what post okay so this is  post and now it is coming in from register model   okay so this one these are going  to pass on to create an account   the method name is post from the body and here  it it's coming in with this model register model   and we create object out of it now with this model  it's going to come in as soon as it gets here we   create a new user out of the identity user we set  the username from this identity user to the model   that is coming in is email reset identity email  to the model that is coming in email the person's   coming in email okay so let's assume this model  represents the entity the human being registering   our site the hymn is going to provide two methods  or two values or Keys the first one is an email   and maybe password okay name but in identity  user you want to create a variable for this   and this identity user has username and email  so we assign the person's email as username so   we can display hello then your email over there  as a design name then your email is going to set   as an email over here when we are done we create a  this is available as what result then we are going   to create a user manager we're passing this new  user that is coming in because you have your email   and a username I mean add your password as well  so this model is also coming with a password to   recreate now when we are done account or the user  is now created now we check if it is not succeeded   we can return errors so we create an object out of  errors then we set this Arrow to what is coming in   we return a register results this is also a  model that you're going to create now this   results contain two attributes successful as a  Boolean which is false that is if the results   couldn't succeed because there was an error  we return force that is successful equal to   force and we can now pass in this error here  okay so you can pass in what is the problem   you can find device to display to the user but in  case everything works you're going to return new   restart results success is equal to True okay  and here we can talk passing message as maybe   user registered you can pass it on the error  side so this error we can pass it because you   know this register result comes in with errors  and this Boolean two method or two properties   here so you can set up this error but the reason  why I am skipping this case as soon as there is   a finished creating the account and it works  successfully I want to navigate the user to   the login so I'm not going to display any message  the user maybe you can use toast or you can use   any other sweet alert display that okay but here  I'm going to use that sweet alert I'm going to   use any JavaScript as well so we're going to read  that a person to the user so that's why we are not   using this error here the success is through and  maybe we can pass error as na let's click that off   so we have this now once you have a  controller that's going to register the user   what is the other thing to do next so we  can go ahead and create a register model   so this Razer model is  going to carry in with email   and password and also going to come in with  confirm password because you know email   and password right let me confirm password so  we can copy this register model let's go to a   solution Explorer now this is going to come in the  shared project so right click on the set project and click on ADD class let's  paste it as register model.cs   and now this register model I have it right here  that I'm going to use register model where is that   let's say we have login results and  let's do half register model in here   all right register model and that's what you  want to pass in so I'm going to copy this   method or since I have this already I can  just grab only the code so let's copy this   let's put this here now this antenna  you don't want that you want to access   this outside this cup so it's insert it  or we change it to public it is open to   the public so everyone can have access to  this why did I why did we add this model   in the set project said project means anything  that is passed here can be shared through the   server and the plan now this register model  the clients are going to use that so that's   why we price over here but if it's limited  to the server you could have added it to the   server by saying this the servers are going to  use what the clients are going to use you can   pass it the set that's what we did okay now you  can specify or we can simplify the let's copy   this or let's cut this let's paste it here let's  bring comma okay so you can join them together   and even with this we can still join  this as we can pass this in one life   so you don't want to get yourself confused so  display them the first one is required there is   email the screen name is what email so let's close  this and this is simple and we are done isn't   it now you can still copy this as required and  this is a string length you can place this year   okay then this is a display name you can cut  this you want to display all in one property   okay then there's a display type as  password and now the name is going to be okay so we have one over there so we  can set it in this way less like this   okay so this also required user can skip this now  you have a display name as password and at the   type here it is password so anytime that is a pass  in the password it's going to mask it into star   star okay you see that thing yeah and this is the  error message so the number that you must maximum   character and this year it is a string and this is  a placeholder so it means the number you guys are   going to type first might be at least two and the  maximum is supposed to be what one so we have zero   here so then the the number must be at least okay  so watch here because you have the minimum here   minimum is what six so the the what is that type  that is zero one must be at least minimum of two   and the maximum is one there's a hundred so what  is that going to pass is the first one they're   going to capture that minimum is six that's the  two here one is the maximum of a specified here   and this against the password now confirm password  data type also is the same as what password and   now this is a display name as confirm password  so you can cut this and you can paste this here   so and let's also compare so we are comparing  because you know compare Parts with the confirm   password these two password must match  isn't it so you can now take this off   and you can bring this to the next line so yeah so  we have base and everything is working now okay so   this is our model now let's go back to account  controller and our control plus period let's   use set project now it is that we've solved that  each now you see this model this it is coming in   let's if you right click here you can go to Peak  definition now you can see that this is coming   you to an email password now if you go to the  application here if you have email and password so   we have this and the next one is the registration  results so that is after being registered   um when you have error or not what is the output  so we have to pass the wire so we have to create   this awesome model so copy this let's go to  our solution Explorer Now set project let's add   another one as last then results registration or  register results and now in here we can register   result do we have it yeah I think it's over  here so we need only this to add properties   now the first one here is is Boolean so it is  going to state if it is Success that is true   or false and the first one is the next one is I  and the number one string or a list of strings   and that's them as an error we save this and  so when you have any error you can pass into   the error side and if it is not successful that  is Boolean so it could be true it could be false   Force means it is not successful through means  everything is intact so we can also Control Plus   period you can also add that as well so we have  this we are done okay now the next thing is can   we take this um controller yes we can so  before we do that we have to Let's install   a project as a package known as the swasbacker  now size backer is going to help us to navigate   or use the Swagger UI and as an interface  made for an API okay so let's install that   thread so right click on solution Explorer  now on our server project let's expand that   dependencies right click imagine you get packages  and now browse up we need Swatch backer so swash   backup and that's advancedbacker.asp.net  core let's insert a can version is 6.5.0   accept it you don't have time to read and  output it is done so we see it is finished   and what can we do let's add let's configure that  so we're going to configure that we're going to   add the services and also configure the middleware  pipeline to program the Cs file and now in here   we're going to use on top here so we  have to specify Builder dot services   dot add and I'm going to be swangagen is it is  it generator yeah okay so that's the adding the   services now let's configure the pipeline that's  the middleware so in here app.use app.use Swagger   and oh yeah and also the next one is app.use  Swagger UI so Swagger UI so that's the design   interface now let's save this so once you are  done with this now you see we have a controller   set already so we can now build application so  click on base but let's see this application   being built okay so you can see this building here  for us but to speed things up let's click on this let's navigate to our page here now I'm just going   to return it's going to refresh  itself and you're going to see you're going to see the same thing as well okay  because you haven't touched the command side we're   actually working on the controller that is the API  so if you see nothing happens here the same thing   but if you copy this last couple of days open  the next interface face this and now add Swagger   so Swagger and I click on the enter now  you see it is going to locate it so I got   UI that's what we installed but as you can see  from here you can see we have API account so we   can raise an account here so let's click on  before we do that let's see let's open this   SQL I do have yeah so that's an asc.net  user from like from the database table   manually first you can see we have nothing no  information here right let's see so try this out now let's use user as example.com now the  password Here is let's see admin at one two three   and now let's make mistake and see so admin at one  two three four now let's click on execute and see   what's going to happen now you see the password  and the confirm password do not match that's   exactly what we stated in the register model  that data type now let's see again if we pass in if you decide not to use okay so let's say  we decided to take off this one two three   so admin at admin at it might be six but this  is what this is yeah this is six isn't it so   three three let's take off the admin admin  and then let's see what happens so execute it   now let's see so the password must be at  least six and the maximum is 100 okay so   um we have to it has to be six so you can  now add them one two three all right so   one two three and now let's click on execute  let's see the response that we're gonna have so do you have any response the  password might be at least six   um that as you can see from your admin at one  two three I'm not one two three good so you   can see the response is what is successful so  Eros is nah now let's go to our controller now   in our let's go to translation Explorer now in  the database table that's the asu.net core users   if you don't know how to get it click on SQL  Server object Explorer expand this right click   and click on view data so let's refresh this  and now we have to see the data that we just   registered as well it's over here actually we  have an ID user ID we have the username that we   specified and that's a normalize username what is  the username we have the email normalized email   not the normalized one is set them into upper  cases so as you can see from here you have a   security stamp that is a stamp here and there's  a password so password hash you have over here   now you see we have email confirm Force so if  you want to add a mechanism you can do that and   you can send this email confirm you through  okay and we have a lot of value unlocked and   locked out enabled logged out and phone number  and Etc okay so let's focus on this so you see   our API is now working that's the registration  now the lesson is talking about is a login so we have to create the login so after  registering that to application we can now login   so once we log in then we create the token okay  and set it up to the local state or the persons or   the client browser so let's see let's go in there  to our solution Explorer and now the name that you   want to use here it is called login controller so  in here I have the login controller here already   so I'm going to copy this login controller and  in here to the controllers for the another server   right click on this and I add new controller so in order to confuse you that is what I'm  creating a controller for each method okay if   not I would have added the login and eraser and  the same control line that is a One controller   but I'm just pressing them you can do it you can  do so be flexible in your code or in your design   in your programming you can do it anyhow you want  it to be to make sure that it is in order and for   that well so you need to that is not cancel we are  adding controller so that's an API yeah mt1 add   now I'm going to paste as a login controller click  on ADD and we have that and you know in these two   we have to generate Constructor so control  period so click on generate construct over   here so if you have a Constructor generated but  I'm going to take this out because I have one in   there already so less and we have to inject these  services so we have to inject High configuration   now this configuration it is coming from the app  settings.json remember that app settings.json file   that is where we can get the eye configuration  from this so you can have access to the data here   by having the high configuration and now we need  to use identity user remember that this I need to   use a as a signing manager here remember that  here in the registration that I can controller   we created an object out of this that identity  user so this user manager has everything that   V1 because it's not the user registered it gets  into that so we can grab data from this user   manager and this design manager is inheriting it  is coming in from there is a user manager from   Identity user so we need the same to inject  the same thing into the login and controller   so we can have access to the stored details  on the stored data I believe this is clear   yeah it is clear so that's what we known as we  call it as a sign in manager and it is from the   ability user okay so we initiate them over  here and this we can't we can just pass this   on one line okay yeah you can do it like this  and I initiate them so once you're done you   we have to now check so the first one yeah that  is the post so when the user passes on his data   we check the login this the user that is coming  in so this is going to hold the user's data   now let's log in we check so we stored the data  from here now check so sign in manager.password   sign in async so we check that the password coming  in is equal to one half there corresponding to   this email now if it is not we're going to return  a bad request okay then we need to create a model   that's the login result as we did for the username  now as we did for the registration now this is our   result so coming in with success code and an error  as well so maybe you want to know you can actually   do here to be generic case instead of as defining  the class as register request you can just make it   as maybe a response so that response is going  to hold this status that and the Boolean and   also this error message so we can pass in both the  login and the registration but don't worry today's   video it is not to confuse you not to make things  complex but that's simple so let's create separate   uh models for that so this was somebody going to  handle success and error that is when it is not if   it is not then we're going to return claims that's  the empty claim because these are data doesn't   sync with what we have there so we don't know  the user we don't have the account of that person   if not so as you can see from here we're gonna  return [Applause] if it is succeeded this is   not success you're going to return empty one but  if you see that that's all you have to do so if   it's acid then then we're going to store the  claims from that so claim type dot name then   the email so this claim type the name that you  want is the person's email remember that another   account will set the name as what is email so  as soon as you call the name it means I call   the person's email and that's what you're able to  display hello then the emails have the name the   actual name of the person hello then passing the  email so in our case the email presents the name   I will display okay so aside from that we  store a Cuba here we get the security key   remember this coming in from the accessing.json  datability security key and we also create a   rubber as a credentials then the key that you  have here we convert it into that's an hmac Sha   as 256. so we converted to what he has a  credential then we set the expiry so the   spine here we are adding this we can actually  add seconds take notes so let's count this now   you can see that add you can add seconds because  we have a lot milliseconds minute months and yeah   okay but in this case we're adding just a day  so you want one day so um JWT expire in date or   in days when you go to our acceptance we specify  here as one so it means within 24 hours the token   must expire we generate the talking out of this  once we have all these properties or all these   um Keys we can now put them together and generate  our token so we did a token binding the issuer the   audience then the claim that we have over here the  expiry date and the credential so we store that   after generating our token restore it onto this  token whilst we are done we're going to return   okay so successful is working through because  it is now created token is now created and now   we call we write you this so right token inside  this method we have a variable known as token so   we store the current token that we have created  onto that variable then return that login result   okay so once you have that the next thing that  you can actually do here is we need to create that   login model so let's see login model do I have  it here login and the model right here that's it okay so I think it's around this area login  model so this is what we need only email   password and remember this remember me is  that you don't actually need this for now   so you can take off this okay you need email  and password so let's copy this login model   and now let's create in the set  project so right click and now add   class and on this class will be login model.cs so  let's go in there and then grab what we have here let's set this to public then we can now paste this so this is required  it means user can pass in empty you must pass   in value yeah okay and even with the email  you can still add an email address to specify   so so let's do it again so email address and I  with a password when coming in we can specify   the data data type so let's go to the register  model and now we can specify this data type   towards that it's password so let's  copy this in here and login model you can paste this here so let's play this off  okay so now we are done with this now let's save   this login controller click on Control Plus period  let's use system.set project and this login result   so let's also create a login result  and in here login results copy this now in set project right click and  now let's add the class and the name   is going to be login results this login  result we need these three properties now here public as you know let's paste this in nowadays determine the  state of the process is this success is this   not successful so true or false we have that  there's an error in case we have any area can   pass in case you have any message you can pass  into the error this token is going to handle the   token generated when the person locks in simple  save that controller login as a log controller   we have that so we have solved that issue right  here and let's see so let's save that and let's   also test it and see what we have in application  if the login is actually going to work so here   let's wait for us it gets refreshed now  remember that we have the account here   and the name that we stored was we have the  email already let's refresh this in here so let's switch ones it gets refreshed so we  can try and login and see if you're going to   have the token uh we're going to have  the token generated meaning our API is   now working then we move on to the client  session to have access to to create service   so you can render to the API to log in try  this out now you have the email here already   and remember that the password is what admin  at one two three execute that's what we have all right so everything is intact now as  you can see from here successful we put   it through error is now now check it that's  the token so this is okay that we are getting   so e y d h b g c that's a lot SK that's the last  one so there's a token okay so this token is going   to be added to the header so it can be stored onto  the client's header request as soon as a request   is being made it comes in with this token then we  check that it correspond with the user credential   if yes we allow the person to access any data  that the price is allowed to authorized to access   that is very clear and simple so once you have the  API done so this means that our server projects   we are done we are now moving on to the client  one okay so because we have a registration and   login system working perfectly so let's go to  our client component so we can now close our   server so let's close our server and close that  said and open our client now the very first thing   that we need to do here is we have to set our  apps.reza components you guys here it's going   to the authentication is going to depend on this  to render to check is it going to be allowed or   do you have any Authentication so the very first  place is starting from this because that's where   the routing and everything is coming in from so  the very first thing is you have to tackle this   how do you do it now I have rate over here we  have to make change in that and we move forward   so that's going to be the app.reza so this  app.reza you can now grab what we have here let's go in there and now instead  of this you can now comment this   then let's paste this here okay so let's  see what we have now so Control Plus period now let's use everything we have right  and this cascading Control Plus period   okay so generate component from tag so we have the  closing the opening all right so this let's see so not found you have that and we pass in  the cascading open and close at the layout   all right so let's save this now let's refresh  application and see what we're gonna have now so there's a question and let's  wait for this to get refreshed   and see what we have all right so we're seeing  from here everything is off because we have set   the cascading authentication state so it means you  might be authenticated before you can view this   but have you authenticated now no so you have  blank right click and go to inspect element   now when you go to console  nothing here okay now um Network   refresh this application as you can  see from here it is working perfectly   but if you see that from here we are locked we  have to we have to be authenticated or authorized   people can have access to this site and that is  what this guy cascading Authentication state is   doing this okay so once you have this set the  next thing that we can actually talk about here   we can move my head we can configure or create  a custom authentication State provider I know   we have a default um authentication State  provider so we're going to create our own   a customized one we're going to inherit from  that authentication State provider because this   authentication State provider contents and method  that we're going to use them in a customized one   so it is better we heard from that so let's get  going and now with this we are going to create   a folder in this we don't create a service  okay let's create a folder in account that's   a client project and we name it as helpers so  let's make it as helpers it's a helper we were   just one to help her not the helper here now in  this helper let's create one and release limit   as API authentication State provider so let's  copy this and in here right click this and and   new class so with an API authentication State  provider and that's a class click on ADD   so we have this class and now in this class  what we're going to do here is first of all   it's going to inherit from this authentication  State provider so I'm going to copy this   okay and now aside from that we have to initialize   submitted over there so let's create a Constructor  and initialize and Method so this is a Constructor   that we are creating authentication State provider  so we can now get going and close this off   because indicated all right so as you can  see from here we are now using the local   storage service but do you have actually a  little car storage service here no we don't   so this means that we have to install this I  look at storage service so let's install that so we can click on this Control Plus  period and let's install we have um no okay so let's see we have blizzard  let's go to solution Explorer now in   our client project dependencies  right click and go to manage to   get packages now under browse tab you  need to install blizzard local storage so that's it whoa all right so  bracelet local storage and that's   what you want to use by crescenti  so click on this and now install all right so we are done output  you can see it is finished   so let's go to authentication State provider  Control Plus period now let's inject using Blazer   local storage so we have it set here and now we  initialize them over here with the HTTP client as   well so you can see we have the Constructor  we inject them then we initialize them here   okay now the next thing that we can do here is we  have to have the method that's going to get us an   authentication State service so let's see now if  we click on to control plus period let's see what   we have so it is same we should install this over  here as well okay so let's try to install this   so Control Plus period Control  Plus period now install component   dot authorization let's install that three weeks all right so it is done is it let's switch for our Y and C whoa  it means we have problem over here   um could not found so all  right so you see it is done now   okay so let's see whenever I click on this other  engines did provide that and then go to definition   you can see we have a method in there that  is known as get authentication State provider   and you see right away get authentication  state async so we are going to override this   method and specify what you want using this  authentication state so in here the next line   best place what we have in so we create our  technician States that's a method that we just   solve right there now we are going to get a token  set up from this okay so we are getting the cast   right now we see as soon as you log in we have to  set this as an item isn't so we have to set the   token that we have generated for the client you  have to set it or store it into the local storage   now when it is getting authentication  State async it's going to grab that token   that's going to check does it correspond  to what it has if yes it means it is   correct then you can now set it as in the  barrel token and put it or pass it onto the   um header request so when a quest is being  made you're going to see this token I said   that as we saw earlier on so the type the auth  authentication type Here is known as the bearer   and you're passing the token being gotten from the  local storage as I speak we haven't installed the   local storage token we do that when we create the  save it so here we get it from the local storage   we check if it is now or empty we're  gonna return new as Anonymous it means   you don't know the person we don't  have any information about that person   if not then you're going to set it to the header  the type is better I'm going to add a token as   well then we're gonna return the application State  then cleanse principle and identity then we're   going to check the the string you could say wait  the token that is coming in if you check our own let's see now the one that is coming in here has  let me set it again so admin at one two three now if you see the tokida is coming in has  three sections okay so what's here this is   the first one it goes up to this this second one  from this dot up to the last one I have you see   we have three sessions here so we're just going  to check this three sessions and then grab the   claims and any other method in it that can  enable the user to authenticated authorize   so this method you have to create this method  that's a past claims from JWT the type is DWT   the odd type is what Bearer that is  the token that we have gotten from the   look afterwards of the client browser now the  local as to the name of that street name is odd   token that dot addition or authentication token  let's add this method so we can add that method   over here but before that before we  add that method we have to also check now this Mac User as authenticated so it  is authenticated if yes then run installed   authenticated user with a claims principle then  we call for a new identity you send it to the   name add to the email so the name the claims type  dot name you're going to use the person's email   so that's what you can actually use to welcome  the person welcome hello then pass in the name   as identity dot name and now when you call  in identity.name here you're going to have   the email in place of the name because  we are storing what the email as name   now we get our authentication state tax from  results okay from this orientated user that's what   we start over here then we notified of navigation  State change so this is going to update the whole   application or the section either the person  is being authenticated or not or logged out   so this is going to update that's an event that's  going to erase and update the form as well okay   so once you have that let's see the next thing  that we can do monk user as log out so that is it   when the user logs out click on the logout button  what do you want to do you don't want to leave the   check here so we when we log out first of all  we set it as Anonymous claims identity we set it   to now so since we get a clear identity as empty  we're gonna have a synonymous so we don't know you   we pass this Anonymous so it  means anyone authenticated   you're going to see the name the email  nothing notify the application that you   are gone you are out now when you are out  this is what you can actually use to specify let me copy this well before  I made any mistake in it okay so let me complete this I mean yeah okay so now the next thing that we're doing  here is now with this here is that's your   pass claim from GWT now this past claim here um  it's gonna split the token as indicated on with   the dot pick the first one here then check the  payload try to get the claims out of it the rows   okay so we're gonna get the rows out of this  if race is equal to now then it's going to   start this one but if you're not going to now  they're going to add the rule to the claims   then we have the rule or that being removed  over here and you can see it is adding a range   to the claim that we just we've just  gotten from let me take this off from this   okay from the rules that it is um getting  this from okay so now um aside from that   it is getting uh passed basically forward that  pattern and it is second the equal sign now all   tokens either they have two equal signs or  one equal sign so this method is second up   to see which one corresponds with so when you  check this application you can leave this token   doesn't have one or two so when you create  a new one you must have one either one equal   sign or two equal sign and if in case it  has one then it's going to add these two   equal signs in case this one is modulo  four isn't it then I'm gonna add one   so either two or one okay so this method is  actually going to work in that way to get the   everything intact for us to have application work  so this method is actually was done by actually   for watching the name actually but um one guy good  guy did that and it's very useful as well okay so   this to pass claims from GWT is at the level where  I can just grab it on the internet and paste them   here okay so um we have that done and that is it  for the authentication State provider now the next   thing that we can actually do here after creating  a custom authorization State provider is we have   to now create our service now this service what  we're going to use to render to the client Okay so   yeah so I think I've remembered the the one with  this so from this past glance when DWT and this   pass this before with that pattern um it's a  borrowed one a bird method from Steve Sanderson   so he came out with this so actually he is the  only one who can vividly explain this to you   okay so what we know here is it checks and  get out rules and claims or claims from   um it took in and that means what you can  use to be authorized or be authenticated   to the application that's all that we can  actually say but maybe if you actually want   to know what actually does line my line then  Steve Sanderson to naturally help you a lot to   understand because he did it and he knows better  than what we know okay so once you have this done   now our next thing that we can actually do here  is we have to create our services and that's what   we're going to use to render to the user so this  let's create a folder in this client project and   that's going to be the last one to do so and  and I need for that and we name it at services since it is only one you can name it at service now with this service let's create an  interface implementation so a new item and the name of this let's see what we're  going to do to this so you can say it is   I save it another eye or service that's an interview make  sure you select an interface click on ADD and now it is interface you want to  have this method these three simple methods in it so tax is a register now remember that we  created this register results we use that   in the controller and we see we're using it  over here as well so that's why we put them   in the set project login result register  model and login model and we have logout   let's create implementation for this you can  just copy this hot service only copied this   and let's go to service right click add new class and now the odd service click on ADD now this hot service this is what we need to  do first let's create a Constructor and inject   a HTTP client and other methods so we  just had to inherit from so I at service okay now let's get that Constructor here and  inject this so we are injecting the authentication   State provider and the local storage and also they  need to be planned we initialize them over here   okay so the next thing that  we can actually do here is let's see now that's a register so when these  are costing for register we are going to use   the post as this in the sink you pass the  API the name of the registration controller   is called account you pass in this register  model if resource is not succeeded we return   successful to force and error okay but if it is  successful then we can just access voice because   it's true and I can't create it successfully  that's very simple now the next thing that we   want to do here is when the user tries to log  in so when the digital trans login what should   happen and that's what we have with over here so  the next method now when this kind of login model   is coming in it's going to return login results  then first visualize it we convert it to Json   after actualizing we send it order the  processing to the login mode controller   then we specify the type sense that it is it are  serialized AS application slash or Json then the   next thing that we do again here is let me bring  this here the next line now we create a variable   as login result and we visualize the results over  here and read the content from what is coming in   so this and we set it a case in service to true  if response is not supposed to start that the   success status code retain results login results  okay so if it's not successfully done my case it   is done we have written currently done and  the user is found in the user manager token that's the token that it is coming in okay so here  we are setting and in the hot automation provider   we get it over there so he is going to satisfied  before we can get to right there first as well   once we are done then we return the Escape  provider with the user name over here that is   an email as a name then we pass it as a header  until request the time is going to be a better   and reset the token over there we return the login  result remember that the login resource is coming   in with what success code error and token so  as soon as you passing login result.token we   are having the token that we issued when we logged  in first okay now we are almost done the last part   that we need to talk about here is by creating  our components okay so let's create a component   and I'll compare that you want to  create yeah you want to create login   that's razor you need razer.razer  and log out of Razor so these are   the components that we want to create  so this is a login and let's copy this let's create a component over there so in a previous rank click on pages and and  raise our components the name is going to be login so login dot Razer now let's copy this and actually this code  I'll leave it because this is just a form a   design form okay so I'll leave this code I can  actually have access to this code so here that   is a route and we need to inject this Control  Plus period let's inject this eye or service   so we have it over here and I've injected the  navigation manager as well now we have edit form see this requesting us to use and it's okay so   now you see we have edit form here okay  now this edit form we have like this in   annotations radiation summary we have email  address that is a login so let's control period so let's use that that's a shared project and now  we create an object out of this login model now   this lucky model contains email and password we  specify that here then when this login model when   this button is clicked you see this button is  submit now you see on Valley submit you want to   handle login so under this method you handle login  will show error go to false no error now restart   the result we await.service.login passing this  login model okay now when it's done when result   is not successful then we want to navigate this  person to the home else we display the error and   we should error to true simple as that okay now  let's try to save this let's navigate to our page and see what we have now so let's try to access login so there's nothing found here plugin so nothing found let's see again  all right so that's what you can do   we're gonna now copy this  and cut this let's close this now let's delete this and we  create it again maybe we can now so login yeah delete it unless we create it again and  see so add razor components and that is login.uaza Ctrl let's paste them yeah let's see if we have saved this okay so let's save this and let's see okay so we have the same as well  indicated so after seven days   let's understand see okay so we  have Arrow we're from this error that is error also it doesn't Implement  interface let's log out okay so let's see all right so we have front method left like the  log out so when the result logs out what should   happen let's finish that quick hot service  when the user tries to log out then you want   to set the local storage value to one to now so  as you can see from here look we want to remove   the item name as Auto clean the local storage then  there we the user the the default request header   instead of setting it to the Token over here here  we set it to now because we want to remove that   token from the request Center because the user  is now locked out okay so let's save that and   an application and see what we have now  okay so now we have this we need you also create a registration as well so let's see if we can create  a registration component let's see so you have login all right so let's check here last couple of days and let's see with the  app.reza let's play this here that's for   the update Razer so you want to check  with the cascadians and casing state   and we can use this method to check the identity  and if it is cascaded if it is authenticated or   not so let's see right here that's the method  that we call over here we check so we are going   to write this the console that is to go out  okay to check so it is indicated if it is not   is not in created that is a simple method that  we are just using to do and as you Cascade in   parameter okay so we save that now if we decide to  refresh this now you have an error here now with   this I'll right click and go to inspect elements  now it is inspect element let's see what we have console okay and I can see they are saying that there  is no registered service for the type yeah we   understand that we haven't registered the type yet  we are we doing that so the next thing that we can   do here is let's create a register so we have  a login over here and now with a register two   and we have the right there  yes let's register this so let's create that so right click on the pages  add new Razer component and the name here is register dot Razer and this horizontal Theresa let's copy this and  you can now paste them here so with the same   thing that you're also doing so let's Control Plus  period let's inject this as well that is I save it   now we have all these and you have  these arrows here control class period   now what they are here we have to specify from  the plus periodless include this set project   and now we see this working so it's done okay  so with the login a length here okay so login   to it is done now all right so no error here  now the last thing that we have to also do   so with the register we just have to call  the sometimes we did for the login we call   this result and register we just change this  method as register that's very simple and we   create an object out of this register model  we set with register model dot password and   confirm password and email we have this when it  is my submit handle registration data validation   here to handle the errors example I start  okay now let's see what we can actually do   after having this registration we need to  create um now you have the login already   so let's see when you have to login and this is  now you can do here is you have to create a logout   component so with a log out component let's go in  there right click and now add raise a component now this is going to be a log out so log out that's Razer now in here you have plug out a couple of days  and in basic now the route is log out that's the   direction the routes and let's inject this eye  service and we are calling a log out over here   and we navigate to the index okay that's the home  page so when you log out you go to the home page   and record this log out now this longer is  going to set or remove the access token from the   local storage and also set the claims type of  name which is the email as now as anonymous   save this and yeah we are almost  done what we have to do here is you   can display you can create a login  display to display the either login   or logout okay so and that's going to  be login display so let's create that   so we can use that component so add new components  and this component is going to be login display plugin display now with this component   that is what you want to do so we  want to just check the simple method so now this authorize View and this authorization  open and close if it is authorized we want to use   contest that is when it is authorized so hello  then contacts.usa dot identity then pass my name   now then see here that's going to be what the  person's email then we can display log out if   not register and login okay now let's see so using  this price View so using this authorized View and   let's see what we have to authorization okay  so we have to use this and let's clear this up okay so this is working now when you  call for the contest it's calling   for the current state okay user from  Identity user then we take the name   and I received this so the next thing to do here  is we have to include the this login display you   have to include it into the main.cs file okay so  unless you have to go about that now main layout let's go to the solution  Explorer now shared projects   so set projects all right now main layout and  now on top here let's display so that's login   let's see if it can plug in display that is  this one okay let's see that now we agree so   let's save application and now let's see what  we have so the next thing that we can do here   is we have to register at services so so in order  for this to work we have to register our services   until then we also going to have this reload  error so let's go to 200.cs file [Applause]   well we're doing it open that's the  Microsoft SQL management Studio is that cancel minimize that okay so let's see with our  program.cs file for the client and take note   we have to add Builder that Services  Dot and Blazer local storage   that's the first one we have to add Builder   dot services dot add authorization course so  that's the current one then we have to add   this perioda that services that's yeah we have  to ask group so our school now this ask of   you need to provide an Authentication service  provider and that is right here do you have it   okay so the engine service provider and I  remember that with this we created an odds   isn't it so if you learn API application State  provider so we have to we create a dependency   injection so they saying that anytime this  interface is called create an instance of this API   sorry of this API this class anytime this  is called create an instant request this   it is depend on this for implementation oh  this will depend on this because when quite   a method in this each root explanation can be  called from this API so this method so when you   create an instant of this when method and this  is called you can now get into this instance   um method and then get it and utilize that okay so  that's what dependency is about now we have to add   one more so Builder dot services dot add scoop  now it is our scope that's it I asked service   and the name here is what odd service rather than  kissing service and that's the last watch one so we have done this now  let's wait for opportunity   to get refreshed and see what we're gonna have now okay so now it's not reloading let's wait and  see I'm gonna have this error or you're going   to be cleared off now and that error is  gone good so you see when the page loads   we have register and login now login  right here please enter your details   now this email now remember that we have  registered account already okay so that's at   user at user or Etc so let's go in there and let's  try to grab this so email.com and the password   is admin at one two three before you click on  submit let's click on inspect and our Network no application the car storage so now we  see we look after storage nothing is here   let's click on submit and see  see what happens here so we wait   once you have a message on top or you're  going to read that as the home page now   you can say welcome now because we have hello  username then you have to logout and about that   now click on them now you see we have hot  token so these are talking generated now   okay this attacking Knight ends with nine u now  that's not you let's go to let's try to access a   method here so click on network and now fetch data  is there that is a controller now you see we have   authorization that's the better and ends with nine  u then we have the cookie as well all right now if   you see it is working now now if I decide to click  on logout see what happens here now that's going   to go off and it's also going to go off so let's  see now the first one network this is if this   authorization bar is going to take off now let's  see right here so you see this over here isn't   it let's go to application now you can see that  is off let's go back to network now if we try to   get it again oh let's see we try to refresh  this application and see what happens here First Data offer data controller now you see the  authorization is gone left with the bookcase only   all right okay so um this video has taken a little  bit long but it's actually important to understand   the concept and to know it don't worry all the  codes that I use I'll just leave them a link from   the GitHub and another description you can just  click on that to grab all the code maybe you want   to check yours and see what you have what you got  and errors or you just fix one or two things in   it and as far as I'm going to leave it as I'm  going to be available as well so thank you so   much for being with me with this long time and  I believe this is helpful to you and hopefully   I'm going to catch up the next video by please  don't forget to subscribe as well say and give me   a thumbs up in case you like what I'm doing okay  thank you for watching see you in the next video   sorry so in the next video do you know what I want  to talk about that is you're going to specify if   this button can be accessed by administrator or  user that is a real base so don't forget for the   next one make sure you subscribe as well so you  can get that video as well and read and watch it   as well and practice so you can whenever with  that in your application to have a complete ah [Music]

Channel: Netcode-Hub

Views: 4,375

Keywords: asp.net core, Registration, send email using mailkit, mime, controller, service, email service, web api, send email through web pi, smtp, SMTP, pagination, entityframeworkcore, EFCore 7, skip(), local storage, blazored localstorage, window.localstorage, scalffold, scaffolding, migration, database migration, creating models, fileupload, blazor fileuploads, file download, blob, javascript, file download in blazor, crud, sqlite, ef 7, authentication, blazot, client-side, jwt, token, password hash

Id: Q1WO9OfTiX0

Length: 113min 32sec (6812 seconds)

Published: Sat Feb 18 2023