How to add Google Sign In to your flutter app?
Tags: flutter, googlecloud, tutorial
Published: 2022-07-18 08:23:16

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33fpkbsj0w3em3t01u32.png)

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

![Add google_services.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whvbcfot4huu0a5sfo4i.png)


![Add GoogleService-info.plist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tnyr7sc9dzsd5b1whqb.png)




### 1 Setup for Android.
 You do need to enable the OAuth APIs, using the [**Google Cloud Platform API manager**](https://console.cloud.google.com). After that, you can use API of Google like [People API](https://developers.google.com/people/).

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.
![Firebase settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrkdhr3uhvtxjuut7e3p.png)
Then, open tab OAuth consent screen in your Google Cloud, filled out all required fields in the console to avoid APIException.

![OAuth screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp3b6ai6ice1vk6bpoug.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6rfachcdry14xkp5v3hj.png)
- 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](https://github.com/flutter/plugins/blob/main/packages/google_sign_in/google_sign_in/example/lib/main.dart).

####iOS additional requirement
Note that according to [https://developer.apple.com/sign-in-with-apple/get-started](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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x98sz8jxh3x8jwzi6xsc.png)


![Result 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qg7pmk4oe9r0aa6odgj.png)


![Result 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1hsp4nm84vb9u3w45rj.png)


![Result 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gefk4l8dj24nuqnjfggj.png)