Google & Facebook Authentication in Flutter-Firebase (1/2)

5 min readNov 6, 2020

Flutter apps with Firebase support authentication with multiple providers (such as Google, Facebook, Apple, GitHub,…) but implementing more than one of those providers and make them work together can sometimes be a tough job.

In these articles, we are going to implement step-by-step the two most popular types of social logins: Facebook and Google auth.

Before you start reading, if you want to see the social-authentication system we will build together in action, take a look at our last app: Presents (who knows, maybe you will find it useful too…)
Said that, let’s start!

1. Set up Google Authentication

The first thing we need to do is open the Firebase Console and enable login with Google.

Then we will need to add our SHA fingerprints to our project settings. We will have a pair of SHA fingerprints (one SHA-1 and one SHA-256) for each Keystore we used so, in my case, one for the debug Keystore, one for the release Keystore and one for the Google Play Keystore. To get the first two pairs we can use the command prompt with the following commands:

keytool -list -v -alias androiddebugkey -keystore C:\Users\<YOUR_USER>\.android\debug.keystorekeystool -list -v -alias <YOUR_KEY_ALIAS> -keystore <YOUR_RELEASE_KEYSTORE_PATH>

For the Google Play ones, instead, we have to check our Google Play Console

Finally, after we added all our SHA fingerprints to firebase we need to download the new google-services.json file and replace the old one in our project

Great! Now we are almost ready, the last thing we need to do is adding the google_sign_in package in our pubspec.yaml file.

2. Set Up Facebook Authentication

Since we have just edited our pubspec.yaml file, let’s add the dependencies that we will need to handle Facebook Auth: flutter_facebook_auth and http.

Now, Facebook authentication needs to be enabled in Firebase Console too as we did for Google; this time though, we need to provide an App ID and an App Secret that we will get in the Facebook Developer Console.

Enable Facebook Auth in Firebase Console

So open the Facebook Developer Console and create a New App choosing the Build Connected Experiences option

Creating a new App in Facebook Developer Console

Then, inside our App’s Dashboard, let’s scroll down until we find the Facebook Login and click on Configure.

Adding Facebook Login to our Facebook App

You can then follow the Facebook Quickstart for Android but, since it hasn’t been written for Flutter apps, we won’t follow every point of the guide. If I don’t mention a point you can just click Next.

Import Facebook SDK in your project

To do this, you will need to edit your_app_name>android>build.gradle file as follows (new code in bold):

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google()
        jcenter()
        mavenCentral()
    }...

and the your_app_name>android>app>build.gradle as follows:

...dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.firebase:firebase-analytics:17.5.0'
    implementation 'com.facebook.android:facebook-android-sdk:[5,6)'
}

2. Add your android project details to your Facebook App

At the point n. 3 of the Facebook Login’s Quickstart it will ask you for your package name (that must be the one you used in your project and in the Google Play Console) and your main activity name (which usually is <PACKAGE_NAME>.MainActivity)

Android Project Details inside Facebook Login’s QuickStart

3. Add your Hash Keys to your Facebook App

The point n. 4 of the QuickStart asks you your project’s hash keys that you can easily get using the following commands:

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\<YOUR_USER>\.android\debug.keystore" | "<PATH_TO_OPENSSL_LIBRARY>\bin\openssl" sha1 -binary | "<PATH_TO_OPENSSL_LIBRARY>\bin\openssl" base64keytool -exportcert -alias <YOUR_KEY_ALIAS> -keystore <YOUR_RELEASE_KEYSTORE_PATH> | openssl sha1 -binary | openssl base64

4. Update your AndroidManifest file

Open the your_app_name>android>app>src>main>AndroidManifest.xml file and update it as follows:

...<uses-permission android:name="android.permission.INTERNET" />
<application
  ...
  </activity>
  
  <meta-data
    android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

  <activity
    android:name="com.facebook.FacebookActivity"
    android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

  <activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />
      <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
  </activity>  ...</application>...

And we are done with the Facebook Login’s QuickStart!
Now we need to open the Settings tab inside the Facebook Developer Console and copy our App ID and App Secret to the Firebase Console (and here we can provide some details about our app too, such as an app icon, a support email address, our privacy policies,…)