Flutter : Integrating Google Sign-In

Pankaj Tyagi

27 December 2023

Social Authentication like- Facebook, Google, Twitter, and Linkedin in the mobile apps is the most commonly used feature now a days . We can sign up and sign in to the app using the details of our social sites/app.

In this article, we are going to explore how we can integrate Google sign-in flutter.

You may also check our flutter app development services

So, let’s start.

First, we need to create an account and set up our project on Firebase.
We are assuming that you have set up your project on Firebase and are ready to move further in fluter code.

Android Integration:

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

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

Download google-services.json file and add to the module (app-level) root directory of your app inside the Android folder.

IOS Integration:

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

Add the below code in [your_project_name]/ios/Runner/Info.plist file.

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

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

Dependencies:

Add the below dependencies in the Pubspec file of your project

firebase_auth: ^0.16.0
google_sign_in: ^6.2.1

1 2	firebase_auth: ^0.16.0 google_sign_in: ^6.2.1

Import

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:google_sign_in/google_sign_in.dart';

import 'package:firebase_auth/firebase_auth.dart';

import 'package:firebase_core/firebase_core.dart';

import 'package:google_sign_in/google_sign_in.dart';

Example

Let’s take an example.
In this example, we have taken two screens and files.
Note: In this example, we are only handling the google login button event.

Main.dart: In this file, we added a Google button. On the button click event, Google authentication will start.
HomePage.dart: After successful authentication, we will be redirected to the Home screen.
Account details will be displayed on this screen.

main.dart

import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:google_sign_in/google_sign_in.dart';

import 'HomePage.dart';

Future&lt;void&gt; main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({ Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Google Login In Flutter")),
        body: _GoogleSignIn(key: null,),
      ),
    );
  }
}



class _GoogleSignIn extends StatefulWidget {
  _GoogleSignIn({ Key? key}) : super(key: key);

  @override
  _GoogleSignInState createState() =&gt; _GoogleSignInState();
}

class _GoogleSignInState extends State&lt;_GoogleSignIn&gt; {
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return  Padding(
        padding: const EdgeInsets.all(10),
        child: ListView(
          children: &lt;Widget&gt;&#091;
            Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.all(10),
                child: const Text(
                  'Webkul',
                  style: TextStyle(
                      color: Colors.blue,
                      fontWeight: FontWeight.w500,
                      fontSize: 30),
                )),
            Container(
              padding: const EdgeInsets.all(10),
              child: TextField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'User Name',
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
              child: TextField(
                obscureText: true,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Password',
                ),
              ),
            ),
            TextButton(
              onPressed: () {
                //forgot password screen
              },
              child: const Text('Forgot Password',),
            ),
            Container(
                height: 50,
                padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                child: ElevatedButton(
                  child: const Text('Login'),
                  onPressed: () {
                  },
                )
            ),
             Container(
              alignment: Alignment.center,
                padding: const EdgeInsets.all(10),
               child: const Text(
               'OR',
                 style: TextStyle(fontSize: 20),
                 )),

            Container(
                height: 50,
                padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
                child: ElevatedButton(
                  child: const Text('CLICK TO LOGIN VIA GOOGLE',style: TextStyle(fontWeight: FontWeight.bold,),),
                  onPressed: () async {
                    await Firebase.initializeApp();
                    setState(() {
                      isLoading = true;

                    });
                    FirebaseService service = new FirebaseService(context);

                    try {
                      await service.signInwithGoogle();
                    } catch (e) {
                      if (e is FirebaseAuthException) {
                        showErrorMessage(e.message??"");
                      }
                    }
                    setState(() {
                      isLoading = false;
                    });
                  },
                )
            ),

          ],
        ));
  }

  void showErrorMessage(String message) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Error"),
            content: Text(message),
            actions: &#091;
              TextButton(
                child: Text("Ok"),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              )
            ],
          );
        });
  }
}

class FirebaseService {
  final BuildContext parentContext;

  FirebaseService(this.parentContext);

  final FirebaseAuth _auth = FirebaseAuth.instance;
  final GoogleSignIn _googleSignIn = GoogleSignIn();

  Future&lt;String?&gt; signInwithGoogle() async {
    try {
      print(" authentication start");
      final GoogleSignInAccount? googleSignInAccount =
          await _googleSignIn.signIn();
      final GoogleSignInAuthentication? googleSignInAuthentication =
          await googleSignInAccount?.authentication;
      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleSignInAuthentication?.accessToken,
        idToken: googleSignInAuthentication?.idToken,
      );
      UserCredential result = await _auth.signInWithCredential(credential);

      User? user = result.user;
      if (user != null) {
        print(" complete "+ user.photoURL!);
      } else {
        print("user Empty");
      }
      Navigator.push(
        parentContext,
        MaterialPageRoute(
          builder: (context) =&gt; HomePage(
            name: user?.displayName,
            image:  user?.photoURL,
          ),
        ),
      );

    } on FirebaseAuthException catch (e) {
      print("auth error " + e.message!);
      throw e;
    }
  }

}

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

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

import 'package:firebase_auth/firebase_auth.dart';

import 'package:firebase_core/firebase_core.dart';

import 'package:flutter/material.dart';

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

import 'package:google_sign_in/google_sign_in.dart';

import 'HomePage.dart';

Future<void> main() async {

WidgetsFlutterBinding.ensureInitialized();

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({ Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(title: const Text("Google Login In Flutter")),

body: _GoogleSignIn(key: null,),

);

}

class _GoogleSignIn extends StatefulWidget {

_GoogleSignIn({ Key? key}) : super(key: key);

@override

_GoogleSignInState createState() => _GoogleSignInState();

}

class _GoogleSignInState extends State<_GoogleSignIn> {

bool isLoading = false;

@override

Widget build(BuildContext context) {

return Padding(

padding: const EdgeInsets.all(10),

child: ListView(

children: <Widget>[

Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(10),

child: const Text(

'Webkul',

style: TextStyle(

color: Colors.blue,

fontWeight: FontWeight.w500,

fontSize: 30),

)),

Container(

padding: const EdgeInsets.all(10),

child: TextField(

decoration: const InputDecoration(

border: OutlineInputBorder(),

labelText: 'User Name',

Container(

padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),

child: TextField(

obscureText: true,

decoration: const InputDecoration(

border: OutlineInputBorder(),

labelText: 'Password',

TextButton(

onPressed: () {

//forgot password screen

child: const Text('Forgot Password',),

Container(

height: 50,

padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),

child: ElevatedButton(

child: const Text('Login'),

onPressed: () {

)

Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(10),

child: const Text(

'OR',

style: TextStyle(fontSize: 20),

)),

Container(

height: 50,

padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),

child: ElevatedButton(

child: const Text('CLICK TO LOGIN VIA GOOGLE',style: TextStyle(fontWeight: FontWeight.bold,),),

onPressed: () async {

await Firebase.initializeApp();

setState(() {

isLoading = true;

});

FirebaseService service = new FirebaseService(context);

try {

await service.signInwithGoogle();

} catch (e) {

if (e is FirebaseAuthException) {

showErrorMessage(e.message??"");

}

setState(() {

isLoading = false;

});

)

));

}

void showErrorMessage(String message) {

showDialog(

context: context,

builder: (BuildContext context) {

return AlertDialog(

title: Text("Error"),

content: Text(message),

actions: [

TextButton(

child: Text("Ok"),

onPressed: () {

Navigator.of(context).pop();

)

);

});

}

class FirebaseService {

final BuildContext parentContext;

FirebaseService(this.parentContext);

final FirebaseAuth _auth = FirebaseAuth.instance;

final GoogleSignIn _googleSignIn = GoogleSignIn();

Future<String?> signInwithGoogle() async {

try {

print(" authentication start");

final GoogleSignInAccount? googleSignInAccount =

await _googleSignIn.signIn();

final GoogleSignInAuthentication? googleSignInAuthentication =

await googleSignInAccount?.authentication;

final AuthCredential credential = GoogleAuthProvider.credential(

accessToken: googleSignInAuthentication?.accessToken,

idToken: googleSignInAuthentication?.idToken,

);

UserCredential result = await _auth.signInWithCredential(credential);

User? user = result.user;

if (user != null) {

print(" complete "+ user.photoURL!);

} else {

print("user Empty");

}

Navigator.push(

parentContext,

MaterialPageRoute(

builder: (context) => HomePage(

name: user?.displayName,

image: user?.photoURL,

);

} on FirebaseAuthException catch (e) {

print("auth error " + e.message!);

throw e;

}

HomePage.dart


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({ Key? key, this.name, this.image}) : super(key: key);
  final name;
  final image;

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Welcome Screen "),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: &#091;
          Container(
              alignment: Alignment.center,
              padding: const EdgeInsets.all(10),
              child: const Text(
                'Welcome',
                style: TextStyle(
                    color: Colors.blue,
                    fontWeight: FontWeight.w500,
                    fontSize: 30),
              )),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.all(10),
                child: const Text(

                  'YOU HAVE SUCCESSFULLY LOGIN VIA GOOGLE ACCOUNT',
                 textAlign: TextAlign.center
                  ,
                  style: TextStyle(

                      color: Color(0xFF112252),
                      fontWeight: FontWeight.w500,
                      fontSize: 18),
                )),
          ),
          
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("User name: "+name, style: TextStyle(
                color: Color(0xFF112252),
                fontWeight: FontWeight.w500,
                fontSize: 14),),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("Profile Image: ",style: TextStyle(
              color: Color(0xFF112252),
              fontWeight: FontWeight.w500,
              fontSize: 14))),

          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
                alignment: Alignment.center,
                padding: const EdgeInsets.all(10),
                child: Image.network(image)),
          ),

        ],
      )),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

const HomePage({ Key? key, this.name, this.image}) : super(key: key);

final name;

final image;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Welcome Screen "),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(10),

child: const Text(

'Welcome',

style: TextStyle(

color: Colors.blue,

fontWeight: FontWeight.w500,

fontSize: 30),

)),

Padding(

padding: const EdgeInsets.all(8.0),

child: Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(10),

child: const Text(

'YOU HAVE SUCCESSFULLY LOGIN VIA GOOGLE ACCOUNT',

textAlign: TextAlign.center

style: TextStyle(

color: Color(0xFF112252),

fontWeight: FontWeight.w500,

fontSize: 18),

)),

Padding(

padding: const EdgeInsets.all(8.0),

child: Text("User name: "+name, style: TextStyle(

color: Color(0xFF112252),

fontWeight: FontWeight.w500,

fontSize: 14),),

Padding(

padding: const EdgeInsets.all(8.0),

child: Text("Profile Image: ",style: TextStyle(

color: Color(0xFF112252),

fontWeight: FontWeight.w500,

fontSize: 14))),

Padding(

padding: const EdgeInsets.all(8.0),

child: Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(10),

child: Image.network(image)),

)),

);

}

Now, run the code and check the result.

Result

https://mobikul.com/wp-content/uploads/2021/12/Mokup.mp4?_=1

Android App Result :

IOS App Result :

Conclusion :

In this blog, we have checked that how we can add Google authentication in the Flutter Apps.

For more information about social authentication please follow the Link.

Thanks For Reading…