Flutter Tutorial - Sign Up | Firebase Authentication 🔥 2/4 Email And Password

how to use firebase authentication to build a sign up screen in flutter for creating a user account with an email and a password in the last video we have created this login widget that you see here on the right side and with which we can sign in a user to firebase now under the sign in button we want to create a rich text widget and with this if we click on the sign up text then we want to switch to the sign up screen and therefore if we click on this text span then we want to listen to the on tap handler and then we want to call this unclicked sign up and this is what we want to handle outside of this widget therefore i add this void callback next within the main page where we have implemented this login widget we want to exchange it by an aus page and inside this auth page we want to have a brilliant flag and depending on if the flag is set to true then we show the login widget otherwise we want to show a new sign up widget that we want to create and in both cases we want to implement this unclicked sign up so if we click on this text and also on the signup screen we will implement something similar and if this is the case that we click on it then we want to toggle this is login field and basically change the status and lastly we only need to implement the signup widget and the signup widget works exactly the same as the login widget so right now if i click on the sign up text then we go to the sign up page and this works exactly the same so here we have also again two text fields below it we have a button this time it's only called sign up instead and below it we also have this rich text however the text is a bit different so here it calls in login and if we click on it then we also call this widget on clicked sign in so all in all we can now toggle between the login screen and the sign up screen and now if we click on the sign up button then we want to create with this email and password that we have provided a new account on our firebase authentication server therefore if we click on the sign up button we call the signup method and here inside we call this time the create user with email and password method from the firebase auth package and the same as before we need to put the email and password inside with which we want to create the user account also before we create this account we want to show again a loading indicator and after we have created this account we want to hide this loading indicator again let's also test it out i'm on the signup screen and i have given here an email and a password and now if we click on sign up then he should create a new account and he is also logging us directly inside of this account and also if we refresh the page within our firebase console then you see that he has created here this new account next we want to do some minor improvements such as if we click on the sign up button then it should show us an error in case we haven't completed the form to add this validation we go first of all to our email field and we change it to a text form field and with this you can add some validation for your email field and we use here the email validator package to validate our email and in case our email is not valid then we want to show an error message enter a valid email otherwise the email is valid and the same thing we also do for our password field here we change it to text form field add also a validator property and here we make sure that the password has at least six characters otherwise if it doesn't have six characters then we show an error message and lastly to make this validation work of your text form fields therefore we go up to the column which is wrapping both of these text form fields and here we wrap it then inside of a form widget give it some form key that we define within our state as this global key and lastly we can then use this form key inside of our signup method here we check then if our form is valid with the help of the form key and if it is not valid then we want to return this one and we will not execute this code to create a user account with firebase with this if i click this time on the sign up button then it says we need to put a valid email inside and a valid password and once we enter a valid email and password then we can again sign up our user account another issue that we need to handle is the case that we put an email inside that is already created within our firebase authentication server if this is the case and i click on the sign up button then he will not create this account because it is already created and therefore we want to display an error message to the user that the account was already created to create this error message we simply go to the signup method that is called if we click on the sign up button and here in case something goes wrong during the sign up then we are going here inside of this try catch and here we want to simply display then this error message inside of our screen therefore we want to create a new utils class to show a snack bar let's also create the uterus class with the show snackbar method here we create a snack bar and this gets the text which is in our case the error message and then we use the messenger key to display the snack bar let's also define this messenger key here at the top which is a global key and lastly within the main file within the material app we want to reference then this messenger key that we have created in our utils class with this after hot restarting the application we can again click on the sign up button and we get this time an error message that the email is already in use and also some other error messages are displayed in case some errors occurs we always display it to the user in the ui for the login screen we have exactly the same issue so if we put an email inside that is not yet created within our firebase authentication server and then we click on the sign in button then we get no error message and this is what we want to change simply go to the sign in method of the login widget and here when we sign in the user and some error occurs then we also want to display this error in our snack bar with this if i click this time on the sign in button then we get an error message that there is no such user that we are currently trying to log in [Music] you

Channel: HeyFlutter․com

Views: 18,894

Keywords: firebase, firebase auth flutter, firebase authentication, flutter, flutter authentication, flutter firebase, flutter firebase auth, flutter firebase auth email password, flutter firebase auth pro, flutter firebase auth tutorial, flutter firebase auth ui, flutter firebase authentication, flutter firebase login, flutter firebase sign in, flutter firebase sign up, flutter firebase tutorial, flutter sign up, flutter sign up firebase

Id: OF3lwqcUwPY

Length: 6min 36sec (396 seconds)

Published: Sat Jan 08 2022