Objective:

An android app where i can login using Facebook and connect the login information with Firebase Authentication.

Step 1: Create and Run a basic React Native app.

(You can just follow this for Step 1: https://facebook.github.io/react-native/docs/getting-started.html#content )

Navigate to any folder where you want to create the project and use react native init.

Yarn ye! No world didnt changed for me… yet!!

For this tutorial we will focus on Android, but iOS is kind of similar.

cd to project folder and

Step 2: Creating a less ugly screen

index.android.js

Step 3: Facebook SDK

Execute following on your project folder, we will use official fb repo:

Should take sometime based on n/w speed.

Assume you have Android Studio, else highly suggest you install it now.

Open the Android folder as android project in Android Studio. I will be using Android studio 2.2

In MainApplication.java add an instance of CallbackManager with getter; CallbackManager manages the callback to FB SDK.

 

than under getPackages pass the newly created callback manager to FBSDK package.

In MainActivity.java make sure you already have the following method. The SDK react link should have created this.

Now we will create an FB app which will handle our login flow.

Navigate to https://developers.facebook.com/quickstarts/?platform=android and follow the onscreen instruction.

You can either do the remaining few steps from FB or just read below instructions. Both are kind of same.

in android/build.gradle add 

So it should look like this.

in android/app/build.gradle add the following for Facebook SDK 

So it should look like,

Now sync your Gradle files on Android Studio.

Now open String.xml and add facebook_app_id. You can find the id from facebook page.

app/res/values/String.xml 

Open AndroidManifest.xml and add a meta-data element to the application element:

Should look something like this.

Then update the android project info on FB console.

Click next, it will ask for hash key, on your terminal execute this:

You can close the Android studio now. Moving to react project:

Now open index.android.js

Add the following to import FB SDK.

and then replace “ Button will come here ” text component section with the following code.

Think the code is pretty self explanatory

Stop the React project and re run it again to load all libs etc.

Click on the button and make sure its log-in in and showing you the logout button. If thats working all set. (Alternatively check the chrome console for the console log of data)

Step 4: Firebase integration

For firebase integration we will use Firestack.

Within the main react project folder run the following>

followed by

Now keep your android studio open while navigate to https://console.firebase.google.com/ 

Click ADD APP and download the google-service.json

Now in Firebase under Authentication enable Facebook. All FB related info like app id and secret key you will get it from FB console from the app previously created.

Add the JSON file under the main project. 

Under React Project/android/app

You can see it on android project.

Now under android/build.gradle

under dependency add this.

and under android/app/build.gradle

add the following at the extreme end of the file.

Try a project clean on android studio (Build>Project Clean)to make sure everything is in right order.

Cool done with Android Studio. Moving to React project now.

add the import;

and add the initializations just after that:

Now where we received the access token from facebook we will pass the access token to Firebase.

So under

add the following:

Thats it. Run the app.  Note that Android requires the Google Play services to installed for authentication to function. So you may want to try running on a real device or configure simulator for Google Play service

For your reference here is my final index.android.js file.

Publishing to git hub if you need?


Also published on Medium.