Facebook Login with React Native Expo | Tutorial | Code with Beto

Learn how to add Facebook login to a React Native app built with Expo. You'll learn how to set up the Facebook developer app, installing necessary Expo packages, configuring your app, and handling login on both iOS and Android.

If you want to authenticate users with Facebook in your Expo app, this tutorial walks you through the full process including creating the Facebook app, configuring OAuth redirects, and using Expo Auth Session and Expo Dev Client for a smooth login experience.

What's inside

Creating a new Expo app and installing dependencies
Setting up a Facebook developer app and configuring OAuth
Using Expo Auth Session and Expo Dev Client for authentication
Handling redirect URLs and app schemes
Testing Facebook login on iOS and Android devices
Managing user tokens and profile information
Tips on submitting your Facebook app for review
Accessing project code and resources on Beto’s platform

Creating a new Expo app and installing dependencies

We start by creating a fresh Expo app with and naming it for Facebook login. Then, install key dependencies: for OAuth flows, for secure random values, to build a custom client needed for deep linking, and to open the Facebook login UI inside the app on iOS.

These packages enable handling Facebook authentication smoothly without leaving the app on iOS, while Android requires switching to the browser and back. Installing is crucial because Expo Go does not support the redirect flows needed for Facebook login.

Setting up a Facebook developer app and configuring OAuth

Next, create a new app in the Facebook developer portal selecting "Other" as the platform. Name your app and provide a contact email. You can skip business account setup unless you need advanced permissions.

In the app settings, enable "Embedded Browser OAuth Login" to allow login inside your app. Add your Expo app’s redirect URL (provided by Expo when you build your app) as a valid OAuth redirect URI in Facebook. This URL is critical to redirect users back to your app after login.

You also need to set your app from development to live mode to test real login flows. Facebook requires submitting your app for review if you want permissions beyond the public profile.

Using Expo Auth Session and Expo Dev Client for authentication

I demonstrate using Expo Auth Session APIs to initiate the Facebook login flow. The login UI appears as a modal inside the app on iOS thanks to . On Android, the flow opens the system browser and returns to the app.

Expo Dev Client is used instead of Expo Go because it supports custom URL schemes and deep linking required for OAuth redirects. I show running the app with or to build and launch the dev client.

Handling redirect URLs and app schemes

You must configure your app’s with a custom scheme matching your Expo redirect URL. This scheme allows Facebook to redirect users back to your app after login.

I explain how to find the redirect URL from Expo’s build output and add it to Facebook’s OAuth settings. You'll also learn adding the scheme to under and ensuring your app handles incoming URLs properly.

The demo shows testing the login flow on both iPhone and Android devices. On iOS, the login modal appears inside the app. On Android, the browser opens externally and then returns to the app.

After successful login, the app receives user info including profile picture, name, ID, and an access token. I note that login may take a few seconds and suggests showing a loading indicator while fetching user data.

Managing user tokens and profile information

Once logged in, you get an access token from Facebook. This token can be used to fetch additional user data or authenticate with your backend.

I highlight that you should handle this token securely and use it according to your app’s needs. It also mentions that without Facebook app review, you may see warning messages during login but these disappear once approved.

Tips on submitting your Facebook app for review

If your app requires permissions beyond the public profile, you must submit it to Facebook for review. I explain that until approved, you will see red warning messages during login.

Submitting your app for review allows you to access more user data and remove development mode restrictions. I encourage preparing your app and submitting it when ready for production.

Accessing project code and resources on Beto’s platform

The full project code for this tutorial will be available on Beto’s platform under the projects section. You can download the code, check dependencies, and follow along.

I also mention his React Native course, which is being translated into English, and invites viewers to enroll to deepen their React Native skills.

Resources

CourseReact Native course

Master React Native fundamentals and shipping apps with lifetime access.

Premium resourcePro membership

Access exclusive projects, tutorials, and community support.

Let's connect!

Facebook Login with React Native Expo | Tutorial