Firebase with Flutter and Google Sign-in
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.
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)
com.google.gms.google-servicesplugin to classpath in
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
androidwhen prompted for a password
- The SHA-1 fingerprint is listed under Certificate fingerprints in the output
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)
- 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
- Make sure the Copy items if needed is checked and click Add
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.
REVERSED_CLIENT_IDand copy its value
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
URL Types in Xcode. Adding Google Services Reversed Client ID as URL Type to enable Google Sign-in
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.yamland add the dependencies below from the Dart package manager: pub.dev (update versions as needed)
- Open a terminal and run
flutter pub getin the project folder
Second, we initialize the Firebase SDK in the main function of our app
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.
Second, we create a
Third, we create a
LoginScreen widget and a
HomeScreen widget that we will show depending on the users login status.
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.
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.