React Native Facebook Login Tutorial (with Expo)

Expo with React Native already makes it SUPER easy to add Facebook Login to your iPhone or Android app. Here is a step-by-step guide on how to add Facebook Login to your React Native app (this is for using Expo, the React Native Core tutorial is much longer).

Step: 1

Create Facebook Developer Account

(If you already have an account skip this step)

Step: 2

Go to your Facebook App Dashboard Here Click Create New App Click Next past code snippets until the Bundle ID step

iOS

Type in host.exp.Exponent as your bundle ID and Save

Android

For an Android Key type in rRW++LUjmZZ+58EbN5DVhGAnkX4=

Step: 3

Make sure you write down your APP ID while creating a new Facebook App then go to your App.json file and add the keys:

facbookScheme FacebookAppID facebookDisplayName

{
 "expo": {
 "sdkVersion": "22.0.0",
 "facebookScheme": "fbYOURAPPID",
 "FacebookAppID":"YOURAPPID",
 "facebookDisplayName": "YOUR NAME OF APP"
 }
}

Step: 4

Add in the Login function to the component that you want to handle the logic:

 login = async () => {
  const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync('YOURAPPID', {
    permissions: ['public_profile'],
  });
  if (type === 'success') {
    const response = await fetch(
     `https://graph.facebook.com/me?access_token=${token}`);
    Alert.alert(
     'Logged in!',
     `Hi ${(await response.json()).name}!`,
    );
  }
 }

Step: 5

Add Button to handle click event to call Login function

<Button title="Facebook Login" onPress={this.login} />

DONE

I purposely kept the tutorial very brief and basic so that it is clear what the actionable lines of code are for adding Facebook Login to a React Native Expo app. If you want more detail I will soon be releasing a full tutorial on how to build your own Tinder app with this type of login.

Want To Learn How To Turn Your Ideas Into Code?


Written by Tim Moreton who lives and works
in Philadelphia building useful things.