Login With Google in Android with Flutter

I wanted to create a login with google button in my app and found out that it may be a little tricky, so I thought it may be good to share the steps I took.

1- Adding dependency

First step is adding google_sign_in to our project:

dependencies:
  google_sign_in: ^4.5.1

and:

$ flutter pub get

There are also some required dependencies to add in our build.gradle files, first we add the following line in [project]/android/build.gradle :

dependencies {
...
  // Add the google services classpath
  classpath 'com.google.gms:google-services:4.3.0'}

and finally apply the plugin at the end of the [project]/android/app/build.gradle file:

// ADD THIS AT THE BOTTOM
apply plugin: 'com.google.gms.google-services'

We can also add Firebase Analytics in this file, so we add the following line to dependencies :

dependencies {
 // add the Firebase SDK for Google Analytics
 implementation ‘com.google.firebase:firebase-analytics:17.2.2’

}

Note: If this section is not completed you will get an error like this:

java.lang.IllegalStateException:
Default FirebaseApp is not initialized in this process [package name].
Make sure to call FirebaseApp.initializeApp(Context) first.

2- Create a Firebase Project

To create a firebase project first we should follow this link and click on Add New Project

• In the first window we add a simple project name and click Continue
• For the second step, Firebase asks if we want to add Google Analytics to our app or not. It’s better to add the analytics.

After the project is created and in the main page of the project we need to add an app, in our case an Android App

1- On the next screen we should add our package name, app nickname and SHA1 debug key, in this step we only add package name and app nickname. now we can click on Register app.

2- On the next screen we should download the google-services.json file and put it in [project]/android/app directory. Then click Next.

3- We have already done this step so we press Next again.

4- To make sure that all the steps we did were right, we should uninstall the app in our device and install it again. We should see a success screen in this step.

If you are using an Emulator make sure that the device has Google Play Services

3- Adding Fingerprints

To use Login with google in android we need to add our debug and release key fingerprints (SHA-1 and if if we like SHA-256). To do that first we should go to Project Settings:

Now at the bottom of the page we can see a button called Add fingerprint

we can find our debug and resale key fingerprints using this command:

for Debug:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

for Release:

keytool -list -v -keystore {keystore_name} -alias {alias_name}

You can only add your release key and then test your app in release mode

4- Enabling Authentication

In the project overview and under Develop click on Authentication

For this part we click on Set up sign-in method button. On the next screen and under the Sign-in providers section we enable the one called Google

There is another section bellow this one called Authorized domains, we need one of the authorized domains for the final part of adding the project, so just copy the second or third entry

5- Enabling Google Console

Open Google Cloud Console and create a new project. Give it a name and press Create

After creating the project make sure that you are within the right project tree

We are almost finished, now we only need to enable Credentials for our project, so under APIs and Services we select Credentials

On the next screen we press Create Credentials at the top of the page and select OAuth client ID

and after that, we press Configure Content Screen. On this page we select External for our User Type and press Create:

For the next page we add the app name, app logo and an authorized domain(the one we copied from Firebase Console).

You can add a policy page to your custom domain with Firebase Console but it’s not our concern for now.

Finally press Save.We are done with the console and now we can write some codes.

6- Test Login Screen

I created a simple page to test Login screen:

Scaffold(
  backgroundColor: Colors.white,
  appBar: AppBar(),
  body: Center(
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: MaterialButton(
          onPressed: (){
            GoogleSignIn _googleSignIn = GoogleSignIn(
              scopes: [
                'email',
                'https://www.googleapis.com/auth/contacts.readonly',
              ],
            );
            _googleSignIn.signIn().then((user)  {
              print('display name: ${user.displayName}');
            }).catchError((err){
              print('Error: $err');
            });

          },
          minWidth: double.infinity,
          child: Text('Login'),
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(8))
          )
      ),
    ),
  ),
);

Before running the app make sure to uninstall the previous one

The result is: