Unlocking Security: Consume .NET Core 8 Authentication API in Blazor WebAssembly with Ease! 🔐🚀

hey everyone welcome back to net up Channel  I am Frederick and I'm happy to have you here   today in this video we are going to talk about  how to consume default authentication web API   in net a Blazer web assembly project before we  jump into it make sure you have subscribed to   the channel and also hit on that notification  Bell so you never miss out any of our upcoming   content also if you enjoy what you're going to  see today please don't forget to give this video   thumb thums up it really helps the channel grow  I do offer training session or coaching session   for those who are interested in Blazer that is  Blazer we assembly and Blazer server application   and also um web api. net mar. netar Blazer hybrid  Technologies so if you're interested in you can   write me through a mail specified in the video  description the next question is what are the   objectives of this video after you watching this  video you'll be able to one configure web assembly   co-hosted project in net a Blazer two you'll be  able to create authentication endpoint in net8   web API and the last one here is you you'll be  able to consume the authentication API endpoint   in the Blazer web assembly project created the  source code of this project will be available on   on GitHub and I'll leave the link in the video  description let's have a look with the output   of what you're going to do today so you can see  from here that I have this login this buttons   here and not nothing again if I click on this um  inspect element I can just go to the developer   tools and in here let's click on I'm going to  click on this application you see from here I   have a key and value that's the local St nothing  happen here but let's go in there and I'm try to   register this I specify the credentials and click  on login and now let's see so we're going to have   access to our local storage items here you see  we have authenication we have our token now what   you're going to do here with the default endpoint  in net 8 web API has refresh token capability and   also the asset token capability we're going to  have a look today on the asset token and that   is the authentication system now we not going  to do the refresh token maybe I believe after   watching this you can implement that yourself  but if you think I have to do that you put it   at the comment section and I'll make a separate  video to Top This video up on that refresh token   system all right so let's see I have this token  over here and if I click on this you can see we   have a refresh token you can see we have our own  token this token is or this these tokens they are   generated by the the auto endpoint created by  Microsoft as soon as you create a web API you   have that in there all we we need to do here is  just configure it and boom we are done so now   we are consuming this inside a Blazer assembly  project if I click on log out you could see it   is off now now this is the end point so let me  open a new tab Local Host then I'm going to type   in the Swagger so that is the endo and we did not  create this Endo it has been created already by   Microsoft what we did was to configure it and as  you can see it has shown on the screen very simple   one okay so we have this register we have login we  have refresh token and see we have manage info get   info Etc we're going to focus on the register  and on the login as I said earlier on with a   refresh token system if want us to have a look  with that let me know and I'll have a video done   on that okay let's start with our project and we  first going to create a solution a blank solution   then you're going to add our API our Blazer web  assembly and our C Class Library so let's get this done so let me close this let's create a new project and I'm going to search for just solution and that is a name here blazer.  net8 let me add demo to it so this is the   demo click on create so after creating  this solution we going to add the three   projects let's first add the Blazer  so let's add new project then we   choose Blazer we assembly stand alone and  here we give it a name so this is a bli assembly so Blazer web assembly app and and make   sure the framework here it  is 8.0 let's cck click on create so it is created when you check the  solution it is over here let's add the next   project to the solution and that's going to  be the API so you can click on this filter   now choose this web API last one and ASP net call  Web API so in here we're going to say this is web API now click on next and make sure  you choose the same 8.0 then click on Create and the last one that we need to  add is a C Class Library so right click   on the same solution and now let's add  the next project and this going to be C   Class Library if you're not find that  click on this and go for library and   it's over here as a library C so click on  this let's give it a name as Shar Library all right so we have this click  on next and the same framework 8.0 created so we have those projects created now  let's have a look go to solution and we have   them here so this are the project the API is over  here the library is over here and now there is the   app for the Blazer web assembly now let's link  them so you know for the normal Blazer project   for Co hosted it's it has access to the um the  shed library and the API has access to the shed   library and now the this the the app as well so  let's add them right click on the API dependencies   add project references and now in here we choose  the two that is the Blazer app and now the class   library and now let's open the class Library it's  not going to add anyone okay so we're going to   add the Blazer app and I going to link it to  the C library so I click on the dependencies   ad project now choose only take note only the  shed Library click on okay and now we are done   now let's make some clean up okay see we have  the default class right here we don't need them   so let's clean only this the C class so there's  a library see had a class one you have to remove   that okay now we are done okay so the normal C  library uh project that is for the um Blazer web   assembly you can see we normally set the API as a  startup project so as a startup project now this   set as a startup you try to run this instead of  launching the Blazer app is going to launch this   API let's have a look this is set as a startup  click on this this run and now let's see what   happen so you can see that instead of running the  the web assembly it is running this API that is   the reason why we need to configure them so it can  run the Blazer App instead of running the API now   let's have a look in order to do that we have to  first tackle so let's close this we have to first   tackle the API by installing a package known as  microsoft. aspet call. component. web assembly.   server okay so let's install that package to the  API now let's go to solution we click on this   API dependencies folder and now go to manage n get  packages and I we're going to install that package here so go to the browse Tab and now in here  we're going to type in microsoft. aset cor.   component so I'm going to start from component.  web assembly. server let's get it here so L there   is a the second one so let's install this  to the latest version here is 8.0 click on install apply and I'll accept it so alen that  is all so if you click on update maybe you can   decide to update any of the packages here but  for now this is the only package that we need   to install to make this configuration work okay  so you can actually update this to the the stable   version let's update that as well okay so after  doing this the next thing is to go to solution   now go to the same web API program.cs file and  now in here you're going to add some few settings   in here to make this work so first be before  or yeah before the app. build we need to add   builder. services. add controller with views so  Builder do services so add controller with views   this is what we need to add and also let's add  razor pages so Builder do services. add razor pages okay so you have the razor Pages here  let's this razor Pages let's add them okay   come to where we have the pipeline and after the  app used you right let's add this pipeline. use   web assembly um debugging so we assembly this  and now after they use HTTP redirections here   we need to add the same pipeline so app.  use then we're going for Blazer framework   files so we have to include this and also  we have to um we have map controllers so   we have to do that so app do map controlls  let's also register this Pipeline and so we   have the controllers even here already and  let's have app dot map F back so fall back   to file let's use this one and uh in this  file what is the file name that's an index. hcml okay so index all right after doing  this there's only one thing left so let's   close this save that and let's go to  the controller that's the properties   folder Lun settings and in here you want  to change this this route right you see   it is launching from the Swagger you want to  launch through the application that's a Blazer app so we are going to replace this that is a  Lun URL you're going to replace it with this   and let's replace all and let's have a look  with the last one here so if you're asking   yourself where you're going to find this  is when you create any net7 um is it web   API project you're going to have no that's  a Blazer web assembly project for the net   co-hosted you're going to have access to this  in SP URI you can just go in there and then   copy it and then paste it here okay now um let's  save this and let's build the application so we   can run it and see if it's going to run the  swaga or it's going to run the the Blazer app   right click let's build the solution so build  are seeded now let's run it again and see the outcome okay so you can see it is  not ready but it seems like some   of the fs are noted correctly we have  the app Blazer app um loaded in here   we not having the the nice look  up as we know let's check it and see so when you check this program CS that's for  the server after this blizzard framework files   let's add app. static file so you can just get the  the files or the service from this index. HTML so app.use static files so use static files okay now I believe the problem  is solved now so let's try to reload   this project all right so now  the app is loading now let's see okay so we have it set now we' able to  configure our the blaz assembly costep   project and the next one here is to let's talk  about how to create the default authentication   endpoint in the API so by doing this to  we need to install some packages and you   know since you're going to have access  to datab base we have to install our EF   our SQL server and um the tools right  package so let's install that yeah now   let's go to the solution we click on the  same web API dependencies and I add we get packages so click on the browse Tab and now  in here we need to install empty framework call so this is the framework call we  install this 8.0 as you can see install   that we have to install tools and the SQL so  accept this and I see have this the tools so   also install the tools and after that  you have to install um the as net cor   identity. n framework core okay so this also  apply that accept it okay now now this has   been installed we go to this and microsoft.  asp net. identity. call we have to install   this package to so apply accept it and we go  to this SQL Server so let's install the SQL Server so the last package here is for us to able  to have authentication system to add the token to   our header to test this in the API or the swaga  let's have install let's install this package   and that is a SWAT back. aspet cod. filters okay  so let's have aset call. fil T so let's search   for that and that is this one so install this  package too this for testing purpose right so install so after successfully installing this packages  let's go to the solution and we are still working   in the API so make sure you have that solution  opened the next one is let's let's close this   the web app okay that's for the Blazer right click  on solution Solution that's a web API let's add   the folder known as data and now in here we need  to add our appdb contest class that's going to   be contest class so we can give it any name  that you want but I'll say this is a context class and now within that context class we  are going to use this identity DB contest so and just replace this this one so you can  see we are Hing from this identi DB contest and   um there's a one that we used to know okay now  after doing this we are not creating any model   all the model is coming from this that from  the app user so we have the model from this   identi B contest what you need to do here  is to register this or create a connection   string in the upsetting. Json so click on this  upsetting. Json and now in that we need to specify   our database connection string in there now the  connection string here is going to have a simple one so on top here we can just have something  like this and the name here it is a default   connection that we are using the server is a  local host and now this is the the identity   DB okay so I have that database already  so let me make it identi DB and we also   added to make the connection work okay  so we have this set let's save that and   the next thing to do is we have to register  the connection string in the program.cs file   so in here let's make this connection  string registered and let's go to the program so before the build in here let's have  this so take note we have this build. services.   add controllers then we have build serv. add  DB contest and you have ADD DB contest that's   the class that we created we use an SQL server  and now you specify connection string name aside   from that we need to add the settings for the  authentication and you know this is a default   one so we making the configuration we have to  register the service for authentication and I add   API endpoint which inheriting from this identity  DB identity user okay for the model okay and we   have our adworks for this AB Contex class that we  created in here which contains our configuration   settings and the database name and Etc okay aside  from that let's specify the filter so you know we   want the Swagger to be able to accept a token so  in doing that we have to specify or passing some   parameters to the Swagger gen we have the swager  Gen here already so we can remove this and we are   specifying some settings in here so we want to  um accept um authorization so you're going to   have a session known as authorization and the  type is going to be an API key yeah so that is   what it's going to do okay so we have to specify  this aside from this let's map the identity API   and we can do that down here where we have this  pipeline configuration so let's say it is an app. map so map identity a pi and I in here we  specifying identity um user so identity   user and that is a default one so here we  are not doing we not customizing this okay   so this is a default one we have to  map it as you've seen here okay now   after doing this the next thing to do here  is we going to build this project and now   perform database migration I think all set  so let's save everything and build it this project all right so this is now built  successfully what we're going to do next   year is to perform database migration so we have  to choose you know the API is set as a default set   project already click on the package manager  console and now in here make sure you choose   the API set and let's have ADD migration so add  migration give it a name name as first as usual   that's what I normally use but you can change  it to any name that you want now just going to   build this application going to build this project  then after that you're going to perform database   migration now this is going to create a migration  file whereby going to have access you all the   tables and the columns in that yes and that's what  we have here okay it is coming from the Iden class   thatb contest class that we inherited from okay  now let's update the database table so update database and now let's wait this going to  run or put the class here into an actual   thing it's going to make it created as a table  and the following column names but you see we   have all the time we have this we can just  shut this down go to the project solution   and now where we have this API click on it and  our project setting set this to false invariant   globalization set this to force and it's going  to close it so let's see now let's go back back   again here and let's try to have the same update  database now let's see if it's going to pop up or not all right so you can see we have  it done is being created okay so what   we're going to do here is let's try  to run this application and navigate   to the swaga and see if going to have  access to the endpoint all right so   let's navigate to the endpoint and see if  it's working now slash you can specify in swaga now let's see if we're going to have  access to the endo and this is going to give   us all the apis here so you can see have all  API and that is a filter that we did you see   we have this and and we can make a configuration  by clicking on this and I specify our bar token   and over here so default you can just try this  by creating an application isn't application   creating an account right now let's try this  out and now the email so let's say admin at123 oh so let's say this the gmail.com and now the pass password  here it is admin at1 123 so admin at1 123 let's just copy only this one for the login   click on this let's register let's see  if this going to create an account for us so let's check all right so see we have the  status code of 200 meaning everything is working   now let's log in and see if we going to have  access to the token and then the refresh token   as well so try this out and now in here where we  have the password and the email we have to copy   that to paste our new one and now let's execute  it and see what we're going to have yeah so you   have a token the type here is a bearer you have  assess token this is expired time and this is a   refresh token okay so now we're going to create  an a Blazer client to consume this API so here   too we've achieved the second objectives that  is creating or configuring the API endpoint the   last one is how to um consume this API in  the Blazer app let's have a look with that two so let's close this application  and now we can just close these tabs so when you check the solution  Explorer we we now have this API so   we are done with that you can close this  API and now let's go to the shared Library   that's where we're going to have all our  um model in so let's create a folder in   the shared uh projects and let's name this  as models that's we're going to organize   all our models for the consumption now let's  okay so let me add s let me make it as modos now let's create our login model  so add a class and this is login   user and let's have another class as register user so this is register user let's have a login response so there is login response now this  login response with returning the   token this return the token okay  so l in um response click on ADD   now let's fill them up so in the  login user we need to have just two properties so Lo login user we can just make  this as record and now let's go to the login so   let's have a look here can see we have the email  and the password that is what the the endpoint   need email and password that's all when you go to  register it also needs the same email and password   so that is the default one right so we have it  set let's copy this and we can just put them here now after doing is the response we want to  have access to maybe the login response token and   now the token type okay for now we can have access  to the refresh token but we not adding a refresh   token today you're not doing that today if you  want me to do that you can let me know but let's   have a look on the token type and now the the  access token that is what we want to have access   to but we can retrieve we can retrieve everything  after um user logs in and let's let's get it okay so we have the token type we have  assess token you see we have a refresh token   and that's that login response okay so these  are the models that we will need now we also   need one thing um to make it store in the local  story because you're going to use local story to   catch or to store the token and everything  in the lookout to the browser so maybe you   don't want to use this login response you  want to use another model and let's have   a look this is the authentication model so  let's make this specific to the class here   that's the project okay we don't want to  put it here because if a model within this   shared project it can be used in the API this  class that you're going to create here it is   limited to the client so let's have a folder  created let's name this as Authentication and let's create a model here as authentication model so autentication model and  in that we want to have access to Let's store the okay let me clear this let's  store the token the refresh token and now the username so let's clean up okay after doing this in order for  us to use the Blazer local storage   and also the authentication State provider  we have to install the packages so let's   install them right click on the client  server dependencies and I'll add new   get package page of man new get packages  so click on the browse Tab and now you   can now search for bler local storage penti so  let's wait for this search then we install the package after this we need to install microsoft.   aspet call. component. authorization  so I just have to type P component. authorization so that is this one let's install  this as well and the version here it is a 8.0 take note all right so we are set so we're going  to create the next one is to create our   authentication State provider and this going to  be the custom one so let's go to the same folder   authentication folder let's add a class the name  of this class is going to be custom authentication   State provider click on okay now this class  is going to inherit from this authentication   State provider class and you can see it is coming  out from the comp that we installed right click   on this and we can just implement the abstract  class that is a get authentication State async   now we create an anonymous principal that's going  to be the the default one in case everything or   user is not registered this is what you want  to display as a minous you see we are passing   the claim Iden as empty then let's inject our I  local storage so we can retrieve the data from   the local storage all right so let's put it let's  generate Constructor for this so you can just typ   CT o r type in that click on enter and I have  it here so let's pass in let's inject this is   because we've injected this one over here it's  means we have to register this in the program.   Cs file right so control period let's do that so  here let's create an assigned fied so we have this   set okay now let's try to get the data from the  authentication State provider so we going to get   the user credentials from the API not the API the  local storage right so before we do that I want   us to have some separate method in here and that  is what you're going to be using so down here we   are going to re create a claims principal so  set claims we're going to accept then email   because here the claim we have only one claim  and that's going to be the email because during   the registration we have to send only our email  so that's going to be the claim right so there's   no roof in this it is only the authentication  system so we have our email over here that's   going to be our username name so we create a new  claim principal then it has a parameter known as   a claim identity which contains a list of claim  so here we are passing only one claim and that's   the claim types of what name maybe I can just  put this in the normal format so you can see   everything so in here let's see what this I can do  let me put this here okay I think this what I can do okay so we have this control KD so these are  we have only one claim here and now this here we   are visualizing this you know it is the output  of the end point is going to be serialized so we   have to serialize it and in order for us to set  this into the local storage you know we going to   set a model and in order to convert model or to  set save model into local storage local storage   does not accept objects so we need toize it and  form it as a string so that is what we're going   to use this to do so we're going to form it  as a string with this are rning a string we   take in the model here then weize it and now  here as soon as we accept the model we want to   now reconvert it so it's a conversion and our  what Rec conversion so we convert it to realiz   as a string then I Recon convert from a string  to object so that's what these two method are   doing here so we're visualizing it we passing  the object or the model and now here the mod is   the payload and now we passing the model here  visualize it and I'm going to return a string   so here you're going to receive the string thisiz  it and I return the model okay so we're going to   use this uh three method here now in for this get  authentication State we have to have a method so   we can retrieve the data from the local storage  and I'll check if you have credentials stored   in there so this is what you're going to use we  are saying that authentication let's make this as async okay so we say local storage. getet item  that is the name that you're given for loc   storage and I will check if it is now then return  Anonymous it mean user is not registered or logged   in if it is not the return authentication State  set the claim here and and this claim needs what   an email but this email is not an encrypted one  so it must be the normal one so we have to disiz   this authenication model and now we have access  to it type as name here the loc stage section   is going to come out as what as a calized object  so in order to pass the email you have toize it   right here and I extract the name property and  then pass on to this set claim method and that   this says claim method and this is returning  just a claim principal so at the end you're   going to have a claim principal in here now um  so this what this is going to check so here it   is just retrieving the the token from the local  storage how do we set the token let's have this   method to set the token or to remove the token  when the user tries to log out now you put it   here we have this tax update authentication  State and it is is accepting an authentication   model now this model compris of when if I let  me peep this here so pick the definition and T   this token refresh token and the username so if  this is null then we want to remove the it means   that user has now logged out as soon as user logs  out you want to call this method and pass in null   here as soon as this is now it's going to remove  this from the local storage and now set the claim   principal to Anonymous and it's going to call  this um notifi authentication State change and   to reender application and now remove the user or  hide all the settings for the application system   okay so that's what we doing now if it is not now  then this what we doing you're going to also set   a claim principle and you see we have an instance  here so we call this claim principal passing the   username and here the username it is the email  address and now we're going to set this local   storage so this is the the one coming in here  authentication model it is just a raw model and   now before we set to local St you have toize it so  weize it then we set it to local storage so this   method is going to set the token to local storage  and now this method is going to retrieve the token   from local storage all right and each is taken and  now I'm calling this notify authentication State   change to get the account um change or get app  render okay so we have this set in here now the   next thing to do is you have to register this um  custom authentication state in the program so go   to solution and inside the same client section  the program. Cs file we have to register them here so in here we register them we first have  to add this authorization call then we scope   authentication State provider then provide our  custom authentication State provider Cloud that   we created aside from that we need to also add  a bz local storage so let's also add it okay now   let's create our component that's the login and  the the register component okay so we can do that   let's go to solution so you can see we have this  page and let's create this login component here so   what I'm going to do here is I have this I'm going  to just paste this login component now this login   page this what it has the route here it is login  and we see we are injecting this authentication   State provider on top we inject this navigation um  manager and this HTTP client over here so control   period let's include the references okay now um  what is this is just an edit form that we are   creating it has this login user and this is the  method when it is being invoked or called now we   have this to display if there's any message for  an error sake and we have we are buying this as   email then we buying this as s password we have a  button known as login and the type here is submit   now if you check this we have this login user so  let's inject this model that's login user when   this button is clicked we set the message initial  to empty we check we make a post HTTP client to   a post as jyn the route here it is login when you  check the route the API the swager we have a login   so there's a route over here then we specify  our model this login comprise of or contains   only the email and the password now we check if  it is not successful then we can return this but   in case it is successful then you want to read  the content over here in the form of the login   response remember that login response compris of  the let's check it has the token type the assets   token and the refresh token and that is what it's  going to receive from the API as a response so   in the response we have the asset token and all  all the stuffs in here okay we have it here now   we are checking if the asset token is null then  return but here it it won't be null because user   has registered inste but for let's have to check  that for a good practice and here this what you're   going so after we've retrieved the assess token  we want to we have created or injected the HTTP   client here so this what you're doing you're going  to pass the asset token to the header of this HTTP   client instance that you have injected and that's  a way to set it so see we have the bar token and   now we want to set the token the resource. access  token take note we not using the referesh token we   need to use the asset token and that is what we  set over here now in order to get the user email   this asset token doesn't come with the user  email so we have to call this endpoint info   to get the user email okay so we call this and I  we also check if it is not success return but in   case it's successful then we can now create this  user details over here then we can read from the   we read from the response so content. read from  Json Inc and now this maybe this is coming from   the user details right so we have to create  a US details class we forgot to do that let's   quickly create that model this user details has  to come in with um email and it's email confirmed   if you want to know where these properties  are coming from let's let me just comment this now let's find this application and now  let's check the swaga endpoint and I see the   the results so based on the output we also  formulate our input here so let's navigate   to the Swagger endpoint so SL swaga  and now let's log in here and see we   have registered already so try this out  now let's log in so it's admin at gmail and now the password Here is admin at1 123 okay so let's log in no this is wrong it's admin okay so and this also wrong okay so we have our token  now let's grab this token here let's copy this now can see we have an API  endpoint here known as manage info if I click on   try this out it needs a token to verify we see  we have 401 so let's authenticate this authorize   this and at the time here it is barer and I  give space and I'll paste the token in here   click on authorize then let's close it now let's  go then and I'm try to call this method and see   what we have so when execute it you see we have  email and it's confirmed email so it is going to   come in an app as an adjacent format so you  need to also retrieve it you must have the   same property like this to retrieve it and that's  the reason why we are creating this user details class we create the user details class here so  let's close this and in the solution the same   shed or we can put it in here anywhere that  we can put that but since this only the app   going to use it you can also put it inside this  authentication folder so click on class and now   in here user details let's add that and this is  going to contain only two properties as you know   and that's going to be the email and it's email  confirmed although we are not going to use this   for now but let's retrieve it for sake and let's  use the email string here okay so when you go back   to the login um component now control KU U and  comment it so you can see from here that we want   to retrieve because the output of this route is  going to return just an email and is email confirm   that's a Boolean expression so let's include this  and after we retrieve that we create an instance   of this authentication model and you know this  model comprise of the token the referesh token   and the bar token type so we set them over here  as you can see we are populating them so we can   do something like this to make it short okay so  we are populating it as you can see from here now   after doing that we are calling this update method  in the custom authentication State provider then   we pass in the data that we've collected over here  we pass in as soon as this gets to that um section   it's going to set it as a claims to the header  it's going to set as a claim then after doing all   the steps it's going to notify authentication  State change so this app can just get   rendered right they're going to have the app in  authentication State mode okay after that you're   navigating to this login page this is the home  page right so maybe you can decide to remove this   we navigate to this and here we need not to even  false reload because the method that we invoked at   the custom upate is going to reload the app so we  need not to reload the app it's going to work okay   now that's for the login now let's see let's try  this login and see so let's run this and before   we do that maybe we can have access to let's go  to this to have the login section um let's go to   the layout and we have this main layout So within  that main lay out I want us to use this authorized   features over here so let me just grab this from  here and now where we have this let's remove this   we want to display authorized r view in case  you're authorized then we want to display um   this if you're not then want to display this so  can see if you're authorized you want to display   this your name and under the log out button if you  are not then display this but as soon as you click   on log out then you want to call the update method  in the custom orate and now specify null into this   update authenication State method so here let's  inject the reference and nav manager to we have   to include this's navigation manager as well so  here let's inject the navigation manager and the   authentication State provider okay so this  is set let's save this and now let's run the application the app is ready but we are having  an error here and I think I know the problem we   have to include cascading parameter on top of the  app. Razer so in here let's go to this app. Razer   now here you have to specify this cascading um  parameter here so cascading you need to include this then we can we can just remove  all this and now add it as a name space then cut this the outer  layer and I'll close it over   here now let's save this and I think let's reender okay so the app is ready now let's let's check  it out so you see we have this login we have   this register for now we haven't created the  register yet we have only the login so click   on the login see we have our form let's  specify the email that we use so admin at   gmail.com and now let's password is admin at1  two3 I hope you remember that click on login   and now let's see so as soon as we are loging  in it's going to call the method known as the   update authentication State and you see has  been updated now you can see we have it set   over here if I click on log out it's going  to remove it and you can see we have this   log out okay now let's have a look let's try  to customize this using this authorized view   to see if if I click on login and I log in I'm  going to see some features in and click out to   I'm going to see some features as well but for  now if I click on weather forecast you will see   I'm able to have this weather forecast  why let's click on this go to inspect element and now let's Che the header  so click on home go to console Network tab now let's click on weather forecast we have  the endpoint code so you can see from here that   it is it is calling this a file but when you  check the header you you see the header has   been you have authorization header set over here  so this what you're going to do next let's go to   the solution now you're going to move this from  the API so this is an API you're going to close this and now you can see in the API we have our  uh weather forecast class here we want to move   this weather forecast class to the shared folder  that's the modos because it's going to be used by   both the client and the server so from this let's  change this to demo so this is a demo the name of   fire is demo let's let's grab the name well from  any of the class here so we have this a demo and Dot it is coming from the shared Library okay then it's coming from model folder  so we see from here that we have from the Shar   Library this is a Shar one and we have model  okay so there is the name space then let's go   to the this one the weather forecast class in  the API we can just delete that let's go to the   same one in the client section that's the app  and let's go to the weather forecast that's a   weather. Razer you can see here we are making  a call but the call it is not going to it is   going to a static file and this is the method  so we want to remove this because you have the   same class in the shared folder so here control  period we can now use use from the the reference   from the shared project now with this how can we  get the route let's go to the solution and in our   controller you see we have open see we have  WEA forecast controller that is the name we   forecast so let's copy this name and maybe we can  even add an API for slash to this controller name   then in here control period let's also include  the model from the shed let's go to this what.   Razer and now in here let's remove everything  paste this and now it is started from an API   for/ we forecast okay now let's see what we're  going to do next so when we click on log we are   setting this authentication header let's see what  we have this let's close this and open it again   so log in do p. Razer okay so let's have the  let's look at the reason why we have this error here all right so let's see um let's remove this  and now from this class cont period we can include   the model and now when you go to this weather  forecast supposed to be share do modos not the   project name all right so we have this set and  now uh so once you have this already you can see   that when we check this we are adding the token  to the authentication header here so this what   you're going to do next let's say after we log  in right this going to log in we populate this   and I'll send it to this method but we are not  set as authentication header so let's command   this let's save now let's run it and see as  soon as we click on the button we're going to   have 401 not allowed because that method the  weather forecast needs to be authenticated   before you can have access to that but before we  do that when you come back to you so let's remove this let's remove this from the  name space and supposed to be do modos let's let me remove everything here  and now control period let's include the   new name space and from the API this  so let's set this as authorized let's   protect this so passing this authorized  attribute that's all now let's findun this application okay so we are in now now  I am not logged in so if I click on um   wether forecast you can see we have this  error if I right click and I go to inspect   element we're going to have 401 meaning not  authorized so let's check from the console   and we see it is saying something D 41  not authorized maybe let's reload this page now let's log in so you can see that we are not able to log  in here because we are calling the method and   our application depends on that method to get  the claim so when we check this you can see   that here we need to call this method here and  on this method it is protected so we need to   have a header right and that is what this is not  working so as soon as you have the header here we   going to have access to this info then we can  now have access to the claim and the username   and we can now authenticate the user properly  now let's see so let's refresh this again and   see what I'm talking about all right so this open  now let's log in so specify the credentials click   on login and now let's wait for the login to  be done after doing this is then we are going   to um call this API so right click on this go  to inspect element and let's click on network   tab so click on this plus sign go to no this  Arrow sign go to network and I see from here   if I click on where forast see what happen I  have the data click on this end point and I   can see we have this the token set over here  for the authorization we have it set because   when check the login as soon as you retrieve  the token we are setting it to the header of   this HTTP client okay so now we have this set and  done let's go to this the nav menu that is that's   going to be the layout and I did na menu I want  us to just add the authorized View Property over   there so we can see if the page gets reloaded or  rended and display some content and hide address   so let's go to this nav menu now from here  maybe let's copy this let's paste this one so   we see here we using this authorized attribute  and if you're authorized you want to see this   counter that is when you're not authorized but if  you're authorized then see this weather forecast   because this weather forecast you need to be  authorized before you can see that let's remove this and now let's save this then  let's see so let's rebild this application all right so you can see that  as soon as we are loging we can see this   weather forast and I click on this and let's  see Al we are loging here but let's check it   out okay so we see we not having this  thebr token here so L log out let's log in reload this let's let's log in and now let's call this  weather forecast now you can see we have it now   can see when we check the network tab where  forecast we have the token over here okay so   everything is working and we able you consume  it the last section here or the portion it is a   log out no that is the the register so register  is very simple we have to create this register   component you go to solution and the same Pages we  can just space a register here and it's the same   thing you know reg registration has to do with  the email address and now the password isn't it so   handle register we call our register model and we  have to include our authentication state provider   reference and we have a navigation manager also on  top injected okay now when we count down here this   a register user so let's include the the reference  or the name space to this model control period And   now when this button is clicked we push it to this  end point and now if it is access we return to the   login but if it is not then display this error  okay okay so let's see this let's reload this page now let's click on log out and let's  click on register so we in the register   page home so you can see we have please login  we can change that quick and please register   there simple okay we can save that and I think  for H reload we have to get it refreshed Maybe   can leave like that so that's for the register  yeah it is here now let's put another so let's   say user at gmail.com now the password we  have user at1 23 so click on so maybe you   can include the mechanism to check password  confirmation and Etc right but this is just   a registration so this is what the API needs  to get the account registered so that's what   we are doing okay so let's see if this button is  is going to be registered the API is going to be called yeah so you can see we have it set  and it is called now this is the login so   let's try log in and see so log in this and  let's say if we're going to have this user at   gmail.com that we use yes so we are in you see  we have this we if I click on WE forecast you   can see we have the data in here but this data  or this token has an expired date and um when   it expired you need to call for referesh token  I'm not going to implement this this video is   is at least it's okay for now because we spend  yeah some time we want to maintain uh stop here   and maybe if you want me to add the refresh  token to let me know and I'll do a separate   video as they stop up to add the refresh  token all right so um alen that's it thank   you so much for watching this video I believe  you guys are okay with it and we've covered all   the objectives isn't it we able to configure  the web assembly call State um project we Mo   to also configure the default authentication  endpoint and you've consumed the endpoint in   our Blazer application yes so thank you and  I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 4,476

Keywords: .NET Core 8, Authentication API, Blazor WebAssembly, Security, Web Development, C#, Visual Studio, Microsoft, Unlocking Security, Consume Authentication API, Security Tutorial, API Integration, Web App Security, .NET Security, WebAssembly Projects, Blazor Authentication, Secure Web Apps, .NET Core Features, Authentication Best Practices, Web App Development, Security Implementation

Id: -6ysscSz9Hk

Length: 62min 49sec (3769 seconds)

Published: Thu Nov 16 2023