Custom Cookie & Role-Based Authentication in .NET 8 Blazor Web App with Interactive Server Render

hello dear friends and lovely people you're  welcome to net code Hub channel I am Frederick   as you know and I'm happy to have you here  today in this video we are going to look at   how to implement custom quickly authentication  system in net8 web app with interactive server   render mode I have already made a video on how  to implement custom JWT authentication uh with   row and a referesh token support if you have  watch that video check this video description   and you're going to find it in there you can  also support this channel by clicking on the   like button and also subscribing to this channel  if you haven't done that as well you can also   buy me coffee to support this um Channel too now  maybe you'll be asking yourself what is quickie   authentication well if you did ask then I got  you okay I got your back cookie authentication   is a common method used in web development to  manage user authentication session in a Blazer   app which is web framework by Microsoft for  building interactive we applications as you   know cookie authentication is of often employed  to handle user authentication and authorization   checking who the person is and now checking what  the person can do let me give you some general   overview of how C authentication work in Blazer  applications when logs in the server validate   their credentials upon successful authentication  the server generates a unique authentication token   and that is known as the encrypted cookie which  is sent to the users browser now with the cookie   storage the authentication or the token is stored  in the users browser and to precise cookie storage   the browser automatically includes this token in  a subsequent HTTP request to the server now when   it gets to the request authentication what does  it do for each subsequent request that um it made   the server checks for the presence and validity  of the authentication token that is a cookie   if the token is valid then the server consider  the request authenticated and now processes it   accordingly but what of if the token is invalid  then the server May respond with a a code that   the client needs to login again so absolutely  it's going to deny the assess now when it comes   to searing management how does it work the cookie  typically has an expiration time so normally when   you create cookie you have an expired date now if  the user logs out or if the session expired the   server invalidate the cookie and then the user is  required to login again so in the cookie system or   the authentication system you can extend the  live span of a cookie okay inbl server it's   possible to do that so this is how actually  the system works all right so now you have   the overview of it let's put this into an actual  implementation so that it becomes clear to you as   well all right so make sure you have your Visual  Studio launched and we're going to create a new project this is going to be web app the name  here is going to be demo Blazer interactive   server cookie authentication system now if you  want to have the source code you check the video   description and um it will be there waiting for  you trust me okay so let's click on next and here   you know we going to choose the type let's make  it as n because this going to be a customized one   so we didn't not to follow what has been um  created already let's choose the interactive   render mode at server and now per page location  that's interactivity we can leave it per page   or Global any this Okay click on create to get  this project created you make sure the framework   is net 8 because this support the authentication  not authentication the interactivity random mode type so first and first what is the first  thing to do guess what let's install a new   get packages we're going to be using for this  you know we're going to have a connection with   database so which packages are popping in your  mind that is the EF cor SQL server and our tools   isn't it that's fine let's get this package  installed so I click on dependencies and I   go to manag get packages from the browse  session we want to install first for the   identity we need to install microsoft. aset  C identity. EFC so let's install this package the cor that I'm St is 8.0 maybe you may  have higher or yeah I think higher so   all the same so let's install this package  when we are done we're going to install EF core so we need EF core let me clear this e c SQL Server that is this one too  the same version 8.0.1 make   sure the versions actually the same  let's accept this and also the last   one that we need to install here we  need EF c2s to enable us perform DB migration so this one 8.0.1 so when you go to the installed packages  you're going to find all the packages that   we have installed here let's have a look okay so  they are here you can also check from solution   you go to the same dependencies and I visen  packages have you found yours click on this   and we see we have them here right good now  let's build this project to make everything intact you can see that the build is successfully  completed now let's go in there and create our   model right so we're going to create our model and  we need our d2os so what are model what are d2os   model are the same as entities that is database  entities what database they going to use to create   what EF is going to use to create database and the  tables and the columns respectively for us that's   what it needs the model or the entity d2os are  data transfer object to communicate data from a   user that's the end user and the database so it's  in between the middle man right it goes in it goes   out it goes in it goes out as a messenger okay so  we need both for the registration and also for the   login now with this we can create our customized  identity system but for now I want us to use the   built-in by Microsoft soft since we're going to  use a quickie session I think this be better for   us to use it so we're going to use identity  management system now with this identity we   have to create our models and we have to inherit  from Identity us identity row user manager sign   manager and Etc right so that's what you're going  to do here now before we do that let's create a   model first right so let's add a folder to this  and now with this folder let's name this as model now with this model we want to create a  class in here and now this class going to extend   identity um user identity user is a default  class created by the ASP team now it has some   properties such as username telephone number  password and Etc if you want to add an extra   data to collect from the user you can do that  so let's have I'm going to say an application user now with this application user we going to  extend from it's going to inherit from a parent   class known as what guess what that's fine I know  you're saying identity user but I can hear you but   I know you said it right so control period we  need to include this from um the P that we just   installed first one that's identity. EF core why  is it taking long it's still loading suggestions   right okay so let's wait for for the SS to get  loaded that's right we have it now once you have   this we going to now let's have P we're going to  have our string and I'm going to take in name okay   so we need name let me set this as string. empty  maybe you be asking yourself or you be asking me   but I can't hear you but I've seen it okay so  we asking what are the properties that this   identity user contain that I do not conflict it or  duplicate it see if I right click on identity user   and I go to um go to definition let's see what  it has you can see that in here it is inheriting   from this identity user again but when you check  this it t identity user you can see first it has   a property username isn't it now if you want  to find all these properties right click on   this let's go to go to definition again these are  inbuilt so you need not to touch it never touch   it leave it as is it okay before you run into any  error and starts running away you can say t this   username normalize username email normalized email  confirmed email password phone number you can see   so all these are properties that this identity  had so if you want to add any extra you make sure   you Do Not Duplicate anyone in here you pass in a  unique one and name is not added you have username   by name is not actually added that's the reason  why we adding name to this so we're going to have   name email username and password that's only what  we want for our R system if you want to add more   put it here am I making sense that's right now  let's let's see so let's save this we have a model   created now let's create our dto and dto are the  data transfer objects we have to put them in the   folder organization is the key so dto within that  dto let's add our login dto and now register dto   so let's first have our login dto now what are the  properties that we need under login what do you   think what are the ones that you are going to be  using in your login system maybe you want to use   email password yes you want to use these two isn't  it I also want to use a same so let's put them   here we have an email as an attribute that we add  in on top to make it as an attribute to restrict   it in the form of an email we have a password in  here and we need to create our login or register   D2 as well so let's do same D2 add a new class and  I is going to be register dto now this register   dto you know we still going to have this we're  going to need email and password so you know do   know repeat yourself we want to inherit this so we  want to do that this is a login dto yes so go to   this class pick all the members in there and I'll  add it to this virtually is it spiritually okay   so virtually or spiritually for Christians or for  spiritually it but for virtually it is inclusive   physically it is exclusive H that's fine okay so  let's go now Within what are the other property   that we need to add to this maybe since we have  email and password we can add maybe name I think   name isn't it yes so we can add name let me just  make um in here instead of saying email maybe you   can say this your full name so add your full name  so we want to remove this email now this should be   out since it is not an email we have a name in  here and we want to also add password isn't it   good so for this password we want to add confirm  password because you have password set already so   all these are going to be set automatically so we  need not to add this anymore let's cleck that okay   so we have confirm password that's going to be the  name and we have the password in here okay that's   fine we have these two guys in here plus the two  here making four or five this is we have one two   we have two here we can four okay so these are the  properties that we need for registration and for   loging D us they're going to take the data from  the user and I'll bring it to this en model for   you to get to the database and I perform magic  that we want let's save this we can now un close   this peacefully cuz we are done with what we need  let's go to this and we need to also create our   appdb contest and that is actually the data access  layer which going to have access to database pick   a connection getting data in and out here and  there right so let's create our a new folder   to this and I would like to name it as data what  would you like to name yours maybe you can put in   your name but make sure it synchronizes with what  you are doing the contest is the same so let's add   an appdb contest class in here you can give it  a name as well so I'm saying appdb content that   is application database contest class you can  also say DB contest class you can say contest   class can you even put your name. contest class  well it depends on you so app DB contest class I   not to add a class okay because you know it's a  class already all right now this has to inherit   from Identity DB contest you see now with this  aside from this it's not going to inherit from   only this it has this that we can extend as a t  user what a t user here normally we should have   added application not identity user but we need  an application user since we have extended that   class okay so let's include this so this is what  it needs to inherit from then control period we   can generate a Constructor and I'm passing this  appdb contest class in here very very well this   what we need to do okay we don't need to create  any table maybe you're asking yourself okay fine   so we're going to create a table as a user table  right no please don't do that don't do that don't   do that three time do not do that the reason why  I'm saying that is identi be contest class contain   this modus that going to use to create a table  for you so don't add any identity table no let's   see let's say this let's register Connection in  the database or the program CS file we're going   to register Connection in here so maybe before  the build build build right let's do all the   magic in here so first of all there is going to  be a database connection string and you know with   database connection string we have to get this  application DB but we made it as updb contest   so where from this application sorry for that  I don't want to confuse you okay let me clear   that control period we can include this in that  is coming from the data folder right good so we   have a database connection string created but we  don't have the string yet do we Okay we don't so   this what we're going to do quickly we can  just grab this go to the app setting. Json   file and I do that magic in there so from here  we can say that oh see what I've done you see   so here I'm going to say connection string then  the name here is going to be default connection   now with this we're going to say server is going  to be what local so so local for the local datab   local server we have database name here is going  to be demo okay Blazer interactive server DB H   that's fine then you going to say trusted trusted  _ connection set this to true and here you need to   add trust server certificate else going to have an  issue with it TR server certificate set this also   through this all that we need simple change the  name of the DB if you want to can maintain this   change your server name to your server all right  that is it for these two guys they are the same   don't touch it yeah so save this now we are down  here the next thing that we're going to do here is   register this identity um cookie authentication  right that's identity manager so we can do that   first can use build. services. authentication as  we be doing for the JWT you have to also do same   for authentication then options I hit this options  I like to use this one when you compare this which   one is more readable simple is not this one yes so  let's do this and aside from that we need to add   identity manager so default token provider signing  manager Ro manager hi a lot and EF there the entty   Frameworks store right so let's start to do that  in here so builder. services so do add identity   normally I know that here when using the old  version you could pass in your application user   and identity role isn't it but with this Blazer  interactive server do not do that else I'm sure   you're going to have an error you can try that  and see but if you don't want any issue then let's   maintain as this one so instead of Sayid didn't  like just wrong no we want to add core okay let's   add core to this let's specify our application  user so application user and you know this do   you remember this a mod that we created okay now  aside from this we need to okay I can put it on   the same line that mean I like vertical coding  than the horizontal one or oh am I am I deting   you I like the horizontal coding and the vertical  one yes it is more readable to me but well choose   your choice you need to add Entity framework call  so Entity framework call framework store we need   to pass in our appdb contest class you see this  aside from this we need to also add let's add rowes now with this Roots we need to add we  did not create an extension for row right so   let's a default one identity row okay I  like horizontal coding please don't say   anything dot okay then we need to add sign  in so sign in manager and now since we are   trespassing let me put this down here so do  signin manager then we need an application   okay so here usually we supposed to add  application DB contest but here signing   manager is going to do it all for us okay now  aside from that let's add add default token   provider yes let's do this okay so let's save  this let's close this you come back again but   for now let's close it let run it let's bring  the project again then we perform database migration so this is done we go to package manager  console if you're not finding yours please go to   tools or not tools go to views or not views back  to tools we get package manager ah there's a guy   click on this okay so I'm clearing the screen just  like that I haven't started and I'm going to say   add migration and this is able to work because  of the entty framework called. tool package that   we installed if you forget to install this pleas  going to have an error trying to run this so make   sure you have that package installed add migration  and the name here is going to be first and- o   organization is the key and that's an output  where you want to keep it open a folder called   Data create another folder called migrations and  and I'll do your magic in this folder H let's see all right are you there so you can see  that here we have the file created as you   can see abdb um ad migration and these are  all tables from V identity manager okay so   check it up we have aset R aset users I  believe the first time of you saying this   you know it already but if you are new then  these are all tables these are the various   um column names in the table so going the  table name and these are the column names   so all these are from this identity  manager all right now let's update um database so update Dash database yes so this is also  done we can just close this so the next thing to do here is we're going  to create our service you know since you're   not going to expose an API here since a  Blazer interactive server everything is   going to be intact in here so we're going  to create a service which is going to um   have access to our database and start doing  magic in there right for the login on the the   registration as well so I click on this let's  create a service for that so click on folder   and now here this going to be services for  services right click on this let's add a new interface and I'm going to say I account  maybe you can add a service to it but since   I have the folder I don't want to say  I account service again but maybe you   can do that so I account or I account to  be okay for me but I don't know you can   just add it now this ey account we have  to create a response a service response   to return maybe in case you have any  issue so I'm going to create a folder again and now this is going to be um responses now with this I'm going to create a  custom class I'm going to name it as service   response well you can also name the any name that  you feel you want to use it for your service or   your response now this we're to use um a record  we need only a flag and a message in case you   have any error hi get it out for us that is it  so when we come back to the service interface   that we have created you and I have created or  creating we're going to have one we're going to   have a register async and you're going to pass in  a return type of service return service response   we pass the registered dto and we create an  instance as modo we're going to also do same   to the login so you also going to have the login  asnc you pass and login dto and this these are the   payloads right these are going to be retrieve ored  by the system from the user and now when it gets   to the server and I get communicated this going  to be the result the return type you're going to   get from the server and I return to the user so  here is a in here is a out in out in out that's   what it's doing I believe this is clear that's  fine let's create cre you know since we have an   interface we need to create implementation  so we can um bind this together right like   husband and wife okay so now let's create this  and we're going to create you service and you   know this is going to be an implementation not  an interface sorry so this going to be just an   account and now in here what is the next thing  to do you know first we have to inherit it isn't   it I believe this is what you were saying  and that's fine so going to iner from I account yes control period we're going to  implement all the interfaces in here for   now we have how many interfaces two we need  to inject our identity manager NSO our user   manager and rle manager isn't it good so  this what you're going to do let's create   a Constructor in here so CT o r oh c r TR  so CT o r Constructor hit on that and now   here we need to include our user manager  first we create an instance in here so we   need a user manager that is first one we  also need signin manager that is second one we need a r manager that is the fourth one  these are the three serious guy that we need for   this to work and that's a rle manager okay all  right so we have this we going you're going to   right click on any contol period then check  here create and assigned remaining as Fields   not properties go for this one you're going to  have them issued in here you can also use primary   Constructors right but for now you don't want to  do that in the previous video that I have you and   I have done together we use a primary Constructor  so I believe you have the idea but now I want to   maintain this this is the manual way the old way  the traditional way yes I don't want to confuse   you guys for now let's focus on this and later on  you can modify it yourself can't you do it yeah I   trust you okay now aside from that we going to  look at the login or the registration which one   first I think registration must SC before login  how can you log in whil you have not registered   okay so let's jump to then I think we should move  this you register first before you log in that's   the best thing to do okay so for registration you  know here going to be an ASN since we have a task   ASN think that's fine let's first find user by  email the payload that is coming here we want   to find the user first so get user from here okay  passing the login D so here then I think I have to   make it like log D so find the email now if email  is not found what do you want to do what do you   want to do tell the user something right so user  not found or what's okay you know what I'm trying   to implement this in login or it is not login this  is not login this is going to be a registration   right so that's what we want to do before we do  that we want to find the user first right if user   is not equal to now meaning if user exist already  then user already exist because you don't want the   system to have multiple account with same email  oh no user already exists that's fine what user   is not existing we want to populate an instance  of this app application user and now we want   to gather this name username password and on the  email now when you look at the password here you   can see get or set sorted and hash representation  of password for this user so don't think about   having any any property oh is property any  get package to encrypt the password for you   the property here has a get method and as soon as  you retrieve a value here it's going to encrypt it   it's going to have a sort and now hash it so you  w't going to see the raw test you're going to be   encrypted that the reason why I love this identity  so much now I know we having an error here yeah I   know I know you know what to do isn't it aside  from creating this and populating this as a app   user what can you do again we have to create  an account so create it an account you see we   have have it seen so just hit on the top key to  get this account created restore it as a create   user now this could return true or false right  so it could return succeeded or not succeeded so   we need have to check and maybe in case it is not  you can retrieve the error here but you're going   to create a customized error system to handle  this in case it is succeeded we want to do the   following okay but if in case it is not then we  can just start the person hello my friend hello   my dear something occurred so please error so you  could not oh okay oh Fant so error in case it's a   seat user is not created what can we do we want  to create an assign a row to user in my use case   I do say that the first person to Reg the system  automatically is going to be administrator it's   going to be add to the admin Row the subsequent  registrations are going to have a user row that   is my use case what of yours do you like mine  then let's Implement mine okay so we're going   to first find a row manager you're going to find  this row so we're going to check do we have an   admin row created if yes it tells you that admin  row is already created so there's a person who has   been assigned as an admin already so then it's  going to skip if admin row is null it means if   admin row is not created then let's create this  admin row if it is not my friend create it and   after creating the current user at hand please  do assign this user to an admin rule close it   and that is it what of in case it is not so else  if admin is already created then please do check   if we have a user row created so check it for  me what is a response is is the user row you is   the user Row in there is it created yes or no if  it is no then please do create it for me so this   can be in just one line since you have this please  create it for me now when you are done the current   user at hand please do add assign that person  to the user R you see good then what else can   you do after doing all this then creating this or  creating that return this user created success so   let's say user created this is a custom message  you can decide to type in any of yours you want   to add it so you can just return so our system  is created and fixed set and done let's have a   look so I'm going to click on this save this and  let's go to solution I think we have to register   this isn't it so in this um program. CS file  we go there from the V page down here we can   just add builder. services. add scope then with  this scope we need to specify the I account I   account then we say this is an account right good  so this is the implementation and now let's save   this after doing this what is the next thing to do  we can close this program then let's try to let's   go to the component the input and now let's put  them here so I'm going to say at using demo let   me just grab this and Now demo dot we need dto  we also need same but again we're going to have   our pages in here right so pages we're going to  have another we're going to create another one as authentication then here let's inject okay so  we also need one yes thank you for remembering   me you said Services isn't it yes so let's inject  I account then we say account service let's save   that now with this control d a it's already in  there so let's save this let's close it reopen it again we must have it in a Col form  not this okay well we have it created   or it is set maybe we need to  close this now or build this application import it's not working so let's build this I know you say this is not existing before  building yes we have an error so let's create   this add a new folder to this it's going to  authentication don't worry about this folder I'll   tell you what going to do uh now okay so forget  about that let's move on let's build this and   see if it's going to work okay so we still have  an issue here the name type indication does not   exist in this name space but we do have it now we  have just created it or where is it found is not   inside the app yeah it is here authentication and  it is saying we do not have it wow unless maybe I   have to close it and that's how at times this ID  troubles me H okay I have to close and open it   again give me a second oh yeah I'm back so you can  see that it is in here so Authentication and this   authentication and that is authentication where  is it authentication authentication authentication   it is coming from authentication and okay so  maybe for now since there's nothing in contr   K C we can comment this now is working we have it  um in a Col form interface with eight um instance   here created that's fine let's have a look on the  registration so in our service since you are done   creating this we going to create a login so it's  going to come from the component folder then you   see we have pages right so inside this Pages we  want to turn one of this into a register page for   this register page I'm not sure I'm going to take  you through a step by step creating the form just   design any edit form with your the property that  you have stated and that's going to be for if I   go to this register see we have four properties in  here name email password and confirm and password   try to get this data out right and that's what  I'm going to do so in here let me remove the counter or even let me cter be there okay without  forecast also be there but the C is off oh sorry   so let me just have the registration system  in here I have a component created already   so register and that is the route account  and register this is the route okay now you   see from here you have an edit form and I you  see here since you're having a form you want   to statically render this form so we need to  make it in the method of post so you see we are   adding this method because you're going to have  a button clicked and now if you do not provide   interactive server attribute or render mode  on top button clear is not going to work but   you want to also render only this form you don't  want to add any buttons and then so we need not   to add the the the render system all right so we  have to statically render this and if you render   this statically it tells you that this page not  going to be responsive that's a static server   rendering this page not going to be responsive all  buttons when you click hi nothing going to happen   that the reason why we need to include the form  name and also you make a method as post we have   a register D created where it is it if I click on  button submit is going to this method submitting   to this or posting to this method as a register  user we have a class is a form floating registered   EO name and Etc you see we have email we have a  password and confirm password okay now aside from   that when you have a look here you can see that we  have the supply parameter from form and that's the   form maybe my error handling here is not the best  I just want to show you how to displayed an error   you can just format it to to suit your high  level start that you want then in here we're   going for account so here going to be an account  service register async we pass in this okay now   the result that is coming in we're going to check  if it is through then it means account is created   we not to include this navigate to this account  and now login so as soon as you done creating an   account we navigate you to the login else we set  a response here and now the error is going to be   displayed down here very simple one you see so we  creating the service and I consuming the service   inside the Razer component fantastic now this why  you having this error because you have not created   an instance of this nav manager quickly in the  import we can do that so we're going to say inject   nav manager huh nav manager very simple now when  you check it again you save this and I want to   check this this must be solved we're going to do  same to the login so I'm still not going to create   a login for you design it yourself login page I'm  going to have the log in here that's my login now   you sa account and login then please login is  it have you seen that so let me add a place   cuz this page must be respectful it should respect  everybody so please login now from here who I like   this this login now you can see we have the email  and I have the password that is it you have the   button as login you see login and in here we have  the same error that is what we want to display we   call this apply perameter from form and now when  this clicked you want to call this account service rather login pass the model and now the same if  this is okay then return to this for now we're   not having any page you're using this homepage  so if it is what you want please notate to the   page reload the page and then that is it to  get this account created and everything set   okay so that's the r system let me close  this open it again so I'm going to have   the colored one not the black and white as  you are saying yes it's intact that's fine   so our this are loging but we have not  implemented a login yet so we're going   to have a look on the registration system  let's run this application and I'll check it out so the app is launched but you're not having  the login or log out you're not having a login   or register in here isn't because we have not  added them to the nav manager or the nav menu   so we have to manually add yourself accounts  and register do you remember have you gotten   your form oh okay that's fine now let's add  a name so I'm going to say this is net code   Hub right then email is going to be an admin SL  admin.com password let me say there an admin at   23 that's a nice password admin at 1 23 if  I click on register let's see what happens   well we wait to see if this going to work or  not okay so it is still running oh that's fine   it worked you can see it has navigated to  the login page let's create another one so   we to go back in here the same register  instead of this I'm going to say user at user and now this is going to be next SC up  version two what do you think yes version two   then I'm going to say here user at 123 user at  one23 click on this register yeah that's fine   now let's prove it close this SQL Server object  Explorer if you're not having yours please go to   views going to search it in there we do you  remember the name of our database demo SQL   demo dbis identity Etc all right so from the  database we have to get it here demo long one   which is demo Blazer isv yeah that's F this one  so click on the tables and in here let's check   the the registration let's also check for the  rules assigned so from the registration check   it from the identity user as net users we have  to have two people yes you see we have them   here these are the various IDs we have them set  now see these are the names that we St we added   username and Etc right now have you seen the  password it has been encrypted already Yes and   with this the next thing we're going to do here  is let's check the the rules how many rules have   the system created so far huh two rules admin  and a user now let's see which person is having   the admin which person having the user the id  id one is going to be the first to register   right that's the the admin at admin that's an  esod up so let's see let's add me one for the   admin it is what D5 that is a row ID D5 row ID  D5 for admin go for this ASP net user rowes so   you have D5 as an admin check it out so row ID  Ru ID is D5 that is this one now user ID is this   let's find the user ID user ID is one two let's  go to the users now let's find one two one two   is who one two next code H have you seen as an  admin so defaultly admin has been assigned to   this person that's the first register the second  person was assigned Row the user row and now the   subsequent ones will be assigned as a user row  as soon as admin row is created it seals it no   one can enter only the admin that's fine that's  my use case what of yours try to implement your   own magic and I believe you can do it okay so  there is working and the next thing I'm going   to do here is let's work on the signing so if I  click on this login nothing happens here oh not   implemented exception oh that's fine we know thank  you for showing us but we know this so let's close   this and and let's go to the account service  let's implement the sign in in here let's clear this so I believe you know the first thing to do  right it's not about making as async if you're   able to do this it means you know what you're  doing aside from that you know we have to get   user so from this login dto let's get the user  check if user is not found then tell the US not   found very simple if the user is found then we  want to get the user row now we have only one   row created right and that is the either an admin  or user so we get the first or default is going to   get us the first row if you have multiple rows  then you can get all the rows and now send it   okay because this method rains a list of claims  or list of identity row okay now in here we need   to populate or we need to gather our claims that  we want to set so so let's have it set here our   claims now this claim we need to include identity  do claims yes let's see oh we are not having this   yeah it is even solved so claims equal to new list  of claim we have three claims here that you want   name email and row we get a row from this and now  we populate it and that is all after doing this   there are many ways of signing in we first want  to check password sign in if it makes assets then   we want to sign in with claims so password sign  in pass in the the email or the email the user   as well as you can see found here passing this  and this is lock out no this the first time so   we don't want to passing us through this false  defaultly and aside from that we want to check   if it is success but in case it is not then must  I please start this user something H error C you   can just extract the claims or extract the error  and now P it to the client all right but it is not   advisable to P this error to the client because  if it's a sensitive data then you are doomed so   try to customize your errors you can put this  error to your send it to or handle this using   serial log or send it to your email but for the  client customize it beautifully package it and   then give it to him he would love it okay aside  from that then we going to sign in now this guy   here is going to create a token and assign it to  the the contest and now return this as success so   signing with claims passing at the the user this  is going to be um here how many days you want to   keep this for want remember me right here maybe  later on we have a video covered on this how to   use this well but for now let's forget about this  you want to pass in our claims three claims in   here we pass in here and that is all log in is  done you it is very simple isn't it I know you   love it I love it as well okay so now we have  this it tells you that a system is not going to   work what do you think okay let's give it a try  when you run this let's see right click on this   let's go to the inspect you go to the application  and I in here from the cookie session you click   on this for now we have this anti fory token by  the ESP defaultly created now let's go to the account so we're going for an account slash login  let's pass in the user click on um login and now   let's see what will happen here so you can  see that here we found we have the the token   created have you seen this our token we are  signed in and now you see it has been created   here isn't it so we are signing this our token  okay now this is working perfectly but the next   question is how do you authenticate the user we  have the r set up here remember that we specify   some claims which has a row as well how do you  do it that is what I know you are interested in   okay so here I know you are into the code the  actual code as well for the design I think uh   you can do something on your own isn't it now  when you go to this nav menu I want us to have   remove add maybe the login log out buttons in  there so where can we find this we can find   this from the login um layout na menu we can  have this here so all this that we have maybe I can I can just copy this and I'll change the names  but I don't want to do that you can also have time   and do it I'm going to clear all this here and  I'm going to just grab this it is the same watch   what I am doing we are having the same thing  here I change the name to cookie art and it's   the same as you can see you have home counter  weather now this what we having an authorized   view you see it and we using this now with this  authorized view check what is happening we have   this is for only admin who can see this status  here tells you that if I on status is going to   go to this component art and it going to tell  you what whether you authenticated or not if I   click on log out that is where we want to handle  the logout Now log out here we cannot use signing   manager. sign out no this has to be in an HTTP  contest now when you use an HTTP contest accessor   to we can just read the user info we cannot made  any modification HTTP Contex accessor gets you in   a read form only read you cannot edit it if you  can read you'll know the user is authenticated   how about if you want to log out there it's not  possible in using that so in this we can create   a form where whereby going to bind or going  to create our Minima API only method I hate   Minima apis a lot but for this we need to create  a minimal API to handle this if you have a look   on the original copy and that is when you use the  when you choose the individual account it is the   same procedure so if you have if you know have an  idea of implementing that then that's very simple   you can just skip this and move forward okay and  you know since we're going to do that we need to   use an H this is a PHP right you can see this is  done in PHP so we have a form an action pointing   to the location of an endpoint account is going to  be the the endpoint name loger is going to be the   route we have the method as post it's a PHP form  then we have our button so we are posting a void   we posting just a message empty one in there but  soon as we post through the posting we can have   the context whereby the contest is going to be  open for modification then we can sign the user   out H sounds weird right confusing or complicated  all right so this is what I know for now now let's   continue on now from here to you have a register  and this is just a referring to the register   component okay accountregister no matter how it  is upper case lower case is still going to work   huh this is going to work okay okay now we have  our login which pointing to the login okay and   now if you're not authorized you cannot see this  if I save this run this let's see what going to happen oh yes I knew you you're  going to have this did you also   know we need to use this cascading  authentication State provider and   we can put that when you go to the  what is it route let's specify this cascading authentication States you see so we can remove all this let's cut this one open and close  here so control K Control Plus period   you're going to have this all right then  in here let's make this an authorize route view so in here we can have a lot  not authorized you can also have   authorized you also have authorizing  so when authorizing then we can just   display something like please do  wait for us let's make it as an h two okay okay now let's check it out oh okay so you can see now it is working  and you can see we have our home we have this   um counter we have status we have log out  right if I click on this log out nothing   is going to happen it's going to make a post  but it is pushing to this end point and now   this is a route but there's no Endo created  here so logout is not working status error   because we have no created any component  for that what you want to talk about here   is let's try to log in so we are not having  login in here have you seen you're not have   loging let's find the reason why we are  not having that when you go to this now menu that is this one register and that is if  you are not authorized you have to see register   and a login if you are authorized then see this we  have a this also as an authorized only by weather   that's by admin we have our row also created  okay this what we are having now let's save this let's build this again so we still have this  do you know reason why right click on this go   to inspect element now check for application and  check for the token you can see that you have it   in here so we authenticated that's why we have  this so let's delete this one now refresh and   see oh yeah we have it right login and register  status so if I C on this status nothing happens   404 it's not created yet I on register we go to  the register log in and now we are in there now   we can log in and we can register at all time now  if I click on this let's change this to admin so   we said only admin can see whether forecast now it  is logging in let's wait and see it's going to be   registered in here to be created for the cookie  token and also aside from logging in we going to   we have the weather right so it means as soon as  we sign in with claims our token our system is   working with rules now if I click on weather you  can see that we have it in here here now token has   been registered you see as as I sign out and sign  in as that person and that's going to be the user   that's going to be hidden so we are doing hide  and seek using this authentication system okay now   let's work on this logout so and also the status  so let's see what to do let's go in and create one component and I maybe this component  we can just name this component as Au   authorization or detail Etc right so maybe  in the pages let's have this component as OD or maybe we can just close this so maybe let's say this is details uh status so status is in here and now it needs an  authorized view so if you are authorized   then want to display the name and I'll say  you're authenticated that's what you want   to do okay but in case you are not you  authenticated and now this placees what   for authorized so this opens only when  you are authorized you can see this okay   we save this and it's coming from this  a Also let's have a look if I click on   the next one maybe um the log out what's going  to happen let's run this quickly and I'll see first so we have it in here now if I click on  status you will see I'm authenticated so it tells   you that I am hello you're authenticated you're  admin now right click on this inspect element   go to application and I go to to application  cookie clear this reload this and now if I I'm   loging right so if I click on this home then if  I click on status please login you see that so   as soon as you click on status it gets you to  this place do login register it can register   this and now let's see so login let's log in  using this user click on login and now check it out so status you are user but see we can't  see the role there because you're not assigned   to view the weather okay what of the logout so we  don't want to be right clicking and go to inspect   and be clearing the cookie all the time no we  don't want a user to do that Des even not have   an idea of having this right so how can we have  a system to clear this as I said earlier on we   cannot use sign out. sign out signing manager.  sign out let's try that and see if I click on   here if you go to the service maybe that's what  is coming to your mind now this signing manager   you can see it has the sign out it has a sign  out right let's WR that and see and now we're   going to know what I'm talking about so maybe  you can do it to yourself okay I'm not going   to do that because you want to check want to to  follow our time don't want to waste a lot of time   in here so let's create this endpoint to have  access to this Minima API then we can post this   in there and when returning we can return to the  homepage and I'll clear the context that is the cookie so let's go to the solution now  the uh authentication folder that we   created let's add a new class to this now  let's name this as identity component end point identity components end points well you  can just put like this or you can say sign out   end point okay because here you want to make  it as only sign out so let's say this is sign out and points so this is going to be the class let's  click on to get this class created then in here   we need a public static I end point conversion  Builder have you seen this this one then let's   give it a name so map sign up not sign up  sign out endpoint then in here we specify   this we are referring to the this this I end  point identity a conversion Builder but it's   not conversion because since we going to have this  route we need this route Builder let's say this N Point okay so we're going to have only  one end point so let's make that only   end point when you have multiple on then  you can say end point maybe arguments true   through now exception in case this  is through if null then this end point and points okay aside  from that this should be this   should not be public this should  be internal sorry for that and you   know each instance must be created  once so let's make a static Statics static yes okay so it's a static class and  if it is not null then you want to say that   there's an account group so this account group  is equal to this endpoint you see endpoint do   map group now this map group what is the name  so going to be the controller name we're going   to say slash account okay this is a mini Mar API  so in that let's have the account group so since   you have the map group name created it's like  an account dot right dot then map post so it's   a post request remember that the logout form or  the logout form that you created is an PHP and it   is the action is what the method is post and it  is posting to action SL logout take note so the   name here the action the not the action account  SL loger the account is a m group name and now   the logger is a route okay so if you change that  you might also get this change so they can send   together I believe this clear you've understood  it isn't it now in here we're going to say slash   logout then what are the payloads async we need  claims principal the claim principal contains   identity as soon as you sign in identity  has been added to a claim principal and in here let's create it at user okay aside from  this we also need sign in manager sign in manager let's see it's com from Identity  then we have to use an application user   that is the extended class of this identity  user cont period you have to also use this   okay then we have to create an instance of  this we're going to say sign in manager not   man manager manager all right then what  else can we do again we can after this   two is okay so we have the signing manager  with instance created and now in that let's   open this I think there's an eror here  that's why let's have a look we have our logout oh okay so we need to remove one of  these and we have to point it to this then   once you open it no we have to close it terminate  it yes so this what we need to do okay so in here   we're going to say and await so here in the  context we can just sign out so we're going   to say sign in manager DOT sign out okay  then what I return let's return the typed results dot let's local redirect you want  to redirect to where for me home is okay as   soon as you sign out go back to the homepage  then going to say return account group now   with this class that we have created let's  save it let's copy this sign out we're not   going to use this class we're going to use  the method in here as map sign out endpoint   so let's copy this go to program. CS file  then say app. map endpoint then save this   this is coming from control period it is coming  from this so include the reference and that is it okay so let's see let's try to um  refresh this and then let's check it out now we go to log outs so we are sign in  click on status you authenticated if I click   on log out let's see you can see we are out  you see that now let's go to um inspect go   to application then check here from this you  don't have it right let's log in so log in in here let's wait we are in check  our status oh you authenticated right have you seen this log out H it is off  let's also check is the ruw can in of making   an admin and have a look here whether for cast  we have it right when you go to network tab   clear all this counter okay counter is not  created so I believe you can do it yourself   right it's not important here so status then  counter so this is weather we have this is the   the ESP net call antiy token but we not going  to see AI in here because is been sted and now   the HP content going to send it so it's going to  retrieve by the server and I'm going to calculate   it it calculate yes if it's valid or not and  based on the signing manager with the claims   to we can have access to our rows as stated so in  the same folder that we created as authentication   do you remember we have this endpoint mapped in  there that's a sign out endpoint we're going to   also create our new class in here and now this  class is it going to be any class interface   class interface what do you think yeah it's  a class right all right so let's make this as identity um identity revalidate  because you know it's going to   validate all the time so revalidation  revalidating ah I need dating aate provider aate stands for what H yeah that's fine  that's correct let's continue authentication so   let's create this class and now this class it  has to inherit from the parent class and what   is a parent class that's a revalidating  server authentication State provider so here we are going to inherit it like this okay  now in this there's an abstract class that we   need to implement and that is which one ah time  span and validate authentication state async so   this class here is going to tell you what time  or how many minutes or how many seconds do you   want to record this and check if the token is  valid H 10 minutes 1 hour 10 days oh it's bad   make sure it is in the seconds okay do check it  in seconds not in days not in hours else you're   talking aies days that can still have say to  the system but for check seconds 1 second it   does check 2 seconds it does check 30 seconds or  maybe 10 seconds it do check 20 30 40 50 and Etc   all right so in that let's see what we can do  from this let's create a Constructor for this   so I'm going to say here you going to see T  then we're going to inject I loger factory   we can maybe inject this to log out what is it  to log out to log okay we need I service scope   as well so when you also take the original copy  from using this identity manager or using this   individual account you're going to see same  all right it is where all the resources are   coming from so you can just go in there and  check it out if you don't want to check this   then we have eye options and identity options  so once you have this you know what to do we   need to create an assigned field so you can also  use primary Constructor but for now no confusion   no complications you want to create an assigned  remaining field in here okay so now with all this   that we have this we can pass and revalidating  auate provider and let's see if we can specify   this as a base and that's a logger Factory is  it going to work in here or we need to pass it on let's see it's an [Music] option that the reason why this primary  Constructor comes in to make this very   simple Okay so I prefer we use this primary  Constructor for now so let's use a primary   Constructor very single a single line can  also handle everything so I'm going to cut all this okay and it is the same so once you have this  our class that we created was oh the class is off   identity manager validation State let me just go  back and okay so this is a class isn't it so this   class that we have we are going to just instead  of this we're going to place it in here yes so   this what we want now with this identity this  has to be you know for primary Constructor we   do have to inject it in the the class okay okay  then aside from this I can put this on the line   like this this why I I I want the the horizontal  coding I love it so much then you pass the ler   Factory in here so you see primary constractor it  is working by secondary constractor using primary   Constructor it is working by secondary Constructor  it is not that is where you have your Constructor   created and you have all this injected it is not H  my mouse is dancing okay so we have it set in here   now the next thing that we're going to do here is  very simple as well we need to have a time span   so how many seconds you want to be reating this  maybe you can use time stamp from then pass in   the second for now maybe 10 or 20 seconds will be  okay divide it all the time maybe 20 will be okay   aside from it we have this class created now what  can we do in here to validate this aate um async   we have this authentication state which gets the  current user info and I return it see as a payload   so what can we do we can get the user manager from  the new scope to ensure it fetches fresh data all   right so getting the fresh data means that it's  going to have the whole content again then we we   can now do it so first of all we're going to  create a scope then we're going to validate   the security stamp from this now with this that  we using remember that we need to use the user   manager so the user manager contains the current  scope the current user info and we can do that   which has which extends from this identity user AS  application user so get required service from this   the current user with it infos information okay  this must be an asent task then we're going to   return validate security stamp so the security St  going to tell is a token asire you know when you   create if I check this check here you can see  we have security stamp have you seen security   stamp that is it and now this is in the time that  has been encrypted it tells you the time that the   security ah the time that talking going to expire  yeah okay so we're going to get the SC start from   this session then we can now check so from this  let's go to the same class so we have to create   this method down here then see what this method is  going to do I can just grab this very simple one   from the original source and here no need to waste  time since we have it already already created huh   why should you have to waste time on that no  it is not nice to do it so I'm going to paste   this in here and that's a valid security stamp  async you see this is a payload as what the user   manager we have the claim principle which tells  you the current user info all the rules that we   have so we get user async from this user manager  using this principal then if it is now we're going   to return Force but in case and else if it is is  not support user security stamp going to return   through then the principal stamp here we get the  principal stamp and that's what I shown you and   I get the required secur stamp as from the user  and I return principal stamp equal to this user   stamp so this system is going to actually check  if the stamp for the date for the expiration   token or the Quicky is actually due if not yeah  we can still move on with this this system that   we have created or it has been created what can  can you do here I did no modification it is just   from the aset team who did this so credit goes to  them I did not do anything here please so just go   to the identity man individual account and you  can even grab them in here what i is just rename   this put it in simple way okay now this is also  an internal sealed class so there an internal   sealed class okay so we have this set let's go to  the same program.cs file and we go to include it   here so you know that here when you create your  system let me create all the spaces when you   create your system in here that is when using the  jwg token you create an custom aate provider you   have to create a DI between the authentication  State providers original one and the fake one   that you have created or the customized one  that you have created likewise you have to do   the same here allate provider then we have to  link it to a cre di between the custom that we   created as identi validating State provider okay  so we can just put it here and and this going to   make a check all the time so we a build. services  not the host do Services dot ad scop then in here   you're going to say this US state provider do  you have it have you found yours authentication authentication States provider okay then what  else are we binding this uh identity identity   I cannot find mine yes State provider and  I we close it up okay okay so this is all   that we need to do now I think everything is  solved we can close this so right click on this let's close all tabs save this stop this  let's build this project let's make some clean up let's build okay so what you've done so far  you may not able to see any difference because   the token has not expired yet the time is not  du in default ASP identity team made it to 14   days so when you create when assign cookie it  is for 14 days it expires so user has to log   in after 14 days so you can wait for 14 days  then you try it again and then see that it's   going to work okay so while this has built  seeded let's run this and I'll check it it up so since you have an account already you can  see we have a store so we automatically picked   up and we are in already let's log out and now  let's check it out from here the expiring dates   you are not going to see it what you going see  here it is a session written in there by for   14 days you see expir date here you can see  is a session you cannot see this it is for 14   days so let's try to log in here now see so  log in passing this admin and I'll check it out you can see we have a session and you can not   see this but it is 14 days that  is for default by the ESP net Team all right so that is it um for  this video I believe you guys love   it and I also love it as well yes thank you  so much for watching I the next video we're   going to talk about different all  together and trust me you're going   to love it as well till then to give  yourself and I'll catch you next time

Channel: Netcode-Hub

Views: 4,605

Keywords: employee, management, system, building, database, models, web assembly, .net 8, blazor, web, api, .NET 8, Blazor WebAssembly, API, Database Models, Employee Management System., Employee Management System, Develop, Design, jwt, authentication, role-base, authorization, custom auth, Blazor, WebAssembly, user, login, logout, relationships, implementation, controller, generic controller, complete, combine, cookie authentication, role-based authorization, roles, cookie, .net blazor, interactive server, proptection

Id: ZQKTOYfGGf4

Length: 80min 59sec (4859 seconds)

Published: Mon Jan 22 2024