Google Sign In Flutter

Nowadays in most of the mobile app, it required login. And to log in, we need to signup first, filling the long-form. But we can log in to the app through a Social account, then we don’t need to fill a long form to register into the app. Google Sign in Flutter is one of the ways to log in.

In today’s blog, we will see how we can implement Google Sign in Flutter.

Android Integration:

Step1: Register your android application in Firebase from the link.

Step2: Enable the OAuth APIs that you want, using the Google Cloud Platform API manager.

Note: Please fill all required fields in the console for OAuth consent screen. Else you might get APIException errors.

iOS Integration:

Step1: Register your iOS application in Firebase from the link.

Step2: Download GoogleService-Info.plist file, and add in Runner target.

Step3: Add below code in [my_project]/ios/Runner/Info.plist file.

<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<em><!-- TODO Replace this value: --></em>
			<em><!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID --></em>
			<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
		</array>
	</dict>
</array>

<key>CFBundleURLTypes</key>

<array>

<dict>

<key>CFBundleTypeRole</key>

<string>Editor</string>

<key>CFBundleURLSchemes</key>

<array>

<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>

</array>

</dict>

</array>

Flutter Code:

Step1: Add below code in package’s pubspec.yaml and run pub get.

dependencies:
  google_sign_in: ^5.1.0

1 2	dependencies: google_sign_in: ^5.1.0

Step2: Import the package in your dart code.

<strong>import</strong> 'package:google_sign_in/google_sign_in.dart';

1	<strong>import</strong> 'package:google_sign_in/google_sign_in.dart';

Step3: Initialize the GoogleSignIn.

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

GoogleSignIn _googleSignIn = GoogleSignIn(

scopes: [

'email',

'https://www.googleapis.com/auth/contacts.readonly',

);

Step4: Use the following code to authenticate in your Dart code.

Future<<strong>void</strong>> _handleSignIn() <strong>async</strong> {
  <strong>try</strong> {
    <strong>await</strong> _googleSignIn.signIn();
  } <strong>catch</strong> (error) {
    print(error);
  }
}

Future<void> _handleSignIn() async {

try {

await _googleSignIn.signIn();

} catch (error) {

print(error);

}

Please check below the complete code for main.dart file.

import 'dart:async';
import 'dart:convert' show json;

import "package:http/http.dart" as http;
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

GoogleSignIn _googleSignIn = GoogleSignIn(
  // Optional clientId
  // clientId: '479882132969-9i9aqik3jfjd7qhci1nqf0bm2g71rm1u.apps.googleusercontent.com',
  scopes: <String>[
    'email',
    'https://www.googleapis.com/auth/contacts.readonly',
  ],
);

void main() {
  runApp(
    MaterialApp(
      title: 'Google Sign In',
      home: SignInDemo(),
    ),
  );
}

class SignInDemo extends StatefulWidget {
  @override
  State createState() => SignInDemoState();
}

class SignInDemoState extends State<SignInDemo> {
  GoogleSignInAccount? _currentUser;
  String _contactText = '';

  @override
  void initState() {
    super.initState();
    _googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {
      setState(() {
        _currentUser = account;
      });
      if (_currentUser != null) {
        _handleGetContact(_currentUser!);
      }
    });
    _googleSignIn.signInSilently();
  }

  Future<void> _handleGetContact(GoogleSignInAccount user) async {
    setState(() {
      _contactText = "Loading contact info...";
    });
    final http.Response response = await http.get(
      Uri.parse('https://people.googleapis.com/v1/people/me/connections'
          '?requestMask.includeField=person.names'),
      headers: await user.authHeaders,
    );
    if (response.statusCode != 200) {
      setState(() {
        _contactText = "People API gave a ${response.statusCode} "
            "response. Check logs for details.";
      });
      print('People API ${response.statusCode} response: ${response.body}');
      return;
    }
    final Map<String, dynamic> data = json.decode(response.body);
    final String? namedContact = _pickFirstNamedContact(data);
    setState(() {
      if (namedContact != null) {
        _contactText = "I see you know $namedContact!";
      } else {
        _contactText = "No contacts to display.";
      }
    });
  }

  String? _pickFirstNamedContact(Map<String, dynamic> data) {
    final List<dynamic>? connections = data['connections'];
    final Map<String, dynamic>? contact = connections?.firstWhere(
          (dynamic contact) => contact['names'] != null,
      orElse: () => null,
    );
    if (contact != null) {
      final Map<String, dynamic>? name = contact['names'].firstWhere(
            (dynamic name) => name['displayName'] != null,
        orElse: () => null,
      );
      if (name != null) {
        return name['displayName'];
      }
    }
    return null;
  }

  Future<void> _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
    } catch (error) {
      print(error);
    }
  }

  Future<void> _handleSignOut() => _googleSignIn.disconnect();

  Widget _buildBody() {
    GoogleSignInAccount? user = _currentUser;
    if (user != null) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          ListTile(
            leading: GoogleUserCircleAvatar(
              identity: user,
            ),
            title: Text(user.displayName ?? ''),
            subtitle: Text(user.email),
          ),
          const Text("Signed in successfully."),
          Text(_contactText),
          ElevatedButton(
            child: const Text('SIGN OUT'),
            onPressed: _handleSignOut,
          ),
          ElevatedButton(
            child: const Text('REFRESH'),
            onPressed: () => _handleGetContact(user),
          ),
        ],
      );
    } else {
      return Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          const Text("You are not currently signed in."),
          ElevatedButton(
            child: const Text('SIGN IN'),
            onPressed: _handleSignIn,
          ),
        ],
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Google Sign In'),
        ),
        body: ConstrainedBox(
          constraints: const BoxConstraints.expand(),
          child: _buildBody(),
        ));
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

import 'dart:async';

import 'dart:convert' show json;

import "package:http/http.dart" as http;

import 'package:flutter/material.dart';

import 'package:google_sign_in/google_sign_in.dart';

GoogleSignIn _googleSignIn = GoogleSignIn(

// Optional clientId

// clientId: '479882132969-9i9aqik3jfjd7qhci1nqf0bm2g71rm1u.apps.googleusercontent.com',

scopes: <String>[

'email',

'https://www.googleapis.com/auth/contacts.readonly',

);

void main() {

runApp(

MaterialApp(

title: 'Google Sign In',

home: SignInDemo(),

);

}

class SignInDemo extends StatefulWidget {

@override

State createState() => SignInDemoState();

}

class SignInDemoState extends State<SignInDemo> {

GoogleSignInAccount? _currentUser;

String _contactText = '';

@override

void initState() {

super.initState();

_googleSignIn.onCurrentUserChanged.listen((GoogleSignInAccount? account) {

setState(() {

_currentUser = account;

});

if (_currentUser != null) {

_handleGetContact(_currentUser!);

}

});

_googleSignIn.signInSilently();

}

Future<void> _handleGetContact(GoogleSignInAccount user) async {

setState(() {

_contactText = "Loading contact info...";

});

final http.Response response = await http.get(

Uri.parse('https://people.googleapis.com/v1/people/me/connections'

'?requestMask.includeField=person.names'),

headers: await user.authHeaders,

);

if (response.statusCode != 200) {

setState(() {

_contactText = "People API gave a ${response.statusCode} "

"response. Check logs for details.";

});

print('People API ${response.statusCode} response: ${response.body}');

return;

}

final Map<String, dynamic> data = json.decode(response.body);

final String? namedContact = _pickFirstNamedContact(data);

setState(() {

if (namedContact != null) {

_contactText = "I see you know $namedContact!";

} else {

_contactText = "No contacts to display.";

}

});

}

String? _pickFirstNamedContact(Map<String, dynamic> data) {

final List<dynamic>? connections = data['connections'];

final Map<String, dynamic>? contact = connections?.firstWhere(

(dynamic contact) => contact['names'] != null,

orElse: () => null,

);

if (contact != null) {

final Map<String, dynamic>? name = contact['names'].firstWhere(

(dynamic name) => name['displayName'] != null,

orElse: () => null,

);

if (name != null) {

return name['displayName'];

}

return null;

}

Future<void> _handleSignIn() async {

try {

await _googleSignIn.signIn();

} catch (error) {

print(error);

}

Future<void> _handleSignOut() => _googleSignIn.disconnect();

Widget _buildBody() {

GoogleSignInAccount? user = _currentUser;

if (user != null) {

return Column(

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: <Widget>[

ListTile(

leading: GoogleUserCircleAvatar(

identity: user,

title: Text(user.displayName ?? ''),

subtitle: Text(user.email),

const Text("Signed in successfully."),

Text(_contactText),

ElevatedButton(

child: const Text('SIGN OUT'),

onPressed: _handleSignOut,

ElevatedButton(

child: const Text('REFRESH'),

onPressed: () => _handleGetContact(user),

);

} else {

return Column(

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: <Widget>[

const Text("You are not currently signed in."),

ElevatedButton(

child: const Text('SIGN IN'),

onPressed: _handleSignIn,

);

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Google Sign In'),

body: ConstrainedBox(

constraints: const BoxConstraints.expand(),

child: _buildBody(),

));

}

Finally run your code and check the result.

Thanks for reading 🙂

For more interesting blogs check out here – https://mobikul.com/blog/

Shikha Melkani 21 September 2021

. . .

Google Sign In Flutter

Android Integration:

iOS Integration:

Flutter Code:

Leave a Comment Cancel Reply

Message Sent!