.NET Blazor | Blazor Web Assembly Custom Authentication using JWT and Authentication State Provider

hello guys welcome again to netcode Hub channel  how do you implement custom authentication in   Blazer webassembly so when you have on a web  application then you want to protect your   apis how are you going to do it in this  video we are going to have a look today   let's say you have a web application whereby any  user needs to register after passing in a username   and password would you like to save the password  just like that in the database no you don't or you   won't do that because it is a plain test and  people can see it so what you can do here is   you have to convert this password into um password  hash such that it is not readable it has encrypted   how can you do that you can do that by using a  random numbers and a password sort and we're going   to have a look today we're going to first create  a Blazer webassembly and create just just a simple   form for registration then I'm going to add an  API whereby going to demand data from the user   from the the client section and I encoded the data  or the password and now incentive database and I   give the person feedback maybe registration  successfully created let's have a look so we   do that by first creating our Blazer webassembly  project but let me do this if you know this is the   first time of visiting this Channel or watching  a video from this channel then we have a lot of   goodies for you check the playlist we have a lot  of projects and single lessons for both Blazer   web assembly and also Blazer server app.net Murray  and mobile or that's not my remote buying desktop   application too we have a lot of projects and also  lessons over there so we take the playlist and now   we're going to find them they're waiting for you  also if you found this video helpful please give   me thumbs up we do that it it pushes this video  for a lot of people to view as well and also if   you have any issue don't forget to put out the  comment section over there alright so let's move   on by first creating our projects so I'll have  my visual studio 2022 lunch and I'm going to   create a fresh Blazer webassembly project by  click on the file new project and I'm going   to choose Blazer webassembly also when we are  done with this project I'm going to leave it to   the GitHub and I'll put a link in the description  so you can just go in there and clone it and also   um for review it for maybe another purpose or if  you modify it to suit how you want it so let's   create a Blazer web assembly and now here I'm  going to say that I'm going to give it a name yeah so I have a line name when you read you  understand demo registration encryption using   the random numbers and sort and that's going  to be the password sort so when you go to the   Ripple you're going to see this long name  over there you can just clone it now let's   click on next to create this project you know  we have the location where the project is going   to be and that is where it is look at the c  a folder called projects the next thing I'm   going to click on the mask you see we have  the framework I want to use 7.0 the target   framework and now here we want to configure for  https and I'm going to use the co-hosted because   when it is the course they're going to have the  library we're going to have the client size I'm   going to have the API we're going to add the API  ourself so let's leave that one out and now let's   click on configure for https so click on Create  and I will wait for this project to get created so why the spirit has now be created we're going  to install some packages and we have to install   three packages so that's the empty framework  call anti-firmware call Dot SQL server and   also.tools these three packages will enable  us to create a database perform migration as   well so let's go get going I have these packages  over here so I have this SQL server and also the I'm just going to copy this then I'll just  have to download them so if you know I'll   just add them to the project reference but we  know how to do it then go to dependencies and   click on many get packages and undo that  so I'm going to just unload this first all right so project reference  and I'm going to paste this here Okay so I will save this but for now since  there's not the API I don't think there's   a necessary for us to add this so here we're  not going to add that because I forgot that's   not the API so let's let's do it so here  we're not going to install anything unless   you're done so reload the dependencies  and now when we run this application I   think you know work normally as the Blazer  web assembly project let's try that and see all right so you can see that our page is now  successfully created and it has it has been   launched on the screen as you can see beautifully  done so what you have to do here is we are going   to convert one of these tabs here or these buttons  as a registration Button as soon as you click on   that you want to navigate to the registration page  so let's use some of this here or we can actually   have the button here to register and we can now  link it over here so let's get to that now we go   to solution Explorer and where we have that's  going to be our layout so go to shared folder   and because you have the main layout on top of  this main layer there is a button that we have   so we're not going to do anything to this I'm  going to touch it let's grab it and make a copy   of this and we're going to put it first and now  here you're going to say register so that is it so register and you want to play all this course   as soon as you click on register  you want to go to register page all right so that's where you want to go as soon  as you click on that registration okay so with   this registration let's see what we have here is  saying potential fix it remove the it's okay so   let's see all right it is set so when we save this  there is the output that you see you must have a   registration a button on top here and that is what  you're gonna work on so let's first quickly create   um you might see that let's create a result  components so right click on the same shed   um folder let's add a new Razer component  and the name is registration so we're   going to choose Razer components  and now here I'm going to say registration so on top of this we have to set the  route and that is where you're going   to navigate to you as soon as you click on  it so we say add page then I'm gonna have registration that is it now in here let's  define our simple code for registration so   we're going to use div and now here another  class we make it as row so let's finish that and I mean you're going to have our card and now on in here the card you want  to use maybe something like each three and we can put this in the middle so  let's have a class and that's Center and fun to wait bold maybe test so you want to have maybe test color  so test primary now let's have the   card body so down here you're gonna  have a div and I'm gonna have a class so unless I have div class and that is going to be a card footer so in here let's add a button now the class here is going to be BTN so let's have outline danger for registration and I'm gonna say so click to register so that's going to be the button name and we have  our button class here so we can also set this to float and okay so now we have this  beautiful button and now let's go   for our form so we're going to have a div and  now here you want to First have our edit form now before we do our edit form let's  create a model here and that's we're   going to handle our data so right click  on this let's add the folder here as model let's stop debugging so we can have access to the  renaming section and let's do that so models and   now with these models we have to create one model  in it and this mode is going to be registration so registration model let's create it well okay so in this you want to have you want to have uh maybe a name so you  want to have let's have an email address   email and let's have uh string password let's have another one for confirm password and this is going to be confirm password  and maybe we can have one for name okay so we have this now this  is a model and that's what we're   going to use here so in here let's  create in this um Australian model a   restoration Razer page let's create  it here so we're going to say that so public registration model then we say this is the model record to name price racing model so with this control  period let's inject the name space control period let's use that so we can  have this model and now let's go to the   edit form it requires a  model so we pass in the model   okay now there's also unvalid submits then we  can talk about handle submit so down here you   can also create a method like that so let's say  public async task and I will say handle submit all right so the next thing to do here is let's  create our four minute so we're gonna have a div   and now this is a class so  you're gonna have inputs   group so this input group you want to  Half Price label and now this label for attribute so four here it is for model Dot and here we can have name let's see so less is four and now this four is going to be   name okay now let's type in  full name and unless I have our text box so input text I can have an ID of  name and now you can have ADD bind value   and we say that's model dots and you must have  name in here so we have name   and now here you're gonna  have class as form control okay now with this let's have a class as label let's see do we have form level okay so we  have form level all right so now we have   this and also let's go for validation  as well so for validation we have to   add this where we have this edit form  on top here let's add data annotations and also we can add violations summary on top here we can put it on a less line now in here we can  specify style image and then we can say that unless I have test color so let's specify only color as well so color  and now we say this is red that's all I want   to do all right is to run let's have Indiana  red so color you want to have Indiana red okay now the lesson that we want to  do after this is we have to add the   validation to this form here so let's come to the  next line and now let's use validation message   now four is going to be a method so we  call this method in it now we point it to   model Dot and that is for name okay so we have this now let's copy this  Ctrl k d format as well and nowadays for name   so this is for email we have this for password  and then we have confirmed password so let's make   a change here so confirm and now this is going  to be for email you see the same thing to this and I will change the ID to the ID of the label   and now here we can say this is email address  we do the same thing to you this as password and copy this and now we paste this here the ID place  it and now here's you and now that   the last one here is confirm password  so you see we have confirm password   you can paste this and I attach the  confirm do it so confirm password so let's grab this and now  here let's bind them together and now let's put it here as well and  now in here we have dots confirm password   the same and that is it now here we have  to change the type here as password so   let's see to do that you know we can't  have access to this we don't have type   so type we don't have any type over here so how  do we set this to password and we can set this   to its password to we don't have that so what  we can do here is we go to the model that we're   going to use here and I have to specify them here  so first of all let's have the required attribute so this is required and now that's for full name  we can set the minimal length and the maximum but   I know what we're going to do that you can  do that yourself so let's suggest a required   attribute here and now also you want to check this  is password so here you want to check um data type   and now we specify this data type not this data  type so data type Dot and I can have password and   unless you see so you can actually grab this and  I will paste this on top of this password too and   also here we have to set the compare so we say  compare and now compared to what this password so that is what we are doing here now this  password shouldn't be now so let's see now   once we've done this we have our form here created  now let's have a button now this button here we're   going to have a type at submit so type is quotes  you submit now let's save this and now let's   run this application and see what we have now so  yeah before I even submit Let's do let's test it all right so let's click on this register  and I will go to the route of registration   now let's see there's nothing found  here let's check the route well   so registration you can just copy this  and let's go back again to the main layout   now let's paste this here save that and now  let's check it out again so now refreshed click on this again and now we are in but as  you can see from here it is not neatly done   at all as you can see we have so let's try  to set up in a proper way so let's go to our   page and now where we have this registration  page so let's come here and now here insert   the input let's make a transform so let's  grab this and then let's paste them here okay so let's set the margin top to maybe  three or two for each so here we can set this   mt82 let's grab this for margin top  and I paste it over here to you for all now with this photo for the photo you  can leave it just like that or you   can decide to also set the same  all right so let's refresh that so let's click on the button now we are in okay  so as soon as I click on click to register let's   see what happens you can see nothing happens  here because you want to perform the validation   but you see from here nothing happens other way  this is required this is required but as you can   see nothing happens now let's check it over here  now when you go to our page we see we have this   site and now um this we have the validation  message we have the validation somewhere over   here okay we have this um valid submits method  now we have this method here to to call for that   now when you go to this model let's say the model  so we have this is required as required okay so   let's come in here and now let's set validation  summary let's give it a model so let's set it at model okay so you provide the value to that now  under saving this let's try to refresh this   and see what we have now let's go to the  models class you can see from here email   so we can specify this as also email address  so it's also a part that's an email address   and now here we can make you can see here this  record already so we need not to provide this   string as well or if you are like that we  can decide to set this as required this is   so we can also add this keyword means that all of  this needs to be provided before we can move on yeah so you can set them as required okay so let's take it up now from here click on this register and now  if I click on this button nothing happened   because I haven't entered anything and it's not  going but I could see if I click if I decide to   type in something and now I click away passing  something here click away now nothing happened   but as soon as I delete it see you can see you  have this name for this required and as soon   as I type in this and I remove the amounts  you see let's see what's going to tell us   this video is a required you can see the  email is not working yet because we have   to refresh it so let's do that and see so we  save this and now let's stop this refresh it all right so you have an error  here let's check it up so   um this request to initialize in  the Constructor okay because of that   required actually that we stated over  here so we can take off this required okay so we can make this as  nullable to stop these errors all right now let's see if let's run it again so click register and I click on this so let's see because I decided to clear  that off I have this required   and you can see now the image is not valid as soon  as I clear that one too it changes okay so you can   see we have the validation is working definitely  over here you can see password did not match   and this also requires if I click on this  nothing happens let's refresh this again and that is what we are working on you  can see here it's not working so let's   let's check that now in here this or two  we are talking so we're gonna say that if we can use model if model is now then you want to return so nothing going to happen as soon as you  click this nothing will happen because we   are returning when the model is now okay  but if it is not now then what you have   to do we have to now create an API to  hold that and as you do that you have   to create a service here so let's create  a service to work on that right click on   this and now click on ADD let's create  a folder here before that let's stop so the server is going to be  I user service and also user   service for the implementation so let's do that so this has inherit from I user service  we can create Constructor for this okay now let's go to the user service the  interface and now in here let's create a task   now this text here is going to retain  something like a message so maybe boo so you can have success and now strength message okay  and now you can say that here let's see if we put this then we're gonna say that here it is register user and on this register is I must  come in with register user model so register or registration model period let's see using this dot models okay so you have   these models used and now you can  create an object out of this okay so let's go to our register user class and now in  here let's create con let's generate interface so   we have this so anyway we are going to create  our service here so we're going to say that   let's inject our HTTP client here so create an assigned field  so in here I'm going to say   that results you know it is going  to come in with let's see so boo success so you're going to have success is equal   to and now you can have in  a weight require HTTP client then Dot okay so here dot get async or post async because  you're going to register so push async and I'm   going to pass in the route of the API as so maybe  API and that is a user and also you're passing the the model so here what is your model here and  that is this registration model so let's copy this   and now we paste this here and that's all okay so first of all let's start the results  here because you don't know what is going to   come out so why is that equal to this  then maybe we can now check so if user so if user dot success okay so you can  check the success over here or we can now   get something from the async so let's check  we can do something like server response   S8 quotes you're gonna have an await then user Dot   okay content dot read our strength async there  you can now have access to this but for for now   let's paste or let's send this for registration  then at the end of the day we have to return so let's say return true for this okay so you're going to  return through so we're going to return   this access through right here and now  the message you as well so let's put it   all right so let's return something like  now response so you're gonna have response okay so let's see response dots now here it  is we are reading our string So currently we   can't select that okay so it is what you're  gonna do let's return let's remove this here   and now since it has to return just a string  you want to return it just string so if it   is success or not so you want to return  just a string here so let's remove this and now just it is a string message sorry respond dot two string let's convert  it to two string and that would be all okay   so we have this method here now the  next thing that we're going to do is   let's check the meta signature let's do it  well from this angle okay so the arrow here   must be off okay now let's create our API  so let's go to I'm going to close all this now you can see we have a project working so  let's uh API we're gonna talk about or we're going   to create a new project today so right click on  this the solution and now let's add a new project   now this project is going to be web API so ASP  let's call it API if you don't know why it is   click on this and I'll go for web API this is for  fsap choose C sharp and now here we're going to   have our demo registration encryption using  random um yeah so let's I'm gonna grab this then I'm gonna place it  here and I'll add in dot API   so Nest which is firmware version of 7.0  and now we use controller click on create so in here we have to create installs and  packages and that is what added earlier   on so let's copy these two packages and I'll  go back to this Explorer so we have this API   let me open this here this  API so I'm going to unload it and now paste this here save  that when I reload this API again   with dependencies and that is it so I'm going to  run this API to see so API is going to be selected   save that and now let's click  on this run button to run it all right so why it is running if you  do know how to install them right click   on dependencies and I can go to manage  Mega packages and I can search for this   microsoft.nt framework call SQL server  and also um the SQL tool so you have to   install two as well let me see if I have  it in my library so do I have tools here okay so we're going to install  tools when it is done building all right so you can see this API and it  is working now okay so now let's stop that   and install the tools so dependencies  right click and I go to my get packages   and now here you're going to install tools so we have this entity.tools okay so let's install this apply accept all right and that's all so we have  it done you can now um close that so when you go   to so listen Explorer and when you check our  client section you can see we created a model   here and that's a registration model so you can  just click on this and I will need the same thing   over here so we're going to copy this and now  we can after that let's see if this is installed let's see let's use so let's check it over  here API okay so install accepted and we   have an issue here let's check the output  warning detected package done graded so let's the package dependencies now many media  packages updates so let's try to update all okay so no package all right so I think problem  solved now now you can just close this and   let's create our model so in here  we have to create a model for that so let's go to the same project let's  close this now let's expand that in   our in here let's create a model so add a  new folder and now here to create models so right click on this and now add new  class and now here we say registration model so we can paste this in here and that is what we  copied earlier on from this so it's going to be you have to get an ID so this is ID  and also we have to have string name then we have email address we have passed with a confirmed password so string we have password and the last one is string and it is confirmed password so confirm password yeah so these are  the properties that we created earlier on   in the first project that's the client one  now once you have this let's create a DB   contest class first so we do that by creating a  folder here a new folder and I rename it as data so inside this data let's create a DB contest  class so add a class and that is up app DB contest now this last us inherit from DB contest so DB contest class and unless creates Constructor for this  and then here let's pass in this class so let's create a database table and here  going to be DB set and we pass in this registration model and I already say this is users okay so now you have this let's create our go  to app settings.json and now let's create a   connection strings you can put it on top here  and now here we see this is connection strings   and now we give it a name as default connection and now this can specify server server as Luca that's for localhost and also  either initial catalog or database   so we say uses DB then we have trusted connection trusted underscore connection we set this  to true and now trust server certificate set this also to true alright so now done with this let's go to program.cs and unless register this  here so build that.services .aut scoop   and now here we're going  to use add BB contest class sir control choosing this so add DB contest class and now in here we can specify options let's max2 options dot use SQL Server so this has to be in this phrase that you can specify options  dot use SQL server let's see so options dot use SQL server now control period let's take it up PNC so use SQL Server then with this let's see if   introduce now you have to take it to a  server.services .adscope appdb contest   okay so here supposed to be up add DB contest  so without the services dot add DB contest   then options Max to option dot use SQL server or  sqr antifremacore then here you can now get the   file name in app settings.json file so better  that configuration dot get connection string dot get connection string and now you're  passing the name as default connection   and in case that connection is not found you  want to throw new invalid operation exception   and now maybe we can say that  database connection string and we say default connection is not found you close that and that is it now when we are  done let's also save that now when we go to   this service a user service you can see  we created that is the user service here   but I did not register that so let's go to  Let's before you forget we go to program the   Cs file that is for the client section and  now in here let's do that so we say Builder   dot services dot art group  and now it is I user service then we have this is a service to good so we'll do that before you forget now let's  close that and now in this program too we are   going to create the same repository here so let's  close this now in here let's create our repository   and I right click on this let's add a folder  here so this folder is going to be repositories and now let's create an interface  implementation class in base as well   so it is an interface and that is going to be I  use I repository so I use a repo and now the class   is going to be using repo so let's add a class and  this class is going to be user Ripple this hasn't   Harry from this as you know already so let's do  that we can generate Constructor for this and now   in here inside the Ripple that's what you're going  to do you want to create a method for registration so in here you can have something like tax then   let's have our property specified  here so let's say we can talk about this user registered so yes user registered okay and also you can have string message so  if user is registered then let's give a message   now this you can do like register user   okay so let's have an Asim because you know  it's a method that we add in this and now in   here we have to add a dto because we use this as  an entity and we want to add something to it but   for now let's make let's use the same thing so in  here let's use the model that we created and that   is a user registration model so let's grab this  let's go to the Ripple and let's pass it here so control period we can inject the name space  of this we have this method Creator let's go to   the interface and our control period let's  Implement interface so once we are in here that's we're going to start our all the work  that's for the encryption of the password so   first of all what you have to do here is let's  include our app DB contest so appdb contest let's control period create an assigned  field so after doing that we want to   check first if the user exists in  the database so we can save our   user and I can see this is coming in with um  supposed to be a Boolean right so let's check   it could be true or false so user is equal to  then we can have access to rdbcontest.user then   then you can have that any so this any you can  specify let's use a discard so this Max 2 this   Dot and I'm going to use the ID because  I want to check that email so this Dot dot email is equal to registration dot email yeah so you want to check  this a Time the email could be   uppercase so let's convert all this to lower  or we can just use ignore case so to lower so email dot two Let's see  we have it here email Max 2 . email dot you so dot two lower now let's check this up where this is coming from so let's see that any now let's  use just an expression here so you dot email Dot Low wise equal  to registration.email dot to lower it seems yeah missing  something here let's find out so it is saying that there is an argument  given that correspond to require parameter   destination of these memory extensions to  lower okay so let's check it up here now   we are getting the whole FDB contest you must  have an await nothing problem solved now so Y   is equal to a weight updb contest now here  must be an async as well okay and let's see so it is same we should change this meta signature  so let's convert this to string before so dot   two string then you can now access to that you  lower I believe okay so let's do same to this so email.to string dot two lower so we  are now checking registration.2 string   and you can see we have the two lower and now  what is he saying again so can I convert this   get a weight all right so it means we have  to remove that all right so once you have   this you can now going to check the lesson to  see if it is found so you're going to say if if user meaning if it is found then we  want to return something like the first   thing is going to be false then you have to  have a message so maybe email already exist you can do that okay else so else then here  let's convert the user password into hash   before we can now save into our database so  we're going to create a private method to   handle that and now this pirate method is going  to return a string yeah so we say hash password and that's going to come in with  a password so this is um password so let's create a byte of salt and I assign this  to new byte of salt and I hear you want to use 16.   16 bytes aside from that  let's have let's use using so far now you want to check these random  number random generator so Random generator so it's equal to then you can have random number   generator and that is this one and now with  this random number you want to talk about create   new generator to generate new number for us and  I can see random number generator is equal to get bytes so let's have this get bytes and now get bite you're going to pass in the slots so with this by having this sort we are  creating this random number generator over here   and we are setting this random generator to  the byte of this control period let's see if   so in our method you know we are referring to  this as a dependent so aside from that what you   do is we have to inject this appdb contest  so after injecting this we have to create   Constructor for this and I inject this  MDB contest so when I refinitialize it   and it is working now now it is up to as far  as to implement the interface in here now to   implement the interface we have to implement it  over here and that is the implement or that's a   method that we created in the interface here  aside from that we have to now get the data   from the database so we want to first check if  the user exists so if this want to return user   email already exists but in case it is not then  we are going to create a new user model remember   the model coming here comprise of the name email  and password you want to create because these are   the things that you want to store so you want to  create you want to have access to name email and   password but this password we want to Hash  this password you want to convert into hash   because you don't want to store a normal password  inside database so how do we do that we have to   after converting this password then we are going  to now save it into the database and I return this   as I can accessory created and I return to because  you know that the signature for this method is you   need to return I'm a boot over here and also a  message after doing that it means you have to   create a method to handle this hash password now  we do that by creating eight method over here as   the signature implies here it is coming with a  string and after that we have to create a byte   and Generate random numbers here after deleting  random numbers you create an LFC Drive byte and   by passing a sorts and also the iteration type  and the name of the garden that I want to use   as sha1 after that you get a buy to 20 then the  next thing here is we're going to create a house   password hasher so it says byte so the first one  is going to create from 16 that is to copy the   sort from 16. the whole thing device is 36 so from  6 0 up to 16 then I'm going to copy the next 21 as   an RFC password hash we copied it over here so now  once you have these two copied we want to convert   into velocity for this password has by adding  the salt and at the random number generated so   these are the things that you want to do after  that you have to return this accessory created   to the user all right so that's what we have to  do for this I'm controller or from this interface   that we have created now the next thing to do  here is we are going to create our controller   and I enjoy this interface on this service in  it and try to use that so let's save this now   the next thing that we have to do here is you can  see that from here we are adding name email and   password we only use confirm password so meaning  when we come to this model confirm password must   be ripped off because confirm password it is there  for the client to confirm its password when it   comes to the API we don't need any confirmed  password so let's take that one off and I can   see we are not having any issue anymore all right  so let's see now to create our controller let's   right click on this controllers folder  and now let's create a control as user   controller so class and now here is going to  be user controller before that you must go for add controller and now let's wait an API  empty one we're going to name this as user   controller so user controller and as you  can see there's an API controller with mt1 so in here we have to create Constructor for this  so in here we inject Constructor by creating and   injecting a user repo then we're passing that  so we initialize the Ripple over here aside from   that you can see here is a post method because  you want to register so after that we create an   action result because you're not going to retain  any model so it's an accent result we're passing   a registration model we create an object  out of it and now here we're going to check   we get we call the the service from this repo and  that is the register is a sync with passing this   model and I will check if the results here it is  true you want to return this okay meaning if the   results here the success you want to return this  that is when it is true but in case it is not then   what I do we're going to add that error to this  model error State and I return the bad request   and return this to the user so that is what we  actually doing over here very simple thing now   once you have this what you have to do here is  you have to run this project and see remember   that we've registered this in a program.cs file  already so we can now run this application and see so what it is you're about to run let's check our   program.cs file and let's see if our service has  been registered here it is not so let's do that so we can do that by initializing  builder.services and Dot ask Google   you're passing our repo and our Method All  right so now you can now go ahead and run this so we have an error here and it's saying  that package then greeted so unless I   update this package again all right so you  can see our page is now loaded and now when   I click on user we are going to post it so  we're going to add name email and password   so let's see now the email here let's see it  is given us there here but let's check it up   and I'll see from this registration model  email okay so this email supposed to be string   over here all right so with that let's do it  again because you know we haven't performed   any database migration yet so although we have an  API open but there is no migration and I'm afraid   this is not going to work so let's see what we  can do from this area let's first check if our   model is connected we have installed  this package.2 so let's check it up   we have choose over here so now let's go in there  before migration if not let's try this and see   what happens if I click on the user now I have  this try this out and if I click on execute from   me I'm going to have an error and that's going to  be that database is not found so let's wait to see   yeah so object and it might be that a database  here won't be found at all yeah that is this   so let's let's create that now let's go into  tools and I'll go to nuget package manager and   I go to manager console and now in here let's add  migration so Ah that's migration and we see it's   initiate so Dash o that is data create a folder  called migrations and I put everything in it   so yeah stop now we are building this  again so let's wait for it to get built okay build field let's see so it is the  API selected and now let's let's build   ourselves and see so this is our project right  click build succeeded so let's try this again so still filled let's say.net build all right so I tried to build and I can  see we have failed it is expecting this   and yeah so let's close that all right and uh  thank you the sub now nowadays interface let's   check so he is supposed to be tax  no public async so let's clear that   all right and I think it is solved now so  we can now peacefully perform my migration   so let's click this then  add migration let's do that so you can see it is I see that now  it's going to run a query over here   to create a database for us as it is  done so now let's update so update database all right so it is done now  so let's run the application so when you go to our class section you can see  that from the class assembly we have our service   so let's first test this user service through  and see so try this out we assume this is the   user and email let's execute that  now let's see the response here   Okay so it's saying that you have  this object or two string field   so let's check that from our service  and that's the user repo so in here so this end is giving us so let's check let's use so dot where then user Max your user  Dot email dot to Lua dot equals to   this model coming in dot email dot to lower and here we're gonna find out  first our defaults they think so here must be an awit and now we check if user it's not records  you now then you want to return this so where that's Cuts first or default let's see where you have this  error here we have this and that all right so the default async now  solved so now let's let's do it again so user try this out and now  let's try to execute this or as you can see here successfully created all  right now when we check our database you're going   to see this encryption so let's look at database  and see you want to check the database you see we   have the encryption over here and that is the  the password that the user types in so there's   a password and it has been encrypted okay so now  let's go in there and do it from the application   so in here if you check our user service we  are returning this so we have to create a   response model here in our user service so in a  client section let's create a model as a service   response so add a class and on this class is going  to be a response and on this response let's have um a bull for success and also a message string   so we have a success and we have a message so  let's go back to the user service and now in here   we are going to replace this response we're going  to get it from the API because you know the API   is returning when you check I use a ripple that  is returning uh mobile and a string message so   that's what you have to also receive from here  so you know in here we have to return that is a   read from Json async and then this response that  we've created aside from that you have to return   this response so wherever that we have we have to  get this response so let's copy this and let's go   back to this user our user service and now here  instead of this string we have to paste this   here to make sure they sync okay so aside from  that what else can we do again we go back to our   registration page now let's go to let's check our  service so pages are shared and you can see where   they said if you see we have our registration  page now in here we're going to call a service   so let's first enjoy this service on top here  so here we do inject then I use a service   then you have to create an object that the user  service so now let's come down here and here   let's create it so let's call the method and  this is our service so in here we have to call   results as equal to this is a service.register  user and we pass in this model now let's inject   navigation system over here so we can navigate  to as soon as the registration is through to log   in okay so we inject navigation manager and that  is it you create an object out of this and I will   come down here and now we say that if this results  here dot success so every other success here it   is true then we want to say navigation manager  dot navigate you let's let's make it home page okay now let's say home page else then we want  to return that is if it is not successfully done   then you want to return and you want to display  the message the information to the user so let's   do that let's also go in there and inject  IGS runtime so let's inject that on top here   so we also injected as this IDs runtime  and JS and let's count down here so   if it is this they want to do that  else so let's put this in the code so you want to have else then let's clear this up and now here we can call awaits so I wait  then jl.invoke void async require an alert   and display the message okay so one method that  we need to do here is to enable course you know   we have to separate projects we have the client  and apis so you have to enable calls in the API   once you have access to the client's content and  also post data so that's what you're doing here   you come back to the program.cs file that is for  the um API and now here we add this so I did this   offline and I'm going to show you over here so  beta.services.ad course you pass in this option   and our option dot add policy we give it any name  at all then policy dot with origin we specify the   route of the client section and that is a port  over here and also wait you make sure you do not   add any Voice last year and allow any head and  allow any method so when you are done then you   have to pass in this middleware pipeline that  is an app.use course and I'm passing the name   that you specify in here so it is it what you  need to do so Ctrl KD formatted well now save   that when you are done the next thing to do  here is you go back to the program.cs file   for the client section and I will do the  same thing over there so this is for the   so this for the client you know so I'm just going  to open this and I'll go to program.cs file and I   in here I can see we have the Base address is  equal to new URI now copy and paste the URL   for the API and that is it now let's save that and  what you have to do here is you know when you call   this method you know when in this user service  we are now returning a response over here the   response comprised of the username and also the  uh that is a success message and so uh flag over   here so this response we have to also Christian  response inside the server so we can use it over   there so we don't have any error in there so  now let's copy this now let's go back to the   API and in here or you have these models let's  right click and add new so I'll stop this first so let's add new model and that's going to  be a class and I will say this is response so this response model and I replace the same  thing that we have we paste it over here too   so we can return it over there now in here let's  go back to our user service and now here in the   repository you can see how this user repository  so instead of using this thanks bull and also   stamps let's can just remove this and I just  pass in response very simple and now let's copy   this also we go back to the interface and I pass  in save so that's a implementation and now you   have to remove everything from here and I will  place this so what is this now here if this is a   it's not I'm not going to now then you  want to return so instead of this we   want to return a new response so new response  then you put this in the bracket like success   equals you false and now  here is going to be message equal to then you have to close this okay so  this is what you are returning we do same to   this so we can now go in there and then grab  this let's grab that now he's supposed to be so we grab this one and now here we can  just paste this and now cut this message and replace the message  here set the success to true   unless Clippers okay and that is all that's really  doing here so let's save that now when we go back   to the solicitness program when you check the  controller here there is a controller we have to   return answer here so here shouldn't be I Action  Service rather supposed to be this response that   we are coming in so this response and that is what  we are sending also this if this you're gonna have   dot now you have success over there and that  is it and also in the user repo we have to   add this you see we've created a new model  so we have to return the response as well   and reset ourselves is true and then  with the message State okay so for   now let's save everything and  let's run this application again so let's try to register a new user and now I'm  going to use the old one that we use already   and let's see if the one is going to work so  click to register wait for some more time and   I can see here we have email already exist let's  create a new user here so let's add one to this   let's add one to that click on register and I  can see it is registered so when we check the   code here let's check our database users folder  right click on this and unless view data and you   must have the new user um added so let's see so  you see how we need each other this one added   and I will check the email and on the password you  see it is now encrypted okay so um that is it for   this video you've seen how to encrypt password  and that is not to and create password and also   one thing that I want to talk about here is when  you check a page you see when trying to create an   account here our password is just a plain test so  let's let's just solve the problem and that's w   so we go back to the client section and now let's  go to the set we have um registration.reza and you   have when you check our models over here we have  this registration model specify this as password so let's click on the register and  now here let's test the password   you see that it is now masked and  you can now view it over here okay   so now that's we are done with the registration  the next thing that we want to talk about here is   to integrate the login system so in this you  have to have a link created or added to the   layout and also we have to create or design our  login page and have our service that's comprised   of the interface and implementation um created  so let's get into that now let's close all this now let's add a link so we go to me out uh Main layout.reza and that is  where we have to add so we have the register here   and we want to add the login as well so you create  space and now we paste the login that we have here   and that is a login there so now we have to go  in there and create this with our components so   let's go to solution Explorer now here we go back  to the same set folder now let's add a new Razer   component and we're going to choose for a result  components and now the name is going to be login so now we are in we have to specify the routes  here so we can now have this page and now that   is a login so now we cannot go in and Design  This login form now that's what we're going to   do let's go to the register and now you can just  grab the form from this so let's grab this form then let's go to the login and now here   you can just paste it here so  now we just log into your account so log into an account and now we're going to have  a method also so you know you have a method over   here so you can just go in there and then grab the  same method so there's a method let's grab this foreign login we have our code and now let's  paste this okay so meaning that if you   have to create our login mode original  price of the email and also the password   because that's what you want to use so  let's get going let's create a model and this you are working in the server  that is an API so that's a client section   so we go to the models and unless uh  a new class and that is login model so in here you're going to have our email  and as we're gonna have our password too   so we have these two properties and that's  what you're going to use in the login page   so let's go to the login page and now here  we're going to change this to the login   so here we say login model and we have this model  equal to new margin model control period now let's   include the header that's for the namespace  under submit and I can now make a check here   and we have to create a service to register to  handle the the login and aside from that you have   to inject this navigation manager and maybe you  can never get to the home page okay so let's see   we go back to the registering page and now we can  just grab this and I can add this service as well so let's grab this and let's go back to  login and on top here let's paste event   so what you have to do here is we have to  now you have a model here this are method   now what left again to do is to implement this  password so here model we have model dot email   so let's make this as email and  now let's change this to email address okay now here is going to be the same  email so you can just copy this and   paste it and now here is going to  be password so let's clear this and we have password and the button   okay so we have email and password that's what we  are doing here now on top of this let's specify   the attribute from this login model so on top  here we're going to specify as email address foreign the login model and now we have our attribute as  email address and required attribute against this   email and I will have the same thing for  data type as password again this password   attribute now I will check uh login.orizer  it seems we have to call a service known as   login user so we have to create a service here  so let's go back to a service and now that's the   service interface here so we open that and we have  to add this login service so we can just copy this   and I make a duplicate of this and we can  change the the names over here all right so   this you can make a change you can change this  to your login user and also we can change this   to login model that is the parameter coming in  anyway it's object you can just make it as login   all right so you have this login model so let's go  to the implementation and I have this implemented   so you can write the definition for this method  now Contour period let's implement the interface   here and that's why we need to write a logic for  this login all right so in this we can make a copy   of this register model a register method and I'll  paste it over there so in here we just have to clear this and I make a copy of this and then  paste it here now we need to make some changes   to this now the first thing to make here is  turn this as an async and that is what we are   doing here aside from that the next thing is to  also set this the route to login so we add this   as an action method so we specify this with the  attribute that's a verb and also we have to change   this login model because that is what we are using  here okay so that is what we need to do now let's   save that and let's go to our API and try to  create a method action method which has the same   route as this so listen as well you go to our API  and inside this controller we go to for the user   controller and now here we have to create a method  here and that's going to be post so let's start   so in here let's first have our our  HTTP method now we need to specify   the route in it so we do that  by specifying the route as login   and there's a route over here aside from that  what you need to do here is to create our action   method and now this action method we have to  set or change the register user to login user   and not also change the model coming in from  register model to login model we also make a   change to Edge object as well okay so now we  have this let's go in there and create this   login model now remember that we have created one  over here so let's just go in there and grab this   this model that's for all username  and password and we go back to this   um so listen Explorer here now inside our  API let's create a model to the model to   the models folder so add new class  and this is going to be login model so with this login model let's paste what we  copied in here and we can now it's remove this   data type from it so this is a login model and  when it comes to this controller you see it is   already um included as a name space okay so you  can now open and work in the body space here so before we move on to this you know we are going  to authenticate this user we're going to generate   um JWT token so that you can reset to the user  and also add claims as well so for doing this   we have to specify our talking settings in the  aftertender.json by passing The Token settings   as and these are the the properties they're  gonna have you want to have the secret key also   the issuer and the audience so for this secret  key you can use any key at all but you want to   get a generated string key from the internet so  let's switch to our browser and I'll try to get a   string key for this so let's switch to our browser  and now here we're going to have to navigate to   um random.org unless you can  have access to random strings and now yeah so as you can see from here we  let's see if we can have access to random numbers   or random strings so this is let's specify slash strangers to it okay so you want to let's change from 10 to  let's make it as 20. and now let's include   upper and lowercase and I get this string so we  have this string you can just copy one over here   and now let's go to our settings here and in  the app settings.json let's specify this here   so you're going to specify the Json token  settings here so in here we are going to   specify three things the first one is the secret  key Now secret key is what's going to be used to   generate the token you're going to have an issuer  and the issue right here is the server generating   the token and that's the API and the audience  is application the way it's going to consume the   token and that's a client Blazer so let's start  here so we can do that please come over here and   now we can specify our token settings here and  now here we need to specify some parameters or   some properties here the first one is the secret  key which also specify the issuer and I need to   specify the audience now remember that when we go  to our page here we see we have this so you can   just go in there copy the first key and let's  paste it here so let's go to our application   and now where we have the secret key let's paste  this let's go in there and also copy another one   and let's also attend to application and now  add it so you can see we have this string here   at as 20 so it's 20 strings over here 10 10  so that is 20. so here the issue one is our   API so let's go to the settings and I'll try  to grab it the localhost orders address so   program.cs you can see we have this address  here and now this we are referring to the API   there is the API so this address is referring  to the Blazer so we recover this as the client so instead of adding this https we can just grab  this localhost and now the port only so let's copy   this let's go back to the app settings and now  here that is the audience so you paste it here   also we do the same thing to the issuer  that's an API so we go back to the audience   and that is the client and clients we can see we  have this program.cs we have the API over here   so you can also grab this API so let's go to the  abstract sense and I will paste it to the issuer   all right so we are done with this but in order  to use this we can actually create a model to   handle this okay so to create model it's very  simple let's go to Traditions program and now   we are creating this model so let's create add  the folder and we can add this further to any of   this so the same model so let's put it motor and  now you know this API so let's work in the API   so this is the model and I'll right click  and add a new class another class name must   be the same as the name settings here  so we're going to be talking settings so talking settings and we have to specify  the name as we did in the tokens from the   app settings you have to get the same name secret  key issuer and audience so let's specify them here   okay so in here let's specify the strength  key and also specify the issuer and specify   the audience so we make sure that the  names or the properties here they sync   with what we have in the settings  that the app settings.json file here   so let's go to the register that the program.cs  file in the API and let's try to add or sync this   module that you created with the one that we have  in the app settings and that's the configuration   file so the API program.cs file and I'm in  here let's specify it yeah here will be okay so in here you Mustafa builder.services.com figure  token settings and we have to pass and build that   configuration because you want to grab the you  don't have access to the file from the settings   so you can grab the sessions and the name of  this talking settings now you see we have two   token settings here there is the model and now  there is a configuration name or that is a the   data found in the Json so we try to match them  in this program.cs file we do that over here   so now we are done with our service let's go to  the piano so create a service there so there's   an API then we navigate to the repository so the  interface we have to create a service here another   repine tree to handle the login system so in here  we have our tax response login user async and you   pass in this login model and also this model let's  go to the limitation class and implement it over   there so that's a easy repo now control period  let's inject the interface so we have that here   all right so here let's make a check so first  what you want to do here is we are going to   check if this is more equal to now then maybe  we can decide to return a new response of this   so bad request that is when this model is coming  it is now if it is not then you want to get data   I want to get the specific user email from the  database from this user table and now we are   converting this email to lowercase so we can  compare them by using the keyword as equal to is not found then what you have to do we're going  to return the same response and I will say invalid   email or password because the user is not found  the email is not found but in case the email is   found then what you're going to do then you're  going to create a private method to compare the   password because you know in the registration we  encrypted the password to basic default string   because when you check here you will see we are  returning to base default string and now when we   check our database 2 as soon as we open or as soon  as the person registers the password is converted   to USD for string so in order to compare you have  to reconvert or decrypt it into the normal plane   test so we can have access to the the test or the  message or that's the password so let's say let's   try to open the database table and that's going  to be on the tables so user table and let's say   if a person registers let's see the output here  you can see it is converted into basic default   string so to do that you have to convert this  or decrypt this so you can compare the plane   test so inside our user report let's try to get it  here by creating a separate method to handle that   so maybe you can decide to close this then let's create this method down here so as I speak you know that this is a here  comprised of as soon as the email is correct   you're going to have the access to the person's  password and on the email address okay so now if   you get the user data what I'm going to do let's  first compare the password as I said you know we   have to convert this password so we create this  method and now this method the name you're going   to return Boo that is true or false and I will  say that verify is a password we're going to   pass in the Raw pass whether it's a plain test  pass whether these are just passing into this   login model and also the database password that  is stored from this user now when we have this you   want to create a byte and you want to convert  the raw password that is a database password   here to base 64 string so we are converting it  from basic default string because you know it   is converted to as soon as registration is done  and now so here to compare we have to reconvert   it from basically for string and that's what  we are doing here we start ADB password hash   aside from that we're going to create sort of  system because you know we are creating sort of 16   um characters another reason to encrypt this  now we're going to create the same sort of   these same characters and now from having this  uh bytes we are going to copy the bytes from   the password hash because you know the password  has comprise of 36 can test 16 for the salt and   are 24 the real password so you create this team  buys and now you're going to copy this this is   the the base that the database password or the DB  password over here and now we want to start from   the index of zero you want to copy this you want  to escape this sort there's a short system over   here so copy the 16 The Source system start from  the index of zero and now count up to your system   so you're going to grab that sort from the  database or the password now when you grab that   sort it means that we have the that the one left  is a password that's a 20 car test in such case   what I'm going to do we want to convert this path  so that's the raw password coming in here into RFC   password that is what will let you create convert  this into a password hash in the registration so   you do that you're passing the sort and also we  talk about the iteration the number of Standards   to generate to get as the password or the hash and  also the system that I want to use here algorithm   is that sha1 aside from that we are going to get  a byte that is a 20 byte so we take up the first   20 slots existing thoughts the rest here at the  20 byte okay so after doing this then we have to   now compare so we're going to use the four Loop  to Loop through this now I'm going to the current   count of this password has this is the arrow see  the current database or carrying the raw password   encrypted using this RFC byte we're gonna count  it now you know this database pathway comprised   of the sort and the password itself so we want to  skip the sort and I'll check the password if they   correspond to the one that we have in database so  that's how you see we have End Icon zero now I is   less than and there's an RC password.lens this  IC password is the one that we encrypted for the   current or the raw password so we are taken from  the we want to check the length and now after   checking the length we want to compare this is a  DB password hash and now we are getting the iPad   system so if this initially I zero that you want  to start from the 16th so from 17 to 1 now I'm   going to be 17 18 19 to get to the 36 and now here  you want to compare to this rxc password and see   if the 17th I is equal to the first one so if it  is then you want to return true but in case it is   not because you want to return false then else you  want to return true so when this method returns to   it means that the password converted into the ioc  based or byte converted also compared to the one   that we have in the database do maths so through  the user has provided the correct password and   under correct username so in this so we have to  call this method into this login async method here   so let's come to our main method here and that is  a login user async so down here we can now check   we can create a variable for the type here it is  blue and we want to say do passwords match so the   login pass and the one from the database do they  match you pass into the login model password that   is the current password is a pass in and now  there is the database password do they match   so if they do not match so that's why  we're using this exclamation mark you   did the norm Mac then you want to  return invalid password and success   equal to force but in case they  do match then what I'm going to do then we have to create a method to generate the  token for us and that's going to be the JWT token   but before that let's inject the security  settings model that we created let's   inject it into the context because that's what  we're going to be using to generate the token   so in here we are going to inject it here from  this private read only that the talking settings   model that we've created you have to also pass  it into this Constructor here and I'm going   to use this i options and passing this toky  settings and we have an object here and you   can see we have to initialize it by using this  to initialize the token settings here so as I   speak we can now have access to the security key  the audience and how the issuer as well now let's   return to our component and that's a method and  try to create in a JWT token to or for the user   so and let's create a variable here as you can  see that's the dwc access token and we have the   generate JWT token and we're going to pass in this  parameters from the user because we want to have   your ID username and also user email also so let's  create this method now this is a method that we've   created over here generate JWT token and because  you have the ID the parameter specify in here and   now in that the first thing that we have to do  here is we want to create a security or symmetric   security key so we can do that by using the test  talking setting the security key that we perform   or we specify that in the accessing.json also  aside from that we have to create our credentials   and we're going to use this security key that  we've created and I'm going to use the scripture   algorithm of um hmac sh256 after doing that you  have to create a list of claims because there is   that coming in here we want to assign if the just  a user use administrator even as a manager or any   other claims or any other rules that you want to  add here you have to create a list of it so you   can add them also the next thing to do here we're  going to add a claim so for instance you add the   user ID and you're converting this into that here  to a string and I restore it the next thing is we   want to add the full name and that's the email  address because when we check our registration   model you can see we are performing or we are  adding only these three properties here so when   we check this register model you can see from here  that you have just ID name email we don't want to   add the passwords we want to grab all this first  third now we go back in here and the next thing to   do is we are going to specify we want to create  a security token so with this we're not going   to specify some few properties here comprising  of the issuer the audience the credentials next   to the expiring dates and Etc so let's do that so  here the first thing to do is you have to specify   the token that the issuer so we're getting the  token settings getting the issuer and that's the   API also you want to get the audience and that's a  Blazer you pass it in there and despite the sense   you are doing this for a practical purpose you  want to expire after 20 seconds so you can see   we can add this you can add a month you can add  second as well and minutes now let's also classify   our signing credentials and that's what we did  over here the last one is we specify our claim   so these are the claims that you want to add okay  these are the claims aside from that the nursing   to do here is we have to return this token Handler  by writing this to token and we return it to wire   so when you call this method we can return a  string and that is what we are storing over   here so the next thing to do here is we want to  create a model that can handle this token in and   out so let's go to our models and create a nice  model for that we go to our solution Explorer   and in there we go to this model right  click on this and unless click on ADD   new class and now with this we want to say it  is JWT token so this let's add a hand lets you now in here you want to specify only one at  property and that's going to be the string   token assess so let's have a property  of string and now this is going to be access token so you can make this as nullable and now once  you're done with this the next thing to do here is   we have to create a service  so we can pass in this token   um to the registration right because you  want to send as soon as you go for register   you want to return this access token as well  so let's try to set that in so we go to this   user Ripple and now in here you can see we are  having this method let's go to the interface and   that's the interface here let's specify something  so instead of using this response we rather want   to clear this and I want to use something like  so bull let's specify it in a method first   okay so in here we can do that okay or one  thing that we can also do yes instead of   specifying this uh response here we can just  add the token to this response okay so let's   also clear this and let's maintain what we have  in the already so that's going to be the response   so this response and now let's go to the  response so with this datability token   we can just grab this you can just cut  this and let's go to the response here   models response and let's paste this response   so this is our response now let's go in then and  let's clear this the WT token from it from this   response so let's clear this so we still have the  same thing now let me check our user report here   so we have this and it is returning a response  weight by this response comprising of the success   message the success message also um the flag  and we have the token specified in so that's   what we need to return so in here let's  return a new response and on this response   we have to specify these parameters and I  have to set this access token to what we   have here after setting this we can set this  Success Through because now taking has been   generated and I can just send this message to  any message at all let's say success is okay so you have to specify our token over here and as  you can see we have our access token and we have   this access as true and we have this message as  success now after doing this we have to specify   or create our control action method and we can now  call this login async method that we have created   in our repo and I remember that when creating this  if you check this is our service we specify the   route here as API user and our login so that's  what we need to do inside this user controller   so that is this and let's specify it as you can  see we have the route in here so we're going to   now call this method and I'm going to just return  it as you know it is returning a response here   so in here we can just make a copy of this this  one and now you can just paste it over here so   that's exactly what we are doing you see we  are getting the login using async you pass   in this model and now if results are success  you want to return the keyword is okay if it   is not they want to return the bad request and  stop passing the result so this is a controller   action method and this this is going to work  so let's try to run this and see so save that   and let's first build application first so we  can see if we have any error in it so click on   solution as per one now click on build solution  and let's wait for this solution to be done okay so we have an exception here and it's saying  cannot convert from this model login module to   model registration model so let's take it up  here and that is this so here it is register   that's login so we have to change this so let's  clear dots login all right let's save this   and let's do it again so I'm gonna do  solution now let's see the the output here   so it is sunset now succeeded so now  let's run this application and see so now in here let's try our API so first of all  we have this user let's try this out and let's   execute and actually here we have is already exist  so that is to post okay so let's go to the login   now the login over here let's see we  have the password and let's execute   okay so you can see we have the success is true  we have message and success and consider is the   access token that we have we see it has  now generated this access token now let's   try to change this email to different  things let's add one let's execute this   and like you see from here we  have invalid email or password so as our API is working let's also test our  Blazer and see the response here so you know   when we check um the settings here from this we if  resources what is success you want to navigate to   the home page and if not that's all you want to  do but first of all our base we want to display   the token so let's copy this and now here let's  comment the navigation now let's paste this here   and I display the token so results dot insert  the message you want to display token over here so results so I assume you should not find a token here  because we did not add to this model so let's   do that you know in other work you can just put  all of this in a one class Library so you can   have your dtos and you can use them so instead  of creating this model from this client session   and creating a model in the server session you  can just use a class library and now you hold   it at one so you can share to the client and also  the server maybe the next time when we have to do   any project we're going to talk about that too so  let's first go to let's go to the client section   now let's try to add a token to that that's the  property so we go to the models and response we   want to have this access token so let's  grab this and now let's go to this client   and where you have this model response  let's include this access token as well   okay so now let's go back to this login page and let's have access to the Token so Pages you  go to the shed and I have this login.razer and   now with this instead of displaying this just  message you want to display dot access token   let's save this and now  let's also refresh this page so you know in a Blazer we cannot type in just  string as an email because we have validation   against it so let's register for a new account  here and that is test so you have tests as   gmail.com and also let's have password  as test at one two three now test   at one two three so let's see the password  they do match okay now let's click on register alright so registration successfully done now  let's go to the login now let's see so let's   pass in the same test at Gmail and let's pass  in our password as test at one two three now   you have to see our token so click to register  now it's supposed to be login now you can see   we have this token so our Blazer is also working  perfectly now you can now login and now generate   a token here now what you have to do here  is you see this token is encrypted with the   um user ID user email and also claims so we have  to decrypt this token to get the claims if it's a   user number user if it is an administrator  then we can now use it in the application   so now let's Implement authentication  State provider now the core duty of this   authentication State here is to check if user  accessing the application is logged in or not   and also we're going to have access to this  authorized view element which we can use to hide   some Concepts or some content from a user so let's  do that but before we do that we have to install a   Blazer local storage that is what you're going  to have access to and store our token in there   you know this token has to be kept in a place to  keep it and a blizzard local storage gonna help   us at the station storage under another session  rather lookaster is going to help us to store   this token so let's first install that as a nuget  package so let's go to a solution Explorer and   click on the there is a Blazer and I right click  on packages and you can add manage nuget packages so let's type in for Blazer local  storage and click another browse tab   and now here Blazer local storage so this is by Chris NC so let's  click on to install this one aside from this then we are going to install microsoft.aspnetcore.components.authorization  because that's going to help us to include   authentication state so  let's wait for this to finish now let's search for this Microsoft or even you  can just pass in components dot authorization and it is for Microsoft so let's add the Microsoft so dot components um okay so that is this one let's install this alright so now we are done when you go to  solution Explorer and now when you click on   these packages you might see this blizzard cast  original so this component dot authorization   so we have them installed the next thing to do  here is we have to register the two packages   that we installed in the program.cs file so go  to program.ts and now in here let's add them   so we add beta.services.ad Blazer local  storage and now there's the name space that   we need to add we save that so let's inject  this location storage into the login section   logic component and that's what you want to  do so in here less injections on top here so let's do that so ilocan story save it and now read this we  have to import this name so we can actually   move all of this into import.raser or you  can maintain this you can leave them here   as well okay so after doing this the next thing  that you want to do here is we want to save the   token into the the browser's local storage so how  I'm going to do this now you see from this login   it does return a message here it is returning  this result and here it resulted success it   means it is logged in now you want to store this  into the Blazer or the browsers local storage   so in here you can say I wait then we can have  access to local search service and you can have   access to set item async we pass in the object  and string and now we have to set the name this   is the name that we are giving to the and now  this is the the file because it is a key value   pair so this is a key and there's a value so  as soon as you log in you're going to have   access to this token inside the browser's location  storage so let's save this and let's try it here so let's open develop developer tool so  that is a inspect element and you go to this   application and you can see we have this local  storage so click on this and as you look as you   can see from here you have the key and under  the value everything there's nothing here   let's login to see so you know we have an email  already and now let's have a password so test one two three now if I click on login unless  we're gonna happen you can see now you have   GWT token and that's the token over here so it  has been saved to the the local store as we did   so the next thing to do here is we are going to  implement the authentication State provider to   check if the user is authenticated or not  so in doing so we have to create a folder   here so maybe in our application that is a  Blazer and let's create a folder and that's   going to be authentication so State provider so  add a new folder now let's say this is provider and now let's create a class as authentication  custom authentication State provider so new class   and now we give it a name as custom so custom authentication State provider now this  has to inherit from authentication State provider so now it has this you can now Implement interface  from this because you know this is an abstract   class so we can Implement interface out of this  but before that we can generate a Constructor here   so an identification State provide that  control period you could see we have to   use this and aside from that let's implement  the interface so that's the interface here   get authentication State async and now before  that we can create a Constructor here so ctor   then Constructor now let's inject  our local storage service in here   so we can do that by injecting it over here  then we can now have this location service   then we need to call this method or we need  to pass it over here so you put it over here   and I initialize it as like this okay so once  you have this you can now go ahead and grab   the content from this local storage and we're  going to do that inside this authentication   State provider and that's the method that  we have generated so in here less clear this and now let's set this to an async so in here the first thing to do here is we have  to get access to our JWT token so you can see from   here that when you check our login.oriza there  is a name that we are assigning to as a key so we   have to get the key and that's what you are doing  here after that you have to check if this is equal   to now or not if it's equal to now they want to  return new authentication State meaning there is   no user or that current user is not indicated but  in case the token is found then let's return this   authentication State and now we need to pass in  the token that we have gotten into a pass claim   from uwt token or there's a method now this method  was created by Steve Sanderson so I'm just going   there to and now grab the meta straight so this  is the first one now you can see that from here uh   jwc token here has three sections it has a header  it has a payload and it has a metal signature   and there's also another method that we need to  add and that is a Pass based for without pattern   so these two methods were created by Steve  Sanderson and that is what you're going to   use to decrypt the adjacent token and I return  with its claims as well so that's the first   one and that is the second one so this method  is all over the Internet so you can just grab   it and I integrate it into your application okay  so now we have this as you can see from here now   this is the splitting the token and picking  the second one the token has three sections   and that is the header and it has the payload  another signature so it is grabbing the payload   the payload comprise of the name the property  that we we use inside this when log in so you   can see we decide to set the claims to a name  email address and ID and Etc so that's what it   is description to get as a current content okay  so now once you're done with this let's try to   let's say this and then let's run this to generate  a token then we can just go to uwt dot IO and I'll   try to decrypt the token and um I think to give  us more insights on this method so let's run this so in here let's try to log in so we can have  access to our token and let's pass the password to right click on this let's go to inspect element   and now let's try to have access to  the Token so by going to application so login so go to application and now you can see we have  a token here so in a token let's grab this token so that is a token you can  grab that and unless notes so I'm going to paste it and let's see so the  token is not or let's finish let's grab or okay now so this is our token so we say that this token  has three sections the first one is the dot now   you have second one over here so this is the head  this is the payload and now this is a signature so   this year comprised of our information from the  registration section and this is just the header   that and this is the signature so let's see now  we are going to grab this so let's grab this here   now let's go to jw2.io so JWT dot  IO and now let's paste in this   talking that with corporate so we come here and  now let's grab this let's face our uwt here so   you can see we have the username user ID R6 we  have full name as well test the email here the   expiry the issue and the audience now there's  a header so it is telling us the algorithm use   and also the type of the encryption that we  are doing now when it comes to a signature we   see we have this as the age Mac sa256 and that's  the encryption mode that we use to to encrypt it   okay so this is what we are focusing over here  and that is what the this understand the same   method is now trying to get so it's splitting  this now that is the first one and it is it is   using this to have access to this I believe this  is clear so that is what we are doing in here okay   so after this there's one method that we need to  also specify that is a notifying authentication   States change so anytime that record when the  user tries to um authenticate himself and it   gets decrypted as a token and you have access to  all the properties inside the payload we want to   reload so that the system gets away and we can  do that by adding just as one simple method over   here being it so let's do that so let's have a  method as public void notify authentication State   and there's one line of code is going to help do  that so we see here we are calling this method   and now we are passing this method over here so  we are calling a method in a method and that's   going to refresh or call this method anytime we  call this method over here so let's save that so you know we've have created a custom  authentication State provider so we need to   um create dependency injection so let's go to  program.cs file now in here we have to add this   authentication State provider over here so  you can do that by adding builder.services   so we can do that by saying better services that  askup that we can now pass in this authentication   State provider and also we need to pass in the  customer donation State provider when we are   done you need to register this so we're going  to register that by using the Builder Services   dot add authorization call so this is going to  register the authentication State provider and   now we are creating dependency injection between  the original one and the fake one after doing this   then we have to wrap our apps that's a routing  system inside cascading authentication State you   can do that by navigating to the app.reza and  that's where you have a harassing system so we   can actually just grab this and we can cut  that and unless wrap anywhere to cascading   authentication State provider and now in here  you can just paste this here so let's save that so after doing this you know we have to when you  log in first time we see we have this login page   and Etc over there so we don't want to do that  so log in and register if you want to hide them   based on the authentication state so if you're not  logging then you want to see register login but as   soon as you log in you want to say log out and  register and the login must be hidden so we can   implement it by going to our project and now let's  navigate to the main layout you can see we have   this login and register here so we can actually  cut this and Implement a new thing in there   so in here where you have this about you see I  have cut this register and login and now we can   implement this authorized view so this authorized  vehicle price of two views that is a authorized   and not authorized so you can have access to this  authorizer in case the user is authorized what do   you want to see what you want to display in  case the person is not authorized what you   want to use that's not authorized so you want  to pass in the login and register and now here   with the authorize as soon as the person is  authorized you want to display the name and   also yeah maybe the name of the email so let's  let's display the name um as well to the user so   you can do that here but before that you have  to create a method in it and that's going to   allow us to get the name from this authentication  State provider that's a customer that we created all right so in here we can have access to the  claims here so we can create a method as private   string you know this return just a string because  you want to display the name and I display info   so you're passing the list of claims and that  is so this is a list you want to look through   the list and I have access to grab only the  full name now we are checking from the claims   whereby it has a type as full name how and where  did you get this full name when you check our   custom uh multiplication State provider and also  our user service from our API from that controller   you can see from here there's a user report we  are adding claims over here for user ID full name   and now email we want to grab only the full name  you can decide to add in the email as well so I'm   grabbing only the full name and that's what we are  doing here aside from that we have to return the   full name and we can now call this method inside  the authorized view so when it is authorized we   want to display the name of the client that is  all so let's save this and unless put it over here so now let's grab the content here so you call  the method you pass in the list of claims here   and now when it comes to the list of claims  it's going to look through them and search   for a specific one that has a full name  related to the one that we added in a user   repo and I will return the full name so now  when we save this and we run this let's see so let's login now you can see we have  even the name displayed over here because   the token is found in our um local storage  you can see we have the name so let's we can   decide to use the email so let's see when  we go to our page here you can try to use   a full name as email here and I'm just  going to get us the email so let's say   that and now let's slide this off edit  it play this off now save now let's see   we have to get the email over here so I'm going  to try to refresh it you must have that let's see so you can see that you have the email displayed  so I mean our authentication is working perfectly   now what left here is we have to make some  few changes and now add the claims and I'll   set attributes to the claims whereby you can  specify there's a user this administrator this   is manager and Etc okay so I'll leave this  source code at the GitHub and I'll put the   the link under the description so you can  just go in there and then grab this thank   you so much for watching this video and you  can subscribe to the channel for more videos   there's gonna be definitely another video on  this because you haven't done it yet okay so   um we're gonna end here and  let's wait for the next video

Channel: Netcode-Hub

Views: 1,136

Keywords: asp.net core, Registration, send email using mailkit, mime, controller, service, email service, web api, SMTP, pagination, EFCore 7, skip(), scalffold, scaffolding, migration, database migration, creating models, fileupload, file download, blob, javascript, crud, sqlite, ef 7, authentication, blazot, client-side, jwt, token, blazor authentication, role-based, assign-role, assign role on button click, quickgrid, sorting, filtering, convert image, base64string, format, validate form, mudblazor

Id: sKJ4p4OKQaY

Length: 128min 59sec (7739 seconds)

Published: Thu Aug 24 2023