avatarArathi Shankri

Summarize

Google Sign-in for Flutter App on Android & Web

Firebase Authentication enables us to add various sign-in methods that include the most common federated identity providers such as Google, Facebook, Twitter, Apple etc.

Flutter Fire documentation was an excellent starting point to add Google Sign-in to my flutter app. But it was tricky to ensure the sign-in code works on Flutter Web as well. I have outlined in this article the steps to add Google Sign-in to your Flutter Mobile + Web app and some of the hurdles encountered along the way.

USE CASE

Authenticate a user by letting them sign-in using their Google account and using those credentials create a Firebase Auth User.

STEP 1: Add the app on Firebase

  • Add your app on Firebase as an “android” app. Refer Add Firebase to Android documentation to do so.
  • Add your app on Firebase as a “web” app. Refer Add Firebase to Web documentation to do so. (This wasn’t enough, see STEP 6)
  • Additionally, you will need to add SHA-1 certificate fingerprints on your android app. Follow the below steps to achieve this;

— Execute the following command on terminal and copy the SHA-1 fingerprints value.

keytool -list -v \ -alias androiddebugkey -keystore ~/.android/debug.keystore”

— On the Firebase console, click on “Project Overview” and click on “Settings” for your android app. Paste the copied value under “SHA certificate fingerprints”

STEP 2: pubspec.yaml changes

STEP 3: Add flutter code

  • The Social Authentication example on FlutterFire was my starting point, the below “_signInUsingGoogle” method uses the credentials returned by the google auth provider, signs in the user on Firebase thus creating a Firebase User.

STEP 4: Test on mobile

  • Now you are all set to test google sign-in on android mobile.
  • After successfully signing in the user, you should be able to check Firebase Console -> Authentication -> Users tab to find the user info and the corresponding sign-in method as well.

STEP 5: Make it work on the web

There are 3 important things you need to do to get it working on the web,

  1. Create Google Sign-In OAuth client ID
  2. Add authorized javascript origins to the google OAuth Client Id that you created in the previous step.
  3. Use thus configured port to run your flutter app on the browser.

I found the google_sign_in package usage notes very helpful to integrate into the web.

STEP 6: Test on the browser

  • We are ready to test on the browser but I got the below error on click on the Google sign-in button.
  • Fixing the index.html as below helped solve the issue.

Error: TypeError: dart.global.firebase.auth is not a function at new firebase_auth_web.FirebaseAuthWeb.new

Reason: In step 1, while adding firebase to the web app, the documentation suggests to include scripts using a relative path.

Solution: Changing index.html to load the scripts from “gstatic” site (see below code) and using “firebaseConfig” object to initialize firebase (remove “<script src="/__/firebase/init.js"></script>”) helped resolve this issue.

  • Once the user logs in on the browser, you should be able to see the corresponding Firebae Auth User created on Firebase Console -> Authentication -> Users tab.

CONCLUSION

Between Flutter Fire and the google sign in package documentation, it was straight forward to configure Google Sign-in on Android. Of course, iOS setup is always a completely different story, and hope to share it on another day. The only other unrelated error that I encountered (and not sure how or why) is the below one, which took quite a bit of googling to resolve :-)

Error: “FAILURE: Build failed with an exception. Could not determine the dependencies of task ‘:firebase_core:compileDebugAidl’.> Could not resolve all task dependencies for configuration ‘:firebase_core:debugCompileClasspath’.”

Reason: The above error was due to old classpath in “build.gradle” and wrong “distributionUrl” in “gradle-wrapper.properties”.

Solution: Create a new project and copy these values from the new project. Example:

distributionUrl=https\://services.gradle.org/distributions/gradle-6.7.1-all.zip

classpath ‘com.android.tools.build:gradle:4.1.0’

Hope this helps, Happy Thinking!

Arathi

Follow us on Twitter: https://www.twitter.com/FlutterComm

Flutter
Flutter App Development
Flutter Web
Flutter Authentication
Firebase
Recommended from ReadMedium