How to Integrate Facebook Phone Number Authentication to React Native App

Last Updated on September 14, 2019.

Update: Facebook Account Kit will be deprecated by 9, March, 2019. Check out my blog post about this here.

Nowadays, many apps prefer authentication through mobile phone number. In this kind of authentication, the user doesn’t need to remember the password and what all he needs to enter OTP. In this blog post, I will explain you how to integrate mobile phone number authentication in React Native using Facebook Account Kit.

First of all follow the steps given below to get IDs required for Facebook Account Kit.

  • Enter Display Name of your app and your email. Then click on Create App Id button.
  • Complete the security check and click on Submit button.
  • Now from the select a scenario page, choose Integrate Facebook Login option. And click on Confirm button at the bottom.
  • Now, scroll down to the page and find Account Kit under Add a Product section. Click on Set Up button.
  • From the left menu choose Settings under Account Kit section.
  • Click on Get Started button.
  • From the next screen note down Account Kit Client Token. Note the APP ID given at the to too. Also, make sure Allow Phone Number Login and Enable Client Access Token Flow are enabled.
  • Click on Save Changes button.

Now, you have got required credentials for implementing Facebook Account Kit in React Native.

In this react native tutorial I am using react native facebook account kit library. This library is a Facebook Account Kit SDK wrapper for react native.

Install react native facebook account kit following the commands given below:
npm install –save react-native-facebook-account-kit
react-native link react-native-facebook-account-kit

If you want to do manual install then go here and get the instructions. Now you need to do Some configurations for Android and iOS separately.

Android

  • Open YourProject/android/app/src/main/res/values/strings.xml and add the following code in it. The code should be placed inside <resources> tag. Replace YOUR_FACEBOOK_APP_ID and YOUR_CLIENT_TOKEN with the ids you got earlier from Facebook.
<string name="fb_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="ak_client_token">YOUR_CLIENT_TOKEN</string>
  • Now open Android Manifest file by going to YourProject/android/app/src/main/AndroidManifest.xml and add the following metadata inside the application tag.
<application>
    ...
    <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/fb_app_id" />
    <meta-data
        android:name="com.facebook.accountkit.ApplicationName"
        android:value="@string/app_name" />
    <meta-data
        android:name="com.facebook.accountkit.ClientToken"
        android:value="@string/ak_client_token" />
    ...
</application>

NB: Due to the migration to androidx I faced an issue after linking . The error was in an import statement in node_modules/react-native-facebook-account-kit/android/src/main/java/io/
underscope/react/fbak/RNAccountKitModule.java
. The issue resolved when I replaced import android.support.v4.content.ContextCompat statement with import androidx.core.content.ContextCompat statement. Read my blog post on androidx migration here.

iOS

  • Change your Info.plist as given below. Replace {your-app-id} and {your-account-kit-client-token} with real values.
  <plist version="1.0">
    <dict>
      ...
      <key>FacebookAppID</key>
      <string>{your-app-id}</string>
      <key>AccountKitClientToken</key>
      <string>{your-account-kit-client-token}</string>
      <key>CFBundleURLTypes</key>
      <array>
        <dict>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>ak{your-app-id}</string>
          </array>
        </dict>
      </array>
      ...
    </dict>
  </plist>

That’s it, the configuration part is over. Now let’s jump into coding part.

import React, { Component } from 'react';
import { View,  StyleSheet } from 'react-native';
import RNAccountKit from 'react-native-facebook-account-kit';


class Home extends Component {

    constructor(props){
        super(props);
    }

    componentDidMount(){
// Initiate authentication
    RNAccountKit.loginWithPhone()
  .then((token) => {
    if (!token) {
      console.log('Login cancelled')
    } else {
//authentication success
      console.log(`Logged with phone. Token: ${token}`);
      this.props.navigation.navigate('Home');
    }
  })
    }

    render() {
        return (
        <View style={styles.container}>
         </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
    }
});


export default Home;

The output screenshots are given below:

That’s how you integrate phone number authentication in react native with Facebook account kit!

1 thought on “How to Integrate Facebook Phone Number Authentication to React Native App”

  1. Pingback: Facebook Account Kit will be Deprecated by March, 2020 - REACT NATIVE FOR YOU

Leave a Reply

%d bloggers like this: