Flutter Firebase Authentication [2023] The Cleanest Way

how to use firebase auth to build a sign up screen sign in screen reset password screen and email verification screen set up firebase to set up firebase for your flutter project go to consolefirebasegoggle.com and then click on add project give it any project name that you like and click on continue next scroll a bit down disable google analytics and click on create project after some loading time click on continue now we need to link this firebase project to our flutter project therefore click on this android symbol first we need to get the android package name therefore go to your android app build gradle file scroll a bit down until you see this application id that you need to copy back in your browser paste it inside and click on register app next download the google services json file this file holds all the information to link your firebase project to your flutter project therefore you need to drag this file inside of your android app folder in your browser scroll again down and click on next finally we need to add some configurations to the build gradle file therefore copy this google services class path then go to the build gradle file inside the android folder inside this file you go to build script dependencies and after this last dependencies you add this class pass inside back in your browser scroll a bit down and copy the line apply google services now you need to go to the android app folder and here you have another build gradle file scroll all the way down until you come to the end of the file and paste this line apply google services inside also go a bit up until you come to this default config and here you set the min sdk version to 21. in your browser you can scroll all the way down click on next and click on continue to the console to complete this setup step and lastly to use firebase you go to your pubspec yaml file in your flutter project in my case i add the firebase database cloud firestore to my pubspec yammer file save this file and get the dependencies and finally to set up firebase for your flutter project go to the main message and here you change these three lines make sure to import the firebase core library to initialize your firebase app also make sure to stop your flutter app and run it again if firebase was configured correctly it will load your flutter app otherwise in case your flutter app crashes then you have missed some of the configuration steps shown in this video sign in how to use firebase authentication in flutter to log in a user via email and password and we will also log out the user again firstly make sure that you have set up a firebase project and then you can go to the authentication tab click on get started choose email and password enable email and password and click on save secondly on our page we create a login widget inside the login widget we create a column within the build method then we create two text fields and below it we create one button if we press on this button then we call a message sign in and lastly we call the method sign in with email and password from the firebase auth package whereas you need to supply an email and a password and we take the email and password from our text fields therefore i have created in my state an email and password controller and the email controller is attached to a text field as well as the password controller is also attached to a text field to make use of the sign in with email and password method therefore make sure that you also go to your pubspec yammer file and under your dependencies you need to include the firebase auth package let's also go to the main page where we have implemented our login widget and we want to wrap the login widget inside of a stream builder and then we use the firebase auth package to get the auth state changes which means we can determine if the user was logged in and if the user was logged in then we want to display the home page and if the user is logged out again then we want to display the login widget and at the end we go back to our firebase project to the authentication tab and here to the users and now we create a new user therefore we click on add user give it an email and also let's put here a password inside and click on add user let's try it out with our flutter app put the email and password in your text field and click on sign in and then we go to the home page so after a successful log in the stream builder will rebuild this widget and therefore it displays the home page and inside of the home page you can access the user information and we can also display it inside of our scaffold so we access the user email and display it inside of our ui also we can create a logout button below and if we click on the sign out button then we want to log out again from firebase and therefore you can call on firebaseos the sign out method before we click on the sign out button let's also close this application and let's start it again and you see the user is still locked into the application as long as he hasn't signed out yet therefore let's click on sign out and then we go back to the sign in form so to sum everything again up the stream builder always takes care that if the user is signed in then we display the home page and otherwise we display the login form that we are currently displaying and here inside you can also add some other cases so for example if you are currently waiting then you can add a loading indicator or if during the login goes something wrong then you can also add here some error message at the end we want to do some minor improvements therefore let's go to the login widget and here we go down to the sign in method and we want to make sure that we wrap the sign in logic inside of a try catch so in case something goes wrong then we want to catch this arrow also before we call the sign in method we want to show some loading indicator to the user therefore we create a dialog and we display a loading indicator inside after the login to firebase we want to hide this loading dialog again and therefore we call on our navigator the pop until method to hide this dialog to make this work you cannot use the navigator of context instead you need to use a navigator key simply go to the main file to your material app and inside of it we want to add a navigator key that we define here at the top and with this if i click this time on the sign in button then we have a loading indicator until we are logged in sign up how to use firebase authentication to build a signup 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 tab 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 awes 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 signup 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 sign up 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 valley data 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 snack bar 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 youtube 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 reset password how to use firebase authentication to build a forgot password screen in flutter for requesting a reset of the user password let's start at the login widget that we have created in the last videos here on the right side and now inside the build method below our sign in button we want to create a gesture detector with a text forgot password so if we click on this forgot password text then we want to navigate to the forgot password page and this is a new page that we want to create so let's create a widget for god password page and with this we can click on this forgot password text inside the build message we want to create first of all a text form field which is our email field and this code is exactly the same as in the last videos where we have also some validation included and below this text form field we want to create a button with the text reset password if we click on this button we call a message verify email and inside of it we call the send password reset email from the firebase auth package and inside of it we put then the text of our email field inside by accessing the email controller which we have basically attached to our text form field and that i have created here at the top within our state so all in all if we call the send password reset email method then to this email that we provide an email will be sent to reset the password we also want to give the user in our app some feedback therefore we show a snack bar with the text that a password reset email was sent also we make sure that we put our case inside of a try and catch and in case some error occurs then we want to show again a snack bar with the error message similar to what we have learned in the last videos also before we send the password reset email we want to show inside of our ui a loading indicator that is showing as long as we need to execute this method and after it we can again hide the loading indicator by calling the pop until method or within our error case we call the pop method let's also try this example out we put an email inside that we also have inside of the firebase authentication server and then i click reset password and now it says password resent email was sent after this you can go to your email client and you should get this password reset email and inside of it you have this link on which you need to click then you can enter here a new password and click on save and it says the password was changed successfully back on the sign in screen you can enter this password that you have changed and after this you click on sign in and you see it is working we are signed in to our home area email verification how to add firebase email verification when a user signs up with this email and password in a flutter app then this user needs to verify his email first to get full access to the app so far we have created the sign up page and if we click on the sign up button then we call the signup method and inside of it we call then this create user with email and password method on our firebase auth package and inside of it we define an email and this is the email that we want to verify right now therefore inside of the main page we have created a stream builder and every time if we have created an account then we are going to our home page however this time we also want to verify our email and therefore we create a page in between inside this widget verify email page we create a boolean flag if the email is verified or not and by default it is not verified and within the build method depending on this flag if it is verified then we show a home page otherwise we will create another page instead next within the init state method we want to get the is email verified flag so we want to update it from our current user and therefore it is important that we have created before this user already because only on this user you can get this is email verified flag now that we have this flag if our email is already verified or not we can decide what we want to do if it is not verified then we want to send a verification email so let's also create this method inside of it we get again the current user and then we call on it the send email verification method so you always need to have a user to also use this method send email verification otherwise it is not working with firebase and flutter in case something goes wrong then we also want to catch it and show it inside of the snack bar within our ui let's also try it out we put the email and password inside and then we click on sign up and then it goes first of all to the verify email page and we also get an email within our email client and inside of it you have a link with which you can verify your email before we click on this link we want to check after we have sent the email verification the status if we have verified our email therefore we check every three seconds a method check email verified and we also want to put this timer inside of a variable within our state and also make sure that you dispose this timer in case it is not used anymore and now we want to create the message check email verified that is executed all three seconds and inside of this method we want to get then the status if our email is verified therefore we can get the current user and here we get the status if the email is verified and the important thing is that we need to reload the user every time before we call this is email verified because the status can change and therefore we want to get from the firebase the new status after the email verification and finally we check if the email is verified then we want to cancel our timer so that this code is not executed anymore and with this we check not anymore the email because it is already verified make sure to click on hot restart so that the init state method is called again and with this we have created this timer that is now right now in the background executing every 3 seconds and it checks if our email is verified now we can go back to the email client and because we have hot restarted the application we also get another email and inside of this email we click on this link the browser opens up and it says your email has been verified and once the email is verified it will automatically redirect to the home page and this is because inside this check email verified method the flag is email verified is updated to true after we have verified our email and with this we can go to our build method which is rebuilt and then we display the home page instead of the verify email page at the end we also want to improve this design of the verify email page therefore here inside of it we want to display first of all a that a verification email has been sent to this email and secondly we also want to create a button so that the user has the possibility to click on this button to resent an email therefore if we click on this button then we want to call this message send verification email that we have created before if you like you can also check within your email button first of all if you can resent the email because you don't want to allow the user to always click multiple times on this button therefore we create within our state this boolean flag if we can resend it and finally after we have sent the email verification to the user then we want to set the flag can resent email to false with this the button that we have here on the right side will be deactivated and after five seconds we activate this button again and lastly below the resent email button we want to create another button that is a cancel button and if we click on this button then we want to call the firebase auth sign out method and with this if we click on this cancel button then we cancel the email verification process and go automatically back to the sign in page so to sum everything up first of all we are on the sign up page and when we click on the sign up button then a new user account is created and we go to the verify email page it is important to notice that the user is then already created within the firebase authentication tab under the user section but before the user can enter our app he needs to go to his email client and he needs to click on this link to verify his email also if he clicks for example on cancel and then he tries to sign into this account that was already created then he will also go to the verification email page and the user gets an also a new verification email and the only way how he can enter the app is by clicking on this verification link and now once he has verified his email he will be signed in to our home page and of course once he has verified his email once and we sign out again and then if the user logs in again and he has already verified his email then he will automatically go to the home page and he doesn't have to verify his email again at the end i want to emphasize again that before the user has verified his email he is already created inside of this firebase authentication user tab and this is because you can only send the verification email if you have created before a user object however inside of your flutter app you can always access on this user the property email verified and then you can check if he gets more access or not so you can use this inside of your app and within the cloud firestore security rules you can give the user read and write access in case he has for example only his email verified [Music]

Channel: HeyFlutter․com

Views: 131,302

Keywords: firebase authentication, firebase flutter auth, flutter, flutter authentication, flutter auto sign in, flutter automatic authentication, flutter firebase, flutter firebase auth, flutter firebase auth clean, flutter firebase auth tutorial, flutter firebase auth ui, flutter firebase authentication, flutter firebase login, flutter firebase login example, flutter firebase sign in, flutter firebase tutorial

Id: 4vKiJZNPhss

Length: 23min 32sec (1412 seconds)

Published: Thu Apr 21 2022