Facebook Login on Android with React-Native

With the increasing number of platforms using social login, here is a simple and easy way on how to create a custom login button with the facebook login SDK in an android OS using react-native. Let’s get started!!🤗

The complete working app can be found in this repo.

https://github.com/Cressence/loginTuto

To begin this journey, you need to create an app on the facebook developer dashboard (https://developers.facebook.com/)

Facebook developer dashboard

Then write the name of your application in the Display Name field and click CreateApp Id.

Create app field

After app creation, the dashboard opens. Select facebook login in case the select a scenario screen shows.

On the right side of the dashboard, you will see the Facebook login. Under the dropdown, select Quick start and follow the steps until step 7.

Create your react-native app using the command react-native init appName. And run the app.

Next, add the android SDK path to the project by creating a file in the android directory named local.properties with the following code

sdk.dir = /path to sdk/Library/Android/sdk

For react-native 0.60.4 (current release), run react-native start to start the metro server and react-native run-android to run the application.

For older versions, run react-native run-android

Install react-native-fbsdk by running

“yarn add react-native-fbsdk@v1.0.0-rc.4” (For recent react-native version)”

or

“react-native link react-native-fbsdk”(For older versions)

For older versions of React-native ( < 0.60.4), In the android/app/src/main/java/com.package-name/MainApplication.java

private static CallbackManager mCallbackManager = CallbackManager.Factory.create();
protected static CallbackManager getCallbackManager() {
   return mCallbackManager;
}

then add the following

@Override
protected List<ReactPackage> getPackages() {
   return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new FBSDKPackage(mCallbackManager), ***Add this line
   );
}

As of react-native 0.60.4, react-native-fbsdk@v1.0.0-rc.4 links the library automatically.

Add this code to your App.js file

import React, { Component } from ‘react’;
import { StyleSheet, TouchableOpacity, Text, View } from ‘react-native’;
import FBSDK, { LoginManager, AccessToken, GraphRequestManager, GraphRequest } from ‘react-native-fbsdk’;
class App extends Component {
  facebookAuth = () => {
     LoginManager.logInWithPermissions([‘public_profile’])
      .then((result) => {
           if (result.isCancelled) {
               console.log(‘login cancelled’);
           } else {
               AccessToken.getCurrentAccessToken().then((data) => {
                   let accessToken = data.accessToken;
                   let facebookId = data.userID;
                   const responseInfoCallback = (error, result) => {
                       if (error) {
                          alert(‘Error fetching data: ‘ +             error.toString());
                       } else {
                          let user = {
                               token: accessToken.toString(),
                               name: result.name,
                               picture: result.picture.data.url,          providerId: facebookId
                           }
                          alert(JSON.stringify(user ));
                      }
                  }
                  const infoRequest = new GraphRequest(‘/me’, {
                    accessToken: accessToken, parameters: { 
                       fields: {string: ‘name,picture’}}
                    }, responseInfoCallback);
         new GraphRequestManager().addRequest(infoRequest).start();
         });
    }}, function (error) {
                 console.log(‘An error occured: ‘ + error);
         }); }
render() {
     return (
        <View>
           <TouchableOpacity onPress={this.facebookAuth} style={[styles.btn, { backgroundColor: ‘#4267B2’ }]} >
               <Text style={{ color: ‘#ffffff’, alignSelf: “center”}}>Sign in with Facebook</Text>
           </TouchableOpacity>
        </View>
   );} 
};
const styles = StyleSheet.create({
btn: {
width: 250,
height: 41,
marginTop: 10,
alignSelf: ‘center’,
justifyContent: ‘center’,
borderRadius: 2
}
});
export default App;

Run the application and you will see this

In order for the app to work in production go to your app’s dashboard and change the status to on.

Add the privacy policy link to your app and then you are good to go!!