How To Use Firebase Authentication In Flutter

Note: This post was originally published on February 2020 and has been completely revamped and updated for accuracy and comprehensiveness.

In this article, we will create a form to be able to create a new user which will be authenticated using the Firebase authentication and also will be connected to the Firebase Realtime database.

Note: You can find the source code for all the Firebase/Flutter tutorials in the following repository: Firebase-Flutter-tutorials. Support me by starring the repository and following me on Github for more awesome content! You can also subscribe to my newsletter and join me at Discord! Let’s get started 😁

Enabling Firebase Authentication

First to be able to use the email/password firebase authentication method in the application, you need to enable it in the firebase console. Therefore, login to the firebase console then choose the Authentication menu and click on the sign-in method. Check the following image for more information how will it be after enabling it.

So, after enabling it, you can now use Firebase authentication in your project!

Note: If you did not setup Firebase, please check the previous tutorial.

Adding the Firebase Auth To Flutter

To start using the Firebase authentication inside the application, then you need to add the plugin to the pubspec.yaml:

For the purpose of this tutorial, the above dependencies were added. The firebase_database will enable you to add the authenticated users to the database. The splashscreen creates a splash screen in the application and the flutter_sigin_button contains customized sign in buttons.

Creating A Splash Screen

First to easily create a splash screen, you can use the dependency splashscreen and just use it in the code. Inside the main.dart, create a statelesswidget:

Now let’s create the IntroScreen() widget:

As, you can see the SplashScreen class will create a splash screen for you. Since, we are using Image.asset, then you need to add an image inside the pubspec.yaml file so it can appear in the splash screen.

Inside the build() method we get the currently logged in user by calling the property currentUser which returns the user of type User. Inside the SplashScreen() widget we use the navigateAfterSeconds property which either takes a widget as a value or string if you are using named route. So here we use the ternary operator to check if result is not null then navigate to the Home Screen else navigate to the SignUp Screen.

Creating Different Sign Up Buttons

In the SignUp page, we can create different buttons to sign up. For example, we can create a button to sign up using Google Sign in or using Twitter:

To create the above interface you need to do the following:

So we use a Column widget and the children property, and inside we use the class SignInButton which will create different custom sign in buttons that are from the dependency flutter_signin_button.

In this tutorial, we will only use the email method. The Log in Using Email will navigate to the EmailLogIn page while the Sign up with Email will navigate to the SignUp page.

Creating The Email Sign Up Form

Inside this page, we need to create a form that will navigate to the Home page when clicking submit and will add the data to both the Firebase database and the Firebase authentication console. So, first under the created State class we need to declare the following variables:

The GlobalKey is used to identify this form, we also create a reference to the child Users and we create the TextEditingController that will be attached to the textformfield. Then inside the build method we create the Form:

We create four textformfields and each field will contain its own validation. After that we create a ElevatedButton widget that will be the submit button:

The method validate() will check if all the fields are validated, then inside the method registerToFb() we add the data to Firebase database and Firebase authentication. This is the most important part:

So, first we call the method createUserWithEmailAndPassword that will create the user inside the firebase authentication, we also pass the email and the password to this method. To access both the value of the email and the password we need to use the property text on the TextEditingController. Since the createUserWithEmailAndPassword returns a Future<AuthResult>, then we will use the method then() that will take a callback which will contain a variable of type AuthResult, and since the class AuthResult contains the variable user of type FirebaseUser then we can retreive the uid by doing result.user.uid.

After that we use the method set() to add the data to the firebase realtime database. The reason we add the data to the database because on the sign up page that user may add additional data othe than the email and the password, which cannot be added to the firebase authentication. Therefore we add both the age and the name to the database.

After successfully adding the data, we navigate to the Home page and send the uid as an argument. The second important part is the catchError, which is used to catch any error for asynchronous method and since you want the user to know why it was unsuccessful, then you need to use the function showDialog that will show a dialog with the error that occured:

Don’t forget to dispose the texteditingcontroller:

Creating a Drawer

So first inside the Home page, we create a Statelesswidget and inside the build method we do the following:

We add an icon on the appBar that will be used to sign out the user. So, we use the method signOut that returns a Future, after the Future is finished we navigate to the SignUp page, which is the first page after the splash screen.

The Scaffold widget contains a property called drawer which takes a widget as a value. Therefore you can create a class that extends a statelesswidget which will act as the drawer in the application.

Then inside the build method of the class _NavigateDrawerState (Since NavigationDrawer is a statefulwidget), we use a FutureBuilder to retrieve the name and age of the user and add it in the header of the drawer. Therefore inside the FutureBuilder, we create the drawer:

Inside the Drawer, we use a ListView and the children property. First we add the UserAccountsDrawerHeader which is a material design Drawer header that identifies the app's user, which will contain the name and the age retrieved from the database. Then we use a ListTile which will be an item inside the drawer that will navigate to different pages.

Log In To the Flutter Application

After the user signs out of the application, then we need to create another form for log in. Inside the log in form, we will have only the email field, the password field and a elevated button. Inside the elevated button and after validation we call the method loginToFb():

So here we use the method signInWithEmailAndPassword to sign in the user and we also pass both the email and the password as parameter. After this asynchronous method is finished we navigate to the home page, if this method throws any error then it will be catched by the catchError and shown on the screen by the alertdialog.

You can find the source code here: Firebase Auth Tutorial

I hope you enjoyed this Flutter/Firebase article, in the next article I will use firestore to store data.

Originally published at https://petercoding.com on February 25, 2020.