Login Flow In .NET MAUI App Shell (App Shell Login Flow)

[Music] hello guys welcome to my channel in previous video i created a simple login ui if you not seen that video just click on suggestion to see that so in this video i am just going to create a simple uh login flow i'm just going to follow mvvm structure for this login flow so let's create view model for login page first i am just going to create a base view model so it has some common property and another thing i am going to use mvbm community toolkit so this microsoft toolkit.mvbm so by using this you can easily create command and observable property like you no need to write every time getter and setter matter for each and every property so for installing this just right click on your project and click on manage nuget and you can search for microsoft toolkit mvvm and just install this in your project so in observable object if you see it's already implementing i notify property change and property changing and it will generate automatically source code for like property and the command that we you are going to create so for creating observable property we just need to use annotation like observable property and here just need to add that property name so this will create automatically source code for this it's busy property if you see here in a dot net android in analyzer uh it has like a toolkit mv vm source generator so in that it's generating uh so automatically source code if you see here in observable property generator so it has a simple login ui view model and base view model so the property that we had created is busy so it's automatically going to create a property change it's implementing on property change so we no need to write code every time like getter insider and all stuff so let's add another property it's called title okay now i'm just going to add a login page view model and it's going to inherit the model [Applause] and then you can use a community toolkit like this way to handle command you just need to add method here like login and it's automatically going to create command for it so if you see here in the command generator it it has a login command so it's really easy to use this angle vm toolkit okay so let's add this login page and that view model in mavi program so let's register it [Applause] [Applause] okay so let's pass this view model in a login page so i'm just [Applause] okay and let's bind that login command here [Applause] okay so let's run the application and we will see like it's uh this login method is calling or not okay so on the click of sign in button uh that login method is called so let's add another page it's called dashboard dashboardview [Applause] okay so i'm just going to our dashboard page here and that dashboard page view model [Applause] and the same page i am just going to add this dashboard page in appshell.channel okay inside the layout item option so i just want to show this page in fly out also and here the data content template will be we just need to add that name says because we added this dashboard page in dashboard folders so i just want to separate this login page and whatever the page after login that will we will add in dashboard folder [Applause] [Applause] so let's register this dashboard page also in app cell dot my program.css [Applause] [Applause] okay so your view model also registered okay we just add one title here it's just called welcome and we will display that on dashboard page here [Applause] okay so on the click of login we just now navigate to dashboard page so for that we will use go to a sync and in that we just need to pass the route where we know where we want to navigate so for that we just need to register pages here in app cell so just routing dot register group and add just that please name and that page type so here i'm just going to use name of dashboard page you can specify any name but if you specify the page and then it will be good to identify [Applause] same thing here i am just going to pause [Applause] okay so let's run the application and see like it's navigating to dashboard page or not here i am using double slash because i just want to make this page as a root page okay so on the click of signing so it's navigating to dashboard page and here it also showing login page okay so in the flyout option let's add some other like this login page if you see this login page is displaying here we no need to display this because if i click here then again it's going to navigate to login page so we need to hide this login page for hiding that in app cell you just need to set one property here like fly out item is visible to false so after that it will hide this from here and here i just need to add title dashboard so it's going to display here so we are going to use multiple flyout pages here so just remove this title from here and just we will add here that fly out display option as a multiple item so and here we will write another pages like this so dashboard we will use this much like contact us about us dashboard and we will add this icon also in our project okay so let's remove now root from here and because we are using as a one flyout item so let's see let's remove root and let's add the common root here it's called dashboard page so when it's going to like when with an application so it's going to find this dashboard root page and it will show dashboard page default okay so on the click of login it's displaying now dashboard page and we have this much option like password people contact us and about us i just want to remove this this dashboard option in tab bar also it's displaying here so let's remove this here the property is called tab bar is visible so just set it to fall so it will hide ever all the property from here and also let's add icons for this all that's for people contact sucks so i'm just going to add these icons also i'm just going to create one folder it's called models and in that i am just going to add one class [Applause] okay so in icon icons class i'm just going to add all the icon that i'm just going to use [Applause] okay so now let's access this icons in app cell so i'm just going to add that model's name space here [Applause] and an iphone i'm just going to use like this so on the dashboard it will show dashboard icon then on the people okay so let's run the application and we will select it showing icon or not okay so it's a displaying icon now that's for people contact us and about us okay so let's add another on the footer we will add only like one button here it's called sign out so on the click of that it's just going to redirect to login page [Applause] okay let's add margin here i think it's not working let's do one thing wrap in step layout and let's see it's working or not okay okay so now on the click of sign out i'm just going to navigate to login page so for that first we need to add view model so let's add app cell view model i'm just going to add here [Applause] and i'm just going to create here sign out command and on the click of this it's going to navigate to login page [Applause] okay let's add this sign out command on app cell ui here command will be sign up so we need to now add binding context of viewmodel here we need to connect this f cell binding context is equal to our app cell view model okay so now on the click of sign out it's just going to call this sign out matter and it will navigate to login page okay let's run application okay on the click of sign in its navigate to dashboard page and here on the clip of sign out okay so it's not let's see here command is executing or not okay so sign out command is not executing so let's see why it's what i think okay so here i forgot to write command okay so now it will execute and navigate to sign in page so if you see here after clicking on sign out it's navigating but it's not hiding this fly out so let's disable fly out behavior for login page [Applause] here you can set cell dot flyout behavior to disable so after this let's try so now it's working okay so now uh we do one thing on the click of signing we pass some user information uh we will store that user information in preferences so when the user like came again and open the application so that time it will like it will stay login until user click on logout button so let's implement that functionality okay so let's add one model it's called user basic info [Applause] and in that i'm just adding property like email [Applause] okay so i'm just adding only these two properties email and full name and on the login page so let's fetch that email from ui so for that i'm just going to create observable property [Applause] and this i'm just going to bind in locking page email so here is the username and let's create another property that will be password [Applause] okay so i'm just adding here minor validation something like [Applause] means like if the email and password boot are not empty then i'm just navigating you can add any validation here like password is something like matching then just call api and that response we will store in some user basic info so you can do something like that i am just here and storing this basic detail in user basic info model so actually this response is going to came from api like when you integrate apis so whatever the api response came that you can store in such a object so temporarily i'm just storing like this way so whatever the email we add from you want that and fold them i'm just adding temporary something like okay now i'm just storing this information in preferences so before that i'm just checking that is that reference is available of the name of so whatever the name we you use for storing this user basic detail so i'm just creating another model let's do one thing just add this user detail object here [Applause] [Applause] so i'm just checking like if preferences contain the key the name of user details then just i'm just going to remove that and i will add that again okay so here in preferences i can only set value will be a premium type string boolean something like that so i need to convert this user detail object into some string format so for that i need to convert this so i need to install this newton's of json packet so let's install that okay after that you can just serialize the user detail object and you need to pass this here okay so it going to set this user detail in preferences and also i am just going to set user details in our global object so i can access basic detail everywhere in the app i no need to like transfer that to basic user detail each and every page so for that i'm just storing this user detail in a global object okay so now when the application launched so we need to check like if this future information is available that means that user is already logged in and if it is not that means that user is not logged in so for that let's add another page so in that page we will recognize that user is logged in or not so i'm just going to add loading page and that view model okay and that i am just registering here [Applause] another thing i forgot to explain you like here in a services i'm using add singleton that means it's going to create instance only one time in seven so when that dashboard page came so that instance only going to create one time and again if i open this that dashboard page then it's not going to create instance for it so this is just for like a demo purpose but as per your requirement you can use like add transients means if you need to create a object every time whenever the page open so that time you just can use a transient something like that okay so let's pass now that loading page view model to loading page [Applause] okay so here on loading page i'm just going to check user login detail [Applause] so i am just going to patch user login details from references [Applause] here the name of that we are storing in app dot user details and if it is a like if the user details is not available in preferences then we will return empty value so now i can check something like this if there is a if there is no user details available then that means the user is not logged in then navigate to login page otherwise just navigate to dashboard so on the login page view model if you see here i just adding when i on the click of login i just checking this condition and here i did one mistake i just need to check does not is now right space so here like email and password available i am just storing that user details in object and that object i am just adding in preferences so that we are going to access and the key that i am using is user details so from that key i'm just going to patch user details and check like if the user details is available or not if it is not available that means we just going to navigate to [Applause] login page and if the user information is available then we just going to navigate to dashboard page okay so now we created loading page view model and then loading page here we just add one like activity indicator so it will show like a page is loading something like that [Applause] okay and we also registered this loading page on a view model so let's do one thing now we just add this loading page in app cell so when the application open that time first we need to display loading page so i'm just adding here on the first uh cell container i'm adding is loading page okay so when the application is open that time which is going to display first loading page and after on loading page view model we are checking here user details so based on the user condition it's going to navigate either login page or dashboard page and on the dashboard page on app cell okay so we have here sign out button also so on the click of sign out so it again navigate to login page so i forgot to clear here preferences information so if i logged in and again click on sign out and again open the app then it's going to again show me as a logged in because i didn't clear here login details from performances so for that i am just going to add this code here means if the user details available in preferences then just clear it and then navigate to login page okay so now let's run the application and okay so let me do login here and okay now it's navigated to dashboard page let me close the app and again we open so now it's directly navigated to dashboard page because on the loading page we are checking like is there a user information available in preferences if it is available then it's navigated to dashboard page if not then it's not it's going to navigate to login page so let's do one thing now i'm just going to display logging email and that username here on the flyout header so for that you can add that here like cell dot flyout header and you can add header details here or you can create a control for it also so i am just going to create a controls here and in that i am just going to add content view and it's called layout header control [Applause] i'm just going to display here username and that email [Applause] okay and here i will check something like this if app.user details is not null then i am just going to pass this user details to here username label and email will be user details that email okay so now i create a display out header control so let's initialize it so that you can assign like on a loading page here on check user details like if the user details is available we are navigate to dashboard page so on the dashboard page view model or you can assign here also like f cell dot current dot flyout header is equal to new flyout header control means if the user detail is available then i am just setting fly out header as it is flyout header control and in flyout header controller i am just checking app.user details is available or not so now here preference is returning user details in stream format and our app.user details is the type of user basic info so we need to deserialize it like on the login page view model here i am like serializing it and storing in a string format to preferences so now i just do deserialize here [Applause] okay so i'm just like this user detail string will be deserialize to this user basic info object and that user basic info i'm just going to set here okay now let's run the application and see like that user details showing on a flyout header or not okay so now this user details is displaying here let me add feeding on heater control okay okay now it's looking good let me change email address like let me enter some valid email address and let's see how it looking here [Applause] okay so it's still showing me older email address like a test that we entered let me check in login page so i'm setting information in preferences but it's still showing me that all preferences value that because when the application opened that time it's here checking user details and if it is null then it's directly navigating to login page means we are not setting up cell dot current layout header so we need to set this now on login page also so if the user details is available then let's set that fly out here okay now let me re-run the application okay now it's showing me email address and let me again try with some different email okay so it's showing me now updated email okay so let me cover all the thing let me close all the pages so here on app cell uh i have added like a first page will be the loading page so when the application is open that time it's just going to open is a loading page and that loading page view model and here i am just checking for user login details means if the user login details is available then i am just going to redirect to login page sorry if the user information is available i'm just going to redirect to dashboard page and before redirecting i'm just setting that fly out header information and that user information so it will display on dashboard page after that it's navigating to dashboard page and here in app cell dashboard page contain this much fly out item like uh dashboard people contact us about us right now i'm just redirecting all all menus to one page only dashboard page but you can add pages and just need to set that content template to whatever page you want to redirect and on the footer there was just one button sign out button and on the click of sign out so on app cell view model so on the click of sign out i am just clearing preferences information and again redirect to login page so if the user is not logged in then it's navigate to this page login page so here i'm just setting user information and that's user information i'm just saving it to preferences i'm just checking if it is available then just clear it and then again set that preferences information and set that flyout header and navigate to dashboard page okay so that's all for today i hope you like this video if you have any query regarding this video please write it down in comment and thank you so much for watching

Channel: Programming With Pragnesh

Views: 25,848

Keywords: .NET MAUI App Shell, Login Flow In .NET MAUI App Shell, .NET MAUI Login, Login In .NET MAUI, Sign In Flow In .NET MAUI, Shell Login Flow, Xamarin Shell Login Flow, Login Page in .NET MAUI, MVVM, .NET MAUI MVVM

Id: dWnGoZY3XiE

Length: 52min 12sec (3132 seconds)

Published: Mon Jun 06 2022