.NET Blazor | Authentication & Role-Based Authorization - using JWT & Authentication State Provider

hi guys y'all welcome to netcode Hub channel   we are here to talk about GWT authorization we  started a project already and we have two videos   for authentication another creating custom HTTP  Handler they're going to add the bearer token to   all request that you're going to make to the API  to make the API or to make the endpoint secure   so to this time around we're going to talk about  authorization authorization is by giving the   person access to your application so in such case  we can add user administrator manager super user   any other role that you want to assign to a user  as soon as that gets registered you can assign the   role to the user and that is what you're going to  have a look today I made a few changes offline now   let me go through that video and know what you've  done so you see from the first and the second   project we created separate models in each of the  project that is a Blazer client and also the API   you can see from the first and the second project  that we duplicated the models for our registration   model we had a separate registration model from  the server and also from the client log into we   did the same responsibility the same that isn't uh  the best way to do that so what I did was I just   added c-sharp Library now this is app Library  comprised of this entities over here so I added   one folder as entities and our models so you can  see the same thing that we did the same model that   we created As registration entity I have it here  also talking settings also I have it login model   I have that an RS racing model I have that and I  also create added this response model after doing   that I deleted them from the server and now  the client section so all of these are going   to be shared by this so we're going to add the  said logic library to the Blazer client and also   we're going to add this the API so that the both  projects can share this Library okay so that is   the should we change it that we did what I added  was the registration entity now you see from the   registration entity that from here we have the  user ID and also we have the email and password   which if you take the Restriction model here it  has a name email password and a confirm password   in a red sensing database you don't want to store  confirm password confirm password it is a property   that we added to check the password connection  with the first and the second one but we don't   want to store that in the database so we have  to create a new model that's what we're going   to be using to get your database and that is the  reason why I created this registration entity   so when we check this when you check the API  appdb contest you can see instead of using   registration model I added registration entity  because that is what you're going to be using   to store the data that you want enter database  and that is what we did if it is the first time   of watching this video then we have other two  videos over there check the description and I'll   put the link over here also when I'm done with  this project it's going to be on GitHub so you   can just go in there and clone the project over  here I'll put the link under the description so   you can also check it over there if you like what  I'm doing please give me thumbs up if you do that   it enables other people to also see this because  it pushes this video far for a lot of people to   see and I'm very grateful for you doing that  for me now let's get going to today's business so what we need to do first is we have to  add the user row because you want to have   a row to the uh which is going to be assigned  to the user as soon as he finishes registering   so we go to our entities here now let's add a  class and now the class is going to be user row so this is a row we want to have access to ID  username and a row so let's make this as public so let's go in there to the appdb  contest and I'll add this because   you want to create a tab based table for  this so we have to add that to the app   DB contest and we go to the projects API and  app DB contest so let's paste this zero here   okay so obviously as soon as you do that  it has added said logic library.models dot   entities we have the namespace added here  so as soon as we add new entity it means   you have to perform database migration but  before that let's build this project first so it is built successfully so let's click on  package manager console and now we're going to   add database migration so make sure we  select the API from here and now let's   close this so dot net EF let's  see if it is there already okay so we have it now let's so let's  go in there and now let's get into the   API so let's copy this and let's change  directory here so CD let's paste this   now LS can see we are inside this API  project so that's net EF migrations then add so user row table and this Arrow table is a name so we can just  change the name to any name that you want   now let's add migration okay so it is done now what you have  to do here is update the database so   um dot net EF database update  let's paste in what we copied all right so you see it is done now so when  we check our database we definitely going to   have let's refresh this we're going to have  the table in there so let's see from here so tables and you must have the user row table  also added yeah so that is this user rules okay   now the lesson that we're going to do  here is we want to start it the row we   want to assign the row to the user as soon as  there is a registers so let's go to our user   Ripple so that's going to be  the easier report in the API   so in here because you have registration and now  here we are registering so before we save this   data or after saving this data to the database  you want to also store the row of this user the   default one is the user so let's talk let's  give the this person a default rule of user   we can add row so let's see now here we want  to add the user row so first of all we want   to get a recent laser added and that is what  we have over here we can do that by getting   the email and after getting this email we want  to check if the email starts with admin that's   what you want to do if the email start with  admin then you want to assign this the user   row to the current rule that we have over  here that's the user ID and under the row   is going to be an admin but in case it is  not they want to assign the row as what user   and I will assign the current ID because you  know the database has to the raw user database   has to get the user ID another row so as soon as  we store the data we can retrieve the ID from it   and now check if there is the email started admin  then assign the row as admin but if it is not then   assigned the role as user so default as soon as  your email starts with admin you're going to be an   administrator and this you're going to check maybe  you can actually move further and check if the   if anyone tries to register with admin what admin  is rated already then that price is going to be   someone else not the right admin because rare  admin has to have only one email in that so you   can check if the database contains any email  that is known as an admin then it is sealed   we don't want to add any any admin again okay we  can do that from here but for now let's maintain   this and what we do here is we see this user  rule we add and I receive changes and return   successfully created so as soon as you create  your account you have your row also created so the next thing is when it comes  to login you want to return username   token and also the user row these are the  three things that you want to return When   a person logs in so let's go in there and  create a model here and now this mode is   going to be under JS models let's add  a class that is known as user session so we add the user session okay so that is assassin class now let's click  on ADD and now within this class we want to add   these properties so let's send this to public so you want to add username row and  add a token that has been generated so when it comes to you go to the user repo and  now when it comes to the login you want to make   some few changes so instead of this sending  this response here we can use the user session so you can retain this Visa session and  now all this you can just override this   with this one so what are you doing we check  if the model is now you want to return new user   session and that's going to be empty one and  also we check if it is not now then we want to   grab the user from database and then correspond  with the email when we do that you want to grab   the email that we have I want to grab its Row  from the Rotator Base by using the ID that we   have from the user table so when we have the  user run the user table when you have the user   row and the user itself that's what you are doing  here if anyone is now you want to return empty if   it is not then here we want to check do password  match so you want to verify this is the name and   password and then that is a method right here  to verify after verification and this returned   you want to return new one but if it returns  true that the password do match then you want   to generate this token so under deleting this  token we are passing in the email and now the the   row so we need the email and the row to generate  this token so that means that when it comes to   this generate token it has to accept only email  and now Raw so here it has to be strength email and also string row so these are the  properties that you want to pass in into   this generate user token so in here let's  open this and I'll make few changes in here so you see from here we create the key we create  our credentials and now with the claims let's   modify these claims so you want to add only  the claim type of name and that's going to   be the person's email you want to add the claim  types of row and that's going to be the current   rule that we have assigned okay now aside  from that we come here to generate the token and also with this token um JWT tokens key token  generation we have to modify this so we can return   the name the row right so in here you can just  override this with a simple method like this so   because you can see we are creating a security  token descriptor and now we assign the subject   to this claims identity and that's the clip that  we have over here now this claims comprise of the   name and the row we add the days that you want to  get it expired so you want to add just one day and   now this is a signing credential as you pass it  to the signing credentials now when it comes to   this we are creating a new token Handler then we  assign the token Handler really create a token   here from this talking online that we've created  object we pass in the security token descriptor   then I will now have to write a token so you can  see from here we have two method here we are going   to create a token and I will write a token when  we write a token it has to convert to your string   that we can actually get it so as you can see we  are going to return an user session because you   know this method here needs to return um user  session here so we have to return a new result   session from this and I will assign this row to  the row that we have you send them to this email   and now this token to the current token that we  have um as you can see it is saying something   that cannot convert this so this means that here  we have to change this to the user session so   just have to you can just make a copy of the exact  session and I will paste it here and that's going   to be the user section okay so if this method is  returned using that session then we don't need to   return any object of user accessing again because  we have them at the endpoint of this method is   going to attend a model and I need to return this  model to let's use that session so that's what you   are doing now the claims comprise of the name and  the row that so now the name is the email and the   row is the current rule that I've been assigned  to the current user who has been registered so if this login is returning user session then  we can just copy this then we go to the interface   and also make it return the user session so we go  to the user I use a repo and now here inside this   response we can make it look a session that is it  now when we have this let's go to the user service   now this has to return the exact session so when  you go to the service that is getting this from   the client section so you open the client and  I'll go to the service so we see from here that   this has to return a user session for the  login but it is returning just a response   so let's make this as user session and  now let's change here to user session   so that's what I was standing let's check the  interface and also create the interface as well   and you're good to go so when you call this  method it's return the user session so let's go   to the login go back to the login here from the  clients Pages login now this method here I want   to go down here it is return a user session  this resource Let Us return a user session   so this assession doesn't have success here so  maybe we can talk about if if the result is now or is not now then we want to get  this okay so if results here it is   not now because the results it is coming in with let's change this so if results  dot then you can have access to   the Token the username so maybe you  can just use the token so it's not it's not now let's see if so we are now making  a check to see if the token is not now or we can   just make a check with all but for now let's try  that so we can pass it or now you can have result   dots they're gonna have username so if this result  does username and that is it is not now uh if this   results Dot row is not now so the next thing that  we have to do here is now from this result as soon   as you receive it we want to set storage in the  local storage you want to install the ID the row   the username and also the token we want to store  this object local storage to do that you have to   install one component and that's the nuget package  known as Blazer dot subtle crypto that package   what we're going to use to encrypt this because  you don't want to send the normal row as user and   also the email to the local storage you want to  then encrypt it before we send it so let's go to   the clients right click on dependencies and now  let's go to management get packages so let's paste   in this and that's a blizzard or subtle crypto  we have to install this package into this project yeah so that is this let's install this package apply okay so now it is done so what you need  to do here is we have to configure this package   in the program.cs file so we can close this then  let's go to so listen Explorer now program.cs file   so we have our client session over here and  that is a program over here so let's open this   so in here let's add the registration we have  to restart it and now here we need to add a key   so we do build out of services that are subtle  crypto then we pass in the key this key could   be any so you can override this key with your  own key that I want to use for this encryption as you see we are business alongside  this is going to be the API you know   it's supposed to be the client section  so let's grab this quick and let's go to   the client section program CS so let's close  this all right so in here let's paste it here okay so now we are done so the next thing to do here is after specifying  our key that we're going to use for this   encryption we are going to encrypt the content  that the user accessing response which comprised   of the token the email and also the user row  remember that the email has been or the token is   encrypted already so we do we want to exclude the  token and want to encrypt the rest okay so let's   go to the login.oriza and now in here we have to  encrypt before we pass it to the local storage we can override this this line of code here by  this so you know here we are creating a crypto   results and now before we do this we have to  include some namespace or control period we have   to use this so that's the next way that we need  to do and also we have to create an interface here   so let's go to the top of our page and I can  see we have this crypto injected and now let's   implement the using statement here so let's inject  the interface and I will create an object out of   this as crypto over here from the service and you  can see it is solved now so we are encrypting the   username we are encrypting the row and we assign  the row and under we create a new user session   as this new encrypted data session then we pass  in the row you're passing the design name and then   the token so with this we have to if this couldn't  if there's any error here as you can see from   here if any of this is wrong or is is now then  that's what you want to do we want to set this as so error okay well   login in okay our last authenticating or what  anything okay so you can pass in anything at all so while authenticating you can put  that in there then you can close it okay so this is what we are displaying  out in case there's any issue at all   so now we are done with this let's try this app  and see so I'm going to save this and let's run   this application and see what's going to happen  after we we register now let's open the row so   I'm going to open this Row from database all  right so we have problem yeah let's check it   out from this output so one field let's see  which one so this does not return success Okay so you want to pretend there is  result and you can see that if result is is not now yeah let's do it again so let's go to our Explorer here and open up view data and also let's open the 02 so that's  the user table let's open the row view data   so we have there is a row and we  have the user data user rows and   user data currently see that mtmt now  user 2 is empty let's check it out from   our page when it's running and now here we can  also right click and I go to inspect element and we go to Applications and now here we can just clear this  off so we are going to also wait for   you can see that's the local storage so  you're going to wait for this assassin   as encrypted content now let's click on  register so here I'm going to pass in user   so this is as an example and that's for the name  okay so let's see this is going to be the email   so I'm going to move this here and I'm going  to say this is user and the password string   let's see this is user at one two three and that  is it you can also make a check over here so user   at one two three let's see so if I click on  register let's wait and see for the feedback   so you see that it is successfully done now when  we check from our data so this is the user table   if I refresh this you're going to see the data  over here so you see we have the data and we   have the password encrypted this is the email and  now when we check the rows too if I refresh this   you can see we have the user ID of one and then  the row is user let's register an admin too so   we go back to the same page and now in here let's  register another one as an admin so this is admin and I'm going to use this admin at  example.com and at the password is admin   at one two three so admin at one two three  so that is a password for the admin so click   on register and as it is also done so when we  check from uh data basically cb5 here as the   user ID going to be two we have it row as admin  going share from the user you're going to have   this this is the password and that is the email  okay so now we are good to go let's go to the the login so as soon as I log in let's  see so I'm going to log in with the user then user at one two three so if I click on login   you can see that you have the user data  here now check and see you can see it   hasn't encrypted so we have the root encrypted  this is the token and I have this username okay so we have to go back to the client section the  authentication State provider and now decrypt this   content and assign them to the row and also the  username as a claims identity so we can use them   in our authentication and authorization so let's  go back to the solution Explorer and go to their   client we see their clients we have a provider and  that's a customer translation state so in here we   have to inject the the interface that we use for  the encryption and that's the add crypto service   so control period let's create an assigned  field so we have it set right here the next   thing to do here is to create an anonymous user  so there's a Anonymous meaning the person has not   been registered yet so when I have that the method  that we have in this authentication state that is   an abstract class from this authentication State  provider if you want to override this method we   want to decrypt the content in the local storage  and now assign them to the claim types so you can   see from here that you get a content from local  storage and that is this these are data and also   you see from here that we check if it is not now  or if it is now you want to return the user is not   registered but in case it is not to create a claim  principle and now you pass in the list of claims   here and these are the claims the ID we have the  name and then the row now we decrypt this content   and assign it as a username and assign this as a  row the type of the security that we're going to   use here as in JWT of aside from that you're going  to return a resource so it is a claim principle   okay then you can see this is a method that you  created earlier on to notify States change and   that is what you can do over here so when we  do that here this means that we can now escape   this to send the sense code to decrypt the token  because you're not decrypting the token anymore   if I don't want to use the local storage to  have access to this and that's another way   of doing it okay so you can decrypt or you can  comment this and that's a few changes that you   want to do with very simple one that I want  to do in authentication State provider now we   have this what you have to do next is to enable  the authentication and authorization middleware   pipeline in the API so go to the API now  open it up and now go to program.cs file and now in here down here you want to  you see we have authorization here so   you want to put authentication on top so  we enabled authentication and authorization   middleware so the authentication must  come first then the television follows so you know that when you check the app.reza   it has this mechanism already that is a Cascade  authentication so we can now have access to   the authorization view method now let's go to  our fetch data so maybe in our first data here   from this pages you have this fresh  data you can maybe authorize this   and now assign the row as early admin  so only admin can access this content   Also let's see from this counter we can  also assign only so we can assign rows to so this row is going to be only users   so Elisa can have access to this so  from the fetch data it is for admin   so the last couple of days and now for this  counter it is for users okay so this is for users aside from that let's go to the main layout   and it can be found another set project so search  for the main layout and now on top here you see   we have all this so we can now make a change  and now we can use this so you want to have the   context identity dot name after that you want  to that is when it is authorized display this   it is not authorized then display this when the  person locks out so we can just use this method   so you can see that from here we have on on  click event here as log out so when the logout   is clicked you want to remove from this lucas3  the data over here and now you want to notify   the authentication that something happened so  you should refresh and it's going to do that so in the nav menu let's make some changes about  the comprising of or consisting of the user and   also the administration so if it's administrator  you want to see this if there is I want to see   that if you're not any any of them you don't we  want you to see any okay so let's go then do that   that's enough menu now from this nav menu here you  see we have this enough link so from this nav item   you want to make changes to these three you  can just grab this and you can just paste   this year so it's just that we have put them  in this authorized view now with this this not   authorized at all so if you're unauthorized  they're going to see this only the home page   but if you are authorized and you are your design  your rule is user you're going to see this counter   if you are authorized and a user or your role is  admin you're gonna see fetch data okay but here   you see you can add multiple rows so if the user  here is admin or user laser can still see this   okay now we have this so let's see let's edit  this so now we have to save this reboot and apply   so we have an error Here Local history service  does not exist so let's go and add the interface   we can do that by this okay Also let's go  to the main that's the index and display   the current user so that's the index and  that pages index.reza and are in here   and solve this we can display something like  this if it is authorize you want to display   the name if it is not authorized you want to  display the guest ask guest now let's run this all right so let's find out  so this is not found okay   let's go in here and inject this on top so that's  authentication State provider let's do it again all right with us again let's see now there's  also not found so control period let's include   the namespace and that's the customer then  casing State provider that I recreated yeah okay all right so you can see when you run it we have  hello user this is your email and you are logged   in here and as you can see from a user can only  see this counter now if I click on logout it   does notify and I can see we have hello guest we  have you see only home page here if I log in and   use the admin so admin and I use admin at one  two three login and I must see the fetch data   so click let's click on this you see we have  this effect data and I can have access to the   fetch data okay now so um log out again you can  see I am off I have this user oh that's a guest   so with this tool we can also assign multiple rows  now we see we assign single row to each of these   maybe we can decide to add here with the counter  you can decide to add admin to this too so all   admins can see this counter as far as user can  also see now I can just save this and I can just   restart this application and you're going to see  the counter as soon as you're logging as an admin   and you're going to see the fetch  data now for a link also as well   so let's wait for these two now let's see all right so you can see from here that you  have the counter over here and you're gonna   admin if I log out next to the counter  is off you can see only the home page   now if you decide to log in as a user  I will see only the counter so user sorry then I'm gonna log in over here and  I must see only the counter here and that   is it so that is it for integrating um row base  authorization and Blazer assembly you know this   source code I'll put under the GitHub so check  the description and you'll have a link to click   on it to clone it and review if you like what  I'm doing give me thumbs up and also subscribe   to the channel if you haven't done that thank you  for watching this if you have any comments you or   any issue put it in the comment section thank you  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 947

Keywords: asp.net core, controller, service, web api, EFCore 7, migration, authentication, client-side, jwt, token, blazor authentication, assign-role, bearer token, api endpoint, Http Request, Custom Http handler, Custom Http Handler, Authenticated, Authenticated Use, Secure API Controller, Authenticated User using CustomHttpHandler, Authentication, Authorization, blazor server, blazor web assembly, Authentication & Role-Based Authorization - using JWT & Authentication State Provider

Id: bImhNXBs_hY

Length: 35min 49sec (2149 seconds)

Published: Sun Aug 27 2023