Mastering .NET 8 Blazor: Master Cookie Authentication & Authorization with Individual Accounts! 💻🚀

Hello friends and everyone welcome back to net  code H Channel I am Frederick and in this video   we are going to do something different but the  past few videos I have been doing I have been   talking about net a authentication either cookie  authentication or a bar token authentication with   an endpoint API or opin API endpoint with blazer  web assembly that is what I've been talking about   for past few videos that I have done by in this  video we're going to talk about a feature known   as individual account individual account is  a feature provided by the ASP net team which   allows us to have the scaffolded version of all  the components um uh talking about login register   log out um two Factor authentication and a  whole lot okay this a default one and it is   very very easy to implement but it is not easy to  go through I'm going to take you to the basics of   how to implement it we're going to talk about the  two aspect here how to customize the identity and   also how to add roles to it let's get started  but before we jump right into this if you know   you haven't subscribed to this Channel please do  that and when you're done subscribing hit on that   notification Bell so you will never miss out any  upcoming content also if you enjoy what you're   going to see today please don't forget to give  this video a thumbs up if you do that it actually   helps this channel grow also stick around to the  end of this uh because it is something that you   wouldn't want to miss it let me appreciate you for  taking time to watch videos from this channel as   usual I'll try to do my best I offer training  session or quing session for people who are   interested in Blazer and net Technologies check  the video description and I'll put put the link   over there and you know we're going for this web  app template the name here is going to be demo   Blazer cookie authentication with individual  accounts so we choose the location click on next and now in here the framework version we  choose 8.0 that is what we are talking about   and for the authentication type we are going for  this guy individual account so choose that and   for this interactivity mode Let's choose the  auto you got the Auto gives us the access to   all the render mode both the server and now the  client to that's the web assembly if you don't   understand the interactivity types I've made a  video explaining each with an example check the   video description maybe I'll put it there or check  the playlist it is in also and now let's click on create all right so the project is now created now  when you check the solution we have two projects   here those of us who have been working with the  former Blazer web assembly Co hosted you know   we have your that is the server that's an API  we have your client and maybe you have your C   library this time around we have the Blazer  server over here you have the client section   as well okay there's no API here now what you have  here it is the same as this server So This Server   going to handle all the cost and all database  aspect all pages that you want to run on the   client you put them in the pages folder here and  that where we have this Pages um folder so see   we have this o counter um page in here okay now  you see we have this class here that known as a   persistent authentication State provider if you've  done custom authentication State provider before   you know what it does and the same thing does  this also do you can see we have the claim that   is it creates and it it calls this um persistent  state to get the claim identity from the user and   I use this to authenticate the user you can see  from here maybe you be asking yourself where we   this is for login and for registration Etc but  you're not having any model yes all the login   and the registration models are found beneath  each component so if is a login we have the   the model bit if it is a register we also have  the model bit it is only this user info model   that's what we have in here and this is what we  use to populate the info for the authenication   state provider so if you check aate provider  you see we are using that um user info model   here and that is give us the access to grab the  user ID the email and now the the email so here   we're using the same email for the user claim  type of email and the same email for the claim   type. email so we see maybe you may have us your  your real name here and you have your email by   this time around you're having the email for  both and that is what we have so see we have   just two user ID and now the email okay now where  are these components go to the component folder   go to accounts now pages so you have all these  pages in here what you're going to concentrate   today it is the login and now the register so  if I click on the register you can see we have   this by the identity manager so you see this as  soon as you see this what comes to mind that is   identity manager isn't it so because we have  this application des and it is from the user   manager the same applies to the signing manager  and Etc so when you check down here this is the   let me increase small all right let May me close  this and open it again so you can have so let register so this page needs this um text boxes  to work you see we have this input testt box   for the email we have the password over here  and that's a confirmed password forget about   these underlines it is a studio issue it is  not the the code issue so when you check down   here that is where you can see we can have the  Modo so this is the model that we have we have   for email password and we have the confirm  password okay now this when we check good   solution and also check the login we have the  same thing over here see we have an email and   we have password now the question is maybe  let's run this and see so let's find this application so that is what we see on the screen  so defaultly when you run this application um we   have all the for the counter and this weather  for as we know as usual already and you can see   we have this art required meaning authentication  required and also we have this register so this   also register and we have this login so the  question is this is the default one you have   an email password and confirmed password what  of in case maybe you want to add full name okay   what can you do is it possible yes we can so that  is the modification so we're going to talk about   today maybe let's customize the app user and  also let's add some roles so maybe you want   to have admin and user as soon as the the person  creates an account we check if that R exist then   we assign the r to the person let's try that and  see so let's see before we we run this I want us   to do the modification then run it together so  let's go to the Sol solution check the component   and you see we have data folder in here we  have migration file created now check the   application user so this class here it has one  method application or one um class application   user and it is inheriting from this identity user  this identity user from the previous video that I   have covered I it contains the password they  I think they ID and now the username okay so   we want to add full name to this so in such  case what I'm going to do just pass in our   username in here as string maybe user or full  name okay because you have username here so you   want to have the full name and maybe you can  have another property in here as maybe phone   number or Etc maybe phone number or something  like that okay so it depends on what you want   to add to the email and password you can add any  so I have full name added now let's maintain that   so once you done with this maybe you can just go  to solution and the same thing we have a appdb   contest you know we have this class over here  isting from this identity contest passing in   this application user now this application user  is what we have modified inheriting from this   identity user so um obviously it is everything  from this identity user okay but you want to   add this property to that okay now let's check it  out and yeah that is that you can find over here okay the next thing to do here is let's check our  appdb up setting. Jason I Believe by now you know   what it entails isn't it that is a connection  string so with this let's change this I don't   want this this is very long for me so I'm going  to just remove and I'll just type in demo um this   is Cookie DB so that's the name that I want  and now with this I prefer to use the local   instead so this long one so this is local and here  let's add this trusted connection or trust server certificate okay so trust server certificate let's set this to true okay now we have this done we can save this so let's go to the register page where we  can register and that going to be component and   we have this register component so let's add  a full name property to the model and that   can be found down here okay so maybe you can  put this in in one class so you can import it   and use it anywhere okay but for now we're  doing step by step for now uh so let's add the full name so I can just make a copy of this  then just change here to full name okay so save   this now you can come in here and now have one  text box so so we have this for username and   that's for the email so maybe you can just make a  copy of this one here and now on top we can paste   it top here and instead of this we're going to  change this to full name so we have a full name   here okay and now this full name is coming  from this input remember the input here it   is a model remember this is a input so this is  a input model and it is coming from this input   model class here okay so that's why we have this  full name uh property in so we can see that we   have this as a form and this an edit form it has  a mod as input and you can see the method here it   is post so and this is unvalid submit so it is  post because you can see from here we are not   using any of the render mode so there is a static  rendering and when a static rendering this works   okay so it works because of this form name that  you initialize in here and I'm making this as a   post request so it means when you call this method  it has to receive this input model and that's what   exactly this is doing so check this up um what  is it that is a where where where where okay so   right here now check this register user and it  is accepting this edit contest okay and now edit   contest so you create an instance so we can just  fish out everything in it okay but you see we've   added one property as full name so what can we  do you know that it is coming for you can have   access to um this input model here all right so  this also the outcome of this create user it is   going to store in this user session so we can do  here we can assign the full name to this user so   if I click on this and I say user dot I'm going  to have access to let's see going to have access   to um full name let's see user. full name do yes  so we have access to full name and that is it's   coming from the app user that we created this app  user we had a full name and that is what we are   assigning this to okay and I be say this input  input um input yeah that's the only input inut   so let's make it as input dot full name and  I believe you know where this input is coming   from that is this model okay so we assign it here  so let's say when you have three or more property   that you are calling the form or session input  here to grab them you're going to assign them   here and that is a modification okay so after  doing this what is the next to do now you see   we inject the user manager and that is what you  can see from here this is for manager and what we   are going to create a user when we have the user  name that's the email and then the user password   so check down here if everything work we are  creating the user in here and we create a user   by grabbing the user that we assigned the full  name to and also we are adding the password okay   so with this after the user has been created  we see we return error when it couldn't make   success but after it sucessfully created then down  here we can create row and assign the user to the   row okay so assign the user to the row created and  that is what we going to do next so here in order   to do that we have to First add a row to that to  the application let's go to solution before that   let's save this go to solution and now with the  same server section click on on the program.cs file and here before this see this is  the system to add this cookie session   now before I move on let me tell you this  now the implementation of this is used by or   it uses quickie authentication it is not bar  token it uses what quickie um authentication   take note all right so once you have this empty  framework store before this you're going to have   do add rowes then we can create a customized  class but for now let's use this identity um row okay so now we are adding  rules to the application now   let's go to our register section and now in here okay so now back to let's say um full  name and now let's make this as full name so   let's let's make sure everything is in order and  maybe this placeholder is an example let's pass   in like John do so we have this okay now the  label here it is not emails rather full name   and our validation here it is for the full name  you make sure you make those um changes okay   all set now here let's check after user has  created successfully we want to check if um   a row of administrator is available this  is what you want to do we want only one   person to be registered as an administrator any  subsequent registration is going to be assigned   automatically to a user but maybe in later on  if administrator want to manage the user and   want to assign the role may he can do that  but for now let's do that the first person   here is going to be registered as admin the  rest users I hope this is clear so now let's   check first you must check and see if the RO  of administrator has been created okay so to do that let's have you can use this to check and  now this is from the rle manager where this   coming from we going to add it top here so what  we have this let's make a copy of this and now   instead of this um user manager you're going to  we going to say row manager and now we're going   to pass in not identity user but rather identity  row then what is the name here it won't be user   manager rather it's going to be what row I hope  you get it okay so now let's come down here make   sure we save whil we work all right now we check  first where are we okay let me find okay so we   check we check admin row we check if a r call  administrators is what created or is found in   the road table if it is not found what I going  to do let me just grab this and let's go through   quick it's a very simple code and that's what  you're using to check for a row and then create   it so we store we check for find by name a sync  we check for ADR row if it is nor then it mean   the the person reg is the first one so create  the r after creating assign the current user   to the administrator so to administrators let's  make administrators okay so after ass signing   that's so the next one will come and check is  admin R created here is going to be what foral   because this is saying that admin is n but in this  case admin will never will not be n so it's going   to skip this and I come here now check is user R  there if it is not there then create it and assign   the user the r to the the RO to that user okay so  set this R users to the person registering if the   next person comes in checks is a ro created  yes it is created so it's going to skip this   and assign this user R to the that person so it  means all the subsequent registrations is going   to be assigned users automatically okay so that's  a way to handle the RO management now let's save this now we have this row added and created  so let's add the row to the allate provider   and we can do that from the solution and this  persistent authentication State provider now   from here we have this username over here so  let's make a duplicate a copy of this and now   we're going to say that the CR the type here is  going to be what it's going to be row and we are   going to assign this user info dot do we have row  here we are not so it means we must add this row   here so let's go back to the user info and now in  here we can make a copy of this and I'll change   this to row it means you're going to assign  row to this model so anytime that you call it   here it's going to handle the value of row either  administrator or user good so now we are done with this now let's set the values  for each of these model let's   see do we have any issue okay so we  have to this must be a comma I think so all right so this shouldn't be there I hope  you know that that's right let's save it now   let's assign you can see that we are setting  the values of from this model to this claim   type now these values for example when we write  now they are null because you haven't assign the   values to this let's do that let's assign the  because the email have been assigned already   and we can check that from the solution go to  the server side and we have this persistent   rev validating authentication state so see we  have have two State here one is protecting the   the client section and one is for the main one  that is the boss the server itself so in here   you could see that we are setting up check down  here where you have this on authentication State   change we have this persistent async and that  is where we need to set the values so let's   make a copy of this we can just grab the row  from here and I will say in the email claim   type we can also have the row claim type and you  know what you're going to do next assign the row   here because you're going to say it is this row  now this row that we are assigning here this is   the this is coming from this this row okay  the claim type here and now this row it is   is coming from there a property found in this  user model and that is what we updated here so   all method or all property that you add here you  need to assign the values in here and you have   to extract them from the identity okay good  so now we have this what is the next thing to do maybe if the user wants to update the data  the user must see the name that he we have added   isn't it so maybe you can do that from solution  and you know we have this open this manage and   that's where we have this manage info so this  going to the the user info check the index and   you can see from here we have this edit form  and that is where the user going to validate   or update him or herself we have the username we  have the phone number so this what we're going   to do we are going to and let's make a copy  of this now we've added one property known   as what full name so make sure input dot but  here we're not going to have this full name we   have only phone number but let's add the full  name here now come down and check the model is   over down here so we have just phone number  just make a copy of this so just a copy and   let's paste it here and let's change this  to full name and also change the property name so maybe you can write full and we can space  It Up in case you want to do that and we can just   write full name okay so this what you want to do  now let's go back and check so we have this this   is going to be the username and here we have a  full name and please enter your full name that's   why you want to tell the person your full name  and it is not phone number for the label we can   just edit this to see which one you want and  that is a full name okay so can and just for   full name I think so yeah all set and done all  right now we save this and now come here so we   have to create a string here because we creating  a string to handle this and this coming from this   application user so let's make a duplicate of  this and I'll make this as full name now in   here count down here can see we are extracting  the username from this extracting the username   and also the the full name in here so in order  to do that you know we are having the username   from this input okay so we can also set this as  you can see you have this input. phone number   it's notal it's notal to n then set it to this  and phone number so this is what the co operator   and now this means this is null okay so if it  is if this is null assign the phone number to   to the value as a value to this property and  we're going to also do the same over here so   we can make a duplicate and um just have to change  the the numbers isn't it because we have it here   we have the full name added so assign it to this  string full name in here and off you go now when   unvalid submitted so when a button is clicked we  are checking it over here as you can see so set   phone result is our we user. set number a sync so  here it is only setting the number now can we do   to add the the whole details so maybe we can also  add end so let's add this and if input. full name   okay now with this we can just have string dot  is null or empty so we're going to have input.   full name so let's negate this so if this is not  equal to null then you want to so instead of this   set only phone number async we're going to say  do update okay so update async and we are going   to pass in so let's close this and see what this  update needs so this update on check it needs an   application user okay so we have this user here  and we're going to update that so we have this user so let's grab this and now we pass in here and that is it so for the rest you can  customize it yourself maybe um failed to   set phone number no no we don't want to  do that maybe you've added the full name   so we can add some um exception over here to  handle that okay so that is what we need to   do now let's see if you are done let's save  this now since we've modified or customized   the application user it means we have to build  this and apply migration so let's do that and   see but before that before that let's do it  at one so let's go back to the page section   that is a client section where we have this  art art and the counter okay so maybe we can   check the index from this component and now  from the pages let's see if you have uh home so pages is found down here and we have  this home so in here let's at least um   display some info if you are um a user if  you are admin you want to say I'm an admin   if you just a user as soon as you log in  you want to say you are also a user so we   specify the rows administrator by using  this authorized View and now we have this   as rows and this are as what the r as well  so you know this for administrators and it's   going to show when you an ad a user okay  so let's save this now let's go and build this so as you can see suceeded now let's go  to package manager console and let's add our   abdb migration so that's an add migration and  I'm going to say this is second because you   have first one already created so just going to  make the changes that we have added and that's   the full name so let's let's wait to see okay  so you can see that we have full name added   and to this table ASP Net score let's update  all the tables so we're going to say update database now let's wait all right so it is done now let's go to  SQL um solution solution SQL Server object   Explorer so let's open this and my desktop  databases and I might see demo DB that is   this one so I'll just open it and I click  on tables and I'm going to look up for the   various tables such as the ASP net core  users this is the first one we have this   user so open this view data the next one is a  rose tool so right click on this and now view data and let's have a look I'm not sure it is  let's check our we see some data in here as   a default one now let's check the upsettin and  now here this is is demo CB okay so that's not   the right one so let's close them and open the  right one so that is the first one this so yeah tables and yeah we have the ESP net  user so view data this must be empty   rows must also be empty but we  have one data in already um so   we have this ESP net rule R here  all right so we can just remove this okay and let's see so we also have  this claims okay so we have rows user   ASP user rows Also let's view this data  okay so you can see from the rows there's   no row here no row created there's  no user as well now let's run this application okay so the app is ready  now let's go to register and you can   see we have a full name um text box  added in here okay so now let's pass   in the full name and I'm going to say  this is let me use net code Hub right   so this is net code Hub and I'll say this  is admin gmail.com I have the password as   admin123 the same thing as admin at one two  three if I click on register let's going to happen Okay so you can see that we have um the  app does not currently have a real email sender   so although we can Implement that later on but  for now normally this will be emailed okay but   for now it is not so click here to confirm let's  click here to confirm now thank you for confirming   your email now let's go back and check from  our database so if I refresh this let's see   if you have the details in here okay so this  we are not having that isn't it let's check upsettin let's check the abset 12 and find out the  this is demo cookie DB okay so net if I refresh   this I do not have anything here okay so demo cie  okay so this is demo identity we are going in for   demo DB all right I have a similar databases  sorry for that let's now let's check this I   believe this has the data that we need so let's  open view data row as well okay here we have it   so when check the users we have the admin over  here and I'll check the admin has been assigned   the ID ends with 76 right check the rows we have  a r here and now let's find the ID so definitely   it is saying that this ID has been assigned to a  row the row ID is 21 the user ID is 76 that is an   admin let's TR to see the row ID of 21 so when  you goes to row 21 it is for the admin as you   can see from your administrators that is the  the row now let's create another one and see   if going to be assigned to user or not now let's  see so register again and I'm going to make it at user user account and I'm going to say user  gmail.com password is user at123 and user as   one two three now click on register and now  get it so let's confirm let's check it again   refresh this and let's see all right so you see  now we have users table as well and the ID here   it is f SE the rowes now different user have been  assigned to F right so there's an F the RO ID and   we assigned to this user of B Che the users and  now um let's refresh this and I say this is B so   as soon as it got and it check that we have  admin created already it escapes and add it   to the user now let's add one table one data and  also see if it's going to assign to administrator   or it will assign to the user so register  one and I want to use this John do so John gmail.com so let's the same admin at one two three  admin at one 2 three register got it so let's   confirm and now let's check so refresh this now  we have the next the ID is B use that right so you   could see this John the ID is 41 go to the rows  let's refresh it ID is 41 and it has assigned to F   now when you trace to f f it is what f is the user  so you can see that we have only one adminstrator   the rest are users now let's log in and check  it out so when you log in since this um identity   management here uses cookie authentication we  not going to have bar token you're going to have   cookie um authentication so let's go to inspect  click on login and now we have this John remember   that this joh here is a normal user let's click on  this and navigate to the application now check the   cookie session so cookie open it and that's the  for check it so this is not the identity let's let   me open it again that is just um a session from  the app there is not identity so let's log in and   see so if I click on log see what happened here so  you can see idty has been created and that is the   cookie over here now if the person tries to make a  call so let's see art you see hello John at gmail   let's go to this app you see had a cookie over  here now weather forecast and you can see we are   still having it as well now check this okay so we  have the John over here we have the email the full   name is down here and we have the phone number  okay so we can update this but I think we updated   that already so we have this John so we have to  retrieve the John and we have to also retrieve the   phone number and I'll get them stored here but for  now let's log out and see so as I log out you see   it is also off now let's log in again it has been  assigned and as soon as I log out I can now have   access to as soon as I log in I can this now let's  close this and I go to the homepage hello you are   user now let's log out you can see it is off  let's log in as a different person so let's use   an admin this administrator and now you are admin  isn't it now if I go to this see I have the same   admin email over here and now for the full name  you have to retrieve that all right so in here I   made some small change in here and um we are now  having what we supposed to get so this is what I   did now can see when you run the page you know  we accepting this contest here and that carries   in the user so we can extract the user information  from this HTTP context okay now in here we getting   the required user a sync from this ATP context  that a payload and now we can return with this   user so this us compris of the the application  user and that has the username the full name and   the ID and the email as well okay so in here we  can also get you know we have a method known as   get user name Asing from user manager so you can  also use that one to extract the username from   this user store that's application user what left  here is a password no not a password no that's a   phone number and there's also a method known as  get phone number we can also use to extract only   the phone number filed but here it has left with  the full name that we added that is a customized   One how can we do that how can we extract it  that's what we need to pass in you know this   input model comprised of a a property known as a  full name and since this email um since this user   here carries all the data that we created when um  registering we can also extract the user from this   the full name from this user and we are can see we  are extracting it so we are saying that user. full   name so we are getting the user do full name here  now it may be that the user would like to change it so as soon as the user changes it we are going  to assign so here this is a correlation operator   and we are checking if this input full name is  null then assign this username to it but in case   we've updated it meaning this input full name  won't be null so this user full name that's the   old one won't be updated we're going to handle  the old the that's the current one because the   index is a model and that's what we use to fill  the form so if I pass if I update it now is going   to hold the current one but this user is holding  the previous one so we are if this is null then   don't add don't assign the value of this and now  we are updating the user in here so in order to   update the user in here we have to now assign  the current values here to the user so user.   full name equal to the input model. full name it  do the same to the password then we can we pass   in the username to this update async to update  the info and that's what we are doing this very   simple one so if I run the let's see what we have  so we are loging already let's log out and let's   log in so we using an admin so let's log in over  here we an admin click on this we can have access   to now see we have an admin at gmail now with  this you can add uh let's add update so we're   going to add channel to it and maybe the phone  number we adding zero so update this now let see   your profile has been updated so go back and I  com in again you're going to have the same thing   okay so now let's log out and let's try another  one so in here John Let's log in we have John do   so let's add one more so we have huse then the  phone number here it is maybe 147 all right so   let's maintain now save this and this has to  be saved we see that we maintain return and   I'll come back again we have the same info over  here let's log out the last one one and that is a user so we have this full name over here and  that's a user account so we can just add an   updated and phone number you can have in that  click on Save and you have profile been updated   go in there come back again and say is still there  so that is a way there just a few it's a tip of   an iceberg so there's a lot there's a lot in this  okay but if you want to start if you are creating   a simple application then I do recommend you to  start your own custom authentication because this   it's going to just overwhelm you and when you  get stuck it becomes a problem right so when   you're having a small application then you can  just have your own custom authentication but if   you think this is also useful to you you can  just grab this and I use it anytime the more   you P your hands on the more you stick to it the  more it becomes clear to you thank you so much   for watching I'm going to leave the source  code of this at the giab so check the video   description and it will be available I'm going  to catch you up in the next video so take care

Channel: Netcode-Hub

Views: 3,864

Keywords: DotNet8, Blazor, CookieAuthentication, Authorization, IndividualAccount, WebDevelopment, CodingTips, TechTutorial, AspNetCore, Programming, DotNet 8 Blazor, Cookie Authentication, Tutorial, Individual Account Security, Web Dev Tips, AspNetCore Coding, Tech How-To, Blazor Authentication, .NET 8 Tutorial, Web Security Basics, Auth, Dev, Tips, Coding, Security, WebDev, .NET 8

Id: l2LohCqns9c

Length: 43min 35sec (2615 seconds)

Published: Thu Nov 23 2023