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