Flutter Authentication with Firebase.

Photo by Artur Shamsutdinov on Unsplash

I have been playing around with flutter and firebase in the past month and I have to agree with you all that flutter and firebase is the best combo out here. I’m going to through all the steps with you on how to use firebase authentication in your next project.

Setting up firebase

You have to first setup the firebase in order to use the authentication service. First login or signup to your firebase account.

Firebase new project

Then go to your firebase console and create a new project. Follow the prompts and you will have created your new firebase project.

On your new project click on the authentication tab.

Firebase tabs

Firebase supports many authentication methods and providers but in this moment we are going to use the email and password method.

Authentication providers

Click on the email and password provider and enable it.

Email and password provider.

That’s all you need to do right now to setup authentication.

Installing Firebase CLI

In order to configure your firebase project to be used by flutter. You need to install the flutter cli.

To install the cli you need to have node.js on your computer because the cli is installed using npm.

npm install -g firebase-tools

If you are on linux and get problems with permission remember to use sudo

Next install flutterfire cli using

dart pub global activate flutterfire_cli

The FlutterFire CLI extracts information from your Firebase project and selected project applications to generate all the configuration for a specific platform.

In the root of your application run the configure command to configure your firebase with flutter

flutterfire configure

Flutterfire configure command will guide you to select the platforms that you want to use and allow you to select your firebase project.

Adding Firebase dependencies to Flutter

To user flutter in your firebase project you need to add the following dependencies in your pubsec.yaml file.

pubsec.yaml

Setting up main.dart

You have to change the main function to an async function and intialize firebase. To learn what WidgetsFlutterBinding.ensureInitialized() does you can read this answer from stack overflow or the flutter documentation.

How the main.dart file looks in full

main.dart

We import the firebase_auth package and create a variable result of type User which checks if there is a user by calling the current user property. In the home parameter of there is a user who is logged in and if there is he will be directed to the home page and if not he will be directed to the signup screen.

The home page is passed a name parameter which will contain the users display name which is a property in firebase_auth.

Creating Home Screen

We create an simple homescreen which just greets the user by name.

In home page we expect to be passed a user parameter in order to display it in the text.

Creating a signup screen

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.

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 registerToDb() we add the data to 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 displayName by doing result.user.displayname.

NB: dont forget to dispose the text editing controllers

Creating Login Screen

We create a simple login screen with only the email and password fields and a login button.

Inside the elevated button and after validation we call the method loginToDb()

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.

I hope you enjoyed this article.

Happy coding. 🎉🎉