expo-facebook
provides Facebook integration, such as logging in through Facebook, for React Native apps. Expo exposes a minimal native API since you can access Facebook's Graph API directly through HTTP (using fetch, for example).Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
Pending |
expo install expo-facebook
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
💡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!
appId
option in your Facebook.logInWithReadPermissionsAsync
call.user_photos
or user_friends
), or integrate Facebook login with other services like Firebase auth. If you need that functionality on iOS, you have two options: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.facebookAppId
and facebookDisplayName
, using your Facebook App ID and Facebook Display Name, respectively.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)expo client:ios
) in the app settings page pictured below. It should look something like: dev.expo.client.xxxxx
expo fetch:android:hashes
.Facebook Key Hash
and paste it as a key hash in your Facebook developer page pictured below.import * as Facebook from 'expo-facebook';
logInWithReadPermissionsAsync
, logOutAsync
) to ensure that Facebook support is initialized properly.appId
argument.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.appName
.appId
, it will override any other source.FacebookInitializationOptions
type: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.false
.'connect.facebook.net'
.['public_profile', 'email']
.{ type: 'cancel' }
.{ type: 'success' } &
[FacebookAuthenticationCredential
][#facebookauthenticationcredential].enabled === true
initializes the Facebook SDK on iOS, it does not on Android and we recommend always calling initializeAsync
before performing any actions with effects that should be visible to the user (like loginWithPermissions
).app.json
fields. The value set with this method persists across launches of the app and overrides the build-time configuration value.app.json
fields. The value set with this method persists across launches of the app and overrides the build-time configuration value.advertiser-id
field to sent events. The advertiser-id
field lets you identify and target specific customers. To learn more visit Facebook's documentation on this topic. In some cases, you may want to disable or delay the collection of the advertiser-id
field, such as to obtain user consent or fulfill legal obligations. This method corresponds to this iOS and this Android native SDK method.app.json
fields. The value set with this method persists across launches of the app and overrides the build-time configuration value.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}`); } }
<APP_ID>
, the code above will prompt the user to log into Facebook then display the user's name. This uses React Native's fetch to query Facebook's Graph API.FacebookAuthenticationCredential
object if a user is authenticated, and null
if no valid authentication exists.FacebookAuthenticationCredential
][#facebookauthenticationcredential].async function toggleAuthAsync() { const auth = await Facebook.getAuthenticationCredentialAsync(); if (!auth) { // Log in } else { // Log out } }
token
expires.token
was refreshed (or when it was first obtained).token
was obtained.initializeAsync
has successfully resolved before attempting to use the Facebook SDK.appId
option wasn't provided and the appId
couldn't be resolved automatically from the native configuration files.fetch
API to get info about the user from the Facebook Graph API. Here are some helper methods you can use to make data access easier.// 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; }