Flutter Google Authentication Tutorial

flutter-google-login-example
flutter-google-login-example

In this tutorial, we’re going to learn how to implement google login with your flutter application. To do that, we need to use the google_sign_in package. If you’re new to flutter, please visit the flutter tutorial

Flutter Google Login Steps

  • Create a Firebase App
  • Configuring Android App Credentials
  • Enable Google SignIn on Firebase
  • Integrate google_sign_in packages with our app
  • Implementing login & logout functionalities
  • Retrieve user’s profile information such as name, email, and profile picture.

Working with Firebase side

  • Log in to your firebase (http://console.firebase.google.com) account & create a new project or choose an existing project
  • Navigate to Authentication -> Sign In Method -> Enable Google Authentication
  • Navigate to Project Settings -> Add Android App
  • Fill in your App name, package ID, SHA-1 Key & click Add App (Please Refer video)
  • Download google-services.json file
  • Choose Your Support Email Address

Working with Flutter Google Login

Add package in pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^5.0.1

home.dart looks like this (Explanation mentioned below the code)

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _isLoggedIn = false;
  GoogleSignInAccount _userObj;
  GoogleSignIn _googleSignIn = GoogleSignIn();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Codesundar")),
      body: Container(
        child: _isLoggedIn
            ? Column(
                children: [
                  Image.network(_userObj.photoUrl),
                  Text(_userObj.displayName),
                  Text(_userObj.email),
                  TextButton(
                      onPressed: () {
                        _googleSignIn.signOut().then((value) {
                          setState(() {
                            _isLoggedIn = false;
                          });
                        }).catchError((e) {});
                      },
                      child: Text("Logout"))
                ],
              )
            : Center(
                child: ElevatedButton(
                  child: Text("Login with Google"),
                  onPressed: () {
                    _googleSignIn.signIn().then((userData) {
                      setState(() {
                        _isLoggedIn = true;
                        _userObj = userData;
                      });
                    }).catchError((e) {
                      print(e);
                    });
                  },
                ),
              ),
      ),
    );
  }
}

Code Explanation:

  1. We have imported google_sign_in package in order to implement google authentication with your flutter app
  2. We have created _googleSignIn variable based on GoogleSignIn Instance
  3. We’re getting the scope of email, but you can get any scope
  4. (Optional) Please refer: http://developers.google.com/identity/protocols/googlescopes for additional scopes. If you’re adding any additional scopes apart from email, make sure you’ve to enable required google API
  5. Then we created login & logout functionalities using _googleSignIn.signIn() & _googleSignIn.signOut()
  6. If the user is loggedin we’re fetching profile picture & display name using _googleSignIn.currentUser