Flutter Firebase Authentication: Google Sign In

Signing in to the system is important part of development. There are various ways to get into it. We are exploring Google Sign in with firebase authentication.

In this post, we are going to add Google Sign In to our Flutter & Firebase application. We will use the google_sign_in Flutter package available on pub.dev.

Firebase Setup

We need to register Android App to the Firebase project. Please remember the package name as we are going to use to later on.

Download the google-services.json file & place it in your project’s approot directory. Make sure the config file should have same name as mentioned in bold.

The Google services plugin for Gradle loads the google-services.json file you just downloaded. Modify your build.gradle files to use the plugin as mentioned in firebase setup.

Set up Authentication

In order to use Google Sign-In with Firebase Authentication, you must have to enable it. To enable Google Sign -In got to Authentication page from the left menu of the Firebase dashboard and selecting the Sign-in method tab. Make sure you also add the support email in Authentication -> Sign-in method

There is extra configuration if you are integrating it for iOS devices

Go to your project directory -> ios -> Runner -> Info.plist file, and add the following there:

You will get REVERSED_CLIENT_ID from your GoogleService-Info.plist

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

Implement Google Sign-In

main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:GoogleSignIn/SignInScreen.dart';
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // initializing the firebase app
  await Firebase.initializeApp();
 // calling of runApp
 runApp(GoogleSignIn());}
class GoogleSignIn extends StatefulWidget {
 GoogleSignIn({Key key}) : super(key: key);
 @override
 _GoogleSignInState createState() => _GoogleSignInState();
}
class _GoogleSignInState extends State<GoogleSignIn> {
 @override
 Widget build(BuildContext context) {
// we return the MaterialApp here ,
// MaterialApp contain some basic ui for android ,
return MaterialApp(
 //materialApp title
 title: 'Google Sign in',
 debugShowCheckedModeBanner: false,
 theme: ThemeData(
  primarySwatch: Colors.green,
 ),
 // home property contain SignInScreen widget
 home: SignInScreen(),
 );
}
}

Firebase Instance
final FirebaseAuth auth = FirebaseAuth.instance;
Future<void> signup(BuildContext context) async {
final GoogleSignIn googleSignIn = GoogleSignIn();
final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
if (googleSignInAccount != null) {
final GoogleSignInAuthentication googleSignInAuthentication =
await googleSignInAccount.authentication;
final AuthCredential authCredential = GoogleAuthProvider.credential(
idToken: googleSignInAuthentication.idToken,
accessToken: googleSignInAuthentication.accessToken);
// Getting users credential
UserCredential result = await auth.signInWithCredential(authCredential);
User user = result.user;
if (result != null) {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomePage()));
}  // if result not null we simply call the MaterialpageRoute,  // for go to the HomePage screen
}
}

SignInScreen.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:GoogleSignIn/homepage.dart';
class SignInScreen extends StatefulWidget {
  SignInScreen({Key key}) : super(key: key);
  @override
  _SignInScreenState createState() => _SignInScreenState();
}
class _SignInScreenState extends State<SignInScreen> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   body: Container(
    width: double.infinity,
    height: double.infinity,
    decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Colors.blue,
        Colors.red,
      ],
    ),
  ),
child: Card(
  margin: EdgeInsets.only(top: 200, bottom: 200, left: 30, right: 30),
  elevation: 20,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Text( "Google Sign in",
        style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
      ),
      Padding(padding: const EdgeInsets.only(left: 20, right: 20),
        child: MaterialButton(
          color: Colors.teal[100],
          elevation: 10,
            child: Row(mainAxisAlignment: MainAxisAlignment.start,
               children: [
                 Container(
                   height: 30.0,
                   width: 30.0,
                   decoration: BoxDecoration(
                     image: DecorationImage(  
                      image:AssetImage('assets/images/googleimage.png'),
fit: BoxFit.cover),
shape: BoxShape.circle,
),
),
SizedBox(
  width: 20,
),
Text("Sign In with Google"),
],
),
// by onpressed we call the function signup function
onPressed: () signup(context);
},
),
)
],
),
),
),
);
}
}

HomePage.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
centerTitle: true,
title: Text("Google Sign In"),
// In body text containing 'Home page ' in centerbody: Center(child:Text('Home page'),
);
}
}