FlutterFire: Authentication Made Easy
Tags: firebase, flutter, opensource, programming
Published: 2022-09-17 08:35:17



![FlutterFire: Flutter X Firebase](https://cdn-images-1.medium.com/max/3200/1*fDrmv8OPtunyg9j3rP4U6w.png)

Firebase probably is a popular and by far the most widely used backend with Flutter. In this series of FlutterFire, we’ll be covering everything one needs to know about Flutter Firebase Integration and everything one might need if they plan on using Firebase as a backend for their Flutter Applications.

Starting with this article, where we’ll be taking a look at how we can integrate Firebase User Authentication in our Flutter Apps.

User Authentication is one of the crucial parts of a Flutter Application. There are plenty of ways you can do this with Firebase i-e; Anonymous Sign-In, Email, and Password, Google Sign-In, etc. In this tutorial, we’ll be going through the anonymous sign-in and signing in using email and password.

**Why choose Firebase?**

Firebase goes very well with Flutter and is very reliable. If you’ve had a chance to read the official [Flutter documentation](https://flutter.dev/docs), you’ll find a section dedicated to the Firebase documentation guide with Flutter. You can check that out [here](https://flutter.dev/docs/development/data-and-backend/firebase).

Without any further ado, let’s take a look at the diagram so we can understand and remove the complexity of its layout structure altogether.

![FlutterFire: Firebase Auth Application Structure](https://cdn-images-1.medium.com/max/2000/1*41JnzV0PV6cUJmbnDMrlzA.png)

Let’s start off with breaking down the figure. With *MyApp* being the root of our application, the Wrapper widget sits under it. That Wrapper widget is responsible for showing the different screens to the user based on the login status of the user. For instance, we would want to show the *homeScreen* only in the case where the user is logged in and otherwise we would want to show the *login* or the *register* screen.

After creating the base Flutter Project, let’s create a Firebase Project and link the firebase project to our project. There are two ways you can do this: By going to the firebase console and manually setting up the project and then placing the services.json file in the required directory or by using Firebase Command Line Interface for Flutter called *FlutterFire* CLI. To make things easier, we’ll set up the project using *FlutterFire* CLI. Assuming you have FlutterFire installed (check [*guide*](https://firebase.google.com/docs/flutter/setup?platform=android)), Inside the project directory, type the following command:
>  flutterfire configure

![FlutterFire: Firebase Project Setup](https://cdn-images-1.medium.com/max/2000/1*9MElOzMQKD7XomjYk0apZQ.png)

After logging in to your google account, it’ll show you the list of all the firebase projects you have and at the very end, give you an option to create a new project. While creating a new project, it’ll ask you for a name that you want to set for your project.

![FlutterFire: Firebase Project Setup](https://cdn-images-1.medium.com/max/2000/1*gu76gkui6FHDSXcc_OARKg.png)

After that, you’ll be presented with a list and asked for which platforms you want to create the project. And that is pretty much it.

![FlutterFire: Firebase Project Setup](https://cdn-images-1.medium.com/max/2000/1*jzV--m3mIVFnKcTw8uLYHw.png)

The rest will be handled by FlutterFire itself! No need to download any additional files and struggle to place them in the right directory.

Now that our project is configured with Firebase, let’s start building and take a look at how different pages will look.

![FlutterFire: HomeScreen Layout](https://cdn-images-1.medium.com/max/2000/1*2S92oWY_1N4DLY1U5lZ1EA.png)

For the *homesceen*, we’ll have an app bar showing the title of our application. In the body, We’ll have a column containing a text widget and an elevated button which will be used to log the user out of the application.

![FlutterFire: RegisterScreen Layout](https://cdn-images-1.medium.com/max/2000/1*qGrSX8q_ZEVQ4qAJ7Djfvg.png)

As for the *RegisterScreen*, we’ll have an app bar showing the title of the screen with a button to switch to the *loginScreen*. In the body, We’ll be taking the username, email, and password of the user and registering them on [*firebase*](https://firebase.google.com/docs/auth/flutter/password-auth) using the register button.

![FlutterFire: RegisterScreen Layout](https://cdn-images-1.medium.com/max/2000/1*w3UObGGL6B-TSOAb3976JA.png)

The *LoginScreen* is pretty much like the *RegisterScreen*.In this one,we’ll have an app bar showing the title of the screen with a button to switch to the *RegisterScreen*. In the body, We’ll be taking the email, and password of the user and sign them into the application (If they already have registered). If not, we’ll ask them to register first.

Nothing too fancy, right? Well, This is where the fun part begins. Let’s jump into the Flutter side of things now.

Starting off with the main.dart file:

![FlutterFire: Firebase Auth main.dart](https://cdn-images-1.medium.com/max/2388/1*FfAgWB9Uu7gP-vSevwrV7w.png)

Nothing to talk much about here, Just the usual firebase setup and the MyApp Widget in the main function that contains a Material Widget with some basic theme setup and routes setup. The initial routes return the *Wrapper()* widget responsible for showing relavant screens which we talked about earlier. Before we take about this *Wrapper()* widget, let’s take a look at the *Login and the Register Screens.* The code for the Register Screen looks like this:

![FlutterFire: Register Screen Code](https://cdn-images-1.medium.com/max/3232/1*MZs_RkA8bfLLjFnqpePRtw.png)

For now, we’ll just ignore the *onPressed* function but will later talk about it when we will define the functions for Registering and Logging the User in for firebase. For the rest, we have a form with some basic validation in place for the *formfields* and a button to Register the user.

The Screen looks something like this:

![FlutterFire: Register Screen](https://cdn-images-1.medium.com/max/2160/1*ucU6g7g9SpbqieO_tY1HLA.png)

The Login Screen code looks very similar to the Register screen code and it looks something like this:

![FlutterFire: Login Screen Code](https://cdn-images-1.medium.com/max/3232/1*qqheHs6Y2tCcRr1hIEABaw.png)

Visually, the screen’s nothing too fancy and has two *formfields* now unlike the Register Screen which had three. Also, there’s a button below the *formfields* to log the user into the application and looks something like this:

![FlutterFire: Login Screen](https://cdn-images-1.medium.com/max/2160/1*6d7TvFagtCWkG6YkStzlog.png)

Now we get to the main part, the part where we define the functions for the users to register and then log into the application. Before anything, Go to the firebase console and allow the Email and Anonymous Authentication Methods. Here’s how to do it:
>  go to [*Firebase Console*](https://console.firebase.google.com/)
From the list of projects, select your project:

![FlutterFire: Firebase Projects Console](https://cdn-images-1.medium.com/max/2472/1*nFwF_GOlTCygdBDWEM9AaQ.png)

After choosing the project, Under build, choose Authentication

![FlutterFire: Firebase Authentication Console](https://cdn-images-1.medium.com/max/2420/1*p6bQ_VKS__5C7vV6z-lS3A.png)

Under Sign-in methods, Click add a new Provider and choose Email/Password and Anonymous Sign-in or whatever other methods you fancy. We’ll be adding Email/Password and Anonymous Login for now. Just make sure that the methods you’re adding have their status enabled.

![FlutterFire: Firebase Authentication Console](https://cdn-images-1.medium.com/max/2468/1*sz-SCK2cpta_PJ2-MrKvmQ.png)

Now, we’re all set from Firebase Console and need to define the methods that take the credentials from the user and register them onto firebase and then log them into the application.

Conveniently, Firebase has built-in methods for basic authentications including one for anonymous sign-in and email/password sign-in. We’ll be using them to our help. Now, let’s define the methods in dart one by one.

After installing Firebase core and Firebase Auth packages, an instance of *FirebaseAuth* is exposed to us using which we can access the different firebase authentication methods. Let’s start off with the very basic *AnonymousLogin* function. 
The Firebase equivalent of the function is called ***signInAnonymously*** which can be accessed through the FirebaseAuth instance that we talked earlier about as:

![FlutterFire: Firebase Anonymous Function Definition](https://cdn-images-1.medium.com/max/2388/1*44VcsejTBXvETg-3o-tf1w.png)

Using the *FirebaseAuth* instance, this function calls the **signInAnonymously** method and logs the User into our application.

Next, for the Email/Password Registering, the firebase function ***createUserWithEmailAndPassword*** comes in handy. The function requires two parameters. Yeap you guessed it right. The Email and password that we can pass through the constructor. The Function returns a UserCrendentials Object which has our Firebase User.

![FlutterFire: Firebase Email/Password User Registration](https://cdn-images-1.medium.com/max/3064/1*eIF9ARXE2c7KK4xZLeFdbg.png)
>  Coincidentally, my dart method has the same name as the firebase function but do keep in mind that those are two different methods.

Now for the final Firebase Method, let’s take a look at the login function which thankfully is called ***signInWithEmailAndPassword***. 
The function, like the register user function, requires Email and Password as a parameter and returns a UserCredential which contains our firebase User. The code looks something like this:

![FlutterFire: Firebase User Sign in](https://cdn-images-1.medium.com/max/2928/1*ejzicCRvtdFeTbl7xK-5sg.png)

We’ve talked about Registering, Sign-in but what if the user wants to logout? Firebase got you covered there as well. The firebase function ***signout*** comes to handy there. It works like this:

![FlutterFire: Firebase Signout Function](https://cdn-images-1.medium.com/max/2524/1*fZtYKM920SuClRANFe1RAw.png)

Now that all is set in terms of functions, let’s talk about the *onPressed* Function that we skipped earlier. Since all the Firebase Functions return Futures meaning that they may take some time. We use async/await so to tell Dart that this particular function is supposed to take time to return something back. And once we get the value back, we know that its a Future of type dynamic so we store it in a variable and then use it to perform actions like showing the *LoadingSpinner* until we get a response back from the Future.

Aren’t we still missing something? Yes, indeed we are. Remember we talked, well, not really talked but mentioned the Wrapper widget and almost forgot it afterwards? Not really :’p

Let’s talk about why it's needed and why is it a significant part of our application. Reminding ourselves of the widget tree diagram we saw are the very beginning, we know that the Wrapper widget stands below the *MyApp* widget and above the *homeScreen* and the *Login* and the *RegisterScreen*.

But why is it so? To Answer that, let’s take a look at the code:

![FlutterFire: Wrapper Widget](https://cdn-images-1.medium.com/max/2456/1*hLta1etOGcRJ_JtJofR4vQ.png)

So, in very simple words, [*Streams*](https://dart.dev/tutorials/language/streams) are like continuous Futures. What I mean by it is that a Stream is a sequence of continuous asynchronous events. Unlike Futures, where we ask for the Future response, the Stream keeps on returning new responses back (if there are any). The [*StreamBuilder* ](https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html)used here is just like [*FutureBuilder](https://api.flutter.dev/flutter/widgets/FutureBuilder/FutureBuilder.html) *but for Streams. The FirebaseAuth instance provides a stream called ***authStateChanges*** which as the name suggests provides the authentication changes stream. The StreamBuilder in the Wrapper Widget is listening to any changes in the authentication status and based on the current authentication status, it either shows the *HomeScreen*

![FlutterFire: Home Screen](https://cdn-images-1.medium.com/max/2160/1*j3Zl2gZZUgeTgHHEnDra6g.png)

or if the user logs out, shows the relevant Authentication Screen (Login / Register).

That’s all for now Folks! This is the first of many in the series. Thanks for reading this article ❤️

Clap 👏 If you learned something new today.

Feel free to post any queries or corrections you think are required ✔
Do leave feedback so I can improve on my content. Thank you! 😃

You can also Follow me on:

* [Github](https://github.com/iizmotabar)

* [Twitter](https://twitter.com/iizmotabar)

**If you’re interested, here are some of my other articles**:
[**Demystifying Dart: Execution Thread & Dart Call Stack**](https://dev.to/iizmotabar/demystifying-dart-execution-thread-dart-call-stack-5del)
[**Flutter 3.3: What’s New?**](https://dev.to/iizmotabar/flutter-33-whats-new-3pmb)
[**Getting Started with Git and Github**](https://dev.to/iizmotabar/getting-started-with-git-and-github-45ik)