Implementing Facebook Authentication into Your React Native App using Atlas App Services and Realm

Published in

Realm Blog

7 min readApr 26, 2022

Hi Realm and non-Realm Coders,

Atlas App Services offers several Authentication providers in order to sign into your application. In this article, we will focus on the Facebook Authentication that will be implemented into a react native App with an Atlas App Services backend.

Prerequisites

You will need Node, Watchman, the React Native command line interface, Xcode, CocoaPods, a JDK and Android Studio.
If it is the first time you are building a React Native Project, go to the documentation of React Native in order to set up your development environment and create an app.
React Native allows you to develop cross-platform iOS and Android applications using Javascript.

Create a Facebook App

After creating your React Native App, you will have to create a Facebook App on the Facebook Developers website.

Create an account as a developer and add your information or login into your account and create an app.

2) Add Basic Information

You need to keep your App ID and App secret for later on when connecting to your Atlas App Services.
Please note that the Privacy Policy URL and App Category are required for production.
This example is for development but when you deploy your app, Facebook will review it and test it for security, user experience and best practices. Request only the necessary user data that is required for your app.

3) Add Platform iOS
At the end of the Settings -> Basic page, scroll down to the end of the page and click on Add platform and then choose iOS.

You will have to add the Bundle ID of your React Native App. It can be found on Xcode General Tab. For development, nothing else is needed.

In case, you already want to deploy your app, you have to create a new app in iTunes Connect. That app will have a unique app id that needs to be added into the input iPhone Store ID.

The Shared secret is the Verification Credential that you will receive from the Apple Developer Console. Apple’s App-Specific Shared Secret is a unique key to receive receipts for your app’s auto-renewable subscriptions.
Click here for more information.

4) Add Platform Android

Select Android Store. In my case, I chose Google Play.
Please note that stores change rules continuously in order to add extra security. You might need to deploy your app in order to use facebook on your android app. If errors appear, please follow the steps that are instructed to you.
Package Names:
Get the applicationId from the android/app/build.gradle file of your android app and add it as a Package name.
Class Name (optional):
This is the name of the main activity that handles deep linking, which will be launched by Facebook. You can find the Class Name in the AndroidManifest.xml file.
For more info about deep linking and its implementation, go to the deep linking documentation of Facebook.
Facebook Key Hashes:
Please note that you don’t need it for development mode.
Key Hash is the Authentication between your app and Facebook. Generate it on Google Play or in the terminal using openSSL. Key Hashes are required for debug and release builds.
See the facebook documentation on how to create a hash key.
In addition, you have to generate a Key Store. The key store and password cannot be lost or you won’t be able to update your app in the play store.

Create an Atlas App Service backend for your Mobile App

Atlas App Services provides a suite of managed cloud services including Atlas Device Sync, serverless cloud functions, declarative data access rules, and more. You can use App Services to write and host a full application in a managed cloud environment backed by MongoDB Atlas.
Realm is an embedded, object-oriented database that lets you build real-time, offline-first applications. Its SDKs also provide access to Atlas App Services, a secure backend that can sync data between devices, authenticate and manage users, and run serverless JavaScript functions.

First, create an atlas account by following this tutorial.
Once it is done, create a new App on the Cloud by clicking on the App Services tab.

Click on Create a New App

Choose a name for your app and link your database to an existing MongoDB Atlas Data Source since Atlas App Services stores your application data in your linked MongoDB Atlas Cluster.

If you wish, you can also connect it to Github and already choose your Deployment Model.

Once it’s done, click on Create App Service.

Authentication Provider

You have the possibility to choose between different Authentication Providers.
For this tutorial, we chose Facebook.
In order to do so, click on the Authentication Tab and chose Facebook.

Steps to reproduce:

Enable the provider
Insert the Client ID and Client Secret. This is the App ID and App Secret from your Facebook app. This is located in the Basic section on your Facebook app.
Choose Metadata fields. Later on you will be able to access it via the App Services UI.
Save Draft.
At the top of the page, click on Review Draft and Deploy.

For more information about Redirect Urls, Domain restrictions and Facebook Authentication, have a look at the official documentation.

React Native FBSDK Next

Add the FBSDK-next library to your React Native App.
Please note that Facebook is no longer supporting the official wrapper library that was called FBSDK and has been replaced by the FBSKK-next library that is maintained by the community. The official Facebook SDKs for android and iOS can be installed separately for each platform.

The FBSDK next library is a wrapper around the official Facebook SDKS for Android and iOS and can be installed via NPM. This library gives access to Native components and no extra modules have to be installed.

Installation

use Yarn:
yarn add react-native-fbsdk-next

or npm:
npm install --save react-native-fbsdk-next

Linking

With the last version of react Native, the CLI autolink feature links the module while building the app.It is recommended not to use a lower version than 0.60.
For iOS, run:
cd ios/ && pod install

Configuration

Android Configuration

Open the android/app/src/main/res/values/strings.xmlfile and add these 2 strings.

<string name="facebook_app_id">{your_app_id}</string>
<string name="facebook_client_token">{your_token}</string>

You can find the App ID on the dashboard of your Facebook App.
In order to find your Facebook Client Token, go to the Dashboard, navigate to Settings > Advanced > Security > Client token.

2. Open the android/app/build.gradlefile and add this line in the dependencies part
implementation 'com.facebook.android:facebook-android-sdk:latest.release'

3. Add internet permission into the fileandroid/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

4. Add metadata to the application element into the fileandroid/app/src/main/AndroidManifest.xml:

<application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
    ...
</application>

iOS Configuration

Open your info.plist file and add these lines between the<dict>...</dict> tag

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb{your-app-id}</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookClientToken</key>
<string>{your-client-token}</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>

Replace the{your-app-id} with your Facebook id from the Facebook developer app dashboard ,replace the{your-client-token} with your Facebook Token and the{your-app-name} with your facebook app name that you can find on your Dashboard.

In order to find your Facebook Client Token, go to the Dashboard, navigate to Settings > Advanced > Security > Client token.

2) For iOS 14 devices, the Advertiser Tracking has to be enabled. It can be added to yourApp.js file.

import {Settings} from 'react-native-fbsdk-next';
...
  useEffect(() => {
    Settings.setAdvertiserTrackingEnabled(true);
  }, []);

In case of any problems/bugs regarding the configuration, you can access the documentation of react native fbsdk-next.

Realm and Facebook integration into React Native app

Install Realm with npm:
npm install realm

Create a realmApp.js file to connect to your realm app

In your app.js file, replace the content

Final result

App Users & Logs

After adding a user, go to your App Services UI to see the added users and pending ones. On the UI, you have access to interesting information like the type of devices, metadata, status, etc.