Today we will be discussing how we can set up a Flutter app and implement Google sign-in using Firebase. We'll be building a two-page app that allows users to log in using their Google Account. This is for a layer of security and to pull user's information associated with their Gmail accounts such as the user name and avatar image etc. Our final app will look like follows: Users can click on the "Sign In with Google" button, which will launch a view where users can provide their Google credentials. Upon success, control is returned to the user and Flutter navigates the user to the Welcome screen, where they can view their name, avatar, and be able to log out. Getting Started I have created my flutter application named . If you have not created any, then you can create a flutter app using the following command: social_login flutter create social_login Now we'll add the plugins required in this project. Open file and in dependencies add the plugins as: pubspec.yaml firebase_auth: ^0.16.0
google_sign_in: ^4.4.4
flutter_auth_buttons: ^0.5.0 Save the file and run: flutter pub get Build the UI Delete the code from the file and add the following code: main.dart // main.dart
import 'package:flutter/material.dart';
import 'login_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Login',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: LoginPage(),
    );
  }
} Now we'll move ahead to the login page. // login_page.dart file
import 'package:flutter/material.dart';
import 'package:flutter_auth_buttons/flutter_auth_buttons.dart';
class LoginPage extends StatefulWidget {
  @override
  LoginPageState createState() => LoginPageState();
}
class LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image(
                image: AssetImage("assets/logo.png"),
                height: 150, 
                width: 150
              ),
              SizedBox(height: 50),
              GoogleSignInButton(
                onPressed: () {},
                darkMode: true
              ),
            ],
          ),
        ),
      ),
    );
  }
} Now we'll create a new file and name it as . Here we'll keep our code for authentication. auth.dart First, we'll import the packages required. // auth.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn(); Here, we have created an instance of FirebaseAuth and GoogleSignIn. After creating an instance, we need methods as (to authenticate the user) and then (to just sign out from the current account). signIn signOut Let's create our methods in file. auth.dart // auth.dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();
Future<String> signInWithGoogle() async {
  final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
  final GoogleSignInAuthentication googleSignInAuthentication =
      await googleSignInAccount.authentication;
  final AuthCredential credential = GoogleAuthProvider.getCredential(
    accessToken: googleSignInAuthentication.accessToken,
    idToken: googleSignInAuthentication.idToken,
  );
  final AuthResult authResult = await _auth.signInWithCredential(credential);
  final FirebaseUser user = authResult.user;
  assert(!user.isAnonymous);
  assert(await user.getIdToken() != null);
  final FirebaseUser currentUser = await _auth.currentUser();
  assert(user.uid == currentUser.uid);
  return 'signInWithGoogle succeeded: $user';
}
void signOutGoogle() async{
  await googleSignIn.signOut();
} We have created our functions but now we need to call our functions in our application to let the user authenticate. So let's call our function to work for us. We'll update our login page to call after clicking the sign-in button. signInWithGoogle() // login_page.dart file
class LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image(
                image: AssetImage("assets/logo.png"),
                height: 150, 
                width: 150
              ),
              SizedBox(height: 50),
              GoogleSignInButton(
                onPressed: () {
                  signInWithGoogle().whenComplete(() {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) {
                        return WelcomeScreen();
                        },
                      ),
                    );
                  });
                },
                darkMode: true
              ),
            ],
          ),
        ),
      ),
    );
  }
} Here, once our sign-in is successful, we are redirecting the user to the . WelcomeScreen Build UI for WelcomeScreen To do this, run the following code: // welcome_screen.dart file
import 'package:flutter/material.dart';
class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Text(
          "Welcome $name to Flutter",
           style: TextStyle(
             fontSize: 30,
             fontFamily: 'DancingScript',
             fontWeight: FontWeight.bold,
           ),
        ),
      ),
    );
  }
} Set Up a Firebase Project To create a new firebase project, go to the firebase console. Click to for creating a new project. Add Project Now, enter your project name and click continue. Follow the steps until the creation of the project. This will lead you to the Project Overview page and from here we'll be able to add firebase to our flutter app. For that, click on the Android icon and follow the steps required to create an android app. Here, you have to add the . For generating the SHA-1 key, just hover over the help (?) and click See this page. This will redirect you to the Authenticating Your Client page where you'll find commands to generate the SHA key. SHA-1 hash Then click on Register App. Next, download the google-services.json file and add it to your project-directory -> android -> app and click Next. In the third step, add the given code to the respective files. Once done, click Next and continue to console. Lastly, go to the Authentication Page -> Users tab and click on the Set up sign-in method. In Sign-in providers under the Sign-in methods tab, hover over Google provider and edit to enable Google sign-in. With this, we are done with the Google sign-in set up for our flutter app. The iOS setup is a little similar to this, but we are not going to implement it in our flutter app now. Still, you can implement it if you wish to run it on an iOS emulator or iOS mobile. To access user data such as name and email in our app, we need to update our auth file. import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
final FirebaseAuth _auth = FirebaseAuth.instance;
final GoogleSignIn googleSignIn = GoogleSignIn();
String name;
String email;
String imageUrl;
Future<String> signInWithGoogle() async {
  final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
  final GoogleSignInAuthentication googleSignInAuthentication =
  await googleSignInAccount.authentication;
  final AuthCredential credential = GoogleAuthProvider.getCredential(
    accessToken: googleSignInAuthentication.accessToken,
    idToken: googleSignInAuthentication.idToken,
  );
  final AuthResult authResult = await _auth.signInWithCredential(credential);
  final FirebaseUser user = authResult.user;
  assert(user.email != null);
  assert(user.displayName != null);
  assert(user.photoUrl != null);
  name = user.displayName;
  email = user.email;
  imageUrl = user.photoUrl;
  if (name.contains(" ")) {
    name = name.substring(0, name.indexOf(" "));
  }
  assert(!user.isAnonymous);
  assert(await user.getIdToken() != null);
  final FirebaseUser currentUser = await _auth.currentUser();
  assert(user.uid == currentUser.uid);
  
  return 'Successfully loggedin: $user';
}
void signOutGoogle() async {
  await googleSignIn.signOut();
} Complete UI of WelcomeScreen Now we'll complete our UI of WelcomeScreen using the following code: // WelcomeScreen.dart file
import 'package:flutter/material.dart';
import 'auth.dart';
import 'login_page.dart';
class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Example'),
      ),
      drawer: name != null ? Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.amberAccent,
                ),
                child: Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.zero,
                      child: CircleAvatar(
                        backgroundImage: NetworkImage(
                          imageUrl,
                        ),
                      radius: 40,
                      backgroundColor: Colors.transparent,
                    ),
                  ),
                  SizedBox(height: 10),
                  Text(
                    name,
                    style: TextStyle(
                    fontSize: 20,
                    color: Colors.black,
                    fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 5),
                  Text(
                    email,
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.black,
                      fontWeight: FontWeight.normal
                    ),
                  ),
                ],
              ),
            ),
            ListTile(
              leading: Icon(
              Icons.exit_to_app,
              color: Colors.red,
            ),
            title: Text(
              "Sign Out",
              style: TextStyle(
                fontSize: 18,
                color: Colors.red,
              ),
            ),
            onTap: () {
              signOutGoogle();
              Navigator.of(context).pushAndRemoveUntil(
                MaterialPageRoute(builder: (context) {
                  return LoginPage();
                }), ModalRoute.withName('/'));
              }),
            ],
          ),
        ): null,
        body: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                FlutterLogo(size: 100),
                SizedBox(height: 20),
                Text(
                  "Welcome $name to Flutter",
                  style: TextStyle(
                    fontSize: 30,
                    fontFamily: 'DancingScript',
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
} Conclusion Once done, let's run our app to do authentication using Google. You can find the code on my . GitHub Repository I hope this is helpful.

Google

Maintain The Quality of Your Node.js Apps With These Best Practices

Set up a Flutter app and Implement Google Sign-In Using Firebase

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

JSON Web Token: How To Secure Your Data With JWT

161 Stories To Learn About Authentication

3 Reasons for B2C Enterprises to Implement Single Sign-on Authentication

4 Dangers of Sticking with Outdated MFA Methods

The Noonification: Tailwindcss? Ill Pass (8/27/2023)

JSON Web Token: How To Secure Your Data With JWT

161 Stories To Learn About Authentication

3 Reasons for B2C Enterprises to Implement Single Sign-on Authentication

4 Dangers of Sticking with Outdated MFA Methods

The Noonification: Tailwindcss? Ill Pass (8/27/2023)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps