Authentication with Facebook and AuthSession API

Install libraries

To use AuthSession API, you'll need to install the following packages in your project:

Add a scheme

For a development build and when setting up production apps, define scheme in the app.json. It is required for the authentication flow to complete the process and redirect the user back to the app. It handles the process of deep linking back to the app.

{
  "expo": {
    "scheme": "yourscheme"
  }
}

If you do not provide a value for the scheme, the authentication flow will complete, however, the user will not be redirected back to the app. They will have to manually exit the authentication popup which will result in the rejection of the process.

Android only

For Android, you'll need to add a scheme that contains the app ID as a prefix. Facebook requires this scheme to be able to redirect the user back to the app after the authentication process is complete.

For example, if your app ID is 1234567890, then the scheme will be fb1234567890. Modify the scheme in Expo config and convert it to an array if you have more than one custom scheme to add this scheme:

{
  "expo": {
    "scheme": ["yourscheme", "fb1234567890"]
  }
}

Create a Facebook app

To use Facebook authentication, you'll need to create a Facebook app, enable the Facebook login product and get the app ID.

• Go to developers.facebook.com/apps and click the Create App button.
• After the Facebook app is created, you'll be redirected to the app dashboard that shows a list of products.
• Browse through the list and select Facebook for Login. Click Set up. This will open Facebook Login Settings.
• Under Client OAuth settings, enable Embedded Browser OAuth Login.
• Under Valid OAuth Redirect URIs, add the redirect string of the following format:

scheme://expo-development-client/?url={manifestUrl}

# Example
yourscheme://expo-development-client/?url=https://u.expo.dev/[your-eas-build-project-id]?channel-name=[channel-name]

• Replace scheme with the one you defined in the previous step. To learn what goes in the manifestUrl parameter, read the development workflows section. Click Save changes.

  

• Navigate to Settings > Basic, add a Privacy Policy URL for your app and click Save changes. This will help you get advance access (if required) for public_profile permission.

  

• Also, copy the App ID as shown in the above screenshot. You'll need it in the next step.

Add import statements

Add the following import statements to your project code. The WebBrowser API, AuthSession API, and the Facebook provider from the expo-auth-session are essential to handle the authentication process.

import * as AuthSession from 'expo-auth-session';
import * as Facebook from 'expo-auth-session/providers/facebook';
import * as WebBrowser from 'expo-web-browser';

Add a method to dismiss the web popup

Expo's WebBrowser API provides maybeCompleteAuthSession() method to dismiss the popup when the authentication sessions are completed successfully. It uses the redirect URL added in the provider's authorized list of URLs.

Invoke this method to the app screen you want to redirect back to by adding the following code snippet:

WebBrowser.maybeCompleteAuthSession();

If this method is not invoked, the popup will not dismiss itself.

Pass the client ID to the provider

Facebook.useAuthRequest() hook provides request and response objects. It allows for async setup, which means that a mobile web browser won't block the request. It also accepts an object of client IDs that are generated in the Facebook app.

Define this hook inside the React component by adding the code snippet below:

export default function App() {
  const [request, response, promptAsync] = Facebook.useAuthRequest({
    clientId: "FB_APP_ID",
  });
  %%placeholder-start%%... %%placeholder-end%%
}

In the above code snippet, replace the FB_APP_ID with the client ID generated in the Facebook app.

Send the auth request

useAuthRequest() hook also provides promptAsync() that prompts the user to authenticate by opening a web browser. It is invoked when the user clicks the login button. The button must be disabled until the request is loaded asynchronously. This is done by passing the request object from the useAuthRequest hook to the disabled prop of the button component.

An example button component that invokes promptAsync() is shown below:

<Button
  disabled={!request}
  title="Sign in with Facebook"
  onPress={() => {
    promptAsync();
  }}
/>