Login Logout with JWT Token Api Authentication Flow .Net MAUI by Abhay Prince

hey guys I'm back with another video and in this video I'm going to show you how you can Implement login and log out authentication flow in dotted Maui app which will use the JWT token and Secure Storage to store that token and all these things so I have already created uh video for simple login flow so you can check that on my channel I have this daughter my how to playlist and in there you can see this video login flow dotted Maui so in this I showed you the simple basic flow for login but in today's video we will see how to actually create a login page and then connect to API and get the JW token store it on the device and then use the token to make a protected API requests so this is going to be kind of advanced section of the previous video so I would recommend you to check out this video first login flow and then you will have some basic understanding what we are going to do in this video so I'm going to drop the link of this video in the description box so please do check this out and apart from this we are going to use other things as well so we will connect our API the our mobile app to our local API so for that I would recommend you to check out this last connect dotton Maui to https localhost API using HTTP client Factory we are going to use this approach as well in this video so I'm going to drop the link of this video as well in the description box so I would recommend you to check out these two videos then we can continue in this one so what I have right now I have created this solution and I have this Maui project login logout jwtflow Maui and then I have this API project login logout flow maui.api which has these couple of controllers so first there is a auth controller which is using this auth service and which is actually uh have one end point for login so when we log in with the username and password it returns us the response which has the JWT token so if you go here author response dto we have this token the basic details and then we have this token and this token is going to be passed around for all the next HTTP calls so I have application controller which is just uh we could say it does not return anything useful it just returns application details the version last updated and the name of the application and this is unprotected so everyone can anyone can request this endpoint and can get these details then I have one more controller which is this user's controller which is actually a protected controller so it has this authorized attribute so we need to pass the JWT token in order to access this cat all users okay and right now it has this dummy list of users and apart from this I have these two Services one is this auth service which is right now having the hard-coded details and there is one token service and which has all the JWT related stuff so generating the token and validation params and everything related to generating and validating JWT token all these things I have here and then in program dot CS I have simply added the authentication and then we are using this authentication so all this is inside API and whatever uh dtus the requested response we are getting from API I have added the those in this project login logout jwtflowmow.shared project which has this models folder which has all this API response application it is all those details which we are using in our API and I have these in shared because all these dtos will be used in our mobile project as well so this shared is a project for all the models which are common between our my project and our API so all that is API side do let me know in the comment if you want to have a dedicated video how I created this API and how this JWT authentication Works generating creating this WT token validating it and all those stuff if you want to know more about these so do let me know in the comments I will plan a dedicated video for this but this is this current video this is not related to API this is related to Maui so we will focus more on the Maui side and now in our Maui app I simply created the app and after that uh this video disconnect.com https localhost API using HTTP client Factory so I'm using this approach so for that what I showed you in that video that thing I use used in this current uh my project so first I installed Microsoft extension HTTP package nuget package then I created this I platform HTTP message Handler this is an interface this is an interface which will give us uh HTTP message Handler to be used for HTTP client and then I have this platforms folder and in Android I have Android HTTP message Handler which is implementation of this IE platform HTTP message Handler then in iOS I have this iOS HTTP message Handler so then we'll go to multi-program I have created this extension method here add custom HTTP custom API HTTP client in here first I have registered this I platform HDTV message Handler and if this is Android we will get Android one and if it is IOS we will get the iOS one and right now our application does not support other platforms Mac tizen and windows so right it will return null for all other cases then I have this HTTP client I am registering it setting the Base address if it is Android we'll use this 10022 this is the loopback address which Android uses then I have configured this HTTP message Handler in here I am getting the implementation of I platform hdf machine Handler then setting the Builder's primary Handler to this one so that all I have explained in detail in the this video so you can check this out so all this I have prepared beforehand so we don't do repetitive task but now we'll start working on our main thing okay I have not done anything else in this so first we'll start from creating the pages and the pages we are going to have here so I am creating this new folder let's call it pages and in here I'll create a couple of dotted Maui pages first we need a login page so login page okay after that we need a main page we already have we'll use main page as our loading page or the first page so how that loading page work I explained in login flow video but in here also I'll give a brief introduction then after login page we have our API which uses a user's controller so let's say here we'll have a users page so on this page we will simply display the list of users which our application has right now okay this is going to be protected route and then uh we can have a uh or maybe yeah let's have these two pages only and we have one main page which is the default page we can rename it or we can create a new page well let's say loading page to check the authentication state if user is logged in or not for that but I think we can use main page as well tool so first thing let's go to app shell and in here we will add our pages to the app shell or maybe let's create one more page for the application details I was thinking to display it somewhere else but let's add here only so we'll create one more page and which is let's say application Details page application Details page file okay now let's go to app shell and in app shell we will first we have this main page after this main page what we'll do let's have a guru maybe tab bar group so we'll create a table and in tab bar we are going to have these two pages the application details and users page right login is not going to be inside the tab because that does not make sense right login is if we are logged in foreign users and application details here so before that let me add the namespace for these so these comes under pages dot pages and four application details application details it will be application Details page and let's set the route at same application Details page after that the second one this one let's have this users page so we'll call it the title is users and the data template users page and the route let's have it as users page only [Music] fine we have this main page first after this let's have one more outside of this tab bar we'll have our login page so let's have login and this is going to be our login page and the route same as page name fine now let's see if we run it what we'll see so we are seeing this home page nothing else and that's because this homepage comes first in our app shell and after that the shell content which is uh there is no direct relation between these two these are not a part of any group so we have uh just home page but what we need this home page this is not going to be some uh let's say some UI page we'll use this main page just to check if the current user is already logged in already authenticated or not if user is not authenticated we will redirect user to this login page right and if that's not the case if user is already logged in then we'll simply redirect the user to this tab bar which has these two pages the application details and users right so here we have two approaches either we can use main page for this or some people uses the direct login page approach so the first page which will open will be login and when we are going to display the login page before that right after before uh we could say when on appearing or may be navigated to this page then we'll check the user's authentication state if user is logged in then we'll simply skip this page it will not appear and before this we'll simply redirect user to this tab bar the next phase basically the logged in maybe first home page or dashboard page or whatever page we are displaying and if that's not the case we'll simply continue to display the login page so we have these two approaches what I am going to use I'm going to use this main page approach okay so for that let's do one thing in the main page we have this main page here what we'll do we'll check the authentication state so in order to check that we should have one service which has the logic to check the authentication step right so for that I am going to create a new folder inner Maui project so I'll call that let's say services and in Services I will add a class let's say auth service authentication Service basically public class or service and in this auth service what we can have we will have a method public async task let's say Bool here we'll check if is user authenticated okay and then from here we'll return something some true or false let's add a interface for this by your service or maybe let's have this on this page only and let's remove this iot service fine and then we'll simply register this auth service in our Maui program let's register it Builder dot services dot add Singleton and we'll register the sort service with our interface like this then we will inject this iot service in our main page so for that we need to register our main page as well main page let's go to main page and in here we need to register our iot service I or service or service or service and now we will override a method which is on navigated to when we are navigating to this page then we'll simply check or maybe let's it be like this only and after this we will check if the user is authenticated or not for that what we'll do we'll check if a weight or service dot is user authenticated and they should be else right if user is authenticated then what we'll do we'll redirect user to the first page which comes after login in our case that Pages application Details page so we'll say a word shell dot current dot go to async and then we'll simply redirect user to the page and this double slash indicates that this space should be the direct page this is not going to be a part of some hierarchy uh some stack basically how this navigation works when we use go to async without this this is going to add the page to navigation stack so when we press back button it will simply pop that page from the stack then it will display the previous page but in this page we don't want uh this main page to be shown again right so that's why when we add this that means we are saying that we are creating a new stack we are not pushing the current page the page in this case that is name of application Details page apply application details page this one so in this case what we are saying that simply uh kind of uh permanent redirect to this page so if we press back button there is no page before this page then it will simply come out of the application directly and if we will not use these double slashes then it will be a stack page so there will be this main page and on top of this main page application Details page will be there and when we'll press back button then it will come to the home page this main page which we do not want okay so do let me know in the comment if you already knew about it and if you are not aware of this so I can plan a dedicated video for Shell navigation how shall navigation Works uh going from one page to another passing data from one page to another so I can explain all the routing related stuff in Shell apps so do let me know in the comments if you want a dedicated video for that fine let's continue if the user is not authenticated in that case what we want we want user to navigate to the login page login page this thing so this is what we want right and when we say this we can simply clean this page up we don't need this method we don't need this count and on this page we don't need anything save everything and right now from what service we are returning true true means user is already authenticated right so let's add breakpoints here and in main page right here let's try to run the app and we'll see how the app is behaving now so app is here let this breakpoint got hit let's see from authenticated we are returning true that this user is authenticated and now we are saying go to async application Details page continue and now we can see this application Details page and we have these two tabs here the application details and users and we can navigate around these pages and if you press back you see we got out of the app directly because we added those two slashes when we were navigating now let's see what would happen if this is user authenticator returns false let's check continue app is coming okay breakpoint got hit and false now we are in this else cage we are redirecting user to login page and now you can see login page and we do not have those tabs because when user is not logged in then we will not show anything inside of app we'll simply so show the login page only cool so this thing is working okay let's stop it cool so basic flow is working now this user authenticated right now this is dummy so we need to fill the actual logic here right so for that first we need to have login functionality so what we'll do we'll have this thing public async task and let's say we can have Bool if the login was successful or not or maybe let's have it probably casing task only we are not returning anything it's up to us what we are thinking what we are planning to do when we are returning from login right so public casing task and here we'll say login async and here we want two things or in shared we have login request DTU this one so let's accept this as a parameter for this login async method login request DTU so let's call it DTU only okay now we need to connect to our API and for that we will use HTTP client Factory so we need to inject the HTTP client Factory Here HTTP client Factory HTTP client Factory HTTP client Factory cool now when we are logging in first we'll get the instance of HTTP client and that we can get from this HTTP client so we'll say HTTP client Dot create client and it will give us a HTTP client but we want one specific HTTP client which one which we actually created in here we created this HTTP client so we want this basic functionality what what is the the base URL we need this one and then we need to have this custom HTTP message Handler so for this we need to use the same name which we used when we created a new HTTP client so this is going to be used at two different places so the good approach would be to have it in constant so let's create a new folder or maybe let's have it on root only as constants file so we'll create this and we'll call it let's add constants con stands fine and we'll create is a public static class and here we will say public cons now let's say HTTP client name all right so we can say login flow HTTP client this name is up to you it could be anything the thing is we need to use the same name at both the places when we are creating this HTTP client so here we'll say app constants dot HTTP client name and the same thing we need to use when we are creating a new HTTP client so here if you check it expects a name as well we have this overload so we'll use this thing now this HTTP client is going to be the same HTTP client okay so login if we check our API we have this controllers auth controller so which is API slash controller which is auth slash login okay so here we'll say where response equals HTTP client Dot and this is a post message post action actually HTTP post it expects a login request DTU and this cancellation token it will be provided by the framework only okay so here we'll say post as Json Facebook like this and the type of body we are providing this is this login request detail first thing we need to provide URI which is API slash auth slash login which we just checked then second parameter is going to be the value of the body basically and in this case body is this D2 and this is going to be of it because this is an async method fine now we need to check if the response dot is success status code if this request was successful then we'll do something and if that was not the case then we'll do something so that's something we can have let's say We'll return and a label string from here okay and this nullable string this is going to be the error message when we are returning so from here we'll say let's return uh error in logging in okay we can maybe return some detail uh data from here what was the error what is the issue and we can do some parts that era data and do uh explicit messaging or logging we can do but this particular video is not about that so will stick to the point which is uh just logging in getting the token and use the token to check in the authentication flow fine so if we check we are returning status code and then we are returning in the body the response and in this case from login AC the response we are returning that is this API response of auth response video okay so let's use this type only where is it here so first we need to have the string content the Json content basically so we'll say content and this is going to be a weight response dot content dot read as string easy we have this now we will parse this to get the actual data the type is going to be this API response auth response details so let's call it or response equals here we'll say Json serializer Dot deserialize and we are simply deserializing this content let me move it to the next line fine the type is going to be this and content and second parameter we can add the optional Json serializer options in this case we'll pass this new Json serializer options and we'll pass the property name case in sensitive to true okay because sometimes there are inconsistencies between this system.text.json this is not using any standard so maybe it will return camel case from the API and it will try to use the Pascal case here so we have to approach each other we can do this thing and if we are not willing to allow this or willing to use property name case insensitive we can have this Json serializer options as a centralized place so we can pass the casing and it will use the same casing at both the places so it will be consistent so we have these two approaches I am following this simpler approach basically okay now we have this author response and if we check this API response class we have status we have errors we have status code we have data data is the actual data which we need but before that it's okay to check the status but we already checked it it will be okay but still we can check so here we'll say auth response dot status this is Bool if this is true that means the request was successful if that's not the case if Earth response dot status is not true we will have the error message which have this errors I numerable of string maybe we can return first or default from here and if this request was successful now we have all the data related to that so that we can use auth equals we'll say auth response Dot data this data has everything what we need and that everything is user ID name email role and token in our case we just need this token which is going to be our JWT token so we need to store it somewhere and that somewhere is going to be our Secure Storage the device is secured storage so for that what we are going to use either we can inject the icel storage if we willing to add write unit test cases for this and we want to mock it we can use ICT storage and if we are not willing to do that we can use this directly here like Secure Storage dot default now we will simply set the value here and the value is going to be first the field and we will use this key when we are accessing the data in is user authenticated so it's uh good to have this key in our app constants right so here what I'll do I'll simply copy this and I'll say auth storage key name and again you can name it whatever you want so we'll say login flow or if it could be anything so we'll use this thing this key in here when we are setting the data so the data we are setting that is string key and key is a constants Dot auth okay and then the data we can use both response Dot data dot token like this but now the problem there is no problem the thing is we might want to get access to the name of the user and other details write user ID and name so but we are storing only the token so it's better to store the complete auth response object resource responsibility and when we set data and Secure Storage we should store it in string so what we'll do we here say serialized data and then we'll simply serialize it using Json serializer Dot serialize and here we'll say auth response dot data and then we'll use this serialized data here tool and now we can remove this thing so everything looks fine here let's create one more method okay if everything was successful we'll simply return null that means the login was successful let's have one more method here Port log out public async task let's say log out async and in logout what we'll do we'll simply return that particular key this thing from our secured storage that's all we'll do in logout so we have method here dot remove as well so when we are removing it we need to provide the key which is this and we should be good and this can be normal method known async public void and like this and as this is single line we can have it expression body and then we can remove the async suffix cool we have login we have logout next thing is we need to check users authentication state if user is authenticated or not so for that we need to check if currently we have this storage or we don't have it so for that we'll check your storage dot default Dot we can can you check no right we will simply get sorry get async we need to provide the key and the key is this one get async string key and it returns a task of string over here we'll use serialized data if we have this data so we'll say serialized data if not string dot is null or white space this serialized data that means user is logged in what is the issue here okay awaited that means user is logged in so we'll return true from here right else will return false or we can do a shorthand we can directly return this condition which will say return this not Regional or white space so it will return true if we have this data in storage and it will return false if we don't have this data in storage fine so I guess this logic this auth service this is done now we just need to add the pieces which is we need to have this login async mechanism but before that we can directly check this right now there is not going to be any key in the Secure Storage so it will always return false so it will always go to the login page for now let's do one thing on the login page is login page let's have a button here button text and we'll say login async just login and we'll have a clicked event here clicked let's go to clicked and on this login page we'll inject iot service or service iot service because we are injecting something in login page we need to register this login page in our dependency container which is this right after at Singleton let's add it as transient here login page in file so we are in here in on button click what we will do we will try to log in the user so where error equals here we'll use auth service Dot dot service dot we don't have that login pacing method because we have not added these two this one we need to have these in for interface as well so this method fine auth service Dot Login async and this expects login request DTU will provide it a dummy login request DTU will save username and password okay then we'll check if not string dot additional or white space error that means we got some error or let's do the opposite if this error if this object we need to operate it private async void fine if this error object is null or empty or white space that means we did not get any error and the login was successful we'll simply navigate user to the uh that application Details page the same way we are navigating on the main page so this line we can copy this and we can have it right here if that's not the case in else case we will simply we can show the alert message here what will say a weight shell dot current dot display alert title is error and here we can have error in login or maybe we have that error message right let's dump that error message directly and the normal button okay we have this thing ready right now let's check it run we missed something somewhere fine run the application is loading we are here we'll continue is authenticated and now we'll check serialized data is null but if we continue user history directory login page if you press login we should have activity indicator here but yeah we need to work on this login page will work on that username password those fields hmm and why is it okay the API is not running that's why it is taking time it will try to connect to the API but it will not be able to then we'll get some exception and then it will not work so better to stop it and let's run the API first in the user's controller not uses auth controller you uh for service we are directly turning it fine let me run the EPA first debug start without debugging API is running now let's run this app find continue continue VR on login page login and we are on application Details page and we can see this that means after login the complete flow word now let's do one thing back we are out of the app let's close the app debugging stopped but let's go to the app and this is going to be this one this time it should directly go to application Details page right because we are already logged in the token and all the logged in details are stored on the device so this time it did not open our login page right so this is the flow we want actually now next thing is let's add the logout functionality somewhere so we are here let's remove this for now on this we do not have the left uh fly out menus right so let's enable the fly out menu and there we can have a log out button or maybe we can add one more or let's have that logout button on the users page or maybe application details I don't know this is not about other things but this is about uh having the the API connection JWT and all those things so let's do one more thing here when we are using application Details page let's connect to the API and get the application details which are these application details so API slash application and then we'll display these things so we'll get to know that if uh mobile app is able to connect to the API node that is what it will do cool so let's go to application Details page in here what we'll do first we will inject HTTP client Factory or maybe let's have a service for this so we will have service here services or service let's create a new service which will say let's say application service or application Detail Service application details service public class application details here we'll inject ihtp client Factory I HTTP client Factory HTTP client Factory HTTP client Factory and from here we'll use a sync task and we'll say application details detail what happened shared application details okay application details and you get application details like this okay and here first we'll get our HTTP client which we'll get from HTTP client Factory dot create client with our app constants dot HTTP client name and then we'll say word application it is going to be simple response only a weight HTTP client dot get async first we need to pass the URL which is going to be API slash application details right let's check application controller just replace application API slash application fine then we'll check if response dot its success status code we will get the response and from here first we will get the content with a weight response dot content dot rewrite this sync then we'll get the actual application details application details for this we'll use the same Json serializer Dot deserialize and here we'll pass this point and then the same thing Json serializer options property name case insensitive true now we have these application details we can return from here foreign application details fine if that's not the case for now let's return null but ideally we should access we should have some logic to handle this null case or the other case where the request was not successful cool we have application Detail Service now let's have one more service which is going to be user service but before that let's do one thing we can get the data from this application details this without any issue because if we check our API this application controller this is unprotected this is not using the triple right but four or another endpoint which is user controller it uses this authorized attribute so it will require the JWT for now let's check how it works how it behaves let me copy this application Detail Service paste it here and I'll name this new one as user service change the Constructor we have user service and here we'll say get users async async 5. same thing but the URL is going to API slash users API slash users right guy testing fine now let me do one thing we'll use something here we'll say else and we'll check if a response dot status code let's store it in some variable now I want to show you what we get cool we are not using it right now we'll have simple breakpoint here we'll have one more block point on this level and fine let me move this user service to a different file cool and I am going to register this these two services foreign program application Detail Service and user service and we are going to use these two on the application details and users page so let's register those two as well so we'll say application Details page and after user service let's have users page as well cool now let's inject these services in our pages so application Details page will inject the application Detail Service application details not page application details service application detail surveys and when this screen was appearing we will say override on appearing and let's change this to async and here we'll get the application details database again application details and here we'll say our weight application details dot get application details and the similar thing let's have a breakpoint here as well then let's go to on users page we'll inject user service user service user service let's override same on appearing method change it to async and here we'll say user equals we'll say upgrade user service dot get users missing fine let's have a breakpoint here as well let's run the app to see how it is behaving we have our API running yes or navigated to we can remove this breakpoint now and something happened adding an abstract method or overriding in height require is starting up the application and this is coming from our API so let's stop and rerun the API again we'll say continue editing stop and stop the API API stop it run the API debug start without debugging and now let's find that app so is user authenticated we are here we will check we have the serialized data we can check it in Json serializer we have all this data user ID name email role token everything let's continue and now we are on application Details page and if we check our application details we can we do not have name and version but we have last updated the request wasn't successful okay we'll check it for now let's continue wait let's go to users page the thing I want to show you that is we are here we created the client response and is success status code this was false and if we check the status code it was unauthorized and that is because we are accessing a protected route but we did not provided the token so we need to provide the token process right okay so we'll work on this how we can do this we have this HTTP client we need to add the authorization headers for this HTTP client we'll set HTTP client Dot default request headers dot authorization this is a get set we will set authorization headers here and this is going to be authentication header value this one and this requires we can add this to our usings system.net.headers first is scheme then second is parameter the scheme we are using is b error then comes the second one which is a parameters here we need to have our DWT token so from where we can get this JWT token we know we have it stored in our secured storage so we need to get it so one approach could be we can get it here only from our Secure Storage or we can use the same satellite or service and we can have one more method here to get the authenticated users details then we can use it but for now let's have it here only we will say our token equals okay it's better to have it here only in a hot service so I'm going to have a method here public async task and we'll say auth response detail get authenticated user like this first we'll get the data like this let's have it in a label for edge cases here we'll check if it's not null or white space then we know this is of type auth response DTU we can deserialize and return this so we'll say return json's serializer dot T serialize Earth response GTO serialized data if that's not the case we'll return null let's add this to our interface this one fine now let's use this inner so again we need to stop and add this okay here we'll simply get the uh four authenticated user equals inner user service let's inject iot Service as well we will say auth service auth service and then here we'll say outfit or service Dot get authenticated user t-sync and then we can get the token from our authenticated user Dot token like this right now we know this is not going to be null so we can use it directly but it's always better to check if it has value or not cool we'll use this token directly here so we can get rid of this thing like this so we are creating HTTP client then we are getting the authenticated user from where we can get the token then we are setting the authorization token on this HTTP client and then we are making the request let's try this first we'll stop the API it is freaking out so run it run the API start without debugging and then run the Maui app it should directly go to users and let me add breakpoint here please user authenticated continue this is true we are on application Details page we'll see this what is happening here continue and when we navigate to users we are here continue and now we are in get user set racing or user service continue authenticated user yes we have all these things we set the token and this time the request was successful right and we can read the content we can get the no this is not going to be application details okay my bad here it should be list of users and the request was successful that is the main point because we have added the uh request header here the authentication authorization header be error token so this is how the token works okay on this application Details page next thing what we'll do first let's fix this fix what this application details here we will get list of users but we'll have a innumerable of user review this is what we are going to get from here and we'll return the users from here and this will change like this fine and if we go to our application Detail Service let's see what is the issue here application details Json serialized property name case insensitive true we should have the values okay let's add a breakpoint here and let's see if we are getting the content if this is digitalization issue or actually she will check it here cool but before that let me add a log out button on the application Details page so after this label we will have a button here button let's save text logout and then we'll have uh let's say padding five so it comes in center of the screen then we'll have a clicked event clicked and let's go here from here what we can do we'll simply use iot service we'll inject our op service so that we can use the logout method here I sync and first we will log out the user so we'll say auth service dot logout after logging out we'll redirect user to login page await shell dot current dot go to a string and same we'll use the name of login page name out login page name of cool and when we'll come back to the app then we should get the login page only so let's run it is user authenticated continue get application details okay we wanted to check here so we have status true status oh oh oh my bad the return type is no direct application details the return type is actually the IE that API response of this application it is fine we'll do this but right now on appearing continue we have this logout button we have users let's close the app I closed it go back and if I open the app again it should open the application Details page directly right we got that home page for a friction of second so what we should do we should have that page blank and we should have activity indicator there so that we can show that something is happening users everything looks fine users broke will check it in a bit but for now let's check dotnet log out everything is fine now if we log out it navigated to login now if we close the app and open it again this time it should open the login page only that is because now we don't have the token and other details in our Secure Storage cool so everything looks fine now let's check why users call failed so we have user service us let's run the app to check that let's continue login continue continue and let's go to users we are on users page user service let's see what the issue is now content if we check in content we have the complete data what we need okay okay the same problem is here the return type is not users GTO this is actually the API response through our API response and the type is API response of this type and then we'll have our users in this data like this and same thing we'll do on the application details service so the type is not application details this is API response of application details like this and here also we'll say API response and will return API response dot data like this if we add a breakpoint here and in the user service if we add a breakpoint here then we'll get to know the complete data we'll check continue and now if we check we have application details the name of the application version I last updated continue continue and on users page now we'll have the list of users count six and we have all these users okay so everything seems to be working fine working as expected now one thing is uh this logic in our user service first we need to get the HTTP client we need to get the authenticated user then we need to set that authorization header we should have have it as a centralized place that doesn't like place right so there could be multiple approaches we can have a separate service for this where we create the client get the authenticated user Set uh authorization header than return that HTTP client we can have a base API service where we do all these things or we can have it as a part of this oil service only from there we can get the authenticated HTTP client so we'll use this approach this third one but there is an ongoing series which is uh e-commerce grocery app using dotted Maui which I'm building right now and in that one I am using the this base API approach so you can see that series on my YouTube this one e-commerce grocery app so in this also we are connecting to the API and for that I am using the base uh API service approach fine let's go to this iot service and in this iot service what we'll do we'll create one more method here so we'll say public async task this will return HTTP client and we'll say get our hands dictated HTTP client like this and the these three things we did there will simply do this thing correctly here okay we don't have this underscore service because this is the same class we can use like this and from here we can return this HTTP client cool let's add this to and let's add this to the interface this one and now we can use this to directly get the HTTP client like this what we'll do here await of service don't get authenticated HTTP client and we are good now so it will return us the client which we already said the authorization header so it will work same so the benefit of using this approach is we could have multiple screens multiple times we need to fetch the data from our API and all those routes are protected so we need to add the JWT token for all those so for that we can use this approach and here we are adding the token directly cool so this is how we can implement the login and logout functionality with JWT token and Secure Storage in dotted Mouse

Channel: Abhay Prince

Views: 1,772

Keywords:

Id: -wu8d3IQO-Q

Length: 70min 14sec (4214 seconds)

Published: Tue Aug 08 2023