bakgrunnseffekt

Firebase with Flutter and Google Sign-in

Torbjørn Årdal

Seniorkonsulent

portrait image decoration

Publisert Lørdag 15. mai 2021
Sist oppdatert Fredag 8. oktober 2021

So you want to create a Flutter app that uses Firebase and lets users log in with their Google account. Great. Excellent. All you have to do is start a new project, hook up Firebase and create a login screen. Easy!

...Except for the fact that this can be a very a frustrating and time-consuming thing to do, especially when you're doing it for the first time. Also, configuring and setting up things like this is something we as developers often just want to get done as soon as possible so we can start writing the code for the features of our app. The code we want to write.

My goal with this post is to help make this process a little bit easier.

So, let us begin.

To make a Flutter app that uses Firebase with Google Sign-in, the first thing we have to do is to add both Android and iOS apps to your Firebase project in the Firebase Console, and then configure the Firebase SDK in your code.

Android

We have to add the Android app to the Firebase project in the Firebase Console. Open Project Settings, click Add app, choose Android and follow the steps in the wizard.

  • Enter the package name for the app (f.ex. com.bestcompany.bestapp)
  • Enter your Debug signing certificate SHA-1 (See instructions below)
  • Download google-services.json to <project>/android/app
  • Add com.google.gms.google-services plugin to classpath in build.gradle
build.gradle
    
  
  • Apply com.google.gms.google-services plugin in app/build.gradle
app/build.gradle
    
  

Debug keystore and SHA-1 (documentation)

In order for the app to support certain Google services, like Google Sign-in, it has to be signed with a certificate from a keystore. During development we sign it with the certificate from the Android Debug Keystore. We need to enter the SHA-1 fingerprint of this certificate in Firebase.

  • Open a terminal and run keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
  • Enter android when prompted for a password
  • The SHA-1 fingerprint is listed under Certificate fingerprints in the output
keytool output
    
  

iOS

First, like Android, we have to add the iOS app to the Firebase project in the Firebase Console. Open Project Settings, click Add app, choose iOS and follow the steps in the wizard.

  • Enter the bundle ID for the app (f.ex. com.bestcompany.bestapp)
  • Download GoogleService-Info.plist
  • Skip the Add Firebase SDK step by just clicking Next
  • Skip the Add initialization code step by just clicking Next

Second, we have to add GoogleService-Info.plist to the Runner target in Xcode.

  • Right-click the Runner folder in Xcode and select Add Files to "Runner"
  • Find and select the previously downloaded GoogleService-Info.plist file
  • Make sure the Copy items if needed is checked and click Add
Add GoogleService-Info.plist to the Runner target

Add files to target in Xcode. Add GoogleService-Info.plist to the Runner target

Third, we have to enable Google Sign-in for iOS in Xcode (documentation).

We do this by adding the Reversed Client ID from the GoogleService-Info.plist file as a URL Type in the Xcode project configuration.

  • Open GoogleService-Info.plist in Xcode
  • Find REVERSED_CLIENT_ID and copy its value
  • Open Runner.xcodeproj, select the Runner target, select the Info tab and expand the URL Types section.
  • Add a new URL Type and paste the previously copied Reversed Client ID value into the URL Schemes box

Adding Google Services Reversed Client ID as URL Type to enable Google Sign-in

URL Types in Xcode. Adding Google Services Reversed Client ID as URL Type to enable Google Sign-in

Flutter

Now that the apps have been added to Firebase, and all the platform-specific configuration is done, we have to add and configure the Firebase SDK in Flutter.

First, we have to add and get the required dependencies.

pubspec.yaml
    
  
  • Open a terminal and run flutter pub get in the project folder

Second, we initialize the Firebase SDK in the main function of our app

main.dart
    
  

Login screen

At this point, the app should be connected to Firebase. The next step is to make a login screen that works with Google Sign-in.

I should note at this point that the code below is example code to get you started. I would recommend implementing this using the BLoC pattern, but that is outside the scope of this post.

First, we create a Firebase class that we will use to log the user in to Firebase.

firebase.dart
    
  

Second, we create a Google class that we will use to log the user in to Google.

google.dart
    
  

Third, we create a LoginScreen widget and a HomeScreen widget that we will show depending on the users login status.

login_screen.dart
    
  

home_screen.dart
    
  

Finally, we make our app listen to the login status of the user and update our main function to initialize Firebase using our new class.

my_app.dart
    
  

main.dart
    
  

Alright.

That's it.

I hope this post made it easier to connect your app to Firebase, and that the code examples served as a good starting point for making a login screen for your app.