Token Based Authentication | JWT In .NET MAUI (Login Flow Part 3)

hello guys welcome to my channel in previous video i show new demo related to navigating to particular dashboard page and displaying a dynamically cell item based on role like on the click of sign in button i was just checking like if the email contained student then i am just setting role id to one and roll text to student role similarly if the user entered email that contained teacher then i am just setting rule id to 2 and rule text to roll text to teacher role and after that i am just adding fly out to menu details like if the role id is student then student related flyout item and for the teacher role teacher related flyout items and navigating to particular dash purpose so that thing i'm just doing statically means here i just checking this all stuff statically based on email so in this video i'm just going to remove this all stuff and i'm just going to integrate here api and that api is just going to return all the details like user details and the role details okay so let me show you api that i am just going to use for sign in so here i just created a sample web application and in that i am just going to use this authenticate api so let me pass user name so this api is going to return data in this format like token and the user details and user details contain first name last name role and the role id so let me create service for it so i will integrate that api in service so here i am just going to add login service interface okay now let me add class it's called login service and this class going to implement interface i login service so in interface i am just going to add method class and the response so api response will be okay so api response will be in this formats token and the user details so let me see that class authenticate response so it's going to return in this format so i'm just going to create here response class in model like login response here and the name will be here user detailing this name is going to match with api response because we are just going to bind it like a token and user detail so i'm just using same name and here property also should be match so in api i am returning data in this format like id first name last name role and role id so let me add this property here i'm just okay so i just pasted this okay now in a response i'm just going to add this login response class and api name here i need to pass username and password in api so for that let me create another model that going to that i will use in request so that has a two property username and password okay so this model i'm going to pass here as a login request now let me implement this method in login service class okay so here i am just going to write api logic and post the scene in that i need to pass request uri and http content so let me copy request uri of authenticate method so this will be the url and login here http contain so i need to convert this login request into http content so for that let me severalize this login request okay now i'm just going to use here new stream content and in that i'm going to pass this login request serialize object [Applause] and the media type so that will be application slash json so here i am just going to check that response to status code is equal to okay that means our username and password is correct and it's written in data in this format login response so i'm just going to read that content as a string async and after that i am going to return that in this login response format and this json will be the form of login this point so it's it will be a type of login response and if the response status is not okay then i am just going to return from this api okay now let me use this api in a login page so here i'm just going to remove this now let me register this service first in my program dot cs okay now this service i am just going to use in this page view model login page view model and here i will call api login service dot authenticate and new login request your username will be the email and password will be this password okay now here i will check like if the response is not empty then that means that user is valid and if the response is null then it's returning some other request either bid request or unauthorized that means that invalid username and password so let me just comment this code [Applause] so here right now i will just display valid user if the response is not null otherwise i will display invalid username or password okay now let me run the app okay so we modified this user basic info class so we need to here use some other property so let me just create another property full name that's going to return okay so i just added this email and the full name property here roll tabs will be the role okay now let me run app again okay so it's throwing some error like unable to resolve services for login service so let me check login service declaration here in login page view model yeah so here i am using this login service class instead of interface because of that this error was showing so let me run again okay so now it's working let me try to do login now okay so now it's now throwing error while calling api like clear text http traffic to this ip address and that because i am using here request url in the form of ip address because of that it's showing error so for that i need to allow clear tags in android manifest so here in android manifest.xml here just add one attribute use this clear text traffic and set it to true then it will start to work okay so here i just entered invalid username uh invalid password so it's showing now error as an invalid password now let me add valid password okay now it's displaying as a valid user and if i change even some invalid username then it's going to throw error like invalid username or password so now api is working correctly now let's see this font like in which format it's returning when we enter correct password so that response is like here the token detail and the user details uh coming first name full name id last name and rule id okay so here i'm just going to set response dot user dot email equal to whatever the email we entered so no need to patch from api okay now i'm just going to set this token detail and use a detail in preferences like we did uh before so i'm just going to now enable this code so i will check like if the preference is contains a key app.user detail then i'm just going to remove and after that i will just add this in preferences so i'm just going to write this here okay so here i'm just uh response dot user detail i'm just serializing and after that i'm just setting in preferences now i need to store token also because that's token uh need to use for other api like get user list like here if i want to access this get all user then i need to pass token because this is authorize api so let me store now token here i am just going to use another variable and token i will store here so here i'm just going to use secure storage dot set using so if you want to store some data in encrypted format then you can use this secure storage dot sight async method and in that just specify the key and that value so any credential information or something like that you want to store in encrypted format then you can use this secure stored dot site async method now when the application launched that time we are patching uh this user detail on loading page so here i need to set again that here i am the setting app.user details so similar way i need to set that token detail also so we can access that get user list api [Applause] okay so this token detail i will set here okay now let me run the app okay so now it's navigated to student dashboard page and here it showing me as a student role okay now let's try to login using some different user so for that i need to add some record in database right now i have only one record in database with this email taster.gmail.com so let's add some other user so i'm just going to add here okay so here now it's showing me as a user created successfully okay now let me do login using that okay so here is one mistake let me try to login so i can explain you [Applause] okay so here in a response that role and role id is empty because i created a user but i didn't assign any role to that user because of that it's showing me that error so let's add some validation here [Applause] then on the screen too so error like [Applause] okay now let me run the app so i need to assign a role because i created just the new user but i didn't assign any role to this user so for assigning role i have another api here assign role to user so here i need to pass email address and the role whatever the role i am i want to assign okay so i need to remove app now because that information stored in preferences due to we didn't added any validation before okay so here now it's displaying no role assigned to this user and if i enter some wrong password then it will show me invalid username or password okay so now let's assign some role to this user so for that i'm just going to create one role i have only one role in a table psp let me show that role table so here only i have one role student rule so let's add another role in api so i'm just going to add here teacher role okay now this role i'm just going to assign to new user that we created so this is this email we saw at gmail.com [Applause] okay so now roll assign successfully to user now let me try to login again then it's going to navigate to teacher diaspora okay so now it's navigating to teacher desk or page so similar way let's add another role and one user that has a admin role so i am just going to create user so that user and let me create the role also and this rule i'm just going to assign to this user and role will be admin okay so now let me log out and login using this email okay here i just did mistake so that role is not assigned now is sign okay now it's navigating to admin dashboard page okay uh now we are storing all the information like user detail and token detail in a preferences like uh token detail we are storing in secure storage and user detail we are storing in preferences but what happen if the token is expired that time like this application is not going to log out because we didn't return any code related to that so let's write that code so i need to write that logic on loading page view model so here i am just going to check uh token expiration detail so you can add that detail from this token so for that i am just going to install one plugin so let me close up so just install this system identity model token in your app okay after installation you can write something like this here the token will be in this token detail and i'm just patching this token as a gwt security token so here i will check like the current date and time is greater than token then here we will check like a token is expired please login again and navigate to login page otherwise just navigate to dashboard page okay now let's run the app and check that it says an expired or not so i'm just going to check here okay so here is the token detail it's a returning unique name and then x by the date and all stuff so let's see here it's going okay so here it's showing like now it's going here like user s and expired and again it login again to continue and a redirect to login page this because in api i set x fires after 5 minute because of that okay so let's login again okay so now it's logged in now let me close the app and again the open so it state login or not okay so now it stayed as a login now let's do one thing let's add this x by the date here like x y after one minute and let me log out from here and also i will rerun this web api okay now that the token expiration will be after one minute so let me now login okay so now it's navigated to dashboard page now i will open this app again after one minute and let's check that it's navigating to dashboard page or it's showing me that token expire token expired error so let's try to open this app after one minute so feel that i'm just going to add another page that i'm just going to use to display that all the user list so i will display in student dashboard page so let me add that student as per page view model and i'm just going to register here [Applause] okay now let me open that app again and let's check that it's expired or not token okay so now it's showing me uses as an x file login again to continue okay so that detail you can set that stuff in a web api here you can set that token x5 detail in a web api and that handling you can write in this way like i mentioned in a loading page so like that you can add that logic okay now let's add that get all user api in services i login service i'm just going to add here and this api i get all users api so first let me see that response object all user api so it's going to return data in this format like first name last name and then so i'm just going to copy this field and i'm just going to create one model user list response and here like first name last name email and gender [Applause] okay now let me implement this get all user method in login service okay so here i am just copy and pasting this we don't need now this serializing stuff because we are not using post request so we just need get request and here api name will be get all users and i will deserialize this api response in user list response format and that will be the desktop user this api going to return so i will return data like if the fttp status is okay then just return this list of user whatever i just written null now let's implement this get all user my third in student dashboard page view model [Applause] and also i am just creating one observable collection of user list response so that i can display that data in collection view here i will check like if the count greater than 0 then i will add all user detail into this user's observable collection okay now let's run the app and let's see like that usually is the detail coming or not sorry i just forgot one thing in this get all user api here i am directly using get using but this matter is a authorized so i need to here at that authorization token before calling this api so for that i am just going to use default request header and token will be whatever the two can be stored in this app.token okay now let me run the app okay so now it's returning user list and that usually is here it was adding record in this user's collection so let's now on ui let me add collection view to display data okay so now it's displaying all the user information that is available in this esp.net users table and that i am patching from api using this get all users method and here i i'm just passing authorization and the token that i have said okay so that's all for today i hope you like this video and please write comment like if you have any query related to this video then just write it down in comment section thank you so much for watching

Channel: Programming With Pragnesh

Views: 10,426

Keywords: Login Using Web API, Login Using Web API .NEt MAUI, .NET MAUI, Token based authentication in .net MAUI, JWT Token In .NET MAUI, Login API, JWT, Implementing token based authentication

Id: OnrKktoNJ0o

Length: 46min 50sec (2810 seconds)

Published: Sun Jun 19 2022