Facebook Login for React Native — No Firebase Required

This guide is effective as of Jan 1, 2023

I will mention and go through all the steps which people normally forget and get stuck with, and finally give up at the end.

Create an App on Facebook Developer

Click on My Apps

Click on Create App

Select any app type & Next

Add App name and click Create app

Finally your Facebook App has been created

Setup Facebook Login

Now, click on Facebook Login Set up

You can see Facebook Login is added as a product at the left side

Add Platforms (iOS & Android)

Now, go to settings basic then scroll down and click Add platform

Select iOS and Android then click Next

Select store only in case if your app is live on stores otherwise just click Next

2 Platform has been added but can’t save until filling the required information

Fill up your iOS Bundle Id

Copy your iOS Bundle Id

And paste to the Bundle ID and Enter in the iOS Section

Generate Key Hashes for Android & Sign your Android App

fig: 1

In fig: 1, You have to enter key hashes. In the next step, we will create key hashes. But keep in mind if you generate key hashes using your debug signing then facebook login will not work in release mode (apk, aab). If you want to run facebook login in release mode (which you definitely do want) then sign your app. Click Me To Sign Your App

Just follow the guide to the adding signing configs step, don’t go on generating step

Now, we done with signing the android app.

Now, we have to create key hashes using signing key store (that we just created above)

Open android studio

Click on Gradle at top right side bar

Now click on icon that will execute gradle tasks

Now write signingReport and press enter

Android signing report has been run and now we will search for a release signing key

Search for release, where variant and config value are release

Now, copy SHA1 key

Now go to http://tomeko.net/online_tools/hex_to_base64.php

Paste you SHA1 key in Hex String and then click convert, Now copy your output (base64) String

Paste copied string in Key Hashes for Android

Please keep in mind, don’t enter package name until your app is not available on store. If you write your android package name then you have to confirm ownership then you can go ahead. Now save changes.

Fill up Basic Information like Privacy Policy URL

Add Privacy Policy URL and incase if you don’t have then just enter fake URL later change

Get Advanced Access if you want to use FaceBook Login

In the Facebook Login Settings, it shows error that you can’t use facebook login until you don’t have advanced access

click “Get Advanced Access” or go to “App Review” at left side and then “permissions and features” Section

Now, here we have to get public_profile advance access

Go little bit down and after finding public_profile permission click on get advanced access, and then just confirm it.

Now, we have public_profile advanced access

Please keep in mind, if you want to get any other feature/permission of profile using facebook login then you have to get advanced access too. If you want to get user_videos then get it’s advanced access just like we did for public_profile

Make your Facebook app Live

toggle switch for the live mode

Install package & Install Cocoapods

Now install react-native-fbsdk-next Package

yarn add react-native-fbsdk-next

Note For iOS using cocoapods, run:

cd ios/ && pod install

Configuration for Android

Now we have to configure for android

• Add following data to your android/app/src/main/AndroidManifest.xml File inside application tag

• Add following data to your android/app/src/main/res/values/strings.xml File inside resources

Place your facebook App Id and Facebook Client Token

Copy App Id by clicking it

You can get client token from Settings Advanced

Final Output of your files

AndroidManifest.xml File

strings.xml File

Configuration for iOS

Now, we have to configure for iOS

• Add following import to your AppDelegate.m File according to given image

Kindly notice I’ve added that import before 12 line i.e #ifdef

• Add following code to your same AppDelegate.m file inside didFinishLaunchingWithOptions method according to the given image

After adding, your file will something look like this

• Add following code to your same AppDelegate.m file afterdidFinishLaunchingWithOptions method according to the given image

Your file will something look like this

Final Output of your AppDelegate.m File

Add URL Types for iOS

Open Info.plist file as a source code

• Add following lines at the end of file inside dict tag

Replace following data with your ones (I already guided in the configuration for android section above, that from where to find this)

Final Output of your Info.plist file

Now, refresh your build and re-run the App (Android & iOS Debug) Both.

Error You May Face (iOS) While Archive

Archive Failed for iOS, After reading this we can see that we have to disable the bitcode for the release version

Solution

Turn this to ‘NO’ from ‘Yes’

Now, please add the following code snippet to your project for Facebook login.

import { LoginManager, AccessToken, AuthenticationToken } from 'react-native-fbsdk-next';

const onPress = () => {
  LoginManager.logInWithPermissions(["public_profile", 'email']).then(
    function (result) {
      if (!result.isCancelled) {
        AccessToken.getCurrentAccessToken().then(data => {
          const { accessToken } = data;
          // Do whatever you want with the accessToken, But in most of the cases you'll send this to back-end servers.
        })
      }
    },
    function (error) {
    }
  );
}

If this Medium article helped you, please just clap. Thankx.