Flutter Authentication Tutorial

This Flutter Authentication Tutorial is using Google Sign-in and Firebase to make a demo application for logging in, logging out and deleting a user from Google Firebase. Please keep in mind that this is done on Android Studio. Also, click the link for more information on how to set up Flutter for Android Studio. If you are using another IDE, don’t worry, the code should not be any different.

Flutter Authentication Tutorial App

If everything goes well, the Application should look like the screenshot. In the end, it should be able to log in a user to Firebase via Google, to log him out, or to delete the user, in case a user was once logged in. We also add a circle progress bar at the bottom, to show, when the app is busy.

Setting everything up for the Flutter Authentication Tutorial

To get started, we have to set up Google Firebase for our project. Here, I will go through the process of setting up Firebase for Android in Android Studio here.

Add Firebase to your project

First, go to your Firebase console, and create a new project. When the project is ready, add a new app to Firebase (Choose your phone OS). Follow the instructions, download the google-services.json file and copy it into your Android/app/ folder (see screenshot left).

Copy .json file into Android/app folder of yourFlutter project

Do not forget to add the SHA-1, since you need it for authentication. Check here, if you do not know how to get your SHA-1. You can skip the last step, where Google waits for communication with their server, for now. For more information on how to set up Firebase for Flutter check here.

Add Sign-in method

Then in your Firebase Console go to Authentication (you find it in the panel on the left-hand side). There you will find a list of Sign-in providers. For this Flutter Authentication Tutorial only enable Google, since we only connect with the Google sign in.

Sign-in method – Enable Google Sign-in

Add dependencies to your project

So far, so good. Next, go to your pubspec.yaml file in your project folder. Then add the following under dependencies:

View the code on Gist. Add dependencies

Click ‘Packages get’ on the top. Also, click on ‘Update Packages’. Great. So, now we are almost ready to start coding our little application.

Update your build.gradle files

You also have to update two of your build.gradle files. The first you will find in /android/build.gradle and the second one is in /android/app/build.gradle.

Update build.gradle

For the one located in /android/build.gradle, add the following to dependencies (please do not change the version of google-services. This can change, since Flutter is still in Beta. Check the official site, for the current version from time to time):

View the code on Gist. Update /android/build.gradle

And for the one located in /android/app/build.gradle please add this code snippet at the very end:

View the code on Gist. Update android/app/build.gradle

As raisa pointed out in the comments section: As of now (April 2019) you should also add the following to ./android/gradle.properties to make sure the app is working. Keep in mind, that this may change in the Future:

View the code on Gist.

Start coding app

Now let’s get into the meat of it. First, let us define how we structure our project for this Flutter Authentication Tutorial.

Structure of the project

Have a look at the screenshot, to see how I did it. I created a folder /scr in /lib. In /scr, I made a folder called /auth. I then created authHelper.dart in /auth and home.dart as well as startApp.dart in /src. You can structure your project however you like, of course. Just keep in mind to change the respective parts of the code if necessary.

Structure of the tutorial project

Main.dart

Have a look at the following code snippets. This is the entry point of the Flutter app. Here we just tell it to run StartApp().

View the code on Gist. Here is our runApp

StartApp.dart

In startApp.dart we will then define the theme of our app. We will also import our home.dart, create a StatelessWidget, define the theme colours and set our home to Home().

View the code on Gist. In StartApp we define just our theme

Home.dart

Here we import flutter/material.dart as well as our authHelper.dart. We then create a StatefulWidget.

View the code on Gist. Home sweet home

Our _Home() will look like the following: We create an app bar with the Title ‘Flutter Authentication Tutorial’. Then we want a text field as well as three buttons, one called ‘Login’, another ‘Logout’ and the third ‘Delete’. You can place them however you like. I also gave them different colours. And the onPressed will be explained in a minute. Also, we add a circular progress indicator that will be shown, when the app is busy.

View the code on Gist.

Next, we need a couple of variables and functions. First, we create mUser and mUserName. Also, we will add a bool with the name isLoggingIn. Every time, when the app tries to log in, we will set it to true. If it is true, the buttons will be disabled (if onPressed is set to null, the button is disabled). Whenever we click Login, we will call loginWithGoogle from our authHelper. So, we check for Errors, and if everything goes well, we set back isLoggingIn and display the username from our fetched user.

View the code on Gist.

Still in home.dart

Also, we need the functions clickLogout and clickDelete. On clickLogout we will call logoutWithGoogle from authHelper. If it completes we set the text field to ‘No user is logged in’. So, when we click clickDelete, the user will get deleted from Firebase.

View the code on Gist.

As the last thing in home.dart, we add these lines to the top of our build widget. It sets the opacity, in case the user is currently logging in.

View the code on Gist.

AuthHelper.dart

We are almost done. Let us add this code to the authHelper.dart file. Firebase_auth and google_sign_in are needed for the authentication process. When calling loginWithGoogle we first try to get a user. If this fails, we try to sign in silently. In case this also fails, we call the signIn function. This opens the Google sign-in menu. If it gets canceled we throw an error. Then we wait for authentication and try to get a Firebase user. And if everything goes well, we have a user and the user is not anonymous.

View the code on Gist.

Then we just need the logoutWithGoogle and the deleteUserWithGoogle functions. So, if we log out, we call signOut from Firebase and signOut from googleSignIn. Also, when we delete the user we first log out and then delete the user completely.

View the code on Gist.

Please keep in mind, that Flutter is still in beta, and things can change. But I will try to keep everything up to date as good as possible though (except exact version numbers).

And that’s it. If you have any questions or find any improvements to be made, do not hesitate to leave a comment. For more Flutter tutorials, please check here. You may also be interested in how to use Firestore with Flutter. Or how to make dynamic localization in Flutter.