Flutter Google SignIn Firebase Authentication

In this tutorial, I’ll walk you through adding Google authentication to Flutter applications using the Firebase Authentication plugin and display user’s profile picture.

Step 1: We need to begin by creating a new Flutter project and adding the Firebase Auth package and Google SignIn to the pubspec.yaml file, make sure that you use the latest version of the package.

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.6.2+1
  google_sign_in: ^3.2.2

Step 2: Now, register your project on https://console.firebase.google.com, follow the steps 1 to 4 to add Firebase to your android app, and don’t forget to enable Google sign-in method for your app under Authentication tab.

Enable Google sign-in method

Step 3: Create a login screen which will have the sign-in button and on button pressed signInWithGoogle(…) will be called which we will define in the state_widget.dart file.

Step 4: To set the state of the app when the user logs in successfully, use setState(). In this tutorial, we will use InheritedWidget to update the state and build content as the state of the app changes.

The InheritedWidget is a special Widget, that you put in the Widgets tree as a parent of another sub-tree.

If user is not logged-in already, _buildContent() method in HomeScreen will be called and LoginScreen will be displayed as user property is set to null initially. When the user logs in successfully the state of the app will change and user property will store the Firebase user instance. Hence, home screen will be displayed.

signIn() will trigger a user account selection prompt. When the user confirms their account selection a GoogleSignInAccount instance will be returned that will be used to authenticate the user with Firebase.

Step 5: Create a function called signIntoFirebase() in auth.dart file that handles Firebase authentication and import:

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

In signIntoFirebase(…)we first created the instance of the GoogleSignInAuthentication that holds a reference to the authenticated user and access token. After getting the information we callsignInWithGoogle() from our FirebaseAuth instance by passing accessToken and idToken from the instance of GoogleSignInAuthentication. This is an asynchronous function and will return us a Future of the type FirebaseUser which we will use to set the state of the app in state_widget.dart file.

Step 6: The _buildContent(...) method in home.dart file is just used to update the UI when the user logs in successfully.

Step 7: Create UI for HomeScreen to show user’s profile data.

For iOS,

Step 1: Add iOS app to your project on Firebase and follow steps 1 and 2 to add Firebase to your iOS app.

The app will crash on iOS, just add the following code to the end your info.plist file in /ios/Runnerfolder and copy REVERSE_CLIENT_ID from GoogleServices-Info.plist file.

and …. just do nothing, you have already setup your Flutter code.

Step 2: Run your iOS code in Xcode once.

iOS Google Login

And, there you go, adding social authentication to your Android and iOS app is just a game of 7 basic steps :)

The complete code for this sample can be found here:

anjy-07/GoogleSignIn_Flutter

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >