Facebook

Installation

Configuration

Registering your app with Facebook

💡

When following these steps you will find on the Facebook Developer site that there are many fields and steps that you don't actually care about. Just look for the information that we ask you for and you will be OK!

• Build a custom Expo client app
• Build a standalone app

Configure app.json

• Add the field facebookScheme with your Facebook login redirect URL scheme found here under "4. Configure Your info.plist." It should look like "fb123456". If you do not do this, Facebook will not be able to redirect to your app after logging in.
• Add the fields facebookAppId and facebookDisplayName, using your Facebook App ID and Facebook Display Name, respectively.
• Optional fields
  • facebookAutoInitEnabled, defaults to false
  • facebookAutoLogAppEventsEnabled, defaults to Facebook's default policy (Only applies to standalone apps)
  • facebookAdvertiserIDCollectionEnabled, defaults to Facebook's default policy (Only applies to standalone apps)

iOS Custom Expo client

• Add your custom client's Bundle ID (shown in the output after running expo client:ios) in the app settings page pictured below. It should look something like: dev.expo.client.xxxxx

iOS standalone app

• Add your app's Bundle ID as a Bundle ID in the app settings page pictured below.

Android standalone app

• Build your standalone app for Android.
• Run expo fetch:android:hashes.
• Copy Facebook Key Hash and paste it as a key hash in your Facebook developer page pictured below.

API

import * as Facebook from 'expo-facebook';

Facebook.initializeAsync(options: FacebookInitializationOptions): Promise<void>

• On Android and iOS you can optionally provide an appId argument.
  • If you don't provide it, the Facebook SDK will try to use appId from native app resources (which in standalone apps you define in app.json, in the app store development clients is unavailable, and in bare apps you configure yourself according to the Facebook setup documentation for iOS and Android]). If the Facebook SDK fails to find a value for appId, the returned promise will be rejected.
  • The same resolution mechanism works for appName.
• If you provide an explicit appId, it will override any other source.

Login Options

• FacebookInitializationOptions type:
  • appId (string | undefined) Application ID used to specify the Facebook app. On Android and iOS if you don't provide this, the Facebook SDK will try to use appId from native app resources (which in standalone apps you define in app.json, in the app store development clients is unavailable, and in bare apps you configure yourself according to the Facebook setup documentation for iOS and Android]). If the Facebook SDK fails to find a value for appId, the returned promise will be rejected.
  • version (string | undefined) Selects the version of the Facebook SDK to use.
  • appName (string | undefined) An optional Facebook App Name argument for Android and iOS.
  • autoLogAppEvents (boolean | undefined) Sets whether the Facebook SDK should log app events. App events involve e.g. app installs, app launches (more info here and here). In some cases, you may want to disable or delay the collection of automatically logged events, such as to obtain user consent or fulfill legal obligations. This method corresponds to this iOS and this Android native SDK method. The default value is false.
  • domain (string | undefined) (Android only) Sets the base Facebook domain to use when making Web requests. Defaults to: 'connect.facebook.net'.

Facebook.logInWithReadPermissionsAsync(options)

Initialization Options

• permissions (array) -- An array specifying the permissions to ask for from Facebook for this login. The permissions are strings as specified in the Facebook API documentation. The default permissions are ['public_profile', 'email'].

Returns

Facebook.setAutoInitEnabledAsync(enabled: boolean): Promise<void>

Facebook.setAutoLogAppEventsEnabledAsync(enabled: boolean): Promise<void>

Facebook.setAdvertiserIDCollectionEnabledAsync(enabled: boolean): Promise<void>

Example

async function logIn() {
  try {
    await Facebook.initializeAsync({
      appId: '<APP_ID>',
    });
    const {
      type,
      token,
      expirationDate,
      permissions,
      declinedPermissions,
    } = await Facebook.logInWithReadPermissionsAsync({
      permissions: ['public_profile'],
    });
    if (type === 'success') {
      // Get the user's name using Facebook's Graph API
      const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
      Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
    } else {
      // type === 'cancel'
    }
  } catch ({ message }) {
    alert(`Facebook Login Error: ${message}`);
  }
}

Facebook.logOutAsync()

Facebook.getAuthenticationCredentialAsync()

Returns

• A promise that resolves a [FacebookAuthenticationCredential][#facebookauthenticationcredential].

async function toggleAuthAsync() {
  const auth = await Facebook.getAuthenticationCredentialAsync();

  if (!auth) {
    // Log in
  } else {
    // Log out
  }
}

Types

FacebookAuthenticationCredential

• token (string) Access token for the authenticated session. This token provides access to the Facebook Graph API.
• userId (string) App-scoped Facebook ID of the user.
• appId (string) Application ID used to initialize the Facebook SDK app.
• permissions (string[] | undefined) List of granted permissions.
• declinedPermissions (string[] | undefined) List of requested permissions that the user has declined.
• expiredPermissions (string[] | undefined) List of permissions that were expired with this access token.
• expirationDate (Date) Time at which the token expires.
• dataAccessExpirationDate (Date) Time at which the current user data access expires.
• refreshDate (Date | undefined) The last time the token was refreshed (or when it was first obtained).
• tokenSource (string | undefined) (Android only) Indicates how this token was obtained.
• signedRequest (string | undefined) A valid raw signed request as a string.
• graphDomain (string | undefined) A website domain within the Graph API.

Error Codes

ERR_FACEBOOK_UNINITIALIZED

ERR_FACEBOOK_MISCONFIGURED

ERR_FACEBOOK_LOGIN

Guide

// Get default info about the currently authenticated user.
async function getUserAsync() {
  const { name } = await requestAsync('me');
  console.log(`Hello ${name} 👋`);
}

// Request data from the Facebook Graph API.
// Learn more https://developers.facebook.com/docs/graph-api/using-graph-api/
async function requestAsync(path: string, token?: string): Promise<any> {
  let resolvedToken = token;
  if (!token) {
    const auth = await Facebook.getAuthenticationCredentialAsync();
    if (!auth) {
      throw new Error(
        'User is not authenticated. Ensure `logInWithReadPermissionsAsync` has successfully resolved before attempting to use the FBSDK Graph API.'
      );
    }
    resolvedToken = auth.token;
  }
  const response = await fetch(
    `https://graph.facebook.com/${path}?access_token=${encodeURIComponent(resolvedToken)}`
  );
  const body = await response.json();
  return body;
}