Dive into Firebase Auth on Flutter: Email and Link Sign-in
Flutter is an awesome tool for developing apps on multiple platforms from one codebase. While Flutter is useful, it gets even better when you add Firebase :) In this article I want to go over Firebase Authentication and how it can be used through the FlutterFire plugin. I will cover two main ways that you can use authentication in your apps:
- Email with a password
- Emailed link authentication
In later articles I will also cover:
- Anonymous (session/temporary) authentication
- Phone authentication
- Using Google’s identity provider
- Using third-party identity providers (i.e. Facebook, Twitter, GitHub)
Update: These articles are written :)
It is worth mentioning that while Firebase Authentication should work with Flutter web apps, this post will focus on using it specifically with mobile apps.
For more context on Firebase Authentication, I highly recommend this page and video:
Flutter App Setup
Before we can really dig into implementing Firebase Authentication, we need to set up an initial sample app. The first thing you will want to do is ensure that you have our development environment set up. To keep things simple I will focus on using Android Studio and testing with the Android emulator. If you haven’t set up Flutter for Android Studio before, you can find instructions for that here. Once you’re done you should be able to create a base “Hello World” app that looks like this:
Now that you have an initial Flutter app made, you will also need to get Firebase set up. You can find instructions for doing that in the official Firebase docs. Be sure to include your SHA-1 key when you’re adding your Android app to the Firebase console (you can find instructions for finding your SHA-1 in Android’s official docs). This will be necessary when using Google Sign-In and Email Link authentication.
Additionally, when you reach the point where you’re adding firebase_core and firebase_analytics to your pubspec.yaml file, go ahead and add the following two lines to your dependencies block in order to import Firebase Authentication and Firebase Dynamic Links:
At this point you should be able to select Packages get and install your app.
If everything has worked out as expected, you will see a screen similar to this once you’ve finished setting up your initial app:
For the rest of this article we’ll build out a sample app step-by-step as you learn about the a couple different authentication options that you can use from Firebase in Flutter.
Screen Setup
To keep things easy, we’ll put all of our code for registering a user and signing in existing users in one place: main.dart. You can replace the content of that file with the following:
Let’s take a moment to look into what all is going on here. At the top of the class (1) are the imports that we will use for the majority of our authentication app.
materialis used for providing Material based view widgetsfirebase_authis the base for all of Firebase Authenticationfirebase_dynamic_linkswill be used for Email Link authentication
Below the imports (2) is a global value that retrieves an instance of the FirebaseAuth object. This will be used for managing users between your app and the Firebase backend.
The two blocks (3), MyApp and MyHomePage, are pretty standard Flutter structures, but things get a bit more interesting once we get into _MyHomePageState’s build (4) method. Right now the app consists of an AppBar with a single FlatButton (5) that will check to see if a user is logged in and sign them out if they are. If they are not signed in when the user presses the button, a Snackbar (6) message will be displayed to let the user know that they are not currently authenticated.
The final part of the build method is a ListView (7) that will have an array of widgets that will each represent a different section of this article.
Email + Password Authentication
Now that the initial setup for our example app is done, we can get to some of the more exciting stuff :) Let’s start by going into the Firebase Console and selecting the Authentication page from the left navigation pane.
Once you’re on the Authentication page, select the Sign-in Methods tab.
This page contains each of the available sign-in methods that you can use in Firebase, so we will be returning to this page multiple times during this article.
For now, select the Email/Password option and click on the Enable toggle. You will also notice a toggle for Email link (passwordless sign-in). Go ahead and enable that toggle as well, as passwordless sign-in is the next authentication type that we will learn about. Click on the blue save button once both of those toggles are enabled.
If you return to the Users tab, you’ll notice that it’s currently empty. Let’s go ahead and change that next.
Email and Password Registration
Return to Android Studio and open main.dart. We’re going to update this file to display a form that lets users enter an email and password to register with Firebase. You can start by adding the following classes:
The rest of the work for registering users will happen entirely in the _RegisterEmailSectionState class. Add the following lines to the top of that class:
The GlobalKey<FormState> object will be used for validating the user’s entered email and password, and both of the TextEditingControllers are used for tracking changes to those text fields. The last two attributes, _success and _userEmail, will be used to keep track of state for this screen.
The next step for this sample app is building out the registration UI. Since this part isn’t directly related to Firebase Authentication, you can just replace the entire build method with the following code:
You’ll notice that there is a method, _register(), that is undefined in the above code snippet. This is the most important part of the registration section (who would have guessed?), as it’s where we will retrieve the information from the form that you just created and send it to Firebase through a call to FlutterFire Authentication’s createUserWithEmailAndPassword method. Once this call returns, we will need to update the two state variables that we added earlier (_success and _userEmail).
After all that, it only took one call to createUserWithEmailAndPassword() to create a user on Firebase :) The next thing we will do in this class is add a method to clean up some of our components when users background or close our app.
Finally we need to display the widget that we just built. Return to the ListView in the build method of _MyHomePageState (where we have the comment //TODO: UI widgets will go here) and replace the comment with _RegisterEmailSection(),.
Now that we’re done with the registration page, it’s time to run our app. You should see your two new text fields as soon as you open the app.
Go ahead and enter an email and password. After you hit the submit button you should get a message letting you know that you have successfully registered your email address.
You should also now be able to see that email in the Firebase Console when you return to the Users tab of the Authentication page.
Email and Password Sign-In
Now that you have a registered user, it’s time to learn how to sign users in using an email and password. Go ahead and add two more classes to main.dart:
The _EmailPasswordFormState class should look fairly similar to what you created for the registration page, so let’s just replace all of _EmailPasswordFormState with the full code for the UI and I’ll specifically call out the important parts for this discussion:
The important difference in the above class is that the submit button calls a new method: _signInWithEmailAndPassword(). This method is where you will pass the email and password to Firebase for authentication and retrieve the FirebaseUser object.
Don’t forget to add this widget to your main ListView so that it’ll show up in your UI:
That was a lot, but you’ve made it this far! At this point you should have an example application that lets you register new users and sign them in through Firebase Authentication using email and password. If you run your app you should be able to go to the sign-in screen and enter your account credentials to log in.
In the next section we will explore another ways to authenticate users: Email Link. Thankfully it should be a lot faster now that the initial framework of the app is already created :)
Email Link (Passwordless Sign-In)
The next form of authentication you will learn about is passwordless sign-in using a magic link that is emailed to the user when they want to sign in. This relies on Firebase Dynamic Links to authenticate in Firebase directly from their email without requiring a password.
Before we get into the code we will need to return to the Firebase Console and navigate into the Dynamic Links page under the Grow header on the left side of the console. If you haven’t used Firebase Dynamic Links yet in your project you will be prompted to press a white Get started button. For this case you should be able to select the default URL when creating a new dynamic link.
Next, return to the Authentication page and switch over to the Sign-in method tab. If you scroll down you should see a section titled Authorized domains. Enter your newly created dynamic links domain there.
At this point you should be done in the console if you followed along with the standard email and password authentication portion of this article. If not, select the Email/Password option under Sign-in providers and enable both toggles.
Now that you’re done in the console, it’s time to return to Android Studio. Go ahead and add a call to _EmailLinkSignInSection() to the ListView in _MyHomePageState’s build() method to point to the new class that you will be writing for this section of the tutorial:
This will expand a new widget and UI that is very similar to the previous section, so let’s go ahead and copy the new class into your sign-in file:
Where the above snippet gets a little more interesting is in _signInWithEmailAndLink(). This is a new method inside of your class that has the code that tells Firebase to send a message to your user’s email address.
You will want to make sure that the url you use here is the one you created in the Dynamic Links section of the Firebase Console, and that the iOSBundleID (not currently used in this article) and androidPackageName are correct for your given app.
If you run your app and enter an email address in the new section, your user should be able to receive an email from Firebase Authentication with an authentication link. Unfortunately that link won’t do anything for them right now, so the next step will be properly reacting when your user clicks on that link.
While still within the _EmailLinkSignInSectionState widget, add this method:
This is a standard lifecycle method in Flutter that will be called when the user reopens your app from the Firebase Authentication URL in their email. Within this method you will want to try and retrieve the Dynamic Link that was used to open the app and pull extra data from it, assuming a Dynamic Link was used to open your app.
Finally, you will want to log the user in using the information on that Dynamic Link and update your app’s state.
If everything worked out as expected you should be able to:
- run this app and go to the sign in page
- sign out if you are still signed in from the previous section
- and enter your email in the provided text field under the Test sign in with email and link header
After hitting submit you should receive an email with a login link that will open your app and sign you in.
Conclusion
You’ve made it this far, congratulations! In this article you have learned about:
- using the FlutterFire plugin for Firebase Authentication in a Flutter app
- how to register and sign in a user with their email and password
- and how to use Dynamic Links with Firebase Authentication to support passwordless email sign-in in your app.
The next articles in this series will focus on additional authentication methods provided by Firebase, such as anonymous sign-in, phone authentication, Google Sign-in, and third party identity providers. I hope to see you there!
