Passwordless Authentication in React Native Using Facebook Account Kit (Part 1)

Integrating React Native Facebook Account Kit

One of the first features you must develop when building an app is a simple and seamless login and sign up flow in which users don’t need to remember complicated passwords.

A very interesting option for this is Facebook’s Account Kit, which provides a validation process of phone numbers through SMS, for free.

Account Kit lets people quickly register for and login to your app by using just their phone number or email address — no password needed. It’s reliable, easy to use and gives you a choice about how you sign up for apps.

ref.: https://developers.facebook.com/docs/accountkit/

Using this authentication method we reduce the risk of massive sign-ups, since every user must provide a valid phone number, which isn’t as easy to obtain as email accounts.

A bit of architecture

In general, as in any client/server architecture, we need to know whether the user trying to access a resource is a valid user.

Following the list of best practices posted by our friends at Auth0, we decided to set up this example project using JSON Web Tokens (from here on JWT) to identify server requests.

Without going in to detail, the idea is that every client request should include an Authorization header in order to be identified from the server and grant access to the resource in question.

To understand the flow between the application and our server, we designed this diagram describing the step by step verification of data:

Getting a JWT to access Service API resources

1. The user validates their phone number via SMS and then obtains a Facebook code that can only be used once.
2. The application sends that code to the Authorization API (a service that we will create later on).
3. The Authorization API verifies that the code is valid and, if it is, returns a JWT.
4. Once we obtain the JWT, the Mobile Application checks the Services API including the value of this JWT as an authorization header to access resources.

Let’s get to work!

A while back at Underscope we developed react-native-facebook-account-kit, a library to easily integrate Account Kit in a React Native project.

On the next steps we are going to:

1. Create and configure an application on the Facebook developer portal.
2. Integrate the react-native-facebook-account-kit library into a new React Native project.
3. Configure the project with the data obtained from the newly created application.
4. Validate that the complete flow works properly with a simple example.

Creating the application on Facebook

The first step is to create an application on Facebook and obtain the data necessary to set up our application afterwards.

• From the Facebook page, https://developers.facebook.com/apps/, click on the Add a New App button

• Type the name of your application and a contact e-mail on the input fields:

Creating a new Facebook App ID

• In the Add a Product page press on the Set Up button on Account Kit

Adding Account Kit

• After clicking Set Up we’ll skip the Quickstart and go back to the app’s Basic Settings section

• Head to the bottom of the Settings page and click on the + Add Platformbutton and then select iOS

Adding iOS Platform

• Configure the iOS bundle ID of the application (the ID that we will then use to upload our app to the App Store). In our case, it would be io.underscope.example.accountkit. Further on we will need this to set up our project.

Configuring iOS bundle ID

• We will then follow the same steps for Android:

Selecting and configuring Android Platform

• Now we save changes and go to Account Kit’s Settings section, toggle the Require server validation option and then click Get Started

• On the next section, we will obtain the data we need for the application: Account Kit App Secret & Account Kit Client Token. These will come in handy on the next steps:

Integrating Facebook Account Kit

Shared steps between Android and iOS:

The first thing we need to do is to integrate the module in our React Native application using yarn and then linking the native libraries using the linkcommand of the react-native command line interface:

yarn add react-native-facebook-account-kit
react-native link react-native-facebook-account-kit

iOS

We suggest you follow the next steps using Cocoapods. But you can find information on how to proceed manually on the project’s Github repo.

• On the ios folder, discard any changes that were generated using the linkcommand on the previous step. If you use git, on your terminal you can type git checkout -- ios
• Add RNAccountKit to your Podfile (if you haven’t created this file yet, you can do so by following the instructions on React’s page). For this example, the Podfile would end up looking like this:

target 'AccountKitExample' do
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
  pod 'RNAccountKit', :path => '../node_modules/react-native-facebook-account-kit/ios'
end

• From the folderios run the commandpod installon your terminal, to download the native dependencies and link the module to your project.
• Add the following exclusions to your .gitignore file:

# CocoaPods
Pods/

Android

Take a breath…and…done. No extra steps required 😃.

Configuring Facebook Account Kit

As the final step, all that’s left is to modify the Info.plist file located on the folderios/[PROJECT_NAME] of the React Native project.

It’s very important that we replace the field CFBundleIdentifier with the package identifier that we configured when we created the application on Facebook:

<plist version="1.0">
    <dict>
        ...
        <key>CFBundleIdentifier</key>
        <string>io.underscope.example.accountkit</string>
        
        <key>FacebookAppID</key>
        <string>2118871078377333</string>
        
        <key>AccountKitClientToken</key>
        <string>d2a3ef2d51a7b181a9b3c9a4a2594aa5</string>
        
        <key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleURLSchemes</key>
                <array>
                <string>ak2118871078377333</string>
                </array>
            </dict>
        </array>
    </dict>
</plist>

Android

In this case we need to modify 3 files:

• Configure the application ID on the defaultConfig section of the file android/app/build.gradle:

...
defaultConfig {
    applicationId "io.underscope.example.accountkit"
    ...
}
...

• In android/app/src/main/res/values/strings.xml:

...
<string name="fb_app_id">2118871078377333</string>
<string name="ak_client_token">d2a3ef2d51a7b181a9b3c9a4a2594aa5</string>
...

• In android/app/src/main/AndroidManifest.xmladd the following lines inside the application node:

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

Validating that the integration works

Once we’ve fully integrated the module, all we have left is to write a few lines of code to verify that everything works as expected. To that end we are going to edit the App.js file and replace it with the following code:

Configure the library on componentDidMount indicating the responseTypethat we will use to validate on our server and some default values, such as the country code and prefix. You can find more information on the RNAccountKit.configure method in the documentation.

Run the application withreact-native run-ios or react-native run-androidand you should be able to complete the following steps:

Obtaining the value code after validating the phone number

You’re all set! If all went well, Facebook should return the values on a plain object (state andcode) and you should see them in yellow, as console.warn, as shown on the image above. If, for some reason, you couldn’t complete this tutorial, please leave us a message so we may provide assistance. We’re happy to help any member of the React Native global community.

Passwordless Authentication Using Facebook Account Kit

• Part 2: Accessing secure resources with JSON Web Tokens
• Part 3: Consuming secure resources from React Native

If you’re looking for React Native experts, don’t hesitate to contact us! Write to us from our web or send us an e-mail at newbiz@underscope.io.