Login Flow .Net MAUI by Abhay Prince

hey guys so I'm back with another video and in this video we are going to see how can we Implement login flow in dotnet Maui app so this is the flow we are going to implement So currently I am logged in and I have this profile page and if we if I go to this logout page now I can see this login page and I cannot go back because there is no option and I cannot see tabs or fly out menu I cannot see anything because on login page we can just see login and when we click on login page then we have this home page we have this tab bars we have this fly out menu and now I'm logged in if I close this app and if I if I open this app again then it will check the authentication State and then it will redirect me to the main home page because I am logged in let's see how it will behave if I am logged out and then I close the app and I'm trying to open the app again so this time it will check the authentication State and it will simply redirect me to the login page because you remember I logged out so this is the thing we are going to implement in this video so when we say login flow it means in our app when we are opening it for the first time and if we have some protected screens protected pages so protected means uh user can see those screens only if he or she is already logged in if our app had some login functionality and some protected Pages then we need to implement this login flow so when user comes for our app for the first time definitely he was not logged in so our logic it will display the login screen and when user fails the potentials and login then user will be redirected to the the main screen maybe home screen or dashboard or whatever we call it for the first screen after login and when we close the app or come out of the app and when we open the app again at that time the user is already logged in so this time our logic should not open that login page it should open the main page the home page or dashboard page because user is already logged in so that is what we are going to implement in this video we have created a new dotnet my project and I'm running it for the first time so I have not done anything in this app we have two approaches for this first thing is we can always open the login page on app startup so when app runs we will open login page and when login page is coming then we will check if user is logged in or not if user is plugged in already we will simply redirect user from there to home screen or we have different approach in in that approach we can have a kind of maybe our loading screen so the default Opening screen would be that login screen and from that login screen we will check the authentication state if user is logged in or not if user is not logged in we redirect the app to login page user was logged in already on loading screen then we will simply redirect to user to the home page these are two approaches so it depends there is no good or bad approach so it's totally up to you which per hour you want to go I have simply opened it I have not done anything so first thing we'll do we'll simply create a new folder let's call it pages and in this page first thing let's move this main page to this pages and then create a login page so we'll create a new item dot net Maui content page using xaml and let's call it login page add the second let's have a again new item dot net Maui and let's call it loading page so we have loading page login page we have this main page and let's have one more let's say maybe let's have two moves maybe one is profile page and one is some list page let's say listing page so we can change these so let's call it listing page loading page change the label to loading page so that we can see that we are on that particular page and this is our login page then this is our main page which have all this data then profile page so let's call this profile page fine now we'll use [Music] dependency injection for this and we'll use shell navigation so first thing let's set the routes so routing the author register route and we'll simply use all those pages we have first thing we have main page type of main page and let's copy it a couple of times then we have this listing page listing page then next one is loading page then we have login page after that we have main page which we already registered select move it to down and then profile page profile page so let me copy the type as well main page listing page profile page and fine routing is set after that let me create a new folder for our services we are going to have a mock service here so let's call it maybe auth service public class and in this auth service we'll simply have a method let's say public casing task rule is authenticated essay so we'll check if the user is authenticated or not so let's say for now return false that means user is not authenticated I have made it async task because uh in real scenario you would get this authentication state from somewhere so maybe from you could pass them later to some API or maybe you can get it from devices shared preferences or secure stories so for all these we could have these async versions of the method for now we will simply mock it so we'll add uh manual delay so let's say two seconds and after two seconds it will return the actual authentication state so let's register this let's set this dependency injections so in builder.services Dot we could have a transient or scope or Singleton it does not matter in this case so let's add the namespace fine and after that I'm going to inject this service to the pages so for that let's register the pages as well so first thing is loading page then we have this listing page maybe we don't need this listing page so we need this in loading page and loading page then we need this in let's say we'll check where do we need it for loading screen let's inject that auth service and we will implement the logic in whenever we are navigating to this page at that time we will check the authentication state solved with use the async version and now we'll check if all service Dot is authenticated async if the user is authenticated then let's add this await keyword here so in this case user is logged in redirect to main page and in this else case user is not logged in so we will redirect the user to login page so in order to redirect using shell navigation we could use shell dot current dot go to async and then we will simply use if we do this login page I will show you name of login page fine and then in this case and both of these will be a weight statements and from here we will redirect user to our main page so our this logic is done now go to app shell and on app shell we will simply add all these pages so first thing this is main page so let me copy it a couple times in first the initial page first page we are using loading page right so this local local let's add one more name space for pages so it will be dot pages so it will be our loading page not local it would be pages Dot where is a loading page loading page pages is from why is it not coming loading page motivational loading page loading the image we have this loading page the namespace is also fine okay let's say loading page and this would be same as page name because we have set our routes to these things only then second thing is after loading we will have our login page then we have our main page main page main page that be it home only and login is also from pages then listing page and after listing page we have our profile page pages and then profile page so this is fine but now we have simply set all these the fly out behavior is disabled but what if we need fly out Behavior so for now let's enable this flyer Behavior and for now let's check it so app is here let me rerun it again so that you can see what happened here now the app is loading the first screen we will see it is come on editing page you see and after that after two seconds we are on login page and you can see this back button but in this scenario this login page it should be the first page right ideally it should not show this thing that go back from login page to this loading page because this loading page is kind of uh internal we are simply checking the state of the user right now so that page we should not manually navigate to this page this loading page so for that first thing we need to do and on the that loading loading page we will change it so on this loading page this fly out option this header and there should be nothing there should be simply a loading icon basically so first thing let's go to the Loading page dot XML we will come here we will remove this label and let's design it we will say horizontal options Center vertical options Center and then we will have activity indicator control and it will be running always so first thing let's set the is running to prove because it should be always running we need or not uh we are not observing the state for this running so whenever this screen is there on the screen Mobile screen then it should always be running straight because it is checking the authentication State and after that it will simply redirect to the Loading uh sorry login page or main page so it will always be running and then we will have our neighbor let's call it uh speed something like this now we check it we can see this thing checking authentication State and we have this now on this loading page this should not be there the loading page title so for this title we can simply say cell Dot navbar is visible we can set it to false so if we go there then we don't have that so this thing is fine checking organic straight up from there we will move to login page the next thing is this login page it should look like this is the first screen so we should not have this back button here so the thing here is when we were redirecting it let's go to uh loading page Dot xaml.cs now here this thing this shell routing so if you are not familiar with the shell outing or you want me to create a dedicated video on shell routing so maybe let me know in the comments I will plan a dedicated video to Shell routing to include all the aspects to the Stacked Pages pushing and popping States going making the hierarchy relative routes and all those passing data from one base to another using the Shell routing so I can plan a video on that in this case whenever we add some route it actually considered it as a kind of Stack navigation stack so when we are saying this so it is pushing this page to the navigation stack that means this is the next page that means there should be some previous page that is this current page so we can come back to this page from this new page where we are currently going so it will show this back button but in our case login page and for main piece for both of these Pages we don't need that so for that we can use double slashes so it will kind of directly we could say permanent redirection to this new page this is like this so let me re-run the app swap it here it's loading and checking authentication State and then we have this login page and on login page now we don't have that back button but we have this fly out menu so from this fly out menu we can move to home page listing page profile page but do we really want this no because in our app in this particular app this home listing profile these Pages as protected pages so these should only be visible if the user is logged in so for that we need to disable this fly out option for this particular page so for that we can come to Shell and on shell page we will see the this login page and on login page we can set shell dot fly out Behavior put this particular page we would set it disabled so now we cannot see that thing let me rerun this app or maybe for now let's have it like this only so on login page we don't have this so if we want to disable this we can disable on this particular page now all these pages may be we want all these pages in bottom tab step bar so we can simply have a tab bar and we will add these Pages here let me rerun the app ring then we have login page and we don't have anything here so on login page let's add a button so where is the login page login page is here let's add a button here button text let's say login and let's have a padding of 25 and item spacing of 25 again okay and on this login button let's add a Clint event handler and from this click event handler we will simply redirect user to shell.current dot go to async we will redirect user to main page so main page and like this if we click this not found we run the app checking state login and when we click this login page then we have all these tabs home listing profile and we can see this is home page this is listing page this is profile page and here we can see this loading and login these are coming from the top level uh shell content so whatever top level cell contents those will be converted to fly out menu automatically now if we need to disable this if we want to disable these that they should not come inside this fly out menu for that what we can do we can simply say shell Dot fly out item visible we can set it to false and now if we see we cannot see that login and the same thing we can do for this one let's add both of these for the loading page and now we are good there is nothing because all those pages are we don't want to go because that load loading page that is a kind of our internal logic page and then login page we will go to login if we have logged out and if the user is logged out basically so these things are working now and now next thing is if we go to our auth service here and instead of returning this false if we return true that means the user is authenticated and let's rerun the app now it should show that loading screen and after loading screen it should directly go to main page checking authentication State and then directly home page because this time we set this true so user is already logged in so in this case from this loading page it will check authentication user is logged in so it will be redirect to the main page now we have this empty pliode menu let's fill this thing so this tab bar tag by default it's simply converts all of the content of this tab bar as these individual tabs but automatically it is not these items are not added to fly out so in order to add these to fly out we can have fly out display option as multiple items single items that's used as multiple items so now we can see these and this will work as expected now next thing is let's Implement a logout functionality so for logout functionality before that let's stop it and let's implement from let's say login and log out we were using this hardcoded true and false we will not use this hardcoded value and we'll use the actual value from Dynamic value so we have this login and log out and we when we are logging in we will simply use the preferences dot we will set a Boolean value and that will be our off State and when we are logging in so we'll set it to true let's use this as a constant here by the way from Spain Cloud speed and we'll use this auth state key here and same thing when we are logging out at that time we can log out this thought State key default we will remove this key like this so now we remove this I'm using this preferences to default directly here if you want to unit test this so you might want to register the I preference service and then you can inject this I preference in its Constructor and then you can use it okay so to check authentication state after this delay we will check so we will get our state from preferences to default dot get and this is a Boolean value and the key is our state key and the default value if the value is not set we will return false we will consider it as not authenticated and now we will return this value the soft state so now we don't have this hard coded and we'll use this thing and we are good with this for this now next thing is implement this login and log out so for login if we go to login page we will on clicking on that login button we were directly navigating to main page without setting that login so before this we will set login in our auth service so for that we need to service or service and let's add it and here we will say auth service Dot login fine and now we have injected the or service to login page so we need to add this login page as well to our Services Service registration now login before logging out let's uh add a logout button on profile page so after this label we will set a button with a text log out and we will add a click Handler to this okay and we'll do the same thing we did for login page so padding 25 and spacing 25. now let's go to this and here we will log out the user so in order to log out we need to inject our auth service here so what service and in this we will say of service dot logout and then we will redirect user to login page shell.current dot go to async this will be our login page fine so I think we are good let's run it one more time oh I missed to register this profile page as well right it will prove we need to register this as well talk profile page yeah let's run it app is here and it's checking State and it went to login if we login now we are on home page and now we can see our listing page profile page and on profile we have this log out before now let's stop this app open it so we'll see that it will redirect us to home page because user is already logged in now go to profile log out we are on login page now again stop the app open the app again and now it will redirect us to login page because we logged out and right so everything is working fine now so this is how you can Implement uh login flow in Dot and Maui app so please like this video if you like my content and share this video comment on this video And subscribe my channel and don't forget to press that Bell icon to so that you can get the notification whenever I upload new videos okay that's it for this video so I'll be back with another video bye

Channel: Abhay Prince

Views: 9,343

Keywords:

Id: 97G-XkuENYE

Length: 31min 52sec (1912 seconds)

Published: Thu Apr 13 2023