.NET Blazor |Secure your API Controller Endpoint for ONLY Authenticated User using CustomHttpHandler

H vindo which means welcome this is net code  help channel so you're welcome once again to   this channel this channel facilitates a lot of  net projects including lessons and project for   Blazer we assembly and a blazer server and also  net Mar applications which comprise of desktop   and mobile app IOS and Android Windows and Mac  OS so this video it's going to be an interesting   one as well we have started this project with the  first video almost that's almost two hours video   and we spoke about or we learned how to create  a custom authentication for Blazer web assembly   project you know security is very important as  far as web applications are concerned so when   you create your application definitely you must  have a mechanism to protect an authorized assets   you want to Grant people the access to access or  have um control in your application you don't want   anybody else to do that unless you gr a person  access so to do that you have to implement an   authentication to your application to protect it  we've seen in the first video how to do that by   encrypting the password um using some algorithms  and also using sorts and converting to Bas defa   string and I we've seen for the login to we have  to Recon convert it from that encrypted version   to um from4 string as well using the same sort so  we've done that in the first video and let me try   to run this application for us to see what  we did to just make a simple recap for that video so we were able to create our API  and that is the the name very long but   don't worry the here can see we have users  and register users so here going to register   user and then we're going to log in as  soon as user logs in we have access to   the Token now um let's see we created the  user already in the first project but in   here we can decide to create another one  so that is a name email and password these   are the things that you need to provide for  this registration now after registration we   have to then log in so let's try this out we  don't need ID so you can just clear off this ID so we need the name now let's  use John do and you have to have an email so at gmail.com now the password  I'm going to provide is going to to be   John 1 2 3 that is a password so if  I click on execute this should create   the account for us so you can see from  here successfully created now let's log   in so with this when we go to our database  the password here has been encrypted let's   check that one out so when you go to SQL  Server object and let's wait for this to   pop up so we can have access to the database  and let me open this database user database tabled so I click on this user and I'm going to  view the data here so we use John do and that's   the last one so you can see the password has  now been encrypted and now the encrypted tool   that we use want to check our controller here  so this is our controller and I want to check   this repository is repository when you decide  to Now log in so there is a login user async   and now this register user async so when  user tries to register this what happens   we call this method password hash we're going  to has the password and this the password hash   method that we do so if you check here you see  we create a bite we Generate random numbers and   now we convert this by using the password the  r password with the sord that we created as   a b here and also you want to have an situation  the number of R should go to generate the B for   us thousand times and theing name that we using  is an sha1 so we do that and I will convert the   buy to4 string so that's the password and that's  exactly what you are seeing here so that is it   now when is Tri loging we have to now convert  this password from B4 string and also to the   hash and we can now take up the sort and I Rec  convert it and see if they match with this and   that is exactly what we also do here when Isa  tries to log in so we generate the token that   is not this one so this is a user login so if  I open this one you can see from here that we   make a check here to verify that password we  convert the password we get a password from   database we convert it into B4 from 64 string  we create our sort and now here we're going to   copy the sort from the string password also so  the rest that we have we're going to encrypt the   current draw password then we compare and see  if they are the same so let's see if they the   same then I want to return the token if they the  same then we call this method to generate a token   we create a symmetric key and also we add our  claims user ID names and email for now and now   we generate our token using this token generated  Handler then we write our token okay so let's see   from that we we check our response here we have  this email now this password so I'm going to copy   this now let's go to the login so this is the  login if I click on this and I try this out so   let's spacee this logins here now let's execute  this and I can see from here that our token has   now been generated now the name that you use we  can just copy this token here and I try to find   this token if they correspond it corresponds  with what we use for the registration so we go   to JWT tonight then I'm going to paste this token  over there to have access to the features of this token so gt. let's press it here gt. now with this  we are now going to paste the token that we copied   so when it come here let's paste the token here  so paste that and as soon as I past it you see   we have the user ID that is 001 over here we have  full name and that's the John do we have email the   expired date and the issuer the API and now the  audience here it is a Blazer project we created   now we see we have the header because it I divided  into three sections the header the payload and the   signature the header is an H 256 and the type is  GWT because when we check that's the that we use   when we check this you can see we're using this  hm sh a256 and that's our Alm that we are using   here to secure or to encryp this password and  at the type here it is what GWT that's GW um T   authentication okay the next thing that we do you  see from this here see we have the signature and H   is as you see from here the algorithm that we use  and also we convert it to B4 string and that's the   B4 encoded and Etc so these are the signatures  and I you see we have this as a payload and this   is the actual data that we are focusing on okay so  we have that that's going to be found within the   middle one here okay so you can see that with this  our token has now be generated and now as soon as   we try to log in so let's try to log in into our  application here so with our Blazer assembly we're   going to pass in John do so let's see from here  so John do so at gmail.com and the password Here   is joho at123 now let's see if the password is  the same that we use John so now let's click on   login and if I click on login let's wait for this  authentication to be done and this is going to be   hidden and we must see John do@ gmail.com on top  here for our login Tess so let's let's click on it yeah so you can see from here we have our joho  gmail.com and I can see we have the registration   the log again they are heading they are gone  now we have access to all the stuffs in here   as you can see from this now the next thing that  we do here is we want to talk about some important   aspect in also Blazer assembly authentication  system that is protecting your Endo protecting   your API from an authorized asset and that is  what we're going to have a look today so you   know what the first video that I did I have the  documentation I have the project at the GitHub   so I'll leave check the description over here  I'll leave that video link over here now when   you click on that video click the description  you're going to have a link to the GitHub you   can now clone the source code from the GitHub as  well now with this to when I'm done I'm going to   also add it to the GitHub you can also clone only  this project which comprise of the first one and   this one as well okay so with different episode  that I do you can have a complete um cloned source   code from the GitHub check the description and  also please subscribe to this Channel and also   click on the thumbs up or the like button so that  this video gets to a lot of people to watch to   improve this channel as well all right so thank  you so much for doing that now I believe you've   done that already good job okay so let's see what  you're going to do next from here so you can see   that from our API here everyone can invoke this  API can call this API we have user registration   and login aside from that we have another API and  that is known as weather forecast so you can see   that from here I have an account I've registered  if I go to this fetch data it is going to load   the data here for me now um I want us to get  we've changed this um fetch data let's check the   controller to see so let's go back to our source  and now let's go to solution Explorer and in our   client section so API this our client we have  let's see Pages like we have this fetch data here   so with this fetch data we want to now instead  of calling this we want to Now call a method an   API so there is an API so let's copy this API  name and that is a get um weather forecast so   this method is in get so the API here is whether  forecast you can copy this API and now let's go to solution Explorer and now what we  have this fetch data let's call this   end point instead of using  adjacent here let's call an endo now we say it should get this let's  save this and now let's see so let's refresh this okay so you see as soon as we log in or  we run the application we are logged in already   because when you check this rightly go to inspect  when you check our local storage we have saved the   token over there so as soon as the page loads and  the token is found it has to send it to the API   the cryp and I'll check if we have the same data  data the token is an authentic then we access the   person we give you log the person in so if I go to  application and I go to local storage you can see   we have the DT token here and that is a token um  over here so that's soon as we landar application   we are in already as you can see from here now  let's go to the F data you can see we have access   to that so let's let's also go back again and now  this token that we have we are going to clear this   token meaning that we are an authorized user and  we as soon as you do this so let's delete that and   now when I come here and I refresh this let's see  you can see from here it is off because I'm going   to see register and login because I'm Anonymous  user but you see we still have access to this API   so how can you protect this end point you can do  that in so many ways let's have a look let's go   back to our solution Explorer now let's go to our  API and the API project and controller you see we   have weather forecast controller so one we can  decide to specify or being specific if you want   to protect only this action method we can just  put an authoriz attribute here if you want to   protect protect the whole API we can put it over  here so let's protect the whole API and I will say   authorize here so it means before you have access  to this you must authorized before you can have   access to this API now let's see so let's refresh  this application again and let's try to see let's   try to have access to the API and see if you're  going to have access to that fetch data or the   weather forecast controller in the application so  you can see fetch data is loading and as soon as   you check down here you see we have an unhandled  error has occurred if you right click on this and   go to inspect element let's check for Network  Tab and now let's try to refresh this again now   let's see so you can see from here it is making  a weather forecast call but the status is 500 it   means something couldn't go well so if you check  this the response we are having no authentication   scheme was specified so means you can't have  access to this because you specify the controller   as an attribute of what authorized but this is not  enough what you want to do here is to protect um a   controller from authorized user we have to add  a token header to this so as soon as you click   on this button when calling an API the call has to  go with an API or there's a token header and that   header is going to be checked if it correspond  to that current user if so then it responds with   a data to the client that is what you want to  do now so to do that we have to install one   package and at the name of that package here it  is microsoft. aset cor. authentication JWT bear   so let's go to that we're going to have to install  this so I'm going to close this we have to install   this on the API project so right click on the  API dependencies folder now let's go to manage   n get packages and I'm going to install this  package over here so we're going to search it here so in here let's type  in microsoft. authentication   microsoft. espet authentication JWT be all  right so see we have the package name here   so let's install this to the project the  current version is 7.0.1 so we install this so as after this successfully  installed we have to now configure   this JWT bar service in the  program.cs file so let's do   that in we close this and now we have to  navigate to program. CS file in our API project so before you proceed you know one thing  is whether you followed the first video or not   this process it is a way of protecting your API  so if you have any other API that you want to   protect it then you can use the same steps as we  are following here to protect it to protect all   your end point so yeah you can use that okay so  that necessar means that you have to First Watch   the video before you can continue with this but  if you want to do exactly what you've done then I   suggest you watch the F video so we can follow  up to where we are now it's going to help you   get better understanding why we try to get from  scratch up to where we are so let's do that in   the program.cs file so before we have this app.  build version method here we want to specify it beneath so in here the first thing that we have  to do is let's create a space so we expand a space   here now aside from that we use builder. Services  then we can have access to add authentication   and now with this we're going to pass in this  JWT bar default and now it has access to this   authentication scheme as soon as you do that  you see that when we check here we are going   to add this name space okay so aside from doing  this then you want to add this GWT and now this   need some option that we need to pass in as  a parameter so the first option that we need   to do here is we have to create a token settings  now this token setting that we are doing here is   what we did in the when we check our models you  could see that you created a a token or a model   to handle the security key and also the validator  or the issuer the audience and the secret key so   we do that by getting it over here so you want  to create a variable to store it over here when   we check our app setting. Json we specify it in  there so where is app settings you will see in   here we specify it over here and the name that we  gave was token settings we also created a model   inside the models folder and that's also known as  token settings to handle that so you want to now   compare this or you want to assign this method  here this properties to the one that we have in   the tokens here so we can have access to security  key is going to Mar security key issuer to issuer   and audience to audience so wherever that you want  to use this audience or this uh model here we can   have access to the data inside this settings  and that's exactly what we are doing so we   want to create a variable to handle that and now  this we're going to use configuration so as soon   as you hear configuration it means we referring  to the app setting file and now you can see get   sessions and at the name of the session here it  is called token settings and that's how we are   specify it in here after getting this sessions  we want to get it to this token settings so this   is a model so it means we are signing this we are  syncing this sessions here to the model OKAY aside   from that we need to specify these options token  validation parameters we create a new instance   of this and now the next thing to do is we have  to specify this validate issuer because you see   when we check here we have issue um suggested or  specified audience also specified so we want to   validate them so we do that by setting this to  this token settings. issuer we do same thing to   the audience and also we grab the audience we do  same thing to the signing key and now here we want   to grab the secret key but that is a secret key  here in the app settings now this secret key we   have to convert it into a string so that's what  we are doing so we use this method to convert it   that is a symmetric security key you want to get  it over here and that's what we are getting this   so it is the key and now we want to convert it  and I grabb it aside from that you need to add   this clock skill span as from zero default is  going to add five minutes and now when we check   our repo you can see that the time span we adding  20 seconds so it means 20 seconds plus 5 going be   25 and that's we're going to use for our token  for expiration so we want our token to expire   within 20 seconds and I will did this for produ  not production for this partic purpose but for   production you don't want to set your token expir  date to just 20 seconds if not I just have to log   in today with some 20 seconds the token will be  expired and I have to do it again um so we don't   have to do that but this for particular purpose  so that's why we said this 22nd okay so after   specifying everything here we can now save this  and we can now rebuild this and see so with as   soon as I added there's a name space added tokens  also has to added identity model. tokens and the   system. test that is when we using this utf8 en  coding. f8 okay so now let's find this again and   see so I'm going to run this application again and  now let's try to access it the same controller now   the first one was no authentication scheme  was specified by currently less running and   let's see if going to have the same thing or  there going to be a change in there so click on this so we have our two projects loaded the first  one is an API and we have our client Blazer two   that's our UI Let's test our API first so at  first we used to have no authentication scheme   was provided now let's see so if I click on this  get weather forecast and if I try to click on try   this out execute you see we are having here as 401  and mean it is not authorized so that is the mean   of this 401 not authorized now let's try this in  this here and now let's try to get fetch data and   now let's see so if I go to inspect element and I  go to network click on this again to make the API call and now with this let's have the response  here so header we have 401 okay so may we are   not authorized and now you can see when you  go to preview there's nothing there response   to you there's no response because it wasn't  authorized okay now we have this you know when   you have your controller for registration and  also um login you can see from here that you   you like to also protect it because when you  check the controller it may be that it won't   be only the first or the same controller or  that controller not going to be used to have   authentication for only users when we go to  solution Explorer and if you check the this   user controller you can see currently we have  only two method here that is login and register   but it may be that you may want to add another  method in here so in such case what I going to   do let's see if I decide to specify here as also  an authorized attribute so if I put authorized here and now with this authorized let's go to we  forecast controller we have this method here let's   copy this method and now with this method let's  go to the user controller and let's paste this   method here so with this we want to have access  to weather forecast and you want to have access   to this summarized method let's see if we need to  inject here now when we check this when check this   controller you can see that you have this method  in it that is a static method so let's grab this two and now let's go to this and  I'll paste it on top so we have   this static method pasted on top and now  the issue is solved now so we are getting   a list of this and now it is get let's  specify the route so we say it is HTTP get it is get and now we are saying  that this is user slash um we forecast   okay now with this let's save this  and now let's check let's find this   and now let's test this in a user API  and now see now can see we have here as authorized so you can see see that we have our  user over here and this method if I click on   this try this out and I execute this we still  have 401 because the controller there has been   authorized so it means before a user can have say  with this the user has to be authorized first or   must have must provide a GWT token let's see  this if I decide to log two let's see so let's   click on this execute this and I I still have the  same thing I'm trying to log in and I'm I'm still   refused because I need to provide a token for that  you see this doesn't make sense because you have   to log in to get the token and I've Tri log in  problems now let's see for the registration so   if I decide to this is register let's log in and  see so this log to the same issue so this means   that we want to specify or you want to create  a delegate Handler now this is what the Handler   going to do it's going to check if the API or if  the endpoint that you are calling is a login or   register then you're going to give access to it  you're going to bypass the method of asking for   uh JWT token but if it is not then all request  going to be made has to go in with a token except   register and login so you're going to have the  attribute specify on top as an authorized for this   user after doing that if user tries to log in or  to register token won't be requested but soon as   user tries to get this weather forecast from this  user controller token has to be requested let's   try that and see so what are the first thing that  we need to do here we have post as login um that   is so here we are logging in and now here we're  registering so let's also specify this here as register so we have register and we have login  and when we check this our controller we have   them over here register and our login okay  so let's go to our project and now in our   API you see we have this repositories here so  let's create one folder here and let's name   it as um handless so I click on apil less  add a new folder and I will say this is handless so with this handless let's  create a custom Handler and now this   custom Handler going to be custom  HTTP Handler so we say this is custom so custom HTTP Handler now with this Handler this   is going to inherit from a  delegate Handler so let's delegate so delegate Handler okay so let's see all right so delegating Handler and now with  this we have to create a method here now this is   what we are going to do first in this Handler  this Handler has inbuilt method and that is a   send async because it's an HTTP so we need to  send so let's have a look at that you can just   typee in override and now this override you see we  have this send a sync method so we can now put in   that after putting in that let's inject our local  storage session that's the local storage service   now let's check if the system if the local browser  local storage has um token then we're going to   implement that but if it doesn't have and if only  the request being sent it is has an attribute or   a route of login and register they want to bypass  the act of requesting token when sending so let's   do that in here so this has to be done now we  did this in the API know that is wrong it has   to be done in the client section so now that now  let's delete this and now you can do that again   so that is for our API that's the client let's do  that in the client so we add a new folder here as handless so handless and now we have to add a   custom HTTP Handler as a class so  we give it a name as custom HTTP Handler and now this has inherit from delegating  Handler so we can now generate a Constructor for   this so c o r and let's also have override this  method that is a send async method so this send   async method that's what you're going to do  we're going to have access to local storage   so we're going to check if the request is endpoint  calling if it is not loging or register then want   to append we want to request a token but if it is  for only login or register then go without token   you want to bypass that method so let's inject our  iCal storage service here so iCal storage service   and we can have a look at this control period  and now let's create an assigned field so we have this so let's specify our token here now first  of all what you're doing here we going to use   an if statement to check now we are saying if this  request coming in do request u. absolute path and   then we are converting this to lower case so do  content login so that it means that if the path   here contains login if the URI going in there  from our endpoint contains login or we can say   if it contains the same thing if it contains uh  register when we check our user control see we   have register and login so now we are checking if  the URI sending it contains register or login then   what you want to do you want to just return this  send async okay so it means we are bypassing but   if it doesn't contain login and it contains maybe  that is another one is user WF then we want to get   the token from the person's browser local storage  now after getting it we're going to check if it   is not now then we want to add a header to the  request that's HTTP request sent add a header the   type here the name is an authorization now this is  the value so want to add this token that's a bar   token that's the so at the end you want to push  it over here by calling return away. B send async   you're passing this request which has been edited  and added header to it and also we want to add   this cancellation token so this is what all that  we need to do so we save this now after doing this   we have to register this delegate Handler in the  program. Cs file so let's go to the client section   program.cs file now let's register this Handler in  here so you can do that by adding build. services.   add scope then we passing this custom HTTP  Handler that we created and that is this one   so custom HTTP Handler we do this to register  this delegate Handler here so we can now save this so since now we going to have two routing  process that's an HTTP routing by checking up   um if the user or the routing to the URI con  contains login or register and if it doesn't   you see we having two routings here so in  doing so we have to use this HTTP Factory   and that's from this extension microsoft.  extensions. HTTP so we have to also install   that package and then we have to configure that  to as well so let's add that by going to soltion   Explorer in the client section right click  on dependencies let's add this we get package   here so we type in extensions. HTTP and it is  for Microsoft so let's wait for the search to   be done then we can install this package and  that is it microsoft. extension. HTP now you   see this HTP client Factory is a pattern for  configuring and retrieving name ATP client   in a comp composable way so we want to use it  HTP client Factory let's install to our project so after successful installation we have to  configure this in the program. Cs file so   where we have our Cent section here we have to  specify this in here so see when you check this   see we have the first one that's an ascope  and we're going to create a new instance of   this HTTP client from the factory one so we  have to disable this so let's do that so we   can now just comment this okay then down here  we can initialize a new one so in here what we   have to do is we have to create a bu services.  add HTTP client now this we specify it any name   at all for this the client fact that we have  created and I we pass in options and I we get   the Base address so we can copy this URL here to  this and I know this address here it is from the   API so this is an API um port and aside from  that the custom HTP client that we created or   the method the delegate handle that we created we  can add it by using add HTTP message Handler we   specify our model or our delegate Handler  in here and that is all so now let's save [Music] this so after doing this it means that  all the pages or all our models that we use or   our repost or that we use this single HP client  you have to go in there and specify the factory   and create instance of that factory by specifying  the name that we did or we made over here into   that so let's see we did that for the login the  registration and also the F data let's let's F and   see so when you go back to our solution Explorer  you can see that from our project we created a   service here and now this is a service so if I go  to user service we injected this HTTP client here   and now we don't want to do that you're going to  use the client Factory so now in here we can now   create an object out of this uh HP client Factory  we specify the name and we assign the client to   this so we can do that by creating HTP client  factory. create client we passing our name so this   is a name that we specified in the program.cs file  over here and that's exactly what we are doing   inside this user service we do the same thing  to this we can make a copy of this and I paste   it over here and our problem solved let's go back  to the F data and also specify the same thing over   there so in here to Let's comment this HTP client  and now let's inject the HTTP client Factory so we   inject the interface and we create an object now  let's go down here and now let's Implement that   so here too we can now paste in that HTTP client  factory. create a sync we pass in our API okay so   for now let's save this and let's test application  so I'm going to refresh this and let's wait to see so in here can see we are logged in already  because um token is found so let's go to inspect   element and now let's C that token out so  we go to this and applications and now this   token right click now let's delay that let's  refresh the application again and we are now   logged out so going to have the register and  also the login buttons on top so that is what   we have now now let's see let's go back to this  network section and now here let's click on this   fetch data so if I click on this fetch data  you can see we have a response here click on   this we have 401 me we are not authorized when  you check the response from there server it it   is demanding and authentication the type as  Bearer this a request so when sending we are   not providing any be any authentication token  okay so that's where we have this error let's   see if I click on login let's see so let's  log in here and I'm going to log in with   this let's add test at 1 2 3 now let's click  on login so before we do that let's ref press this so unless s to network  tab we can clear everything   from here and now let's try to log  in so test at gmail then test one 2 3 so if I click on login see what going to happen  there's going to be a call but here we're not   going to specify any be so click on this like see  we have login so if I click on this login there   is a response from the server now this response  it's coming in with four responses you see it's   coming with only the server that's the Cal and now  here you can see there is no server or there is no   authentication token requested here because we did  that in the custom HTTP so we said that if the URI   contains login do not add authorization header if  I click on fetch data let's see what happened now   with this fetch data there is a route you can see  here it needs a Bearer The read the authentication   here needs what a be token but you see here  we have an error although authorization here   we have the bar token specified but see from here  it is saying that the token expired at 8:25 2023   8 10 3846 okay so here the authorization here  it has expired although we have the bar token   added but it is expir because when you check the  time here you see it is 39 it is expired so let's   do it quick let's go to the applications here  let's clear this very fast and now let's refresh this so we're going to log in fast  to see and I'm going to find the   data in the controller so let's see now  fetch this off now this what we're going   to do let's click home refresh this  so while we navigate to the network tab okay so we click on this fetch data now we  see we are not allowing us to access because it   needs the beer token and we not providing let's  log in and see so when you log in and refresh   this now it's going to add a header the token  into the header so let's log in and now that is test so now let's click on login okay so now it is  loging if I click on this fetch data you see now   we have the data here now click on this model you  will see this call has the bar token let's expand this so you can see we are making a call  here and now there is a server so when you   check the first one you have the bar token  here you will see it has been added to the   header and now we have the data here okay  so um that is now you see we' been able to   access it by sending our authorization token  to this but the next thing that I want to do   here I want to talk about is when we click on  this login let's TR to log to this application again or let's refresh we  pluging already so let's refresh it so you can see that here we've logged in but  we still have this login button here login page   if I go to register let's see so register and I  can still have access to the registration form   so you want to hide these two forms from the user  as soon as the user logs in so this is register registration so let's registration so we want  to hide these two forms from the user soon as   the user logs in so let's see so see we have the  two form although we are loging but we still have   access to this so we can do that by going to the  source code and I'll do some small changes over   there to help us Rectify or solve this problem  let's do that then we bring the video to an end   before we do that let's solve this we see we  want to handle this error that's a Reload error   you can see here it means you're not authorized  but I don't want to see this error popping up   down there we want to see maybe not authorized so  in doing that we go back to our solution Explorer   now from the client section we have this app.  Razer so in of this route view we can decide   to add authorized route view so authorize route  view okay so if this is too long we can just cut this and here control period we can add  this to the name space now let's save   this and let's see let's try to refresh  this or build application again so reload application so if I click on fetch data instead  of getting me problems or getting me the error   Ben it now you can see we have not authorized  yeah so that is a simple way of doing it by   using this authorized r view here and problem  solved so let's see with the one the isue that   we need to also um have a look at so let's  go to the home that's a login page and now   down here we want to specify this let's  add the cascading um parameter here so   let's inject that so let's add cascading by and  now down here let's have this public task then   you can have access to this authenticated  authentication um state so authentication state so let's inject that and  now here we can put in here as art State okay then we need to have get and set  assess set so when the page load we can now   call a page load method benit here like this  so let's have overwrite then on initialize a sync so we have un initialize now with this  on initialize we have specify H here like this so here we can say that you can have a  look at it you can store the user here as an   upate do user so the user can be found in the  authentication State and that is it so we are   grabbing the user from here now we are saying  that if user the identity is authenticated   then I want to navigate to this page that's  the home page else you want to perform the   normal operation that you want to do so with this  when you save it and try to navigate to the login   page once you loging you're going to direct to the  homepage let's save that and see so let's refresh this so here let's login now we click on this  login and now let's pass in a normal data so   test at one two three then I'm going to log  in so after logging in it going to send me to   the homepage so let's wait okay so I am here now  now if I decide to click on login again let's see   so I'm clicking on this button so if I click  on login I am here okay so now we have login   now now let's decide to navigate to the login  page so if I go to login let's click on thec so with this it has to navigate  us back to the homepage you can   see we are seeing the hom page  now let's go to the register registration with registration we're going to have  access to because we haven't configured that so   let's configure that too okay so you can see we  are we are here so let's go in there we can just   grab this code and I will go to the registration  and I will paste it over there so down here let's space it here okay so this still going to work as soon   as you decide to load that let's  access the registration to NC so registration now let's wait for this to see if  it's going to also navigate as to the homepage   okay so you can see we have been navigated back  here I want us to create in the shed or in the   shed here let's create one component so add  the component and let's name this component as so redirect authenticated users  so with this here we going to just   inject so we don't want to have  any this let's inject navigation manager and I we say navigation manager Also let's inject so if this okay now let's  come here let's have this the page   override method that is on initialized  async so when this page is initialize   we want to Calla navigation manager do  navigate you then let's pass in this fet data so you want to navigate to this place  fetch data okay so even this you don't need   to use this because you're not calling any method  here you're not awaiting for any task so we have   the tax override on initialized then we want to  navigate to this page and now here going to be   void so now we have here anytime this component  is called it's going to navigate the person to   fetch data so let's make sure the F data route is  what we have specified so you can just copy this   and paste for making sure that is what we've done  okay now let's do this in the app. Razer because   that is the first thing to load when this page  is called when the whole application is called   so where you have this authorized route data  your authorized route view let's specify that   inside the authorized route View and we can do  that by specifying some attribute or some charge   component in in it and the chge component is we  have not authorized so if you are not authorized   then you want to check something here okay so  we are saying that if you're not authorized we   want to navigate you to the login page if then  we can have contest okay so if context here in   this context dots you can have access to  user do identity not identity then do is authenticated so as soon as you pass in  this it means you are not authenticated   okay so if you're authenticated then what  you want to do you want to move you to   this page that is a r direct user so this is  redirect authenticated users so we can close this it's supposed to redirect unauthenticated   users so let's go to redirect page and  now inside of this you're going to say login now save this so let's refresh this we have error here it is because we  have to put put this in this code so let's   cut this and I paste it here yes save  this now this we can show this doesn't have okay now let's save  this and now let's start it again so here let's try to log in and see so  we are in already and now let's try to access   the fetch data so if I turn to access this um  component let's see what going to happen so if   I click on this you see that it has navigated me  to the login page because I have not registered   so click on counter and you see I have the  same thing and I have to register before I   can have access to the page all right so that  is it for this video now in this video we've   seen how to protect your endpoint and that is  an API by adding a custom HTTP uh Handler so it   can add a barer to token into any request that it  makes and also we've seen how to exclude only two   routes and that is when it has a login and it's  a register route it should Escape that and I'll   give access to the person also we've seen how to  protect your page or navigate your page whenever   user logs in and decide to go to the login or the  registration page again I believe this is helpful   thank you so much for watching this video if you  like what I'm doing please give me a thumbs up   if you have any issue add to you can just put  it at the comment section there subscribe and   also share this video doing so you help this  video gu to other people as well and it help   the channel too so I'll leave this code under the  description at the GitHub so check it over there   and you're going to see the link over there for  cloning so you can just get the source code from   the GitHub thank you take care of yourself and I  believe I'm going to meet you in the other video

Channel: Netcode-Hub

Views: 513

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, blazor, Secure your API Controller Endpoint for ONLY Authenticated User using CustomHttpHandler, Custom Http Handler, Authenticated, Authenticated Use, Secure API Controller, Authenticated User using CustomHttpHandler, Authentication, Authorization, blazor server, blazor web assembly

Id: TOn-s_odxxo

Length: 55min 59sec (3359 seconds)

Published: Sat Aug 26 2023