Xamarin.Forms Shell Login Page Flow

all right you asked for it so here it is advanced navigation in xamarin form shell to do a full login flow so tune in hey everyone welcome back to another xamarin 101 video i'm james montemagno and today i have a follow-up to my previous xamarin forms of 101 navigation with xamarin form shell video where i got a lot of questions about login flow this is very very common you want to log into your application and then get to the content or you might be on a page go to login and then go to a different page back and forth back and forth now i love xamarin form shell navigation because it's url based however there are some complexities like where does my page start where does my app start how do i get to this different content well it's actually really easy to do the login flow and we're going to walk through that today and how to do registration and this gets into a little bit more advanced shell navigation so let's go ahead and take a look and get started all right now i want to give credit where credit is due here because david ortnow from the xamarin and donna maui team gave a really cool overview of how to do all this navigation it's all these really short quick tips that are all just sort of really animated really quick on how to do a bunch of stuff and one of them is the shell navigation with login so he goes through all of this back navigation to and from back and forth so definitely check that out he does it with tab bars and that's going to work a little bit different than flyout but it's very very similar so we are going to go ahead and implement this and i'm going to show it in detail so here's what we're going to do is we're first going to take a look at what we have here on our coffee app which we've been using in all the xamarin 101 videos the first thing is i have this login page nothing really fancy here i have a label an entry and a button and this button says login and then another label says register over here and it has a tap gesture recognizer so you can tap on register go to registration page et cetera et cetera so if you look at the code behind i haven't implemented anything we're going to walk through this together and see how sort of special it is here to get this going now i've also come into my coffee equipment page which is the first page of the app and i've added a toolbar item here you put this in the flyout as well and it's a logout and over here in the coffee equipment page again i haven't done anything yet done you could also put this in the view model you could put it anywhere it doesn't matter where you put it you just use shell navigation like we talked about in the previous 101 video so definitely check that out too like i said all right so finally i have a registration page it just says let's register and that's it so here's what we're going to do is we're going to go into our app shell we have a bunch of flyout items here now you may also have a tab bar and if you have a tab bar it's going to actually be a little bit easier and david walks through that but the flow is basically exactly the same uh what we're able to do here is we're able to put in a shell item okay let me go up the navigation here there's shell item and i'm going to say route for the shell item is login page just like we saw earlier now i'm also going to say shell content and then all we have to do is say content template and then say data template of local login page so nothing really special a shell item is exactly the same though i haven't specified a title or an icon or anything like that actually it will get registered as a fly item in here but you may have multiple fly-out items a more advanced shell so you can just add a shell item in here the one thing that we're going to do is we're actually going to say fly out item is visible false so we're going to hide that from the flat if if the shell tries to add it automatically so there we go we have a login page and that's it won't show up on it or anything like that and this will be the now starting point of our application so because the shell item is the first one it will skip over displaying anything else in the page because it's the first one just like previously the shell item had equipment as the default and then it displayed all the flyout items so here's what we want to do is we want to go to our login page and up top you can also do this in the code behind we're going to come in and say shell dot fly out behavior and we're going to say disabled okay and that's really important because it's going to make sure that that fly out item it isn't available at all on this page and in fact on any of the pages that you don't want fly out you want to put that so on registration page you may have saw i also had disabled on here too so there you go so we have flyout behavior disabled disable it for this page so let's just go ahead and run it and see what this looks like with our fly-out item being disabled so here we go we'll get it up and running here and you also can add a bunch of other shell properties here too so if you wanted to disable the navigation bar or you want to do other things we can do that so so we can actually do this here in real time so let's go ahead and see it so our app launches and since that shell item is there there it is if i try to swipe out or anything like that it doesn't exist i can't tap or do anything i can also say shell dot what is it tool bar nav is visible false and hit save and then that will go away that's probably what you want it to look like there right now the problem that a lot of people have is that if we use our normal navigation where we say go to async go to the equipment page it's going to push it onto the stack when we hit login we don't want to do that right we want to actually go ahead and do something different which is erase the back stack so let's implement that it's actually really really simple because if we go look at the documentation over here we can see that there are these things called absolute and relative routes this is actually really cool so here when you do an absolute route which is these two slashes it will automatically erase the back stack and reset it so it sets it there to the default hierarchy there are a bunch of relative routes which the default one is push it on the backstack with nothing there you can use this downwards or upwards in the stack with triple and double stack in there and it's a little bit more complex based on where you're trying to search in your stack but really the two that i end up using are this default and then double again so this again looks right here and this replaces the navigation stack see same with triple uh there too but it's a triple is a really much more advanced case than double in this in this instance so we'll use double here which is we'll search the route upwards from the current position and then replace the backstack so what does that actually mean okay what that means is that when i go over into my button click for login i can say await shell.current and then i can say go to async and what we're gonna do is we're gonna say which means absolute route you know right here and we are then going to say let's go to our coffee equipment page all right and we're going to say name of of course there we go that's what i actually need to do because it's a string and that coffee equipment page is in our shell so if we remember this fly out here is our coffee equipment page we've specified the route here of coffee equipment page and it will be displayed now it'll additionally since it goes here and the fly out is re-enabled it will re-enable it for us but the most important part on this page is using this relative route it will remove the back stack for us automatically so the back stack will be gone so if the user presses back it'll just exit the application now let's say we want to go to the registration page well we can do a few things here we can actually come in and say login page if we wanted to and then say slash and then another name of and then registration page that also is valid in this case so we'll have an absolute route to say login page registration this is really nifty if you're already further in the stack right you've already gone to another page maybe you're going through a tutorial and you want to make the login page always the previous page for registration that's really cool so to erase the backstack go to login here if you're already on login it'll already be in your stack so from this page i wouldn't need to i could just say go to the registration page but those are your two options there based on where you're at in your application all right finally what's nice about this is let's say we're on our coffee equipment page and we have that log out button right here log out maybe you're on about page or a settings page you log out here's what we need to do simply come in and say you guessed it login page using that absolute route here that's going to erase the backstack yet again that's literally it that's that's honestly all there is to it it's a lot less complex than you think it would be um because we're using these absolute routes um in our navigation flow so let's go ahead and start this up again get our emulator going here and again we're going to now default come into our login page and if i say register notice i get the back stack i can't swipe out anymore because on the registration page i've disabled it okay if i was to say fly out here then it would actually give me the flyout and we don't want that not at all so i want to disable that because the flyout is still there right now of course if you're using a tabbed page you can ignore the flyout disabled and disabled and and re-enabled because you don't have one here's the that now as soon as i hit log in as soon as i do that i'm right on that page look at that and i have all my items in there and i'm good to go if i say log out i'm back over here log in i'm back if i hit the back button the app is gone all right then if i come back into the my coffee app then boom i'm yet again good to go so i can go in go back and forth back and forth now you might be saying well james what if i'm already logged in great question so there's a few ways of doing that for example what you could do is you could say well if i'm over here and i come and i'm you know coming into this page and say override on appearing i could do something like hey if if logged in so let's say true right or say var logged in that's true there we go then i could say async void right you probably have a setting here because you're logged in et cetera et cetera you can come in here and you can say oh i'm logged in let's just go ahead and go to this coffee equipment page automatically you could put this in your login page you could put this in your app shell into your app startup wherever the page is starting to get shown you can override that navigation stack all right now when we launch the application we're going to see that it goes immediately to the coffee equipment page because we've told it to go here automatically just like that right that's pretty cool now we can of course come in if we log out we're going to come here and we can log back in now this this because it doesn't trigger on appearing in this case because it wasn't the it's re rerun so now if i go log in it would take me back to the page now this is actually really cool because this page might be a bunch of different buttons with sign in for apple or google all these different things but you can easily create this flow and now that it's sort of relative route wiped out the back stack we can see that it would you know obviously not allow me to go back so we set this to false and then we'll continue on it'll go back to the home page so it's kind of that easy to get this login flow you'd use a setting here probably with xamarin essentials for your preferences if you're logged in and that's really it to be honest with you i mean once you get it set up and understand that the shell itself is very very flexible enabling you to enable the flyout disable the fly out if you're using bottom tabs again you don't need to enable or disable the flag because it's always going to be disabled so you would still use that shell item nothing would be different between this app between enabling and disabling fly out and that's it it's really really cool and you can use this relative and absolute route to do deep linking into your application or add pages in between it'll kind of inflate the pages so i'll definitely link to the documentation and to david's video and his youtube too so you want to see specifically with tabs the differences between his app and this application you can of course find this app on github i put the links into the show notes and every single one of the videos i've done in my xamarin 101 series but i hope that you found this video very very informative if you have any questions at all please leave them in the comments below and with that don't forget to do the things that i always tell you to do which is like this so it goes into the google algorithm of goodness on youtube and recommends it to other people and of course subscribe and ding that notification bell so you can stay up to date with the latest and greatest videos that i'm doing right here on my youtube channel thanks everyone for tuning in [Music] you

Channel: James Montemagno

Views: 15,307

Keywords: shell, xamarin.forms, xamarin, ios, android, navigation, shell navigation, login, logout, login flow, login with xamarin.forms

Id: ylbgWHB_gMI

Length: 14min 7sec (847 seconds)

Published: Thu Apr 22 2021