Google Sign-In In Flutter

Authentication via a social app like- Facebook, Google, Twitter, and Linkedin in the mobile app is the most and commonly used feature.
We can sign up and sign in using the details of which we have used in our social sites/app.

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

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.
If you didn’t set up your project on firebase then, please follow the LINK and set up your project on firebase.

Dependencies:

Add below dependencies in pubspec file pf your project

firebase_auth: ^0.16.0
google_sign_in: ^4.4.4

1 2	firebase_auth: ^0.16.0 google_sign_in: ^4.4.4

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.

Main.dart : In which google button is there on which click google authentication will proceed.
HomePage.dart : After succesfull authentiation we will be redireted to another screen on which account details will be displayed.

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

void main() => 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(),
      ),
    );
  }
}



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 Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children:[ OutlinedButton.icon(
              icon: FaIcon(FontAwesomeIcons.google),
              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;
                });
              },
              label: Text(
                "Click to login Via Google",
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              style: ButtonStyle(
                  backgroundColor:
                      MaterialStateProperty.all<Color>(Colors.orangeAccent),
                  side: MaterialStateProperty.all<BorderSide>(BorderSide.none)),
            ),
             if(isLoading) CircularProgressIndicator()
              ]),
          );
  }

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

}

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

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

void main() => 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(),

);

}

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

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children:[ OutlinedButton.icon(

icon: FaIcon(FontAwesomeIcons.google),

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;

});

label: Text(

"Click to login Via Google",

style: TextStyle(fontWeight: FontWeight.bold),

style: ButtonStyle(

backgroundColor:

MaterialStateProperty.all<Color>(Colors.orangeAccent),

side: MaterialStateProperty.all<BorderSide>(BorderSide.none)),

if(isLoading) CircularProgressIndicator()

]),

);

}

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 "+ name),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("YOU HAVE SUCCESSFULLY LOGIN VIA GOOGLE ACCOUNT ",style:TextStyle(color: Colors.deepOrange,fontWeight: FontWeight.bold),),
          Text("User name: "+name),
          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 "+ name),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: CrossAxisAlignment.center,

children: [

Text("YOU HAVE SUCCESSFULLY LOGIN VIA GOOGLE ACCOUNT ",style:TextStyle(color: Colors.deepOrange,fontWeight: FontWeight.bold),),

Text("User name: "+name),

Image.network(image

)),

);

}

Now, run the code and check the result.

Result

Conclusion :

In this blog, we learn how we can sign in to our app via google.

For more information about social authentication please flow the Link.

Thanks For Reading…

Pankaj Tyagi 31 December 2021

. . .

Google Sign-In In Flutter

Dependencies:

Import

Example

main.dart

HomePage.dart

Result

Conclusion :

Leave a Comment Cancel Reply

Message Sent!