Flutter: Implementing Google Sign In

Souvik Biswas
Jul 14, 2019 · 13 min read
Image for post
Image for post

Introduction

In this article, I will be showing how to set up and implement Google Sign In using Firebase Authentication.

There are a number of articles out there showing how to implement sign-in or login in Flutter, but I am still writing this article because there has been a lot of changes in Flutter ( after the release of Flutter 1.7 ) as well as in the Firebase Google Sign In.

So, I recommend that you have a look at this article at least till the end of Google Sign In setup if you want to start building a new app using Firebase.

So, let’s get started.

Flutter 1.7

With the introduction of Flutter 1.7, the most frustrating thing fixing AndriodX incompatibilities has been taken care of. Now, you can just create a new project using the --androidx flag to ensure the generated project targets the new support library. I will be using this later in the article while creating the project.

Few other important things that have been included in Flutter 1.7, is the support for Android App Bundle and 64-bit Android App support, which is very helpful if you want to publish your app in Play Store. Till now, we had to change the Flutter branch from stable to beta in order to generate Android App Bundle, but now it is available in the stable branch.

You can check out the article “Announcing Flutter 1.7” by Tim Sneath if you want to know about all the new features included in Flutter 1.7.

Google Sign In

There are a few new steps you have to do in order to use Google Sign In in your app. Without completing all these steps, if you try to use Google Sign In, your app will just crash. I will show you how to set up Google Sign In using Firebase from scratch.

App Screenshots

Our final app will look like this:

Image for post
Image for post

Implementation

Before diving into the real coding part, let’s see what are the plugins and assets required in this project.

The plugins needed for this project are:

  1. firebase_auth (for using Firebase Authentication)
  2. google_sign_in (for the implementation of Google Sign In)

Only one image is needed for this project which we will be requiring while designing the Google Sign In button in our app.

You can get the image from here:

Creating the project

Let’s create a new flutter project with AndroidX compatibility.

  1. Open Terminal or use the terminal in your code editor.
  2. Navigate to the folder where you want to create the project and use the following command:

This will add AndroidX compatibility to the project automatically.

But for using the --androidx flag you need to be on the latest version of Flutter on the stable branch.

  1. To check which branch you are currently on, use the command:

The channel marked with an asterisk (*) is your current branch.

2. To change the branch to stable, use the following command:

3. Then upgrade, using the command:

Importing packages

First of all, add the packages in pubspec.yaml file and save it to run flutter packages get.

Image for post
Image for post

Also, create a new folder called “assets” in your project directory and insert the image (google_logo.png) that you downloaded.

Now, add the assets folder in your pubspec.yaml file.

Image for post
Image for post

Coding Part

Go to the main.dart file and import the firebase_auth package.

Image for post
Image for post

Now, run the app on your device to verify whether the AndroidX support is working properly. If you are getting BUILD FAILED error due to AndroidX incompatibilities then it is due to your AndroidX support libraries get not get imported properly.

You should always do this step first so that you don’t face any trouble later due to AndroidX.

After verifying just delete everything from the main.dart file and paste the boilerplate code given below.

Let’s build the UI for LoginPage.

Create a new dart file called login_page.dart inside the lib folder.

The LoginPage design would look like this:

Image for post
Image for post

This screen just contains two main components:

  1. Flutter Logo
  2. Sign in with Google button

LoginPage should be a Stateful Widget because we will be making some changes to the UI later which will need the widgets to be redrawn.

The code for the LoginPage UI:

Now, we have to design the Sign in with Google button inside the function _signInButton.

The code for button design:

We will fill up the onPressed method later.

Create a new dart file sign_in.dart where we will set up the firebase authentication and google sign in.

First of all, import the two packages:

  1. firebase_auth
  2. google_sign_in

Now, we will need to create an instance of FirebaseAuth & GoogleSignIn.

Then, create two methods:

  1. signInWithGoogle
  2. signOutGoogle

In the signInWithGoogle method we have to use the google sign in data to authenticate a FirebaseUser and then return that user.

In the signOutGoogle method we have to just sign out of the current Google account.

The final methods will look like this:

Now, we have to update the onPressed method of _signInButton inside LoginPage class, so that this signInWithGoogle method gets called.

If the google sign-in is successful then we will be taken to the FirstScreen which I will be implementing next.

For now, we will just add a Container with a light blue background in the FirstScreen for testing the google sign in.

Test UI for FirstScreen:

Setup Firebase project

To create a new Firebase project you will need to go here.

  1. Click on “Add project” to create a new project.
Image for post
Image for post

2. Now, you have to enter a “Project name” and check the two checkboxes below. Then, click on “Create project”.

Image for post
Image for post

3. Now, wait for the creation to complete and click on “Continue”.

Image for post
Image for post

4. This will lead you to the “Project Overview”. From here you will be able to add Firebase to your Flutter project.

Image for post
Image for post

Android setup

First, we will set up Firebase for the Android side.

  1. Click on the Android icon.
  2. In this form, you have to first enter the “Android Package name”. You can get the android package name form your project directoryandroidappsrcAndroidManifest.xml. On the second line, there will be your package name. Just copy & paste in the form.
  3. Then you have to enter an “App nickname” which is optional (if you do not enter then an auto-generated app name would be used).
Image for post
Image for post

4. Now, you have to enter the “SHA-1 hash”. Just hover over the help (?) and click on See this page. This will take you to “Authenticating Your Client” page.

Image for post
Image for post

From here you will get the command to generate the SHA-1 hash. Paste this in your IDE terminal to get the SHA-1 hash. Just copy & paste this in the form.

5. Click on Register App.

Image for post
Image for post

6. This will take you to the second step from where you can download the “google-services.json” file and just drag & drop it in your project directoryandroid → app. Then, click on Next.

Image for post
Image for post

7. In the third step just follow the instructions add the code snippets accordingly in the desired position. Then, click on Next.

Image for post
Image for post

8. Finally, to complete the fourth step just run the app on your device and attempt a google sign in from the device for the first time.

Make sure that the internet connection of the device is turned on.

Image for post
Image for post

9. After completing this step, you will see that the “Continue to Console” button gets enabled and click on it to go to the console of the app.

Image for post
Image for post

But you will find that the app has paused and you will see in your IDE that an Exception has occurred. Don’t worry this exception occurred because we have not enabled Google as a sign-in provider in our Firebase console.

Image for post
Image for post

Let’s fix this issue.

  1. Go to Authentication PageUsers tab and click on “Set up sign-in method”.
Image for post
Image for post

2. In the “sign-in providers” page, edit Google sign-in.

3. Here, you have to enter the project name and support email. And “Enable” this by clicking the toggle on the top-right corner. Then, click on Save.

Image for post
Image for post

4. So, now the google sign in setup is complete. Run the app on the device again.

But to your surprise, you will again see that the same Exception occurs. Now, this gets interesting, this occurs because you have not filled up the OAuth consent form. This is the new change in Firebase that I was talking about from the beginning and it is just driving developers crazy because I have not found them properly documented anywhere.

Let’s see how to fix this issue.

  1. First of all, go to this page here.
  2. Make sure you are signed in with the same account with which you have created the Firebase project.
  3. Also, make sure that on the top-left corner, your project is selected for which you are filling this consent.
Image for post
Image for post

4. Go to Credentials → OAuth consent screen tab and start filling the form.

5. Enter “Application name”, “Application logo” & “Support email”.

In the Application Logo, you can just enter any image if you are not making this for production, otherwise, enter the real app icon that you are using for your application.

Image for post
Image for post

6. Then, scroll down and fill the “Application Homepage link”, “Application Privacy Policy link” and “Application Terms of Services link”.

In all these places, you have to enter the same link starting with http:// then your app domain name which I have marked with green below.

Image for post
Image for post

7. Click on Save.

So, this completes the whole setup process for “Sign in with Google” using Firebase for Android. Now, again run the app on your device and attempt google sign in. You will find that it suddenly started working without any exception.

Note: You should follow all the above steps properly without skipping any of them to get a functional Firebase app.

iOS setup

If you have skipped the Android setup and arrived directly at the iOS setup, then make sure that you check out how to fill the consent form above otherwise you might face some error later.

  1. Go to Settings → General tab.
Image for post
Image for post

2. Scroll down and click on “Add app”.

Image for post
Image for post

3. Now, select iOS.

Image for post
Image for post

4. Enter the iOS bundle ID and App nickname. Then, click on Register app.

Image for post
Image for post

You can get the Bundle ID inside iosRunner.xcodeproj → project.pbxproj by searching for “PRODUCT_BUNDLE_IDENTIFIER” using Ctrl + F.

Image for post
Image for post

5. In the second step, you have to download the GoogleService-Info.plist file.

Image for post
Image for post

6. Open the ios folder of the project directory in Xcode by right-clicking and selecting “Open in Xcode”.

Image for post
Image for post

7. Now, drag & drop the file that you downloaded in the Runner subfolder. A dialog box would appear, make sure in “Add to targetsRunner is selected and click on Finish.

Image for post
Image for post

8. Close Xcode. Then, in your IDE go to ios → Runner → Info.plist. Here, you have to add something.

Open this google_sign_in flutter package page. Inside iOS integration you will find a code snippet. Just copy & paste it inside the Info.plist file and save it, like this:

Image for post
Image for post

9. Here, you will see that there is a TODO written to replace the value within the string tag with “REVERSED_CLIENT_ID”. You will find the REVERSED_CLIENT_ID in the file “GoogleService-Info.plist”.

Image for post
Image for post

10. Go to the third step, you do not need to follow this step because we are using the Flutter Firebase plugin which takes care of all these things. You will only need to do this step if you are building a standalone iOS app. Click on Next.

Image for post
Image for post

11. In the fourth step also you do not need to follow anything. Just click on Next.

Image for post
Image for post

12. Now, run the app on your iOS device and attempt a google sign in to complete the fifth step.

Image for post
Image for post

13. After completing this step, click on “Continue to console”.

Image for post
Image for post

So finally, this completes the whole setup process for “Sign in with Google” using Firebase for both Android and iOS. Just follow these above steps properly and you should get past the setup pretty quickly.

Improving the UI

Let’s complete our FirstScreen UI. The final UI will look like this:

Image for post
Image for post

I will not go deep into this UI coding part. You have to include some lines of code within the “sign_in.dart” file to retrieve the image URL, name & email of the user.

You have to add the following in sign_in.dart:

The full UI code for FirstScreen is given below:

Conclusion

Now, our “Login Demo” app is complete. I hope that you have received some useful information from this article.

You can find the GitHub repo for this project in the following link:

If you like this project, please give “Stars” (⭐️) to my GitHub repo.

Check out my other articles

If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:

You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!

Happy coding…

Souvik Biswas

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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