Implementing Complete Login Flow In .NET MAUI Blazor App.

[Music] so hello guys welcome to my channel in this video i am just going to implement complete login flowing.net mavi blazer app so here i am just going to create new project dot net mobile blazer app [Applause] okay so here new project is created now let me add here new login and registration page so first i'm just going to add here login component and this page i will set as a index page and this index the trader component i will set as a dashboard so when the application launched that time first this login component is going to display now i'm just going to add here a login ui so let me just add that so this will be the email address password [Applause] and sign in okay so now let me run the app and let's see that login ui okay so when the application launched so it's displaying now this login component first now i'm just going to add another page uh registration so for that i'm just going to use this existing api that i already created so this web api project demo video i already uploaded so just click on suggestion link to see that so for registered user i need to pass here first name last name zender password email address i'm not going to use so this field so let me create registration ui with this all field so here in pages i am just going to add another component called registration [Applause] [Applause] [Applause] now i'm just going to add ui for this so that will be the first name and last name gender and [Applause] [Applause] okay now i'm just going to add navigation link here in login component so let me add that navigation link so this navigation link like if i click on click here to create new account then it's just going to navigate to this registration component that here i declare that page annotation like a page name as a registration so on the click of this it's going to navigate to this registration component now let me run the app and let's see ui for registration okay so here this uh login ui and on the click of this click here to create registration so it's uh navigating to this first name last name email address and password now let me add another link here to again navigate to login page so i'm just going to copy this and [Applause] [Applause] i think i need to read an app to see these changes okay so here on the click of click here to create new account it's navigating to registration page and on the click of already have accounts sorry i think okay here i need to pass href as this one because this will be the like main component i said so that page annotation is slash so it's like a root component so let me run again so that's why here navigation link will be this one okay so now this navigation flow is working now here i'm just going to add now validation like on the click of sign in it will check like is the email address and password is entered or not same validation here i am going to add also here in registration form so let me add that okay so for login component i am just going to add now here login models so let me add [Applause] and here i will use username [Applause] so here i am using required annotation so that means like username and password is required and this login model i am just going to use in login component so i am just going to create now object of login model and here i'm just going to use now edit form control of this plagiar app and this model will be this one login model and also let me create one method [Applause] so on valid submit i'm just going to call this submit method so if all the validation is correct and it's just going to call this submit method now here let me add validation message so for that validation message and here you can pass [Applause] login model dot username [Applause] [Applause] [Applause] okay so same thing here i'm just going to add 4 password also so bind value will be the password and validation message also for password now here validation message is added but for display i need to add here data annotation validator inside edit form so that will use for displaying validation message now let me run the app and let's see this validation message is displaying or not okay so on the click of sign in now it's displaying validation message and it's not calling this submit method but like if i enter here valid email address and password then this submit matter is going to call and this validation message is going to remove so let's implement same validation here on registration page also okay so i'm just going to create now another model for registration [Applause] in that i am just going to create property for first name last name then gender [Applause] okay here now in registration component i am just going to create now object of registration model and here i am just going to use a deep form and model will be this registration model [Applause] and this mad and this method will invoke on valid submit now here i'm just going to add this data annotation validator to perform validation and this for displaying message and [Applause] [Applause] [Applause] okay now for gender selection i need to create one method [Applause] and here i will pass gender and this registration model dot gender equal to whatever the gender selection done from here so i'm just going to use on change event of this radio button so here in on change i am just going to call this gender method and in that i will pass gender or i can also do something like this registration model dot gender equal to male so i don't need to call this method so same thing here i will do like if another radio button is selected then i will pass gender as a female now here in registration model let me add now required field required annotation [Applause] here you can also set like a max land then whatever the custom message you want so here you can cite error message equal to your custom error message also so i'm just going to use now this only required annotation now let me run the app and let's see validation working for this all field okay so here now it's working now if i select any gender then this validation removed and full password okay so here in password i did i think mistake for password i need to display validation message for password okay so here now i'm just going to add one spinner control [Applause] so on the click of submit so this spinner will display so that i'm just going to add here okay so like this it will display so now i'm just going to create here one [Applause] so this spinner glass on the submit [Applause] i will add in here for temporary purpose i am just going to make this matter delay for half second and after that again this spinner class i will set as a empty and i will call this state has changed method now let me run there let's see [Applause] okay so now this spinner is working now i'm just going to create services for like login and registration so i'm just going to add here another folder called services and in that i am just going to add now our application service [Applause] and one class that going to implement this app service interface and this same service i am just going to register in mavi program dot cs so here builder dot services dot at singleton and i will just register here [Applause] app service so i can use for calling apis now this login api authenticate user api so if i pass here [Applause] valid username and password then it's just going to written token so let me now write api for this [Applause] [Applause] [Applause] and here i'm just going to set base ur here will be this one and here i am just going to add another class called apis in that i will just [Applause] add api url [Applause] [Applause] [Applause] [Applause] so i'm just going to i need to install another plugin for like newton's objection for serializing object [Applause] so in string content i'm just going to pass this serialize string then that encoding and media type [Applause] [Applause] [Applause] okay so if the response status code is okay i mean says success status code then i am just going to set token in this written str and i will just return from this api now let me use this api here in login component so before that here i need to inject services [Applause] [Applause] okay so i already created object of login model so i just simply need to pass this here [Applause] and if response is not empty then i think it's then it's a valid username and password and if it is empty that means the token is not returning from api that time i will just display [Applause] [Applause] [Applause] okay now let me run the app and let's see this api call working or not here i'm just using this display alert but you can use a lot of bootstrap to display like for the look and feel yeah okay now let me try with some wrong username okay so now it's displaying invalid username or password and if i try right one then it's displaying valid username and password okay now let's integrate register user api so here in app service i am just going to create now another api method called register user and this will accept object as a register model registration model and here i'm just going to add another api for register user so [Applause] okay so now if this api response is success then i will just add success black to true and if is there any error like this in this api it's showing password required so it's a returning error in this format so i'm just [Music] returning this in error message object so we can display it so now let me add this in this interface now here in register user component so i'm just going to call so here i will call app service dot register user and in that i will pass registration model and now here i will check if response dot is success true then it's just going to display user registered otherwise i am just going to display list of error message from this response dot error message object so right now this error format will be this but like if you want then you can just deserialize it and just display in whatever the format you want or you can also modify yeah just here in api you can modify that like in user controller you can written error whatever the format you want from this register user okay now let me run the app and let's see it's working or not okay so here in new account let me try to add user that already exists so now it's displaying this error like a duplicate username okay now i'm just going to register some valid user okay so now it's showing me as a user registered and if i see here in database then this user now with this at the gmail.com user is created and again if i try to create then it will say duplicate user okay so now login and registration api is integrated now here in login component so from the token so this authenticate user returning token so from the token i will just patch user basic detail so if you see here in authenticate user so if i deserialize this token so i will get this following information like id then name then expiration detail so here in name i'm just returning uh this email address so i don't want this from api so i'm just going to modify that api so here in authenticate user here in claims i am just going to add now user full name [Applause] [Applause] [Applause] okay so now this took and returning name and id and that took an expiration date so now let's access this all detail from this token in our blazer app so for that i need to install one plugin so let me just install [Applause] so this system.identitymodel.token.js so getting detail from jwt token i need to install this plugin okay now here uh instead of showing this value username and password message let me add here code related to patching token details from jwt token so for that let me clear create handler object of jwt security token handler [Applause] and i am just going to read token from this response [Applause] okay now i'm just going to access user id equal to [Applause] [Applause] okay so now user id then name [Applause] and email we already have from login model dot email and that object is username so that email will be here okay now this information i'm just going to store in one object as well as i'm just going to save in secure storage so let me use xamarin essential secured storage [Applause] so here i just need to pass key so before adding this i am just going to create now another class here [Applause] [Applause] so in that here i'm just going to save username user id [Applause] then token [Applause] and email [Applause] okay so now this user basic detail i'm just going to use here in login component [Applause] and let me now convert this into string format so i am just going to serialize it [Applause] [Applause] and this user basic detail so i'm just going to set here so that key name will be this user basic detail and that value will be this user basic info sdr [Applause] so you can also use preferences to save this detail but like i am using this secret storage dot statusing like secure storage will store data in encrypted format so for security purpose i am deciding that [Applause] here [Applause] okay now same detail i will also save in setting dot [Applause] user basic detail equal to this user basic detail okay now let me run the app and let's see this information is available from token and it's saving in secure storage or not [Applause] okay so it's drawing error here let me see in jwt claim okay so this name identifier returning this is the name identifier that i'm comparing here and from token it's written in as a name id so due to that it's a throwing exception like here name id here the key is name id and i'm comparing here with this name identifier so due to this it's showing exception so let me change now to jwt register claims dot name id [Applause] so this will compare with this name id now so same thing i'm just going to add here also name id and name now let me again run the app and let's see it's working or not [Applause] okay so now it's returning user id name email and now it's saving information in this user basic detail also now let me add navigation like once the login information is saved then just navigate to index space so that i just change that page name that index component name to dashboard so i'm just going to navigate to dashboard so let me here inject navigation service [Applause] so once the username and password valid then i just navigate to this index dot laser and here [Applause] so i'm just going to display here name like welcome and whatever the user is logged in that name i'm just going to display now let me again rerun the app and let's see on dashboard it's displaying this user detail or not [Applause] okay so now it's displaying whatever the user logged in that detail here it's displaying now here is one problem like i just added information in secure storage but like if i again run the app that time it will again ask for for the login because our root component we set as a this login component as a root component here we said and we are also not checking here like if the user is already logged in or not so because of that reason it again asking me for login so let's implement that logic so here i am going to add another component call app launch [Applause] okay and here in app launch i'm just going to add logic related to like user is logged in or not so here on on any slides just sync i will check so let first i will patch user login detail so here in login component we set here secure storage key as a user basic details so let me patch let me fetch here user details [Applause] key will be this one setting dot user basic detail that we saved as a key [Applause] now here i will check like [Applause] like if the user detail is not empty then i will write related to i will check here to connect expiration detail and other stuff and if it is empty then i will navigate to login so here now in login component now instead of root component i will set as a login and this app launch now this will be the root component [Applause] so when the application launch that time [Applause] it will just display loading and then like if the user is not logged in [Applause] then i will navigate to login component and if it is logged in then i will check now expiration detail about token so let me now convert this user detail [Applause] [Applause] so from user detail string i will convert into model [Applause] so i'm just going to add this token handler and i'm just going to read token from this [Applause] so if the token is expired then again i will navigate to same login page otherwise i will navigate to dashboard okay so here now logic is implemented now let me run the app and let's see uh also i forgot to set here information like if the token is not expired then let me set user basic detail as this user basic details so on welcome screen it will patch name from this now let me run there okay so it's displaying loading and then it's navigated to this page that because now root component we sat as a app launch here and in app launch we have written condition like this if the token detail are available and token is not expired then navigate to dashboard otherwise navigate to login now another thing i want to do here now we will display this menu this menu like a navigation menu only if the user is logged in and if the user is not logged in then just i will hide that navigation menu and also here i will add log out option so let's implement that okay so hiding navigation menu so here in main layout component so i will add a condition like this [Applause] if setting dot user details is not null then just display this navigation menu [Applause] and here in navigation menu i am just going to add another link [Applause] called sign out and here href will be empty and here i will create one method [Applause] sign out [Applause] and i will remove everything from secure storage like whatever the user information we stored so that will be clear and then setting dot user basic detail i will set to null and then navigate to login page so for that i am just going to add here navigation manager service [Applause] so i will [Applause] navigate to login and here on the click of this navigation link i will call this sign out method now let's run the app and let's see it's working or not okay so here user is already signed in so that's why this displaying menu and sign out button and now if i like sign out from here then it will navigate to login page and it will hide that navigation menu and again if i launch application then it will redirect to login page okay now let me run this app in android okay so now it's displaying directly login page now i'm just going to login okay so it's throwing accepts and clear text so for that here in android manifest platform android manifest i need to set android clear text traffic to true now let me run the app so then it's going to work [Applause] okay so after sign in now it's displaying this menus option now let me close the app and again let me reopen so it displaying dashboard or not okay so it's directly displaying dashboard now after clicking on sign out and again i open same then it will redirect to signing ok so that's all from my site i hope i hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 18,159

Keywords: Complete Login Flow In .NET Maui Blazor App, Login Flow In .NET MAUI, .NEt MAUI, .net maui C#, Blazor App Login Flow, Blazor Login Flow, Complete Login Flow .NET MAUI

Id: 13_V1uHQMfA

Length: 59min 22sec (3562 seconds)

Published: Sat Jul 30 2022