Flutter Authentication Tutorial

Flutter Authentication Tutorial

Flutter Authentication Tutorial
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. 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. 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
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
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:

Add dependencies

Click ‘Packages get’ on the top. Also, click on ‘Update Packages’. Great. Now we are almos 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

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

Update /android/build.gradle

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

Update android/app/build.gradle

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.

Structure of tutorial project
Structure of 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(). 

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

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. 

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

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 this lines to the top of our build widget. It sets the opacity, in case the user is currently logging in.

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


4 Responses

  1. The Firebase bit did not work for some reason. Is there a workaround for this?

    I am testing on a device running android API level 22.

    Kindly assist.

    • Hello,
      Where exactly did you have a problem?
      Could you add your app to firebase?
      best regards

      Edit:
      Please check the part ‘Update your build.gradle files’. I forgot to mention it in the original post, but added it since then.

Leave a Reply

Your email address will not be published. Required fields are marked *

Post comment