Flutter Authentication Tutorial

This Flutter Authentication Tutorial is using Google 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. 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.

If everything goes well, the Application should look like the screenshot. 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. 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. Add a new app to Firebase. Follow the instructions, download the google-services.json file and copy it into your Android/app/ folder (see screenshot left). 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 for now. For more information on how to set up 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.

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:

Click ‘Packages get’ on the top. Also, click on ‘Update Packages’. Great. Now we are ready to start code 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. Please add the following code to the build.gradle files:

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):

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

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:

Start coding the Flutter Authentication Tutorial 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.


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().


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().


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

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. The onPressed will be explained in a minute. Also, we add a circular progress indicator that will be shown, when the app is busy.

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. We check for Errors, and if everything goes well, we set back isLoggingIn and display the username from our fetched user.

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’. When we click clickDelete, the user will get deleted from Firebase.

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.


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 cancelled we throw an error. Then we wait for authentication and try to get a Firebase user. If everything goes well, we have a user and the user is not anonymous.

Then we just need the logoutWithGoogle and the deleteUserWithGoogle functions. If we log out, we call signOut from Firebase and signOut from googleSignIn. When we delete the user we first log out and then delete the user completely.

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.

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

Originally published at www.gotut.net.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Free Time Dev

Free Time Dev

In my spare time I work on Timeless Adventure — a fantasy adventure game