.NET 8 Core Web API Authentication in Maui App: Effortless User Login & Registration with Tokens! 🚀

Hello friends and everyone you're welcome  back to net code Hub channel I am Frederick   as you know already and I'm happy to meet you  here today in this video we are going to talk   about how to consume net8 core web API default  authentication endpoint in netm application so we   are switching from the web app to the mobile app  I've done a lot of videos using this identity in   web app now we're going to talk about how to  consume this authentication in mobile app as   well and henceforth that is the Mari application  in net 8 ESP team has provided an optin endpoint   which is very easy to configure no controller  creation there's no there's nothing okay what   what you need here is to just add some Services  add some endpoint and now create your contest   class and boom you have your endpoint and that's  authentication endpoint we're going to have a look   on that after I've done this already and I think  three or four times uh with separate projects but   if you haven't watched any of them don't worry  I'll just um go through them over here as well   after that we're going to consume this API inside  our M app we're going to Au authenticate ourselves   and we're going to store we're going to cash the  refresh token and I'll keep it and I'll add it to   the header to make a request which is protected  endpoint in the API and that will be the end for   the video so as usual if you like what I'm doing  please don't forget to subscribe to this Channel   and also click on that mail so you receive update  as soon as a new video or new content drops if you   also enjoy what you're going to see today please  don't forget it's very important give this video   thumbs up because when you do that it helps this  channel grow stick around to the end because trust   me this won't be something that you want to mix it  to help you a lot also so before I get started let   me take some time and appreciate you for watching  all my videos at the time I know as sometimes it   sucks but you're doing your best thank you so much  for that okay and I also do my best to make my   videos very simple and clear I do offer training  session or coaching session to those let me say   beginners who are interested in Blazer and net  Technologies talking about Blazer hosting models   web assembly Blazer server and at the current.  net 8 also um net we API Blazer um hybrid and   also net Mar application so if you're interested  I have the email down there the description so go   in there and now hit me up I'm going to put this  project at the GitHub so don't worry you can also   get it from the GitHub all that you need to do  here is to check the video description and I'm   going to find a link over there click on it you  go to giab and I clone it please when you get   the Do Not also forget to start that repository  it's also important to this community as well   thank you so much for being there for this Channel  and now let's move on so the name of this project   I'm going to create here is going to be demo  contact marry app is it contact demo connect   Mar app to.net a default Earth API endpoint it's  very long isn't it I I intentionally made that   so that as soon as you go to the GitHub you're  going to see is you can extract definition from   this Ripple okay so let me just grab all this and  I can't this I have to grab it now let's go to the   file let's create L of visual studio and click on  Project we are going to create a new endpoint and   this is going to be for net a so we're going to  choose web API so search for this and I go for web   API and that is this one now this is a name put  it over here now the solution maybe you can add   solution to OS so solution to the solution name  click on create now let's see so next and the   framework version here is net 8 so choose net 8  and uh maintain let me see okay so let's maintain   now click on create to get this project created  now once this is created we are going to configure   the endpoint that's the opin endpoint inbuilt  endpoint by Microsoft that is what you're going to do so after the creation of this project now we  have our API now this what we're going to do we   are going to install some packages that is what  we're going to use to create a database in our   context class and talking about these packages I  believe you know them already EF cor efq server   ef. tools and also we need the sb. net. filters  because it's going to give us the access to um a   whereby we can add header to or token to the the  header request or the request header let me put   in that way okay so the HTTP request that you're  going to make when you're calling to a protected   endpoint we need to add a token to the header and  this package can help us achieve what you want   so I'll just go to let me grab let's go to the  project so I'm going to just right click on this   and I click on unload this project now if I click  on it again you see I have this package items now   within this package item this is what I'm going  to do I'm going to just grab this packages from here then I'll will paste it here so these  are the packages that you need to install   you install aset cod. identity. framework and  forget about the version as far as it is 8.0   you're good to go you install EF call and SQL  Server tools you need sw. ASP net core and also   you need the filter this is the old version so  let me just remove this so once we have that we   going to save this project and I reload with  dependencies doing so is going to um get into   the section where you have the packages  and try to reload or load this package or   install them into this application so instead  of going to the solution and I right click on   the package to install it one after the other  I just have to add the item group as package   references then I just right click on this and  I reload the the project with dependencies and   it's going to install these packages for  me you can also do same or you can just   right click and I go to pack n get manage n get  packages and I try to install these packages as well so right click and I click on reload  project with dependencies and and this is   going to update the project going to restore  all these packages if I click on dependencies   and I click on many new get packages I'm going  to see all these packages installed under the   section of installed so if you haven't  installed that click on the browse Tab   and make sure you install them one after  the another so let's wait and I get all   these packages installed as you can see from  here I believe we have them installed okay   so let's see we have an update that we need  to do and these are the updates so there are   new updates we can install this update  so select all packages and let's update them yeah so they are all updated  now let's go in there and I right   click on this project and let's build  it and see if everything is working as expected all right so the output tells us that  everything is working you can see one succeeded   and when you check our solution we have just one  project here so that project is successfully built   all right so now we have this the next thing to  do here is we are going to configure the opin end   point you can do that from the program.cs file  but before we do that we have to create our DB   contest class first okay so this I'm going to  do let's create a folder and I'll name it as   data so I'll click on ADD and new folder and  then here I'll say this is data folder and in   that I can create my appdb contest class here  so add a new class and I'll name it as appdb contest so that is a class and now after creating  this app contest class we have to inherit from   this identity DB contest so this identity DB  contest and it must be inherited like this now   this idb context here contains maybe properties  that we can use username and maybe a password so   is it username and password yes the username here  it is uh straightforward to the email so the email   that's what we're referring to as user name and we  are inheriting from that if you want to know how   to customize it at en user right maybe I have a  video done on that and I'll check put I'll put at   the description so please check the description  you're going to find it over there but for now   let's maintain the default one so we inherited  from this abdb contest we create a Constructor   which inherit from the base class that is identity  B contest so we create our conter here and now we   are herting from this option that is the identity  B contest class you know if I right click on this   and I go to um definition this DB context class  let's wait for it to open you can see that it is   it has an identity user over here and I if I click  on peep the definition for this this identi user   we have just the username so check you see we have  this username and the username here it is going   to be the email address of the person okay so in  this identity DB contest we have one property that   we can use for registration and that's a username  okay so once we have this set the next to do here   is we have to add a configuration settings in a  um appdb is updb up. Json and that's going to be   for database connection string so here let's pass  it over there and this is what I'm going to do I   have the connection set already so why won't I go  in there and UNG grab it let me that will make it   easier for me so let me just come here and now  past this so it's the name here the section name   is connection string and now the the key here  is a default connection and that is the value   so you see we have the server to local because  you're using Local Host database here is a demo   identity DB by you're not doing that so this  is demo um let's say Mar Endo something like   that and point DB then trusted connection to true  and trust also through that's right make sure you   bring this comma is very important now save this  let's go to the program and let's try to configure   this optin and point so that is what you see um  when you click on the program.cs file so the very   first thing that we need here is we need our  connection string so let me put it that is a starting and now that is a ending so we are  going to configure all our staffs in here so   here we adding this appdb contest and we using an  SQL Server we are getting the section name from   this default connection as a section so here is a  key now if you check this upsetting. Json this is   a section name you have the key and that a value  so when you call for this section name you can   just go in for this default connection and now  we can have access to the value here so this is   a key you have it value all right so that is what  we are getting from here the next to do here is we   going to add this Authentication system and to do  that we have to add this three lines of code maybe   you can put it as one line uh we can add with the  services do add identity endpoint and here so this   instead using this app user maybe we can use this  identity user and that's the default one that uh   it comes with the op- in endpoint identity user so  we use it idty user and we have this abdb contest   from where you're going to have all the framework  store as well so abdb context we have it set the   next to do here is we going to add a filter to  the swaga UI you know swaga enable as or help   us to have access to our endpoint right now some  of these endpoint they are protected in case you   want to um call any endpoint we must provide a  token so when you register and log in and now   you have the token where can we pass the the token  to so we can have access to or we can call other   method which are protected with token that's why  we need to include this filter so that's what we   are doing here we are using this Swagger gen but  we have the swager Gen here so let's remove this   from this section and now in here there is a SC  definition is an O2 and that's an O2 and here the   in here is a parameter location is the header so  we are setting this to the header that is the name   so that's the section name that's authorization  and I want to specify the type as an API key   okay so you're going to have a section known as  authorization and going to have an API key as a   bar token that going to be set over there okay  so that's what we need to do and let's see so   this is the settings that all the services that  we need to configure now when it come down here   where we have our middleware let's also add some  two guys in here then we can uh move on with that   the first thing that we are doing here is on top  of this app HTTP redirection we can actually put   map. identity user so identity user so it's the  same class that we use here so make sure they   are the same the end point and identity must  be the same okay then we have authorization   set already and I'll map our controller to over  there okay so this is what we need to do very   simple one let's save this and let's build this  application again so we can perform the database migration so as you can see it is  built now click on package manager   console and now let's add database  migration so add- migration and we   able to do this because of the EF Cod  or tools that we installed the package   name so let's add migration it's going to  build first then we're going to update the database so successfully created  and the file is created now let's   put into the actual code we're going to say update database so this going to run the whole thing  here and then create a table database create   table and create the columns respectively  okay so invariant culture um let's go to   the here settings and I'll set this to forse  save it now come back again now let's do it again all right so it is done now so let's close  this so when you go to sqs object and um we search   for that you're going to see the database table  name that we created so SQL Server this what   I use the Ser name databases and I can see we  have this demo Mar endpoint DV if I open that   we have an open the table folder we're going to  have all the tables here so these are the table   names as net rowes as net users and Etc but what  we're going to focus here it is as net users so   if I click on this and I see you have this ESP net  users right click and I go to view data and you're   going to see currently the table here it is empty  so there's no data in here so in the configuration   we're going to register from the mar app and we're  going to also log in from the M app as well okay   all right so we are done with that now to the next  thing to do here is let's run this application   when you run this I believe you're going to have  access to our endpoint so click on this to get it run wow so we can see that we did not create  any controller here but we have this opin end   point created for us and it's by the ESP netor  team Okay so you can register you can log in you   can refresh you can confirm I've done a video  on how to connect this registration and under   the login into Blazer application and that's a  net a Blazer and also how to um add the refresh   token how to use refresh token in the Blazer app  I I've also made a video on that I'll put them   under the description as well so you can just  go in there and I'll check it out okay but for   now I want to focus on the register and now the  login in the mar application so the filter that   we added you can see now we have access to  to this key as soon as I click on that you   can now specify our Bearer and I'll add the  token to it to get this head authenticated or   send this request to any of our endpoint when  a communication is being established all right   so let's close this now we have it created so  if I click on register and click on try it out   let's try one and see so I'm going to say this  admin at gmail.com and now the password here   we're going to be admin at 1 2 3 Let's copy  this credentials click on Create and and this   going to create account for us we're going to  have status code of 200 and let's wait for the response so that is a response you see a response  header here the code is 200 by you see nothing   here let's go in then and log in as soon as you  log in you're going to have access to token a   refresh token and even the expired time so log in  check it out now see we need to provide email and   password that we use for the registration so we  paste that here and I click on execute so let's   wait and see the outcome of this so you can see  we have a token type as bear we have assess token   over here and we have our refresh token and you  have an expired time right now what we need here   it is a barer token the asset token that's what  you're going to use use in our my application all   right so we have our endpoint configured and it is  working 100% uh so let's move on the next thing to   do here is you're going to add a project to that's  a Maru project to the project already the we have   already Okay so let's add Mar app to it so I click  on solution click on ADD before that let's stop this okay so let's let's do it it and  now right click on solution click on   ADD now the new project and you're going to  choose Mar app so Mar and I can see we have   this Mar app click on it and now this is uh  Mar app so let's let's say this is demo Mar app so to endpoint let's say this is the name  of an app Okay so let's click on next and let's   use 8.0 from the framework and click on create  so this is going to create the application for us so once this project is also added successfully  we have to install some packages that's what we're   going to use the first package that we need here  is a community 2K mvvm because you want to use   the mvvm architecture so we have to install the  package to support it and also we are going to   use this time around all my videos that I do  testing web API with mobile app I use um def   tunnel okay and for now we not going to use Dev  tunnel we going to see a way that we can connect   our device to our machine our mobile device to our  machine using the HTTP extension so we're going to   use a package known as the microsoft. extension.  HTTP and in that you're going to have access to   the HTTP client Factory we're going to create  an instance of it then we can add the header   the token to the header and I'll make a request  with it it's very simple so what you need to do   here is let's um add this two packages we go to I  go to the solution I just this is the app so let   me close the endpoint that's the API right click  on this app and I let me go for the unload project   now here where we have this packages on top here  let's include the two packages or you can install   these packages as well Comm to k. MVM and our  microsoft. extension. HTTP so install these   two packages as you can see the versions must  be eight right and I check it up so let's save this so after saving this work what you  need to do here is I'll go to solution   and right click and go to reload project  with dependencies where going to install   these two packages as well if you I click on  dependencies and I go to manage new get packages   you're going to find these two packages  also added to the project let's have a look so under the install type you have to see  these two packages over here and that's what we   see here we have the current 2 you see we have  the HTP over here as well okay so everything is   set um we have license let's accept that okay now  we can close this we have the package installed so   we can also close this too all right now the next  thing that you're going to do here is we want to   configure the application to support at least  when using the mobile as an Android emulator   you can support offline communication to the Local  Host you know net Mar emulator do not support that   so let's have a way to do that and in this case  we are going to create an interface we're going   to handle the messages so based on the platform  so you're going to create an interface known as   I platform HTTP message Handler so let's go to  and now this um interface can be created to the   root of this project so I can create a folder  and I'll put inside okay but for now just add   it to the roots here so add and a class I'm not  going to use class I'm not going to choose an   interface and the name here is I platform HTTP  message Handler so let's add this interface   we can have one method known as HTTP message  Handler so let's handle the messages in here   so we get all message Handler we get all messages  in here now we need to create an implementation   for this okay so we can create implementation  based on the iOS and also based on the Android   for now we're going to use an Android so let's  go to the platforms folder and I'll go to the   Android folder and in we're going to create a  class in there and now the name of this class   is going to be Android HTTP message Handler so  this is related to Android so that's why I name   it as Android this for Android so I click on  this Android folder add now it's going to be   a class let's add a name as Android HTTP now  within that it's very very simple method that   we need to call or we need to inject in here so  I just have to drop this and I'll paste it here   so we create we is inheriting from the interface  that we created now aside from that let's see if   you have this interface now with this name  space let's remove and I maintain this okay   so this is coming from this I platform this  is the interface and it is a public interface   eye platform so save that now when you go to the  app Android you can see you have the same thing   here now control period maybe you can include  the reference this so here we need to include this this an so let's add the reference to this  and it can be found in here that is the root of   this application okay so let's see where we  created we created that to the end point oh   okay to the API now it's wrong so it must be in  here to to our Mar App instead now we can remove this that is why I normally close this when  I'm working with the other one so within this   is not connect Endo the name here it is okay  so that is the name of the app so let's grab   this then let's go back to this platform and  now here the name space is demo marry up to   and okay so see how I made an end point I said  end point ah wow that a new spelling okay so we   have this let's save that and now in this we are  inheriting from this this is the interface that   we created so we implement it and now here  we are going to use this EXL um SSL policy   um error. none so what it's going to do here is  you want to trust you want to set the issuer of   the certificate to this this Local Host so it  can TR it else you're going to have an error   when trying to do that and here you need to use  system. net. security so make sure you do that   as well okay so with the with this after I'm  done with this implementation what you need   to do here is we going to register this in the  program.cs file so now let's navigate to the program so in here we are going to check if first  the app is is it Android the platform that is Run   is it Android or is um iOS or it is desktop Etc  if it is Android we want to return this Android   HTTP message Handler and that is what we just  added okay else then you want to return n and   I re close it so that's what we are doing so we  are checking if it's Android then return this   now uh with this we have to add our custom HTTP  client here here so it can be used when the call   is being made now in that let's see down here we  can just have our section down there let me just   grab this and I'll just paste them here so we  are adding the HTTP client we give it a custom   name so here I say custom HTTP client and now  we are checking the we want to State The Base   address we are checking if the device is Android  you want to use this 10.0 2.2 if it is a desktop   or any other device we want to use is the Local  Host Port now let's check the port of this API   that we have so we go to solution and now check  the end point open it and now in properties you   can see we have this L settings let's see the  port is 7047 so let's grab this let's go back   again and I make sure we change it to the current  Port that we have in our API okay so that's what   we doing we configure The Base address and we set  it up to this Base address that we have in here   and now that is all all right so we have this set  and yes so that's what you need to do the next to   do here is we are going to create our login form  this is going to be a simple login form whereby   all of these going to be on one page we're going  to create our view models and our model for that   to handle the login and the registration so let's  have a look with that too so for us to um able to   create that we first have to create a service  um so we can um render this for the login and   now for the registration now this we not going  to create an interface implementation because   we're going to have only two methods that is  a login and a log out okay so let's create um   a service here and I name it as client service so  I just go to the solution right click on the this   is for the endpoint so let's go to the mar now  right click on this let's add a new folder as services so within the services we are going  to create so let me close this we are going   to create one class and now this class is  going to uh we're going to name it as client service so client service now  with this client service first   of all what we're going to do here  is we need to inject this I um HTTP   client Factory so we have to put it  over here this must be public take note and aside from that let me clear all these C  we don't need them they are necessary want to make   this code simple and yeah that's simple for you  okay so we have our HTP client Factory injected   in our initialized so what we're going to do here  is we going to first create our first method known   as register model or registration model so in  here we create a method known as register and   I'm going to pass in registration register model  we haven't created this okay but we assume this   registration model has two properties it has the  string email and it has the password okay then the   next thing to do here is we are creating this HTP  client section so see we create a client and now   we passing the custom name that's a custom HTTP  client I believe remember where we created this   that's a program.cs when we are setting up thep  client we created this custom so we have to add   it to to this and the next to you're making a post  request to the endpoint of the register and as you   can see when you check the endpoint let me just  run the solution let's run this endpoint again   and I let's see what I'm talking about so debug  and I go for start with debugging so you can see   that from here we have all the endpoints here  and they are SL register login referesh token   Etc so if you want to go for this endpoint you  have to call the same router as specified in   here and that's what we are doing here we passing  the model now this model compris of the register   model that's the email and the password we  check if the status code is is success or   the status code is Success they want to display  this and allert to a user register successfully   or registration successfully completed in case  you have any issue to then display the issue   to the user as well now let's go in there and  create this register model so we go to solution   and where we have our folders let's right click  and I'll add a model to this it has to be the   Android so take note add a model and I made it  as model so this model let's add register model so after creating this register model you need  to specify some parameters in and we need two   parameters username and password that is all  we need so making registration is very making   it um easy for us we need just the email and  password and that's all you know once you've   done this we're going to create a login right  and we going to create a response so this I'm   going to do I have them in here let me just grab  them like this and I come to the solution this   modes and I'll just have to paste them here  so let's have a look let's go through first   I'm going to copy the name space here to modos  I'll grab this here now let's go to the login   model login model is also compris of the same  thing and so that is the login model email and   password and let's go to the response so after  successfully logged in what are the response   that you're going to have now to get this we need  to have the access token refresh token and the   username so definitely the end point is going  to return these two ones here the access token   and the refresh token the username is going to be  set by us automatically when we make a call okay   then we add the username that's the person's  email address with this so we can save it to   the Secure Storage for later reference all right  so we have this we have and the last one that we   have is a weather forecast so you can see this  is the same the default um model that you've   seen already couple of times and that is what I  have it in here too let me change the name space good so now that we have the model  all created let's return to the client   service is a register so we can include  the name space of that model and that   is it now after doing this let's have  a look with the login to so the login method so can see this is a payload coming in as  login model and now we have the same login it has   the two attribute as username and the password and  aside from that we are creating also a client here   so this what we are doing you can see I'm making  a duplicate and that isn't the best way to do that   we can optimize this by creating just one simple  method and I'll be calling all these HP clients in   here okay today we not doing code optimization we  are just learning on how to do that okay so don't   worry um maybe later on we're going to talk about  how to optimize your code as well now we call this   post request endpoint as login you pass in the  module here and now we check the response if it is   not now if it is not now then it means it has data  in now we going to use a Secure Storage to store   it but Secure Storage works with only strengths  this is just a model it's a complex object we   can't save it there so you have to convert it  into one string are you getting it so we can do   that by using this Json serializer serialize it so  thisiz is going to serialize it into just a string   then you're going to use some maybe before slides  to separate them okay in the string format and we   can save them so see we are creating a new login  response then we set this assess token look the   refresh token to the Token that is coming from  this response and I reset the user email from   this model coming in from the user as the user  name then we save it here so it means as soon as   the user is registered we have the username we  have the refresh token you can see we have the   access token stored in the local storage there  we can use it anytime that we want good so and   you see from here after after grabbing all these  important sections we are going to set a going to   install them and that is the name that we using to  install okay so we have this in the local storage   and we are set you're good to go aside from that  the next thing to do here is we're going to have   access to uh weather forecast and now this weather  forecast must be must have or should be called   with a protected HTP client a client must have a  header with a token or a beer token before this uh   can this can be processed so if you check here we  are retrieving the local section we are retrieving   the calized login response in the storage from  the Secure Storage so when we retrieve it is in   the form of strength we have to deize it to make  it in the Modo of object form and that EXA what   we are doing here and you want to set the token  to the assess of what the assess token so we are   extracting access token from this list and now  we pass it on to the header so that's a way to   pass it on to the header and that's what you've  done here and also after doing that we making a   call and this is an array so this for a mod that  we created it is an array and we calling this to   the end point of what weather forecast okay and  when we have the response we going to return   the results to because you know this is a return  response so you're going to return this response   to this and where by any time that you call this  method you're going to have access to the list of   arrays in there or the arrays of weather forecast  okay so that is what we have here let's save that so with this the next thing to do here is  we lead only two pages to do this we have one   P already by default and that is the main page.  XML we also going to add one and that's going to   be weather forecast. XML as well okay first of all  the the login session and the logout session going   to be or the login and the registration will be  in the main page okay so let's have a look now to   do that you have to create a view model for that  now I'm going to create a folder and I name it as   view model so it should do same folder and I'll  save it as view model so since we going to use   the page we have to create there is the the name  of the main the page here is the main page so we   check here this is a main page so let's create a  model for that so I'm going to say main page view model okay so main page view model and  that's going to be a class so with this   main page view model what I need to do here  is very simple too let's first make some cleanup okay now we set this to public and partial  because you're going to be using this observable   object and this is coming from the package that  we installed that's a uh what's the name commun   2K mvvm I hope you've remembered right so here we  are going to inherit from this observable object   from thisk VM as you can see from here let's  put it here okay so save all the work that   you've done and the next to do here is you're  going to create a Constructor and now inject   the client service that we've created okay so  but before that we want to have some properties   created here and what are these properties for  let me add them so we see we have this register   model we have that login model so that is what  we using to handle the user login on the the   user register model okay this has two properties  usern name and password and this also have the   same property as username and password now if you  check here you see we have this property name and   at this property name here we are having string  username and our bull is authenticated what are   using this for so this is going to handle the  name of the user as soon as you log in your   email is going to be assigned to that and now  as soon as your email is assigned to that we're   going to set is is it are you authenticated  to true if this username is null it means the   authentication State here is false so we going  to set that to forse okay so you're going to   just switch between um this the authenticated  um boan expression all the time when you trying   to log in or log out okay so let's create a  Constructor and now initialize this and inject our client all the service as well so you can  see we are injecting our client service and if   you take this contr period we have to include  the name space of this client service and you   we see that we initializing all the model so  register model will be null log will be null   is auth indicator will be false and now here  we have a method known as get username from   the Secure Storage so this method what is it  going to do it will get the sessions the the   data that we've St into a Secure Storage and  now visualize it and extract the username and   assign it to this username string here so it can  be displayed anywhere that we call this uh model   okay now let's have we have this a button known  as register so if I click on register button I   want to call this you see we using this relay  command and I will call a service method known   as register from this service then you have  to provide the payload and the payload here   is a register model this so when you use this  observable property from this observable object   that's for mpvm when you create some variables  you need not to specify this as capital it has   lower so it public property will be capitalized in  here now this for register now let's see with the login so as soon as I log in  as well this is what I want to do so if I log in in now this what you're going  to do you're going to say client service. login   then we're going to also call this username from  the Secure Storage because maybe um when the app   load it's going to make a call it checks the  username and solve that one there's no user   there there's no one registered or logged in  after running the app you decide to log in so   in say case you're not going to run this again  but rather this button has clicked would have   to call that event okay and that is what you need  to do so we are creating this method to call this   this method you create this logins as soon as  we click on that we can call this method to   get the name from the local storage is a local  storage but it's a Secure Storage but they are   local storage isn't it yes so from the Secure  Storage okay now the next method here is to   get weather forecast so with this get weather  forecast what is it going to do let's have a look get weather forecast so if I click on this  go to weather forecast this is what I'm doing I   want to navigate to weather forecast page we  have not created this page yet so we're going   to create this weather forecast page if I click  on this button point me to this page okay now   the next one here it is this get username from  the Secure Storage and let's let's go through   so it is checking if username is not n and  if the username is not equal to guest then   set authentication to through and I return the  reason is you know it is getting the data from   the secure stage all the time any time the page  loads you see we are calling it over here anytime   a login is click or we are calling it over  here now any time the page loads you don't   want to be repeating it all the time so we check  if the usern name uh string has the name already   meaning definitely that is the the current  user so we have to first remove you want to   remove it you're going to skip it then maintain  the data the username that we have already so   that's what the first method is is going to do  now if not then we're going to get the data from   the Secure Storage then we going to check if it  is not equal to null we are going to um dualize   it okay so then after dualizing it we're going  to extract only the name and usern name is equal toiz it so by visualizing this then we are  extracting only the username here okay so   we extract the username here remember that  this username here says string so it's going   to handle the username as a string from the  local or the Secure Storage okay but in case   it is not they want to set the username to  guest so instead of saying hi net code who   has logged in you're going to say hi guest you  see good and that that would be that and we're   going to set this authentication to force as  well okay now let's save this everything all   set what I need to do here is the weather  forecast page that we need to create and   I let's have a look on how to do that so  here I'm not going to copy this main page   model and I replace it with this quick yes so  that is one now let's copy this witha forast page and we're going to create a page  for this okay to stop and remove this   red line so go to the solution  now let's add a folder known as views not just item rather  want to add folder first so cancel and I right click and I go  to new folder and I let have it   as views within the views let's  right click and now let's add an item net Mar click on that in our XML page  click on this okay so we did not rename that   okay so we have it here let's rename it so  maybe you're going to say weather forecast   weather forecast page so we are renaming the  page here okay but it is not renamed here so   let's do it manually all right so we have  our our page here created okay now let's   right click and go to view code and now let's  see so let's check this let's replace them here okay so that is it what we need to do now  what we need to do after this here is we going to so we are going to create the view model for  this weather forecast but before we create this   view model let's see now we have login we have  log out no we have login we have register but we   are not having log out from the client service  so we have login we have um register even here   and you're not having log out isn't it so maybe  um from this or we can handle this log out in the   main page view model okay so here we have login  we have register which is calling dat service   and we can handle the log out in there because  the log out here there is no API call so it is   just removing the data from the local storage or  the uh Secure Storage so secure. default. remove   and that is a key we pass it on here and I res set  authenticated to force and I usern name to guest   and that's all so let's control period let's  include this the views folder and we good to   go okay so that is all we need to do we are done  with this main page view model and let's see from   the section this uh weather forecast page we  have to create a view model for that because   in a UI you're going to link a button to this page  whereby this page has to be shown if authenticated   and the request for this page must have a header  with a bar token so let's go to the view model   and now let's try to create this WEA forecast  V model um class in there to handle those sorts so I click on view modos and add a view model to  this as a class the name is weather forecast view   model and in this weather forecast view model we  want to handle it um with this method let me just   grab this very simple one then you know we have  to from this observable object from this going 2K   do MVM so we need this let's remove all this now  control period let's include this mbvm and also we   need the client service so let's also include  the reference the client service and thisable   collection we need to also include the reference  as well now there is an array format so can see we   need to use an array and now here let's include  the reference to where you have this model okay   so can just remove the spaces between to make  it simple for us yes okay now we are all we   doing here is we inject this Cent service to the  header and we are calling load weather forecast   data when the page loads you want to call this and  this the definition for this page we can also put   all this code in this okay but it's advisable to  uh put them in here and I refer the method only   now we are calling the client service to get this  weather for cast remember that we've created this   weather forecast method in the client service so  we call this over here and now before we call we   want to make sure that we clear the container of  this weather forecast you know this is a list so   we clear if the response do any or when the count  is greater than zero we're going to Loop through   it and we going to add each individual count  individual um forecast to this list and that   is all that we doing okay as you do that you're  going to be assigned it to this the list here   and this is going to handle all the list that we  have created from the weather forecast so we are   done with all our code what I need to do here  is to create our UI and I'll link them to you   the their base okay so here let's have a look  we have to create our othera forecast page in   here now when you go to this page you have to  include you have to bind them the a view model   there so we go to the views for the weather  forecast and in here we are going to bind   it so binding is very important we going to have  error in there so let me just grab this and I'll   paste like this so see we are passing in this  weather forecast view model and now we are bind   the Contex of this to this so we can have access  to all this method inside the markup all right   so let's see now we are done with this let's  go to the main page as well and I'll do same so solution we go to this main page view model  and it's from the views we have it down here   so main page and now with all this we don't need  any of this here so we want to remove this okay   now let's paste this now let's remove this to  can just close one okay now here it is not no   more client service but rather it is our okay  so we have a client service and that is it so   let's see let's include it and here it is not C  rather it's going to be this main page view model   so main page view model that's right so this what  we need to because this is the main page and that   is it view model okay so we bind it to the main  page view model and now you copy this and I rep   place it here so we bind it to the context and  that is it now what you need to do here is a UI   so quickly let's go to weather forecast. XML here  now within this UI this is what you want to do we   first have to include the name space and the  data type in here so from the weather forecast   let's include the the model and we can do that  by adding the reference to it let me put them here okay so the matter of copying the project  name and this is the project name as demo and   replacing the project name with this two  models and now here view models and here is   weather forecast view model so we first have  to get a model you want to get the model and   where is the reference it is from this project  a folder called Model so when you check there   is a solution name and this is the folder  called model and that's what we have here   we looking for view model the same solution  name and this the folder view model that is   it we special the data type that we want from  here and we want this weather forecast so in   the view model you see we have two forecast ah  not forecast we have two view models and we need   the weather forecast view model instead I hope  this sounds clear that's right so let's close this okay so I want to remove all right so we are set  now let's have our UI so here we are not doing   anything uh better okay this is not better this  just a simple one and I just wanted to display   them for you to see that you're able to call  a protected UI protected end point so we're   using this vertical stack layout and we using  this collection view we buy this item Source   the weather forecast that a list over here and  an array of observable collection then there a   data template as well forecast model and we have  the temperat um and Etc okay so with this maybe   we can specify the spacing as 10 and we can say  this is um horizontal otion Center and expand   yeah this what we can do okay now let's have a  look with the the homepage so and that's going   to be the home. XML so first of all you want  to have access to maybe the same vertical St   layout but this time around what we want to do  here is you want to display the login and the   log out as well the both you want to display both  we not creating a separate pages for for them we   are creating just one page using the same main  page to to show you so I want you to grab the   idea here but not the design after the design  maybe you can do it yourself because you know   design takes time and it scks at at sometimes  so let's maintain this so we have this vertical   stack layout and we have as imin as 20 you see  we have one button on top and see we have this   button over here as weather so get weather now  this is log out okay so here we check if it is   authenticated and what does it mean meaning if  this is true then this going to be visible if   this is true it's going to be visible and if  authenticated is true mean the user has logged   in and the data or eight token or username has  been stored is Secure Storage so as soon as you   do that you can have access to this as through  else it's going to be false well if I click on   get weather I want to go to this weather for  cast spe so the command that you created we are   binding it to it and now here to the same thing  log out we also buying the command or the event   to this command also we have this label and now  you want to display the username so if I loging   in the username going to change maybe next next  code up and I'm going to be right here so you   want to add hello then passing net code H so this  is a string format that we are using Okay aside   from that we have the net bot um image on top we  have the label label and as you can see there's   an entry whereby we are binding uh the method  or the property to the the object that we have   as register model. email and a password we have  a button known as register command so when this   is clear a service is being called the same  applies to the login login email and password   if you just click this is get called but see  we have these errors here because we haven't   added any reference to it so quickly let's  add the references and that will be all for this so all that we need here is we need a data  type that a view model and that's all so we have   it what let's copy this project reference and  now in here project name we change it and that   be referring to the view model to get it and  this a data type it is not client view model   but rather it is homepage homepage view model  that's the first one and that is this one so   let's save this let me remove this okay  um I think everything is set let's save   this and unless but we have not registered  the services okay so we have to go to the   my program.cs file and now let's register the  client the service the page The View models and   everything so we register it over here so down  here you can add them here and client service   so control period let's include the main page  register the um homepage view model so this is homepage homepage view model we also register  it in here home okay so this is the home page   that's the main page isn't it yes don't be  confused so main page V model control period   And I add a reference to it wether forecast page  control period And I also add a reference to it   one thing that I near forgot was um let's see  which one yeah yes we have to register this in   the we go to the app. xml. Cs class so we have  to inject the routing for this weather forecast   page so we go back solution and I'll check this  app. appell so in here let's register the route   so we can make a click and I can navigate to that  component for us so contr period let's include the   reference I believe all set and done I'm sure now  let's run this application and see what we have now oh okay so the same thing is running that  API no we don't do that so let's change this   let's change the let's change it from here  so solution we want to set this end points   this up as an end point so set a startup  project and in here we don't want to use   Windows you want to use a framework of  Android and now let's click on get it run all right so we have it and that  is the the UI that you see here now   let's also run the API so this is the API  right click on the API and now click on   debug and start without debuging  let's see if the API is also in session okay so our API is also um running  here now let's check it out so in here we   are going to create an account first  so we're going to say this is test at gmail.com and then the password at 1 2 3 so click  on create an account and now let's wait for the response so maybe um let's  put a break point somewhere   here in in the service so we go to  solution then we check the service here so there is the registration so you  put a break point and now let's check it   again so we can see we have successfully  registered right that's the endo here so   it is an output and that's what you see now  quickly let's Okay so that is what now let's   say the database so from the SQL Server object  we click on the ASP net users click on view data   remember that the name the email that we  use was the my is mar test right 1 23 my   test gmail.com let's wait for it to open  then let's check if it is in the database so let's refresh exactly so you can see that we  have it here so we have the Merit test   and that is this one if I open this well  you you see you have the email in here and   we have all the STS as well right now let's  go in there and I'm trying to log in and see   what we have so in here we are going to login  then there is a login section is mar test at gmail.com theary at1 23 that is a password now  the reason why we see this as mask here is if   you check the UI um where is the UI if you check  let's have a look with the UI solution you go to   the main page. XML to the password we set his  password feature to through that's the reason   why it has mask it in there okay now let's log in  and see so on this and now watch here so as soon   as we load we have this hello guest isn't it now  check it out I click on login and now let's wait   and see so you can see now we have hello there  a mar gmail.com so this is your email so let's   say this is a claim that we requested or we did  not even request that because we had it in the   login so we took your email and I'll add it to  the tokens and I'll store it in there now this   header that you seen here has a token let's click  on log out and see so if I click on log out you   see it is off again if I on log in let's see so  I'm going to click on let's put the break point   to check whether you have a token in there  so where we have the client service there's   a login so put a break point here and I let's go  back see log in it has been hit if I put the see   this is the mod that we provided my test Gmail  and this a password if I step in let's see what   the next thing so we going to create this HTTP  client Factory so let me put it here I'm going   to create it here and click on Contin so this is  hit now this is going to call this API click on   next and now with this the response going to  be 200 so let's see see we have status code   of 200 and the uh reason phrase is what okay so  now let's read and see if we have the token in   here click on next and then that's a response so  let's see if I click on you see we have the assess   token we have this refresh token so the type of  these tokens is be so be token for the asset and   under refer token but the username is null so  that's why here we provide the usern name in   here to use the model coming in here okay so let's  continue on oh so that's all right so let's run it again all right so as soon as the page  reloads now we are not we did not click   on login button but we see we have the  email set over here and we are logged in   the reason is we have the data in the local  storage or the Secure Storage already so   inste of it to hide this this is this is open  because we authenticated already if I click   on log out you can see we have nothing  here now if I let's log in then so test mail.com and now let's have the mar at one  two 3 so let's remove all the break point from here then click on in okay so we have it here now you can click on  WE forecast and if I click on weather forecast   you can see now we have this the weather forecast  so War B me and Etc right now we can just go back   again and now see now this what you're going to  do we can close this up okay so when you minimize   this and later on even when you start to open  it again it's going first search it's going to   first this method so let's see from the homepage  model it's going to first search for this method   get username from the Secure Storage now this  method is going to get from the Secure Storage   and check if this the key it is there is going to  set the username to this then you're going to set   this authenticator to what to through meaning  your authenticated because your credentials are   stored in the local storage already or that's  the Secure Storage so even when you close this   and open it again you have to register once  and the app will keep remembering that until   you log in you log out yourself log out and I  try to open it again then need to provide the   login credential as well and until you log in  you can't have access to this weather forast   you see yeah so that is it for this video I  I hope this is very simple and clear to you   yeah I'll leave the source code at the gab so  you can just check the video description and   I'll get it over there thank you so much  for watching this video and maybe let me   know your your thoughts what you think about  this and also maybe in case you have a thing   that we can also add to modify this let me know  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 2,543

Keywords: .NET 8, Web API, Maui App, Authentication, User Login, Register, DotNETMaui, Tutorial, Security, Code Tips, .NET Core, API Integration, Development, Secure Login, Code Tutorial, Mobile App, Programming, Web Security, Authentication Endpoint, DotNET Tips

Id: T-zPCs25EFk

Length: 67min 58sec (4078 seconds)

Published: Tue Nov 21 2023