Mastering .NET 8 Blazor Cookie🍪 Authentication : Unlock Secrets with .NET Core Web API Endpoint! 🔐🚀

Hello friends and everyone you're welcome back to  net code Hub channel I am Frederick and in this   video we're going to talk about authentication  in Blazer web assembly using cookie in.net 8 web   endpoint this endpoint it is an optin a default  one created by the asp.net team it allows us   to have access to all kinds of authentication  from register to login to um refresh token and   Etc I've made a several videos concerning showing  how to use the assess token that is a be type now   this video we're going to talk about how to use  the cookie cookie authentication so let's have a   look before we jump into that please make sure you  subscribe to the channel and also hit on that Bell   so you won't miss any of our upcoming content if  you enjoy what you're going to see today please   don't forget to also give this video a thumbs  up it really help this channel grow I offer   coaching session or training for beginners who  are interested in netblazer server Blazer assembly   netar and Mari Blazer hybrid check the video  description and I have the I have an email that   they can write um through it also when you're  done with this project I'm going to leave the   source code at get up check the video description  and I'm going to leave it over there other videos   that I have done based on net AG authentication to  I will put the link under the video description so   you can just go in there and now check it out now  let's jump right into the project we're going to   create a web API project we're going to configure  it you're going to create our web assembly and try   to configure and connect it then boom you are  done it's very simple steps so let's let's get ahead so we're going to create a project  and first of all let's create our web   API project so click on the create new  project by launching the visual studio   2022 preview and we're going to  choose web API and I name here   it is net8 Cookie authentication in  Blazer wasm so let me add solution to this so let's let's get it created and now  the framework here is 8.0 so get it created   so while this is created let's install our n  get packages as usual so we go to solution I   just have to unload the project then I will  just paste these packages in here where we   have this item group so we are installing this  microsoft. ASP netore identity. EF cor we have   the EF cor here we have the SQL Server now  the tools these are the packages that we   need for API to work to able to provide  us with the quickie so right click on this and I go for reload project with dependencies  so it's going to update this project now when we   I click on dependences and I go to manage new  get packages you can also install them here but   once you've done this it's going to update  it and we're going to have the packages in here okay so we have them now let's  check it out and see so you see we   have this project package installed we have  EF SQL ser and also the tools right so these   are the packages that we want we can even  update them you you want to do that let's   see we can update them here but don't worry  let's maintain what we have okay so once we   are done with this the next to do here  is make some configuration but before   that we're going to create our appdb contest  class or our contest class so let's create a class and let's name this as contest class or upd contest so in that class we are going to inh  from this identity DB contest and we create a   Constructor passing the appdb contest class  and now this is coming from the EF core the   framework call package that we installed that is  where we can have this from okay so once you are   done with this the next that we can do here is  we are going to register connection string in   the program. Cs file all right so we need to  use the EF call as well okay so we save this   let's go to solution now click on program.cs  file and in that we are going to specify food   staffs in there the first thing that we need is  our appdb connection so before we create put it   here we have to create our connection string  the name here it is a default connection we   are using an SQL Server so let's navigate to  this up setting. Json and let's create our   connection string over there so upsetting. Jon  and on here we can specify connection string the   name is default connection the database  here it is demo let make a demo identity so let me see let me add cookie to it to become  identifiable okay so now we have it set and that's   a database we have it set make sure you put this  comma over here it's very important now once you   have done you go back again and now once we have  this connection string being registered what we   can do again is we need to register the service  for cookie so we add this add authentication we   passing identity Conant application scheme then  in here we can even put this on the same line   or we can even put it in the next line add  identity key this is very important then add   authorization Builder so you make sure all these  Mas can before this builder. build up right and   aside from that let's have our last one that is  our services so in here before or the last part   here let's add this let me actually give space so  we adding identity store and now we this inbuilt   identity user which comprise of the email and  now the ID so we need the email here for the   claim and we have this framework stop by using  this um abdb contest class that we've created   we're going to also configure our endpoint so  we can have access to um register and other   end points okay now once you are done with this  we go to the where we we going to have the PIP   planine and down here we have to use map identity  to this identity user so that's the model that we   have inbuilt model so we have it set what we're  going to do next is just save the application   save it and now let's build this project again  after that you're going to perform database migration before we provide database migration  let's go to the project settings here and I'll   set this to force because I know definitely  we're going to have an issue with that okay so   let's put it to off now let's add the migration  to this project so add that migration give it a   name I like using first oh wrongly spelled as  you can see Dem migration so that is an add migration and that is first when  this is done we going to update it so update database and it's going to run all our um migration file   here to create a table and on  the various um columns in the tables so now this is done let's  run this application and see the end point yeah so that's our end point as you  can see we have the register the login   refresh token and Etc we're going to focus  on the register and the login okay so here   this is that's not support token this is for  cookie um token or cookie right authentication   now let's register this and see so try  this out now let's pass in the name as admin a gmail.com and unless have a password over here so you can just copy this for authentication  now click on execute and now let's see the   response when we have Response Code of 200 it  means it's working and that's what we have so   let's go in there and I'll log in so when we click  on this login and I click on try this out we are   going to paste this in here so we have our email  and password and I'll check this use Quicky so   going to set this to true because you want to  use here and it's a query over here so it's a   query parameter so let's click on login execute  and now once you are done you can see we have a   response code of 200 nothing happens we have the r  as usey right click on this go to inspect element   and now let's see so let's go to the application  section now click on cookie next we have a look at   Port here and I see we have the cookie set over  here so this cookie has been set so it has been   set by the server to the the browser cookie  storage so any request that going to be made   here is going to add a cookie we haven't added  anything to the header but let's see so let's   close this now let's go to this session where we  have this manage info right click on this let's   go to inspect element again and now let's check  so I'm going to minimize this so let me resize this maybe we have this here okay now if I click  on this get info let's click on the network tab   now see what going to happen get manage info and  I let see a call be made and un let let's check   if you're going to have access to the cookie  at the header so there's an info 200 status   meaning it's successful now click on this and I  can see we have cookie so you can see the cookie   has been set automatically as soon as we log in  cookie set automatically unlik the JWT whereby   you have to add to the header of the client now  the server controls your quickie as soon as you   log in it gives you the cookie it set it up to  the browser for you and any request that you're   going to do here is going to be attached  this going to be attached to it now how   do you consume this cookie in blaz web assembly  that is the next thing that we're going to talk about so let me let's close this and we're going to close everything  from here so the next thing to do is we   going to add the Blazer Standalone project  so we I click on the solution click on add   new project then Blazer assembly  stand alone let's put on to that   and now here that is going to be Blazer  wasm so let's click on next we choose   the same framework of seven 8.0 sorry not  seven is eight take note and let's click on create so with this there's also a package  that we need to install and now let's go to   I'll just have to unload the project and  I'll paste the reference in here and it   is just microsoft. espet cod. component.  authorization so we can have access to   cascading authentication you can have access  to all those uh um boys okay you're going to   have access to them now let's let's save this and  now in here right click and now load project with dependencies so this is done um let's see when  you go to the same project that for Blazer wasm   and check the packages we see we have it over  stored in here the next to do here is we're   going to create a connection we're going to  enable C between the API and on the client   so they can communicate so let's first tackle  with the API so let's go to program.cs file in   the API and now in that we are going to create  adore so builder. services. addore we can put it here so let's put it here and we are asking bet  services. add call then option. add policy we are   specifying the name over here so allow specific  Origins and now with this we can set up the origin   on top you can create it you can store it so maybe  next time if you want to use it it becomes very   easy for us to use and that is what we have here  so we have the name and we using using the name   over here we are going to set this origin to the  port and also um this to we're going to allow any   heer any method and also credentials okay so  we have to allow these attribute in here now   here we need to specify this is the server so we  are referring to the Blazer the client now what   is the port for the client we're going to handle  that later on but don't worry let's go to the same   thing applies to the program. CSF for the client  and now in that let's navigate to that page or   that file so solution you go to the wasm and now  program.cs we have this to the Base address so we   don't want to do that you want to replace it with  the current one now this also is for the API now   to get the API Port we can just navigate to the  solution the API now we have the properties and   we can have access to the Lun settings SE the  atps and you can see this a 1795 so let's grab this so 1795 let's navigate and  I'll change this to 1795 okay to   get the Wasim let's set and run  this app so we can have access to that the app is ready and you can see  it is 7194 so let's grab this that is   the only thing that we need so let's  put it to them now we go back again   to where we have so this is going to be  the API 1795 we go to the API and now it is 7194 so you P it in here and that is it so  we've able to added the the cost now the next   thing to do here is you're going to create  our All State that's authentication State   Provider by this time around I'm going to  name it as cookie orate provider okay so   let's create a folder to the client  section and we're going to add as authentication and now within  that you're going to create a class so the name of this class that's a cookie  authentication provider now I know this inherit   from this authentication State we have an inbi  method that we can Implement as an abart class   that is this so in here we are going to inject our  HTTP client so on top here we create a Constructor   and I inject our HTTP client in here we initialize  it uh perfectly the next we going to do here is we   going to create an instance of the claim principal  then we're going to call an end point to c so we   create a claim principal here and we pass this  as no identity so this is as soon as you call   this it me noos then here we making a request  to so with this let's make this as an async first so I can see from here that we are making a  request or a guest here to this manage info so you   can see when you run a API we able to have access  to this manage info so if you log in the server   is going to set the cie to our browser straight  for us so as soon as you call this by by then   our cookie is already in the in the section then  we can now make um inclusion to that cookie now   this here it is including the browser or the  cookie credential okay so remember that when   you check this program.cs file in the server we  added allow credentials so mostly it's it's good   to actually include it in here maybe in case a  browser forget to even include that you tell a   browser hey include the credentials to the um the  endpoint that you're going to fetch now we we we   send it then we check if the status code is within  the the success code then we are going to read our   string so when you read our string it is going  to return a user info user info is an email okay   so normally in case you have multiple properties  that you want to um return you have user info here   so this must be a class that we have to create  so let's let's create that class and user info   contains only one property so let's put it here  as add a new class user info and now with this we   have just one property in as email so we're going  to retrieve the email let's save that so we're   going to retrieve the email here so we see from  this that we are using this Json cizer options   property name can if you want to skip that we set  us to through okay so maybe this is capital E that   one is small e that's a small e that's a lower  an upper case you want to skip that as far as   the name matches um we want to get it set now we  check um if the E info it is not all then we are   checking here you see we are repeating the same  thing claim time. name and email we are setting   it to the email because you have only one claim  from this endpoint that we created or we called   that's an opin endpoint from the ESP net team then  we are using it for our claim identity at the end   of day we are going to return Authentication  State we passing the user so user is going to   assign we're going to assign this and start it  over here as an ID so when you call this user   user is also assigned to the ID so definitely the  user here going to contain all the claims set in   here but in case it is null then the user set here  default is anonos then you're going to return it   as anos now the next thing to do here is another  method that you need to create here it is to log   in so while logging in we have to call the end  point and as soon as we call the end point and   check and validate our token or key as I'm correct  then it's going to set to our client hether and   that will give us the access to call this again  now let's have a look so the first time that the   page loads this when you call this going to have  the the status will be success so it's going to   return Anonymous meaning you're authenticated but  soon as you log in you're going to authenticated   and I going to call this again so at the end of  the login section you're going to call this method   again let's have a look so with that that we can  create a simple method here to handle that so we   have within the there is a get authentication  State async and aside from that we can add this   method that is a login and now get authentication  State we need our login model and you know our   login model comprise of the email and password  based on the endpoint that we have if you if you   are confused let me run the end point for us to  see what we have there is an end point so thebag   there start with that debugging now let's wait and  see the end point and also the return type of the cookie so check up here there's a post now if I  click on this for the login this is what we need   we need the email and the password so that's  the login email right you need the email and   password okay now if you check our manage info it  is returning only an email and is email confirmed   so this is what we need we don't need this  so that's why we created only one property   for that I hope this is clear thank you so now  let's let's get back we're going to create our   model so we put it here in the authentication so  add the class then login model within the login   model what we're going to do here is we're going  to just specify two properties for this login and   we're going to say email and password as you can  see from here we go back to the authentication   State and now we check so here we are just  using um a sample data here okay maybe you   can just create um an test box a form then you  can submit to this but don't worry we're going   to connect this to the home home the home the  index page so maybe when you create a form we   can even call this authentication state in there  and call this specific method to log in this is a   default one that we have okay now when you check  this we are converting this into we are seizing   this into a string then we pass on to this the  method here is post and I'll take note we are   posting to this login use cookie we set this to  through so this is a query string parameter you   to through we set this to through and there is  a Content so this here is a jent Content that   we have stringify and we are send it to this  end point then we make sure we have this so   inclusive check and add the credential and also  send it if it is true if the response here it is   true because the response here is going to be 200  that's okay that is if it works so we check if it   is status code then it means it has worked so what  we're going to do here is you're going to notify   authentication state by calling this method  again so when you call this method again as   soon as this works it's going to set the token  or the cookie to as browser then calling this   method we have the cookie already set we can now  get the info and I'll authenticate ourself and   I'll get the token and and move on with it okay  good so this what we're going to do let's save this after doing this the next thing that you're  going to do here is we have to surround the cascad   authentication in the app. Razer so the routing  let me just grab this right ahead is the same   thing so we go to the app. Razer in our browser is  it in our browser app. raser in our browser okay   that's a rhyme so app. raser in the Visa wasm so  that's a client section then in here we can s it   here so I'm going to just copy this and I surround  it with a cascading authentication um State okay   now let's navigate to the the weather forecast so  this is the weather forecast for default one and   in our Pages where wether forecast so here  instead of getting from the hardcoded file   we want to get from the API okay so from the  API we are going to check let's first inject   we have this HTP client here injected but I  like to rename to this HTTP client then what   we're going to do next here is in the code  section when the page initializes maybe we   can just call this method to get the API to get  the weather forecast so as the page initializes   we are going to call that but in order to call  that you see we are calling a method in here the   request message here the type here is get that is  the end point if you Che the controller solution   controller open it Whata forecast the name here  is weather forecast and on the route here is the   name of the weather the controller so there's  no API here so we also doing the same there's   no API whether forecast straight ahead and we  have the method known as get remember the the   app to use the credentials from the cookie and  also we sent the if the success is if the status   code is Success then you want to visualize it and  read from the in the string format in an array   then this is the list we Loop through over here  okay so that's all that we are doing let's save   this and also one last thing that we need to do  here is in the homepage that is the index or the   homepage here let's try to add some mechanism  to see whether we authenticated or no we are   not so maybe we're going to have a section our  Pages here we are including this authentication   State provider then we are going to cast it  to the cast cookie authentication State that's   the one that we created and when we do that we  going to have access to this login method here   we are passing in new login model mt1 okay  but this what we going to do let's create   a form simple one simple form for username  and password so we're going to create edit form and now this edit form let's have  it here as login model then we have login model equal to new okay so once you have this  let's save this close this save it again edit   it code all right so we can now close this  let's open this again so we can have it col   one because I hate the black and white all right  so we have this login model control period Let's   see we going to have access to let's use the  login so at using and I think it is demo what   is the name of the project it is Blazer wasm Dot  authentication so we have a login modu over here   now in the edit form can just grab this and we  have our model to this then unvalid or unsubmit   whatever so unsubmit you want to call this login  method so that is this login method then we have   our input you want a input test so ad bind  let's bind the value here then we set this to email okay so the class here  it is form control bootstrap T I   believe you know that then the next one  here it is another we're going to have input then with this input  we're going to have a class so class the same form control and  now let's specify the type here as password and let's have ad bind attribute  here to login model. password okay that's   what we want now let's have this button  inside the form and inste of this click   you're going to remove this and we set type  to submit so this is what we are doing we we   click on rebuild and apply so when this  button is clicked you're going to hit this we have an error here let's check  it out so the name space could not be found all right so here we have  to change the name space it is   not what we use so let's go in there  and I'll check it up Blazer was okay   authentication home then here we are  looking up for this authentication   so it's Blazer Wim authentication yes  so we have it set let's run this and see all right so we having an issue  here and I believe I think I know the   problem let's go to the section in here  and what we're going to do here is we   have to register the authentication State  and also add authorization core service   so let's put it down here so that is it  now let's do it again let's refresh the app now let's go in there and put the break  point you can see we have here you are not   authorized it is coming from the home so you can  see we using this authorized View and in here we   have hello if you're authorized if you're not  authorized you're going to see this and in case   it is authorizing we're going to see that okay  now let's put a break point and see in case we   hit on that this method will be called now when  we check in here let's hit on the login and now   let's see if this will be called okay yeah so it  is hit so we have it all right now when we check   the next thing is when you come to this section  cookie that is the cookie the oate we are setting   up this already so this is what you're going  to do let's close this okay good so we close   it we we comment it so we can have access to the  model in here all right now let's refresh once more so it is ready now in here this what we're  going to do let's run the API to so right click   go to the API I click on it and now debug and go  to start with that debagging and you know that   we created an account known as admin and right  so admin gmail.com and that is the account that   we created so we're going to use that to log in  and see let's open this now right click on this   and go to inspect now let's check with the app  section so here application you can see that   from cookie we have nothing in here right and if  I click on WEA forecast we have an error let's   Che the error up and see what is what entails  and we check here you see it is say it could   not it was blocked and let's see so could not fet  okay so I think it has this core issue let's try   to check it out so 7194 let's check the the end  point again so we check the settings again and   I we have the call set up over there but you see  we did not use the core right right so let's use   it I think that that is the issue we have to use  the call in here so on top of this let's use the   Cod that we have created so let's save this let's  refresh this again and while this runs we're also   going to refresh the API because we've made some  changes in here so solution I click on the API   thebag and I start with the debagging yeah  let's use that so let's wait for them to pop up okay so it is ready now  now I click again and go to inspect and let's Che the console so click on  WE forecast and okay so we have it now why are   we having it because we've registered already so  let's see we go back to the the network section   and you can see we have this that forec if I click  on it let's check it up and see what we have okay   so we are not having the quickie in here but  the question is how come did we um retrieve   that let's say the console all right so when you  get back to the home you're not authorized but we   having access to the weather forecast okay so it  means there is an issue let's check that so you   can see that in here we have a call being made  and the status code is 200 meaning it is working   we did not protect the the weather forecast  end point so we go back to the same settings   solution then we check the controller whether  forecast and in here let's put an authorized   attribute here so let's protect it you can put  it down here on top of this and now this is authorized so control period we need to use that  and we did not specify this model so this is a   login model and instead of passing in we pass in  empty so let's pass this save that reload the page again okay so right click inspect  elements and let's navigate to the   application and now we have a  quickie sessions now let's log in now if I click on log let's wait and see it's  going to call the API good so you can see the API   has now been called in here and this our cookie  which is set in here now we are not handling the   cie is automatically handled by the browser if  I click on WEA forast what going to happen click   on this and we see we have that now let's go  to the network Tab and now check you see other   forecast and see the cookie has been added to the  header automatically because of the the section   that we use in when we configuring that so is  very simple it took about 36 minutes to finish   everything and maybe when you are confing yours  maybe you're going to take less time that is it   for this video I hope you guys enjoyed it so we  can now log in and do all the stuffs in here if   I click on the home you know now we have hello  admin gmail.com so this is our claim you able   to display this on the screen that is it and I'll  leave this source code here at the GitHub you can   just go in there and um clone it if let me also  know your thoughts in case you want you want us   to add something let me also know thank you so  much and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 2,192

Keywords: Blazor, .NET 8, Cookie Authentication, Web API, Authentication Endpoint, .NET Core, Security, Coding, Web Development, Authentication Tutorial, C# Programming, ASP.NET, Identity, Token-based Authentication, JWT, User Authentication, Secure Web Apps, Backend Development, Coding Tips, Software Development, Authorization, Identity Management, Authentication Security, Blazor WebAssembly, .NET Development, Web API Tutorial, Cookie-based Authentication, Code Walkthrough, API Security

Id: 6HGS2z71Ix0

Length: 36min 50sec (2210 seconds)

Published: Wed Nov 22 2023