Secured Cookie Authentication in .NET 8 Blazor App : Simplified Implementation with Auto Render Mode

Hello friends and family welcome back to net code  Hub channel I am Frederick and in this video we   are going to talk about how to implement custom  quick authentication in net 8 Blazer web app with   auto rendom mode I have already made a video on  cookie authentication with interactive server   and also interactive we assembly and now we're  going to combine these two render mode and that   what we known as the auto so how do you implement  custom quickie authentication with this let's have   a look in this video before we Dive Right into  this make sure you subscribe to this Channel   and also click on that Bell to receive update as  soon as I upload new content the source code of   this project would be also available so check  the video description and you can have access   to I do offer coaching session to people who are  interested in Technologies talking about Blazer   assembly server API Mar bler hybrid I have an  email the video description you can write to me   through it only if you are interested okay so in  this video I'm going to try to make it simple for   you so that you can even remember offhe head all  right so let's Larch V Studio 2022 or higher and   I'm going to create a new project and you know  this project that is Blazer web app for net8   and the name is demo custom cookie off with auto  render all right so I'm going to click on create   to get this project created so as usual you know  for the authentication type you know you have the   default one and that is none you want to choose  the Nan one because you need to create an own   custom one now with the interactive render mode we  want to choose the auto that is a combination of   the two render mode server and web assembly  click on Create and let's get this project created so you can see that when the project  gets created we have two projects as you can   see from the solution Explorer we have the server  and then we have the client so authentication must   happen within the server and now the client  must just subscribe to it very simple one so   all the DAT works are going to be done on the  authentication or the server and on the client   just Zoe this I hope this clear okay you  know when you create this projects and as   soon as you want to add authentication there  are some third party packages that we need to   install these packages are coming from the same  Microsoft are third party well let's get this   project or this packages installed so I click  on this but this what I'm going to do if you   don't have these packages they are references  you can just right click on dependencies then   go to manage get packages and install this but  if you have them already then there's no need   I'm going to unload this project to right click  on it go to unload project and at the same time   applies to the client I'm going to unload  this client now they unloaded I'm going to   add this package references here and after  that I'm going to reload this so let's do it so with the server project we need this  three packages here we going to add the   following packages we need just identity. Entity  framework call we need this SQL Ser now tools now   with this let's go to the client all that we  need here is just a package and now the name   here is we by sybl authentication this is what  we need microsoft. as net. component. assembly.   authentication this is the package that we need  so now we have these four packages added what   we're going to do here is let's save all of  them right click on each and I go to reload   project with dependencies and I do same to  the other one oh okay they even loaded yes   so we have them now let's build re solution so  it's going to restore this packages and I get   them installed as soon as it is done building  you can cross check and see if these packages   have been installed correctly as expected go  to dependencies and I check for packages and   we have it in here the same applies to the  server dependencies packages you got them do   you have yours yes so it's still building right  all right so let's wait let's get this project build all right so it is done as you can  see to sued and you have two projects so   they are built all right so let's go  and work on the server because that   is the most of the things that going  to do it's going to come from okay the server you know with defa since we're going to  use identity manager it has a default class or   model known as identity user this identity  user has a lot of properties such as a email   user name phone number and Etc but it does  not have full name in case you want to add   some properties extra one then we need to create  an extension for it so let's do that in a server   I'm going to right click on it and then create  a folder and I'll maybe name it as oh not class   anymore class let's create a folder I'm going  to organize everything and I'm going to say this authentication now with this authentication I'm going to add add maybe I   want to remove this I want to  add this here so let's delete this let's rather create a folder  and name it as data instead of authentication because this folder is  going to contain our appdb Contex and   at extension of the identity user  class so Authentication won't be   an appropriate name for that okay let's  add now here I'm going to say this is application user now with this application  user we're going to extend so we going to   have a default property and now this  default property we can add an extra   one so let's say we're going to add  full name to this and now in here   we have to inherit from Identity  user and this is coming from let's see the identity that's an microsoft. identity  okay so we have one class if you want to know   the um classes or the property that this um  class provides you can just right click and I   go to pick definition in here identity user you  can also pick this and I'll have a look you can see it has phone number password email username  ID and Etc okay so all that you have in here we   like them we want to add full name to it  that's what we want to do let's create our   appdb contest class so the updb contest class  we can put it here so create a class with this   data and now as appdb contest class okay so  since I have this all I need to do here is I   have to change the name space yeah very simple  now you can see from here that we create this   class as application DB contest and we passing  the DB option in here which inherit from theb   Context you're passing the theed class that we  created for the user okay so we can use um that   let's save this and let's create our connection  string in the upsetting. Json so in that we can   just create a simple connection string in there  and I'm going to use my server it's going to be   local we can change yours to suit what you have  and the name I'm going to use here it is Blazer   app C Auto DB very long isn't it yes then have  transer connection set to through and Trust server   certificate to through that is all after that  you have to make sure you register the connection   for this database so how do you do it do you  know how to do that go to the program.cs and   in that you can create a connection string and  use the connection string in the configuration   so create connection string in here to the name  now when adding the service to the FDB context   you have to specify this connection string  as it created in here to this we using SQL   server and that's the package that we installed  very simple now that we are done we need to add   cookie authentication so in that we can put it  benit in here cookie authentication so we add   the service as authentication then we add the  quickie itself okay okay aside from which you   know we're going to be using room manager not  room manager for now we're going to be using   user manager and our signning manager so in that  we need to include the service for this and the   token provider since we're going to generate our  own a default token using this token provider for   the cookie you need to add this make sure you  add this you save them that is all that is very   simple isn't it now when we are done let's build  this project we're going to apply migration so B solution succeeded yeah that is why because  you're working on the current project as   server so that is the only project that needs  to be built and we have it in here suceeded   that's fine now we going then apply migration  so click on package manager console if you're   not finding yours please go to tools you get  package manager you see this one click on that   you're going to have the same as I'm having  now add migration and the name I'm going to   give here is first you can add your name can  this Dynamic so you can choose to change the   first year but for ad migration must be the  same take note after this has um finished   creating the file we're going to apply  so how do you apply it by using updates database it's going to transfer this  into an naturual file yes they just   a this a code going to transfer it into  a further we can see as a database yes   so B are seed and you're going to run  this to create the various columns and tables oh that's fine it is done so when you  check our views SQL Server object Explorer and   what is the name here ABS to tell us the name  okay so the name of our coning string here is   what Blazer app cookb so when you check open the  database database basis folder Blazer appb and   that is this one so we have it if I open this  we have all the tables that has been um created   by the EF core and we have written here check it  out it's still loading right we found yours it's   still also it's your also still loading you can  see we have ESP netro claims and we have all but   what we interested here it is the user this  one right click and go to view data and now   let's see whether we have the tables created we  have the custom um property that we specified as   full name um column created to this table as well  let's have a look I can just close this okay yes   we have it full name you know we have an ID full  name username normal username email phone number   and Etc okay this is a password too yes all right  so we can just close all this but for now we can   maintain this so once we have this all that I  need to do again is we need to create a class   to mobilize a properties that you want to send  to the client you know you want to package it   nicely so let's have a class known as user session  whatever whatever give it a name of your choice   okay now this we can put this in the client so  here too let's create a folder and I'll name it as this authentication is okay for this and now with this I'm going  to say a class known as user session now this is our session I'm going to have  maybe a property I want to just return only the   full name and on the email so this is going to  be string and I'm going to say this is full name and I'm going to have email so in case you have a lot of properties  that you want to transfer from the server to   the client and display it in the UI put them here  for now to is okay is that okay yes okay so let's   save this one let's get back to the server we're  going to create a class here and this class class   is going to persist at authentication State now  there are two classes that we need to create and   these class are essential in authentication or  k authentication in Blazer app Auto render mode   one class is going to be found in the server and  other one is going to be found in the client the   server class has to inherit from revalidating  server and Cas State provider while the client   class has to inherit from allate provider why the  server side prepares the authentication state of   the user and now send it to the client when it  gets the client it is a work of the other class   to receive these um claims or this authentication  State and now utilize it in the various component   that's very simple short explanation for this  is this clear so let's get this going now we   need to create this so in here H we have to still  create a class folder for this what do you think   Authentication Al be better for this so let's  add a folder for this one and I knew this so authentication and now with this we need to create   a class to handle this and now with  this I'm going to say that this is pist aate provider give it any name of your  choice okay and now this has been heard from   Ral validating server authentication State  okay so I learn you have some abstract class   that we need to implement we need to specify  the time span that should call this all the   time and then the inate method that theid  state async how do you implement this what   we are interested most here it is the um Let me  let me let me close this one so you can see it well yes so we can just um clearest one we have a  default one set in here now let's have a look we   have this service scope Factory that we create  we have a persistent component state so this   state it is uh is responsible for transferring  the authentication State or the properties from   the server to the client so here we can two init  method that is a try copy as Json and also persist   as Json so we can retrieve the component or  the state we can also asset the state now we   set the state in the server and I retrieve it  in the client so this persist component state   is going to be used in the server and the same  time at where that's fine perfect client let's   go so we have in here and this must be let's  see a Constructor for this okay and now we   initialize what we have created in that we have  this a method that we need to create we have to   register since we have this subscription you know  we have to subscribe to this so we do it in here   we need to create a method for UNP persistent  sync and at the random mode that we need to   use here it is interactive web assembly because  that is what we are using it for okay now this   the revalidation interval we 30 minutes every 30  minutes it's going to check so you know that the   user manager is responsible for getting the user  details as soon as user registered or creates an   account all the details have been saved to the  user manager the ex manager can get give us the   access to the database table that we created that  the as net users whereby you can have the ID the   username the password and Etc so we have to get a  required service from this so when the page loads   we want to get a required service in here as you  can see valid datation state async so in this we   want to find the user and now we want to get the  security stamp of this user and now when you come   to the next one can see we have this onenation  State change so when this method is called this   is a All State um authentication State task and  it is what we set up in here we want check the   Constructor here it is the authentication State  okay and I want to check the task that we are   assigned to it is what we came as a payload from  this so when this page is get called it's going   to pass in this the state of the user and I  re assign it to this so this won't become now   anymore all right now when on persistent we want  to populate the user details of properties and   now set it to the component state so here you  want to grab the full name you want to grab the   email and if in case they not now you see persist  adjacent you want to keep them as Jason format we   set the full name to the full name that we have  in here and the email to the email that we also   have in there now as soon as you have subscription  you must have a dispos method so when disposing   you have tot subcribe and that is all so this all  you need to do now once you're done creating this   we have to save this and oh what is solution  Explorer you have to get it again so solution   Explorer okay now we have to register this in the  program.cs to the server so let's quickly um do that so you can register it here by using  build. services. add there is not so persist persist aate provider and that is what  I have to add it to the program so let's go in   there and update that so here persist this is  a class and cont period we need to include the   name space of this yes and that is it okay now  there's also one thing that we shouldn't forget Services add cascading Au State it's responsible  for checking the state of the user so once you   have done adding all this we need to also sign  out now when using contest um identity manager   we have to sign out and under sign out we need  to create a Minima API for that when you check   the previous videos you know we have to create  that endpoint to sign out okay so let's quickly   do that and this must happen in the server so  when we have this authentication I'm going to   add another class to this so I'm going to  say this is sign out endpoint Builder give   it any name of your choice okay so sign out  end supposed to be end point not end point   okay so let's make this change now this point  we need to create this so I can just grab this   and I'll put it here very simple one okay so  we have this endpoint conversion Builder and   that's what we want to return and map additional  identity end point so I'm going to say map sign up map sign out and point okay now we want to we  specify explicitly I endpoint route Builder   and now from this endpoint we want to check  if it is null through this this acception is   not it won't be null but you can skip this  or well if you like it you can maintain we   create an account group and that is accounts  SL logout that is a route C principle you pass   in and now from the signing manager we can now  sign out peacefully rir to Hom page so if you   want to rir to any page at all pass it in here  return account Group after finishing all this   this must be an internal static class so may  sure you do not forget this it's not public   okay so once you have this one we can go to  the program and register that to register it   what we have this pipeline to app dot do we  have sign map sign up endpoint and that is all let's create a simple layout so when you  go to the component folder you can see we have   layout and in that we have nav menu so we can  have home account weather we can um copy this   and P it and P it and this it okay so what I want  to do here is inste of this we we're going to say   this is login and now with this login you should  go from account slash login the same thing applies   to register account slash register and now here  we change this to register now when you come here   this is log out okay and our this log out it is  not going to be a button this will be a form and   this form is going to submit to the endpoint that  we created so for this I can change this a little   bit and I'll make it as form it has an action  to this account SL logout and the method here   is post log out is the name okay this is all that  we need to do for now okay now we forecast going   to move to weather forecast as you can see from  here and now we have this created and done all   right so once we done here we have to create our  login and our register component that is the two   properties oh is it two properties two files left  for the server um to get completed now let's see   so I have this register file in here and I'm going  to group this so This an account pages and this is   home I can just create a folder here and name it  as account or well I can also um add it in here   let's say I add this register okay and I this is  a register button register component that I have   added let me change the name in here so what is  the name for this this is demo custom cookie so   that is the name that I want to use and I we have  this application user okay so now this is the one   we need to do for now we are not adding Iden row  so we don't need this later on you have a video on   how to include rules to it or maybe you can also  do it yourself trust you okay so um when you come   here you know we have this edit form and now this  is a form name we have method as post because here   we're not using any interactive this is static so  we are not using anyone and that's why we need to   specify this method as post form name is available  and I create an account okay so check here this is   a um floating buttons and now with this floating  divs you can I have a component or a package that   we can use so let's install this package maybe  let's go to dependencies on the server man get packages and now in here let's type in  net code to make it simple so net code   hub and we are looking for a package  known as net cod. packages. component.   validation. input so you want to  validate this as soon as start to   type you have model validation this  why we need this package so install this start so let's go to the component in here  let's add the Nam space so at using net code have.   packages dot component the validations do on input  okay now so when we come here this we can remove   everything this one can remove this one or we can  even change this to we want floating so we have   floating test and at this floating test we have  this bind as name class over here we can remove   all this and we can specify our placeholder so  this placeholder John do is noral label we don't   need label anymore because got has specified in  it very simple one when we come to the email we   can also use same so floating test and now  it's email class over there aut to complete   and everything must be ripped off and now here  we can specify the type so default the type is   test you don't specify the type it is test this  is email so specify the emailing here remove this label then we have password  the same floating test not number floating test type is in here the  type is going to be as password you see this   yes and we can go ahead and remove the autoc  complete and this and set this as placeholder   as password because even for password we  don't need placeholder for password okay   remove the label and now the label I think you  can press for the label in here yes so this is password so user password passing the  label and the next one we have confirm   password so we can cut from the label remove this label now Place holder we can set this as okay for password placeholder we  don't need you want to have it as label conf password and now this we can remove the rest and this is just floating test the same as  this one okay change this to test type and now   this is password so that is it then we have our  button as register so this a simple form using   the component that I created floating test and  you have it in here if you want to use another   one today without floating just use a normal  one and now you can use test so you can see   you have this test and it is coming from net Cod  have. packages. component okay and that one is   not going to be floating Okay so we have this  and aside from this when the button is Click   you know we are submitting to the method in here  and I believe you know this when it come here we   have in here Supply what parameter from form we  have an input model and that is an input model   in here we have the following properties and  these are the attribute that we want to specify   on top okay so we have name and you have email  password and confirm password when a button is   we create an instance of this application user  full name is called to this username email and a   password so this going to encrypt the password  now we have WR here then Rec create the user   after creating maybe you can you can just inject  nav manager then in here we can navigate to log   in now is done please do log in so do navigate  you and now here we say say this is account SL login okay so this is going to create the user  and I going to log in let's go to the login user   and also log the user in before we create the  user or the login user or the login component   let's go to the persist aate provider and in  here we don't want to use a custom um claim   type you want to use a default one so you're  going to assign the full name to the username   name okay so we can display it and we have an  email in here so let's edit it and I get that   okay so aside from that we go to the pages and  where you have this register the pages we're   going to also add login and now from this name  there is going to be demo and I have to change   the name and we have signning manager we have  user manager we have navigation manager okay   when it can we have the same thing so we're  going to be using the same form so from the   user this is what email so all I need to do  here is to go to the register we can just   grab the email in here so let's grab this login  email long one we can just get rid of this and I   P this so this you have to include net Cod hub.  packages the reference you have to incl include this yes and that is all so this is set this is  also password and we can just go to the register   very simple one let's grab hold this log in  password you can grab the whole long one and   now replace this one this is very simple  one isn't it so password and that is all   okay we have a login button and it's sub to  this form so here you want to find the user   from the user manager if is there you want to  check the password if the password do match you   want to sign or password sign in navigate to  the homepage there's the properties that you   want to do it email and a password this very  simple you see this all right so now let's   save this now we need to create a class  which going to receive the authentication   state from the server and also implement  it or utilize it in its component so let's   create that class in here to the server and in  authentication folder I'm going to add a class to this and I'm going to say  maybe this is client or state provider now this class you know it has  inherit from this authentication State   provider which has a default abstraction  that we need to make and that is get aate   async within this we need to create a default  State and this state is set to anonymous so   when the page Run for the first time user  is not authenticated you're going to have   CL principal as what new identity which  going to be an no and require a default   and authenticated task okay now when you want  to have a property which also is going to be assigned it's going to be assigned to the default  so when you call enging task we are calling this   default one which is anonymous that's great  okay now you want to populate or you want to   accept the method the incoming method so with  that we can overwrite this we can clear this   and in here this is coming in with persistent  component State remember that this state here   was set in the server and now we are re receiving  or retrieving it in here okay now this must be a   method or Constructor that we need to create  and now in here this should be user session   remember that class that we created it has the  email and it has the full name so if it is not   then return if not we want to try take from  Json and this is an extension method from or   it's a method from this component state so  state which is a persistent component state   so you can hear we have pers adjacent that is  setting and now try tiet watch retrieving now   we have to create our claims so claims you  can specify our claiming here but for now we   don't want the ID we want only name and our  email okay so this is our name claim type as   name we have an email in here we have a claim  type as this is not this supposed to be full name then claim type as email we have a email  so name is called to name that the username is   called to full name and now we have what the  emails equal to the email from that we need to   call this client orate then we pass in the claim  that we have populated in here and that is all now   the inid method that we need to implement that is  the all state is now we have this authentication   state or task authentication State task yes and  where is this coming from you know this is what   we have here the what we created to St the result  of these claims we have to pass it on to this get   authentication State because this has to return  authentication State and now this is coming with   what authentication state so we can assign it to  it and that is that is all once you're done with   this we have to register this in the program.  Cs file that is talking about the client you   make sure you do not forget any of these there  are three name spaces or three services that you   need to register authorization call cascading  not State and now what we just added and now   let me just go in there grab the name go to your  program and I paste it in here and that is will   save it okay do you have anything left to to be  done let's see let's go to the nav menu and then   in here let's copy one of these and maybe let's  let's say this is out page okay so Authentication now with this authentication we want to  check it is it go to this art page so   let's create a component for this and we can  do that in the pages folder let's create one   component and now let's say this is Art  H page the route here is going to be art and aside from that we can just have this this is auto interactive Auto and  now this is what authorized you want   us that to be authorized before the  user can access this one in case the   person is authorized you want to display  the name that is a usern name let's save this yes and now we have it in here  so this authorized view we have to   use the name space and now always going  to have the contest from the specific um   user okay now when you go to this weather  forecast we have a other forecast here it   can we can use it here or we can move it  down here anywhere in case maybe you want   to move it to the client put to the pages  this WEA forecast let's set attribute on top and now with this attribute this is  authorized so before you have an access to   this you must be authorized okay and now  once you have this authorized attribute   specified we have to go to the nav menu now  the nav menu from here you know we have login   weather and log out isn't it so maybe we can  for this that is a weather we want to have authorized you must be authorized for this  maybe you can just get rid of all this one   and use it as name space so cont period  use this one so let's catch the closing   tag we make sure we s it with this okay  and that is all so if I'm not authorized   I'm going to see whether login and register  that is when you are not logged in so we can   have the same okay so maybe this what we  can do from here we have the same thing   so let's see from this authorized let's  say this is authorized if authorize see this okay let's go in there and now  we have our log out let's add a log   out this is login register this is our log  out so we can just cut this log out from   here and now let's go to if you authorized  see this weather aside from that you can   also log out in case you are not then and  you have not authorized then you want to   open this then you want to move the login  and now register to not authorize you see this yes so control KD we format it well  so if I go through it again if you are authorized you're going to see the  weather forecast and at the log out   if you are not then you're going to see  login and register let's go to the route   page in the server and in here we  have to include authorized route view so maybe we can have have a class or let's  have a component and let's say this is redirect to login and now in here we can inject nav manager and now with this nav manager we  can also have over right one page live   cycle known as un initialize async so when  this page initializes you want to move it to nav manager. naate you and now here where is   account slash plugin that is  all okay so let's check from this main layout so when you go to the  server from the layout or the route   compon that we created in here not authorized  then you want you to navigate to redir your login I believe everything is set you have any  left over okay let's be this Pro and see so build solution now let's run this  application and check it out oh that is it so it is ready right click on  this if we try to assess we let's see okay so it   is saying the ambigous exception the request  Match multiple end point okay we weather you   have two weers two weers now let's go in there  and I'll delete one weather we have to stop this we are implementing this weather  in the client so we have to move it   from the server so delete it from the  server so that you going not going to   have two weathers anymore you're going  to have one weather right so let's see now let's try it again from here whether and  yes so we are logged in you see whether we   have been returned to log in and we have  to log in but first of all let's create   an account and here we are not having label  account let's see so when to go to register   we have our input full name placeholder no lab  so specify this and this full name we have this label email address okay fine maybe we need to reload okay so let's register okay yeah we have  it log in okay so log to you have to add   a full name and I believe you can do that so  um full name you're going to say this is net code and email is admin at  mail you have pass password admin ad admin at one 23 that is  a password now get it created so   yeah this is hit now click on continue  on to get it registered as soon as you   are registered we going to  navigate to login so let's see so let's log in and now with this we're going to see we going  to be logged in and yes so we are in now see   we have log out if I click on authentication  you you see now we have your authenticated   hello admin right but when you take this  you want to grab the the name not the email you see if I click on this and I inspect  the cookie you see we have a token cookie token   in there from the application session sorry  cookie and you can see we have the ESP net   identity this one so maybe if you want to use  actually display the name here as an email as   an username instead of displaying an email then  when creating the account you know when you go   to register we set username is equal to this  so you can just set this to input. name okay   now when you have this and you try to reload  this create an account and I logged in and   after logging in you're going to see the full  name as a username on the screen let's have a look so let's create an account register now   this I'm going to use Frederick then  let's say we have user at mail.com user123 user at123 click on register now  we are in so click on login and now we are   in Click authentication and I have Hello  Frederick can you see this yes all right   so that is it thank you so much for watching  this maybe let's try log out oh yeah we are   in we out okay so that is it take care of  yourself and I'm going to catch you up again

Channel: Netcode-Hub

Views: 953

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

Id: _x8ehIou_ZI

Length: 49min 42sec (2982 seconds)

Published: Wed Mar 20 2024