Auth Page Logic | To Do App | FlutterFlow for Beginners

in this video we're going to set up the logic for this page so all we've got is the UI set up right here but none of the buttons actually work so we're going to bind our actions our logic to these buttons so that the user can sign up and log in now in the previous videos we already set up Firebase right here and authentication so our backend services are prepared for the logic that we're going to Define now all right so what do we want to happen well we have two tabs right here a login Tab and a signup Tab and so let's start up with the signup tab so when the user puts in their email and their password and a confirmation password and presses this button we want them to be able to sign in we want to create a user account for them okay so where do we start with this logic well we want this to trigger when the user clicks on the button so let's select the button and in flutter flow all of our logic is defined in this second tab here where we have our action flow Ed edor so here you'll add actions blocks of logic that you want executed and here you can add it by clicking this button or if you want to check for some condition first and then execute some action based on whether that condition is true or false you could click on this but let's add an action now I find that it's easier to Define our action inside this action flow editor so let's open that up and this is the same thing as what we just saw but we have more space now the first thing to look at is our triggers up here here that is what will be the event that initiates this action flow whether we have one action or multiple actions so right now we have on tap so when the user Taps this button then all of this logic will execute if we go over here there's no actions defined yet so let's go back to over to our ontap and here's our first action block so let's select it here and you can see that we have all the different action blocks that we have available to us what we want to do is we want to do something with authentic ation so I know that it's in this backend in database right here and we've got a whole section devoted to Firebase authentication so when we tore this open we see a bunch of different action blocks we have available and what we want to do is we want to create a user account now after we select the action block then over here we'll be given the options that are particular to that action block if you want to change that action block of course you can come in here and select a different one but this is the one that we want so let's just walk through these options so the first one is the off provider that is what kind of authentication is this well back when we set up our authentication we only set up email at this point so that's the only one that we can do right here and then we have these next three options where we have to pass this data send this data to Firebase authentication so we need to send an email address a password and then a confirmation password so let's set our email field and you can see this is pre-populated with a bunch of stuff right here well where are these coming from well flutter flow automatically recognizes text Fields those are those text inputs right here on the page and we have three here and two in this tab so that's why we're seeing five in our action flow editor right here and these names are coming from the names of the widgets so if you see down here that's this first one up here and this name is coming from there okay so then we can just bind it to our signup email widget beautiful next we've got a password field and when we twirl this open we can't even twirl it open because there's no available password field but why is this happening well this is because we haven't actually set up this text field to be a password text fields are very robust widgets because they're the fundamental way that you're going to pass information into your app and into your backend so it needs to have a bunch of features for security and accessibility and usability so let's take a look at some of these now now these first options up here are going to have to do with styling and when you scroll down to the end here you're going to see some of these options and the first one is the password field so let's click this on and after we turn this on we can see that now that error has gone away and we have one field available to us so we can just select that now but let's look at a few other options on this text field widget when we click this on this new Option appeared toggle hide password icon and so let's just give it a size of here of say 24 pixels and you can see that we get this hide password icon so by default their password will be hidden so it'll use those dots instead of the actual password to ensure security so people can't see it when they're typing in you can set the icon color we'll just leave it at the default and that's all we need for this password field now the one other thing we're going to do is we're going to set this submit type now what this will do is it'll set the text of the button on the keyboard so the keyboard that pops up what should the big button at the bottom right say and what action should that trigger well we want it to trigger to go to the next field okay great that's all we need here next let's set our confirmation password configuration so we want this to be a password field as well we can set the same toggle size and we'll set the submit type to done so it'll dismiss the keyboard so they can press the button the last thing we're going to do is we're going to turn off autofocus right here whichever text field has autofocused that's where the cursor will end up with the keyboard popping up when the page loads we're not going to set this on anything because the user has an option whether to sign in or log in and if they're trying to log in but it auto focuses to email then they'll have to click away to close the keyboard and then click login next we're going to show clear field icon that's just an X that allows them if they make a mistake to clear it quickly it's helpful for accessibility and user experience next let's scroll down to our keyboard type and this is very helpful to set because it'll determine what will appear on the keyboard board so here will be an email address so we'll add that as the keyboard type and we'll set the submit type to next beautiful next let's go over to login and we'll set the fields here first let's just fix this text right here cuz that should be email address so let's go down here and say email and then we can scroll down here we don't want our autofocus and this will be an email address we also want that clear field icon so let's set that and accept the default color and set our submit type to next and come down to our password turn off autofocus turn on password field give it an icon size and select our submit type to done all right our text fields are set up so let's go back into our authentication logic and complete that so we can come into our button right here let's go back to this tab select our button and come into our confirm password field and we've got this confirm password beautiful we're almost done here we've got a toggle about whether we want to create a user document now what this is saying is that we have set up a collection of users here and this is just a normal collection and normally you want to have a user document so this is just a helpful way to create one inside of this action so you don't have to have an additional action we just select which collection it is it's our users collection and then we need to set the fields what are the fields well the fields are each one of these individual things here so we can set our email and let's open this up this is the email field it's already selected if you want a specific value so you would hardcode it in here but we want it Dynamic we want it coming from this field here so we want it from a variable and so when we click in here we can see all of the data sources we have available to us now there's a shortcut here where you can just click on the canvas right here and it'll bind it but so you know where it comes from let's go edit this binding right here and it's coming from this widget State because it's coming from the widget itself and because we've got these named helpfully we know that it's coming from our sign up email so those are two ways to do the same thing and finally we always want to set our default variable value this is to avoid any null errors and we can just put example at email.com and confirm let's set one more field and that's the created time so let's go to that and we can bind this from the global property of the current time and confirm now we're not collecting any of the other fields so we're all done lastly we've got this option about whether we want to automatically navigate the users if this is on this will navigate the user to the page you have specified right here the log in page because after we create the account they will be logged in and so they can be forwarded here now we actually don't want to navigate them automatically because in our designs we have an onboarding page where we're going to collect their birthday and profile image so we're going to handle navigation manually so we can just click this off so let's just create that page right now so we'll create a blank page we'll call it onboarding and go back to our login page to this button and now we want to navigate the users to that page well how do we do that well we don't want to do it in this view right here because we can only apply and configure logic that has one block so let's open up our action flow editor here and we just want to add this Plus right here we're going to add an additional action next we want to navigate the user so let's search this time navigate and we want to navigate to this onboarding page now the only option that we want to change right here is allow back navigation so that's when a user swipes their finger from the left to the right and we want to disallow that action because they've already been logged in so we're going to turn that off and everything else will keep at the default beautiful so let's close this and we're almost ready to test but let's just finish out the logic for this page so we've got this other tab of our login right here we've already configured our text Fields so we can just go straight to our button except for that won't work that's of course because we've already defined our Logic on this button and this will often happen sometimes you won't discover what your UI needs until you start building out the logic and there's nothing wrong with this so how do we solve this well the easiest way to solve this is to add another button so we have one button for signing up and one for logging in and then show and hide them based on what tab is selected so we can come into this button right here and let's change the text in here and change it to sign up and then let's wrap this inside a stack so that these two buttons will be stacked on top of one another so we'll use one of our three most important keyboard shortcuts Commander control B to wrap a widget and we'll wrap it in a stack then we'll just grab our button again we'll command D duplicate it and we'll change this one to Lo Lo in and let's change the name of them so we know what these are in the widget tree and our other button this will be sign up button great now remember the little aphorism in Stacks the top is the bottom so the top of the stack that you see right here will be the bottom widget if we just hide this for a second here we can see our login so we're hiding the bottom one which is the top one so we can see this one here okay so how do we conditionally show and hide these well we're already in here in visibility and we're on our sign up button right here so let's click on our conditional visibility widget and come in here and so what do we do well what we want to do is that this expression that is what's in here is expecting a Boolean whatever this evaluates to if it's true then this will be shown and if it's false it will be hidden so what do we want to check for well we want to check for something about this tab bar that is is if the user is on the right Tab and if we want to check for something in the tab bar then we want to look to widget state so if we twirl this open we can see that the first option is what we want the tab bar current index that is it gives us an index a number that flutter flow will automatically update when the user clicks between the different tabs so that's what we want let's grab that now flutter flow did a nice thing for us right here because we actually did something wrong this this is expecting a Boolean a true or false value but we selected an integer a number so what it did is it pop that inside a conditional this would be the same as if we did something like this come into a condition single condition and then set this value to our widget state of our tab bar this is just a really helpful utility function and these are all over the place okay so we want to check if the first value our Tabb bar index is equal to what well we're on the sign up button right here and these tab bars are zero indexed so this first one over here isn't one but it's zero okay so we want to check if it's equal to zero so if it's equal to zero then this expression right here that is tab bar current in index equal to zero will evaluate will be true and so it'll be shown now if you see these two equals here and might and think that it's a typo it's not a typo in most programming languages if you have 1 equals that is assignment that is you're assigning the value of whatever is on the left hand right here to whatever is on the right hand over here if you want to check for a condition like equality here then you use two equal signs okay so this is great let's confirm this then let's set up the same logic on our second button but instead of just doing all that work again we can come in here and just grab this value let's copy this value then come over to our Lin button come into our conditional visibility in here and then you see we've got this little paste button and we paste it in then we just have to change this value to one because the login is an index of one and confirm beautiful and because we have conditional visibility set we have these little icons right here okay so we're almost ready to test it but we have to add the logic to our login button now you can see here we already have two actions bound here and that's just because we duplicated the button so let's come in here we're in our login button let's open this up and let's delete this second action here and we can come in here and we can redefine this action block we want to log the user in so let's come into backend database Firebase authentication and log in here the email provider is set correctly but we don't want to sign up the email we want the login email remember these are the widgets where this data is coming from and then login password finally we've got the navigate automatically and we can do that here because if the user is logging in they've probably already completed that onboarding and just want to go to the main tasks page beautiful so this is all set up and we're ready to test it so let's come up here to test and it'll pop open a new window this will take 2 to 3 minutes to spin up the first time but then it'll hot reload instantly whenever we make a change all right so first let's test our conditional visibility so we see our sign up button that looks good so let's click over to our login and we can see that now we've got our login button beautiful that works so let's sign up a user and sign up beautiful it looks like it worked but let's go over and check our users's collection to see if a user document was created so we can come over to our fire store here and into manage content and there I am beautiful next let's test our our login feature but we need some way to log our user out and this is simple so we can just go to our task screen let's just add a button right here and call this log out then we can just Define some logic and let's search for log out and there it is then we go back to our test mode Let's instantly reload then we can log out and come over to login and put in those same credentials and log in beautiful now there's one other best practice I want to show you that we haven't covered yet and that is form validation whenever you're receiving data there's normally rules that you want applied before you accept the data and you can check for those with form validation and these would be things like making sure your password is of sufficient length and you can do that by wrapping your text fields in a form validation block and it doesn't have to be the immediate parent so here I've got three and I'm going to go up to my column here and use my trusty command B to wrap these in a form validation block so now here I'm in my form validation block and when I scroll down I've got with properties and I'm just going to leave that as is because I'm handling that elsewhere and then I've got these options under validation which are the most important ones now these will be populated with any fields that support validation and if you want them validated you can just select them here and when you select them you'll see what validation options you have available so you can put in a specific message minimum maximum allowed characters and text validator so here from my email I want to make sure that it's a valid email for my password and confirmation I want to make sure that they are a minimum of seven characters so I'm going to add that in Okay so we've set up the validation criteria but then we need to tell flutter flow when to execute this logic and because this is logic it should go where all the rest of the logic goes in the action flow editor but we don't want it on this form block because we want to defined on the actual buttons so let's come over to our sign up button over here come into our action flow editor let's give some more space right here and when do we want to run this well we want to run this before the authentication action occurs because we want to stop the execution flow if it's not valid but how do we get it up there let me show you so let's add in a validation action so just search for validation validate form select which form we haven't named it yet so it's just this form one and then we can use these arrows to move this up beautiful let's name this so let's close this out let's come into our form here and let's call this form dasign up beautiful so when we come back into our action flow editor here we can see that name all right let's try this out to see these changes we're going to instantly reload let's put in a new user but let's put in a password that's insufficiently long and when we click sign up we can see that we get this error message and we get our error color and we also have an overflow error so where is this color coming from and let's fix this error this color is coming from when you're in your text field down here and scroll all the way down you can see we get this error border color so that's where that's coming from let's come up to our container here and give a little bit more room so we have room for that error and this authentication is done lastly we need to set up validation in our login form and then this authentication page is done I'll leave that up to you for a challenge for this video and we'll see you in the next one

Channel: FlutterFlow

Views: 15,251

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, logic, action flow editor

Id: RowCRwGUsLY

Length: 19min 27sec (1167 seconds)

Published: Fri Mar 15 2024