How to add Google Sign In to your flutter app?

PhamVanHaoQuang — Mon, 18 Jul 2022 08:23:16 +0000

Login with google.

Use package google_sign_in on pub.dev with lastest version.
Create a project Firebase to register your application with Google. Create 2 app for Android and IOS like image below:

Add 2 files google_services.json and GoogleService-info.plist to your project:

1 Setup for Android.

You do need to enable the OAuth APIs, using the Google Cloud Platform API manager. After that, you can use API of Google like People API.

Open your_app > android > build.gradle add this declare to dependencies block:
classpath 'com.google.gms:google-services:4.3.13' compile 'com.google.apis:google-api-services-people:v1-rev20210903-1.32.1'

It's look like this:

 dependencies {
        classpath 'com.android.tools.build:gradle:7.1.2'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.13'
        compile 'com.google.apis:google-api-services-people:v1-rev20210903-1.32.1'
    }

After setup, you need one more step to remove Exception. Go to Firebase project you created, open Project Overview, Project settings add copy field Public-facing name.

Then, open tab OAuth consent screen in your Google Cloud, filled out all required fields in the console to avoid APIException.

2 Setup for IOS

When you create IOS app, Make sure download file GoogleService-Info.plist in step 1.
Open Xcode, then right-click on Runner directory and select Add Files to "Runner".

Select GoogleService-Info.plist from the file manager.
A dialog will show up and ask you to select the targets, select the Runner target.
Then add the CFBundleURLTypes attributes below into the [my_project]/ios/Runner/Info.plist file.

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <!-- TODO Replace this value: -->
            <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
            <string>REVERSED_CLIENT_ID</string>
        </array>
    </dict>
</array>
<!-- End of the Google Sign-in Section -->

3 Use the plugin.

Add the following import to your Dart code:

import 'package:google_sign_in/google_sign_in.dart';

Initialize GoogleSignIn with the scopes you want:

GoogleSignIn _googleSignIn = GoogleSignIn(
  scopes: [
    'email',
    'https://www.googleapis.com/auth/contacts.readonly',
  ],
);

You can now use the GoogleSignIn class to authenticate in your Dart code, e.g.

// Sign in with Google
Future<void> _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
    } catch (error) {
      if (kDebugMode) {
        print(error);
      }
    }
  }

// Sign out with Google
Future<void> _handleSignOut() => _googleSignIn.disconnect();

Find the example wiring in the Google sign-in example application.

iOS additional requirement

Note that according to https://developer.apple.com/sign-in-with-apple/get-started, starting June 30, 2020, apps that use login services must also offer a "Sign in with Apple" option when submitting to the Apple App Store.