So you have decided to develop your Android Application with services from Firebase. Or already using Firebase in your project and now decided to authenticate your users using Facebook (One of most used OAuth providers). While firebase and Facebook both provide documentation to integrate Facebook Login, but the content is separated and they are some steps in integration process which leads you to head scratching. So in this article, we going to learn how to integrate Facebook Login in your Firebase Android App.
Before starting the article there are some pre-requisites that you need to have.
1. You should have connected your Android App to Firebase i.e. You must have created a project on firebase console and connected it your Android Application. If you have not, then follow the instructions on Firebase Android Setup page and then return to this article.
2. You should be developing your Android Project on Android Studio.
1. Add the dependency for Firebase Authentication to your app-level build.gradle file (You must be seeing two build.gradle files in your project structure in Android Studio, you must select the file at app-level like build.gradle(Module: app) ), if you have not already.
Get the App ID and the App Secret for your App from the Facebook for Developers site. If you have not already created the App or don’t know how to create the App, follow the instructions below.
1. Go to Facebook for Developers site, and log in your Facebook Id.
2. Then click on the Button with text, + Add a New App, and fill the details asked and then click on Create App ID.
3. After the successful App creation, you will be taken to the App Dashboard where you can find the App ID and the App Secret.
1. In the Firebase Console, open the Auth Section.
2. On the SIGN-IN METHOD tab, enable Facebook sign-in method and specify the App ID and the App Secret, you got from Step 2.
3. You will get an OAuth Redirect URI from above step. You need to list this URI as one of your OAuth redirect URIs in the Facebook App you created in Step 2. If you don’t know how to do this, then follow remaining points in Step 3.
4. Open the Dashboard Page (Main Page) of the Facebook App created in Step 2. On the left side, click on + Add Product and then select Facebook Login.
5. Then in the settings of Facebook Login, add the OAuth URI you got from Firebase Console. Click on Save Changes.
In this step, you are going to follow the Quickstart Guide provided by Facebook to integrate Facebook Login in your Android App. You need to open the Quickstart Guide, as it is not possible to copy those steps here because it involves some code snippets specific to your App. But we are going to explain which steps you need to leave and how to execute some steps that leave your head scratching.
To open the Quickstart Guide, open the Facebook App (Created in Earlier Steps) and then select Facebook Login under PRODUCTS on the left side panel. Then Select Quickstart under Facebook Login. It will then ask you Choose a Platform, select Android.
Now you will see 10 steps, you need to follow one by one to complete the integration. But I will tell you how to proceed and please have faith in this Article. I have also gone through this and if you will follow my instructions, you are going to save a lot of time.
1. In the first step, it will ask you to Download the Facebook SDK for Android, but you don’t need to download it because Android Studio directly compiles it for you from Maven Repository as you are going to see in upcoming steps. Click Next.
2. In the second step, you must be seeing 6 points. Leave 1 & 2 points and implement 3rd to 5th points and leave 6th point(Not necessary for Android Studio).
3. Execute the third step as specified in Quickstart. In the third step, if you are confused with Default Activity Class Name, then enter the class name of the first activity that opens when you start your App. The class name for activity can be found in the Manifest file.
4. Now the fourth step is very important. It asks you to generate Development Key Hash for your Android App and also a release Key Hash if you have already published your App on Google Play Store. This key authenticates your Android App with Facebook.
But the method specified in this step sometimes leads to producing Invalid Key Hashes. To avoid such situation you can follow my instructions to produce your Key Hash.
You need to paste the piece of code given below in the onCreate method of the first activity of your App.
Replace <YOUR_PACKAGE_NAME> with the Package Name of your App.
Now run your app in Debug Mode on your device and copy the Key Hash from the logcat of Android Studio. Run the same code in Release mode if you need Key Hash for release also. Put the Key Hash in the box provided in the fourth step of Quickstart. Move to next step.
5. Execute the fifth and the sixth step of Quickstart as it is.
6. You can execute the Seventh Step also as described in Quickstart. But I will suggest you copy the code specified in this step to the Application Class of your Android App if you have one. Also, avoid the Purchase Methods section in this step.
7. Now leave rest of the steps of Quickstart and follow my Article.
The reason I asked to leave the last steps in Quickstart is that it asks to integrate the LoginButton provided by Facebook SDK. The LoginButton is a UI element that wraps functionality available in the LoginManager. When someone clicks on the button, the login is initiated with the permissions set in the LoginManager. The button follows the login state and displays the correct text based on someone’s authentication state. But the problem with this is that you cannot customize the look of this button according to your needs. And also we are going to tweak the code, to have Firebase Authentication in place.
So, I am going to define a separate layout for a button, which initiates the Login Process on click. And, yes of course, you can customize this button as you require.
1. Copy the piece of code given below in the layout file of your Activity.
2. Create an XML file in Drawable Folder of your App, name it as facebook_sign_in_button_bg.xml, and copy the code given below in this file.
3. Add the line given below in your strings.xml file.
<string name=”login_facebook”>Continue with Facebook</string>
4. Add the line given below in your colors.xml file.
5. Declare the variables given below in your Activity class.
6. Copy the code given below inside the onCreate() method of your Activity class.
7. Copy the code given below outside the onCreate() method of your Activity class.
Above is the last step, we have integrated the Facebook Login using Firebase Authentication in our Android App. You must build and run your Application on Android Device and you will see the Sign-In-Flow using Facebook Oauth and Firebase Authentication.
I have defined the layout and handling of Successful Authentication and Error according to my needs. Now it depends on you, how you want to define the layout and handle the various events according to your needs.
If you face any problem, you can always contact me through the Chat window given in the bottom right corner of the window.