Firebase Android All Social Login Within Four Minutes

Firebase is a Google-backed platform that is becoming very popular amongst mobile devs. It offers a lot of great products; Authentication with social platforms, Realtime-Database, crash-reporting, analytics, push-notifications, cloud storage and many many more.

So, as the title of this article tells we’re going to build an authentication flow for Firebase using social platforms with Twitter, GitHub, Gmail, and Facebook.

In this tutorial example, I will cover the following points:

1. Firebase Installation
2. Firebase Android App Setup
3. Facebook Authentication Firebase Setup
4. Facebook sign-in with Firebase
5. Google Authentication Firebase Setup
6. Google sign-in with Firebase
7. Twitter Authentication Firebase Setup
8. Twitter sign-in with Firebase
9. GitHub Authentication Firebase Setup
10. GitHub sign-in with Firebase

Before start authenticating the user with firebase here the demo of application of how the app looks like.

Note: There’s a lot going on in this project so I encouraged you to follow me by looking at the GitHub project made for all social platform authentication with firebase. Here is the link.

Key Features use in this app

• Koin dependency injection
• MVVM (Model View ViewModel) architecture
• Kotlin coroutines
• Firebase authentication uses coroutines instead of Task<T>
• Custom material dialog for handling error state
• Firebase account collision

So let’s get started!

Firebase Installation

We will start by installing the necessary dependency on our app-level gradle file(app/build.gradle).

dependencies {
      implementation "com.google.firebase:firebase-auth:${firebaseVersion}"
}
apply plugin: 'com.google.gms.google-services'

Don’t hit the Sync Now button yet because we also need to add the google-services.json file inside the app directory of our project.

Firebase Android App Setup

After adding the dependency, it’s time to set up a new Firebase project. Visit the Firebase Console, create a new project, and “Add Firebase to Your Android App“.

After a successful new project creation downloads the google-services.json file and adds it inside your app directory of the Android project.

Now hit the Sync Now button and let the Android Studio download the firebase dependency for your project.

Facebook Authentication Firebase Setup

We can easily authenticate someone with firebase-auth SDK and let the app users log in with Facebook. Here are some steps to work with the firebase facebook login.

• Create an app on Facebook for Developers console.

• After creating a facebook app, copy the App ID and App Secret inside the Settings->Basic section.

• Visit the Firebase Console again and open the previously created firebase project. Inside the project, you’ll see a sidebar with many functionalities. We need to focus on the Authentication tab. Upon clicking on the Authentication tab, you will be asked to choose to Sign-In method, Select the Facebook method, specify the App ID and App Secret you got from Facebook, and then finally click on the Save button.

• We also need to do apply a couple of things inside the android project. First, add the following facebook dependency (build.gradle) file.

// Facebook dependency
implementation 'com.facebook.android:facebook-login:5.0.0'

• Once again go to Settings->Basic and copy the App ID. Open your app/res/values/strings.xml file and add the following strings.

<string name="facebook_app_id">app_id_here</string>
<string name="fb_login_protocol_scheme">fb_protocol_scheme</string> //  prtocol scheme is same as facebook App_ID with fb string at start. Now let's say my app_id is 455454456243562462345 then my fb_protocol_scheme will become fb455454456243562462345.

• Add the following meta-data element and intent-filter tag for Chrome Custom Tabs inside your AndroidManifest.xml-> application tag.

<application>
      .....
      .....

       <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>

Facebook sign-in with Firebase

Now that the setup part is done, let’s integrate facebook login. Instead of putting all code inside the activity or fragment we’ll use the MVVM approach.

So, let us create a new ViewModel class. I’m going to name mine SocialActivityViewModel you can name anything which suits your app.

class SocialActivityViewModel: ViewModel() {     
} 

You can get all firebase facebook authentication-related code from line 46–92 inside the SocialActivityViewModel class available on GitHub.

Google Authentication Firebase Setup

To facilitate our users to login with Google login, we need to first update our (app/build.gradle) file and add the following dependency inside the dependencies section.

dependencies {
    implementation 'com.google.android.gms:play-services-auth:17.0.0'
}

Next, enable Google Sign-In in the Authentication tab of the Firebase console project. Before pressing the Save button copy the Web Client ID available inside the Web SDK configuration drop-down.

Google sign-in with Firebase

Open the SocialActivityViewModel class and remove the GOOGLE_PRIVATE_CLIENT_ID parameter value and replace it with the Web Client ID you got it from the firebase console when enabling Google sign-in.

class SocialActivityViewModel : ViewModel() {
   
    ......
    ......
    companion object {
         private const val GOOGLE_PRIVATE_CLIENT_ID =
            "165417854765-1c9n77d2******bu3tm.apps.googleusercontent.com"  // replace it your Web Client ID
         .......
    }
}

All the remaining code for Google sign-in is available from line 95–129 inside the SocialActivityViewModel class on GitHub.

Twitter Authentication Firebase Setup

The easiest way to authenticate our users with Firebase using their Twitter account is to handle the entire sign-in flow with the Firebase Android SDK. To handle sign-in flow we first need to create a new app as a developer application on Twitter and get the OAuth API key and API secret.

Before creating the Twitter app go to the firebase console Authentication-> Sign-in method, click Twitter provider, and copy the callback URL.

Now start creating a new Twitter developer app or use the already created one if you have. Fill in all the details about your app like name, website, description, etc. Make sure that you check the “Enable Sign in with Twitter” and also paste the callback URL in the “Callback URLs” section.

After Twitter accepts your developer app go to the Keys and Tokens tab at the top, copy these two keys.

Finally, paste these API key and API secret into your firebase Twitter Sign-in method page back at the Firebase Console, and click Save.

Twitter sign-in with Firebase

The line of code from 132–151 inside the StartActivityViewModel class is the code for Twitter login.

GitHub Authentication Firebase Setup

To sign in users using their GitHub is account as mostly as same as Twitter. Again, go to the firebase console Authentication-> Sign-in method, click GitHub provider, and copy the callback URL.

Next, register your app as a developer application on GitHub don’t forget to paste the callback URL inside the Authorization callback URL.

Copy the Client ID and Client Secret of your GitHub app which you just created.

Finally, paste these API key and API secret into your firebase GitHub Sign-in method page back at the Firebase Console, and click Save.

GitHub sign-in with Firebase

You can find the GitHub login from the 154–173 line inside the SocilaActivityViewModel class.

---

Alright, guys, that’s all for this article. If you like what you read, I appreciate your support to share this article with others to let the great Android and Firebase community know.

Thank you for being here and keep reading…