Google Login in Flutter | 𝟐𝟎𝟐𝟎 | 𝐍𝐞𝐰𝐛𝐲𝐂𝐨𝐝𝐞𝐫.𝐜𝐨𝐦

In Flutter, authentication using Google sign-in can be implemented by using google_sign_in package which provides a GoogleSignIn widget

GoogleSignIn.signIn() method initiates a typical webview login workflow of Google which asks a user to login, if not already, and allow permissions for the application like access basic profile data, email etc if logging in for first time or if application requires more permissions that earlier

Steps involved in application code :

Display a Google login button by using an external package such as flutter_auth_buttons
When user clicks it, invoke GoogleSignIn.signIn() method to initiate webview login
Store user information returned and set state to display it

Firebase setup :

Create a Firebase account if not already, and login to firebase console
Create Firebase project and create an android app under project
Associate debug Sha1 hash of local flutter android app with Firebase app
Download google-services.json and paste in flutter project/android/app directory
Add google play services configuration to local android project and android app build.gradle files

Usage

Import

import 'package:google_sign_in/google_sign_in.dart';
import 'package:flutter_auth_buttons/flutter_auth_buttons.dart';

Invoke Google sign in and get user data

  final GoogleSignIn _googleSignIn = GoogleSignIn();
  GoogleSignInAccount _googleUser = await _googleSignIn.signIn();

Sign out

await _googleSignIn.signOut();

Creating new Flutter App

Check Flutter installation to setup Flutter

Use flutter create command to create a Flutter project (here nc_google_login) :

flutter create nc_google_login

Dependency

Add location package to pubspec.yaml

nc_google_login/pubspec.yaml

dependencies:
    google_sign_in: ^4.5.1
    flutter_auth_buttons:
    flutter:
        sdk: flutter

Run following command to add dependency
```
flutter pub get
```

Firebase

Following setup requires an App to be registered to Firebase to integrate google sign in

Firebase is an app development platform offering typical cloud services for mobile app development and also decent free usage limits for testing & development

It seems to be occupying a position of being a conventional choice of cloud platform for contemporary mobile app development

Create Firebase project

Go to Firebase Console, sign in with a Google account and create a project

Enter a project name, a project can be used to create multiple apps

Optionally enable Google analytics and click on Create project

Enable Authentication in Firebase Console

Click the Authentication option in left navigation tab

Click on Set up the sign-in method and choose Google from among the Sign-in providers and Enable it

Enter a name for app to be shown when a user logs in using google

cl-firebase-create-add-sign-in-public-facing-name

Create Android app in Firebase console

Click on Project Overview and then the Android icon to create an Android app (or + Add app button in case any other app is already created for project
)
Enter package name which should match that of flutter project (which can be found in AndroidManifest.xml)

The debug sign-in certificate is required for google sign-in and can be retrieved using keytool or gradlew commands
To use gradlew command cd into android folder of flutter project and run ./gradlew signingReport
```
cd android &&./gradlew signingReport
```
Find Variant: debug and copy value of SHA1 and paste for debug sign-in certificate SHA1 and click Register
```
Variant: debug
Config: debug
Store: /home/izaku/ws/react/CheckboxApp/android/app/debug.keystore
Alias: androiddebugkey
MD5: 20:F4:61:48:B7:2D:8E:5E:5C:A2:3D:37:A4:F4:14:90
SHA1: 5E:8F:16:06:2E:A3:CD:2C:4A:0D:54:78:76:BA:A6:F3:8C:AB:F6:25
SHA-256: FA:C6:17:45:DC:09:03:78:6F:B9:ED:E6:2A:96:2B:39:9F:73:48:F0:BB:6F:89:9B:83:32:66:75:91:03:3B:9C
Valid until: Wednesday, 1 May, 2052
```
Check https://developers.google.com/android/guides/client-auth for info about getting SHA1 key
Download google-services.json and paste in <flutter project>/android/app directory

Add required gradle dependency and plugin for google services (mentioned below)

Add classpath 'com.google.gms:google-services:4.3.3' to build.gradle of android project (android folder inside react native project)

<flutter project>/android/build.gradle

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // Add the google services classpath
        classpath 'com.google.gms:google-services:4.3.3'
    }

Add apply plugin: 'com.google.gms.google-services' to build.gradle of android app

<flutter project>/android/app/build.gradle

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'

App Code

nc_google_login/lib/main.dart

import 'package:flutter/material.dart';
import 'dart:async';
//import 'dart:typed_data';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:flutter_auth_buttons/flutter_auth_buttons.dart';

void main() => runApp(new MaterialApp(
  title: 'Flutter Authentication App',
  home: new LoginPage(),
));

class LoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  final GoogleSignIn _googleSignIn = GoogleSignIn();
  GoogleSignInAccount _googleUser;

  Future<GoogleSignInAccount> _handleSignIn() async {
    _googleUser = await _googleSignIn.signIn();
    this.setState((){});
  }

  Widget renderButton() {
    return Center(
      child: GoogleSignInButton(
        onPressed: this._handleSignIn,
        darkMode: true,
        textStyle: TextStyle(
          fontSize: 14,
          color: Colors.white,
        ),
      ),
    );
  }

  Widget renderUser() {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container( height:200, width:200, child: GoogleUserCircleAvatar(identity:_googleUser)),
            Container(
              padding: EdgeInsets.only(top:20),
              child: Column(
                children: [
                  Text('Name: ${_googleUser.displayName}'),
                  Text('Email: ${_googleUser.email}'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    var render = _googleUser == null? renderButton() : renderUser();
    return new Scaffold(
      appBar: new AppBar(title: new Text('Google Login'),),
      body: new Container(
        child: render,
      ),
    );
  }
}