Flutter & Firebase App Tutorial #12 - Register With Email & Password

Key Takeaways

or at the gunk so currently we have our register form right here and when you use the types in the details their email and their password into this form then at the minute all we're doing is printing those values right here at the bottom when they click on this button instead what we want to do is take those values the email and the password and use firebase earth to sand that user up with an email and password so far we've only seen anonymous signing this is going to be something different the other way using email and password so first of all we have to register the user and then later on they can sign in with that username or rather that email and that password okay now the first thing we want to do is to make sure that a user actually types values into these different fields and if not then prompt them to do so so in essence we need a little bit of basic validation in the app itself before making any requests to firebase to create a new user because we don't want to make that request with two empty values or one empty volume so to do this we're going to make use of some of flutters built-in validation features so first of all what we need to do is define a form key and that's going to be a global key of type form State so inside the state object let me just paste this in first of all and you can see it's a final property it's also private denoted by that underscore it's called form key but you can call it something else if you want and that's equal to a global key and that's of type form States okay so this key right here we are going to use to identify our form and we're going to associate our form with this global form state key so to do that we need to come down to our form and this will all make sense later on as we start to validate our form we need to come down here and we need to say okay well this form widget is going to have a key and it's going to be equal to the farm key that we just created right here so what i'm doing here is associating this global key this farm key with our form and that's basically going to keep track of our form and the state of our form and in the future if we want to try and validate our form we can do so via this farm key because we can access some validation techniques and states from this farm key because now it's associated with our form because we've specified that this form has a key and it's this global key that we created right here so that's all it's doing it's creating this global key that's gonna help us track the state of our form and help to validate it so down here in the unpressed event currently we're just printing these things what I'm going to do is cut those and I'm gonna replace them with an if check and right here I want to check is our form valid at the point in which we click on this button and this function fires now to do that I can use our farm key so I can say underscore farm key then on that user property called current state to get the current state of the form and to find out what values are inside those farm fields and then on that on the current state of the form I want to use a method called validate and this is going to validate our form based on its current state at this moment in time that we click on this button now this right here is going to evaluate either true or false basically and if it's true then it means we have a valid form and we can execute some codes and maybe send a request into firebase to sign this user up if it's false it means that the farm is not valid and maybe we'll show some little helper texts to say look you need to fill this field in or something like that now inside here at the minute I'm just gonna put these back in print the email and print the password right now how does this thing right here know whether our form is valid because we've not actually specified anywhere whether things are required or any other kind of validation so this validate method actually uses some validator properties on these different form fields now we don't have any valid data properties on those form fields at the minute so let's create some because these validator properties allow us to run a function to see if that particular form field is valid so for example this first one right here I'm going to create invalid data property and this is going to be a function this function takes in the current value inside that particular farm field at that moment in time and over here we're just gonna return a value now we're going to return one of two things either a null value if this particular farm field is valid or a string which is going to be the helper text if it's not valid so first of all we need to evaluate something to determine is this farm field actually valid well I'm going to say it's valid only if it's not empty so what I'm going to do is take the value that we receive in this function and say is empty and then question mark right we're going to do a ternary operator to evaluate this so we can return one of two values here right so it's going to look at the value and determine easy empty and this will evaluate to either true or false if it is empty it's going to evaluate to true and if that's the case I want to return a string because the string then is going to be the helper text that is going to show over here in the form so let's return a string for the case of true and that is going to be enter an email and if this evaluates to false that it means there is something in that field and therefore we can return null and if we return null it means look this particular field right here is valid okay so let's do something similar for this other farm field I'm going to copy that and paste it right down here so this time I don't want to check is the value empty I want to check if the length of the value is less than 6 I want the password to be at least 6 characters long so I'm going to say Val dot length is less than 6 now if that's the case I'm going to say right here enter a password 6 plus cars long and if it's not the case if this is false it means that we already have a value six characters or more long and then we can return null because it's valid and we return null when something is valid so we have a validator on each one of these fields and the way this works is that when we run this validate function down here it goes up to each one of these fields and it runs each function now the first one over here is going to check and if this returns this string then it's going to say ok it's not valid and it's going to place that helper up here somewhere that's drink now it goes down to this one and it does the same thing evaluates this if it receives a string back as the return value it says ok well this one's not valid either and I'll place the helper text over here this drink in this form field and then the whole thing will evaluate as false not valid now if it receives null for every different validator function then it is valid and this will evaluate to true and we can carry on doing something so only when it receives null back from each one of these functions is the form valid and that's how this works so let me save this and give this a whirl first of all I'm not going to enter anything in and I'm going to press register and you can see we have these helper text strings back here so it automatically takes our string that we returned and places them next to those farm fields and cause them read so that's nice a little bit of validation now if I type something in here and press register now this one is fine but we still have the error right here now if I answer something four digits long we should still get the error because this should not pass validation because we require something at least six characters long but if I do six now then register then the error goes away and probably we will get in the debug console the values because once it's valid we can then print those out so that's a bit of validation first of all right so now we have this little bit of validation sorted we can go ahead and actually try to register with an email and password and to do that we're going to have to go to our auth service class over here so that we can create a method inside this class to a register with email and password so let's find that comment we created earlier called register with email and password unless create the function here so it's going to return a future much like the rest of the functions or most of them do inside the South service and we're gonna call it register with email and password long function name I know and this is going to take in two arguments it's going to think in an email that they want to sign up with and their password and they're both strings so string email and also string password okay so this is also going to be asynchronous it's gonna make an asynchronous task at some point so we need to mark it as such and then in here we're gonna try something and catch the error if there is one and do something differently so let us now do the try block first of all first of all we want to make a request to firebase and we do that via this thing up here remember the instance of firebase auth and we're going to await this and we're gonna store it in some kind of a variable and that variable type is going to be an auth result much like we did with the sign on and on right here we've got an auth result right here from the action we're going to do something similar so Earth result and we're going to call it result and set that equal to a weight and then use underscore off and we use a method on the firebase instance the firebase auth instance called create user with email and password again long name I know and we need to pass in two named parameters first of all the email and that's the email we get passed into this function right here which is just email and then secondly password which is just the password okay so now we have this function created and now it's going to wait a response from that function okay now once we get that response we want to then do something with it let me just move this down here because it's going up okay and underneath we can then grab the user for that result now that is a firebase user so firebase user is equal to the result dot user makes sense and we want to turn this from a firebase user into a regular user that we created a class for so let us now oops and we can't do this we have to actually name the variable so I'm gonna call this user and now underneath I can say okay I want to now return a value and that value is going to be underscore user from firebase user and we're going to pass in this use it right here remember we created this function way long ago and it was this thing up here okay so now we're returning that user with that UID if this is successful now if it's not successful then we're going to catch the error and I'm going to print the error so print e and then to string like so and we'll return null okay so now when we call this function from our different widgets it's going to take in the email and password it's going to try to create a user with email and password this is a built in firebase auth method and if that's successful it's going to return us a regular user based on our user model that we created over here okay so just a very basic user so that's if this is a success otherwise if it's not a success and we can't sign in with that email and password or rather register with that email and password then we get returned no so now let's try using this function over here inside our register widget so let me copy that and go to the register widget again and down here where we print out these values instead of doing that now what we want to do is say okay dynamic result because we know we're going to get something back either null or a user and we don't know which one of those it's going to be then we're going to await this off remember we have an instance of Earth up here like that and we're going to use the method on the earth service so dot and then register with email and password and need to pass in the email and password which are stored on the state over here so email and password so let's pass both of those in email and password like so so it's going to try and do that and it's going to wait for that to finish and we're gonna have this right here as the result and that's either going to be null if there was some kind of error or the user so I'm gonna check if it is not if result is equal to null then we want to do something right we want to maybe say okay there's an error here so what I'm gonna do is create up here a piece of state called error so string error like so and to begin with this can just be equal to an empty string now down here if we get null back we can update that error so we can use set state to do that set state and then inside we want to pass in a function and we're going to say error is equal to some kind of error message I'm just gonna say please supply your valid email or something like that okay so if it's not null we don't need to do an else clause right here and do something else because really think about it what do we want to do if the user has successfully registered well we probably want to show them the home page but that is going to happen automatically because remember we have this stream set up inside our root widget which is listening for author changes and when a user successfully registers with firebase we get that user back and that user comes down the same stream is listening for those off changes and it's saying okay now we have a user back the auth state has changed the user has registered and is now automatically signed in and we have that user so automatically when we get that user it's going to show the home page right so let's save this now and save this over here and now let's try this and I'm gonna hope that there's no errors but there might be first of all I'm gonna try it the validation again so register and we get that validation okay so now I'm gonna try adding like Mario and in fact we won't do a valid email we'll do that's not valid and down here we'll say test one two three four okay so let's register and it tries to register at the minute and it's probably going to come back and give us an error now it does do that because it's not taking us to the home page but we're not shown that error anywhere so you know that we get an error here and we update the state we're not actually showing that error anywhere so let's do that and let's do it below the button so underneath the button let's do a comma and for the resized box first of all and inside that will just say height is going to be 12 pixels or something like that and then underneath that we'll do a text widget and that is going to have the text of the error itself so we'll just say error like that so it's going to output that string and then the style is going to be text style and inside that we just want to color this so I'll say color there's going to be colors dots red I'll also give this a font size so it's a bit small at 14 pixels okay so I hope this makes sense as to why I've done this we've added this text here so that if we do get an error bar right here we update the state then that error is going to be displayed down here now to begin with that error is an empty string so it's not really going to show down here but if we do get that error now we have somewhere to output it so let's save this again and you can see right here now we can see please supply a valid email so that was because we got a bad response from firebase trying to sign up and firebase has looked at it on their servers and said look I can't sign a user up with these values because obviously this is not an email right so if I do a valid email now so Mario at and then I'll save the net ninja code euk and register then hopefully now yep it does it goes to the home screen okay because we've now registered we've got that response back through the stream a user to say look now we're signed in automatically as well and when we get that user then we show the home screen now if I was to log out then it's going to show this again because now I've logged down so hope this is all making sense and it's all starting to come together now so now in the next video I want to show you how to actually sign in we've done the register what we can now register but now I want to show you how to sign in