DEV Community

PhamVanHaoQuang
PhamVanHaoQuang

Posted on

How to add Google Sign In to your flutter app?

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:

Firebase Image

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

Add google_services.json

Add GoogleService-info.plist

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'
    }
Enter fullscreen mode Exit fullscreen mode

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.
Firebase settings
Then, open tab OAuth consent screen in your Google Cloud, filled out all required fields in the console to avoid APIException.

OAuth screen

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

Add file 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 -->
Enter fullscreen mode Exit fullscreen mode

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',
  ],
);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

4 Result.

Result 1

Result 2

Result 3

Result 4

Top comments (0)