expo: Expo-Facebook login won't redirect back to Expo Client app when using login with Facebook app

SOLUTION(IOS): Remove Facebook app from your phone and try doing it with Safari browser (worked fine for me)

This solution is only for you as a developer, but we cannot publish our apps like this. I had to remove the Facebook login from my app when i publish it as it will be very inconvenient for the user.

I Can confirm every non working examples.

Working example: While logged in to Facebook via Safari Browser, initiate FB Login from expo client App. The login process will happen in the browser and redirect back to expo client app.

For me the redirection does not happen when Login happens in the Facebook app and not in the browser.

Expo SDK 36.0.0 expo-facebook 8.0.0

@CaioMars I went back to expo build instead of eas build for the time being. There is probably a bug with the eas build at that time of building.

Hi everyone, has there been any progress on this issue? I’m hitting this on a brand new empty Expo Client app on SDK 37.

Hahaha! Yeah, i did, I meant @Muhammad-Saleet… Thanks!

@CaioMars

I’ve solved this problem by using expo-facebook instead of expo-auth-session.

The code ended up looking something like this:

  import * as Facebook from 'expo-facebook'

  async function loginWithFacebook () {
    console.log('logging in with facebook')

    await Facebook.initializeAsync({
      appId: Keys.FACEBOOK_APP_ID,
      appName: Keys.FACEBOOK_APP_NAME,
    })
    const { type, token } = await Facebook.logInWithReadPermissionsAsync({
      permissions: ['public_profile', 'email'],
    })

    if (type !== 'success') {
      console.log('token: ', token)
    } else {
      console.log('login failed or cancelled')
    }
  }

We’ll be releasing an update to the App Store Expo Client with this fix included soon, most likely next week

Same here. I created brand new Expo 36 app with facebook integration and its not working. Once redirect to facebook login, it provides option to login with Facebook app but when I chose facebook app then nothing happens.

I’m using Bare workflow too. It sounds like it’s a configuration problem to me, your code looks good. There are a lot of little steps to configure it properly. Did you follow the instructions in Expo Facebook Auth Documentation?

Full disclosure, I am no expert on third-party authentication. It’s one of those things I rarely do and by the time I have to do it again I already forgot how to. But here are few things to check:

Facebook Dev console (App > Settings > Basic):

For iOS:

• Did you add bundleId in the Facebook Dev console > App > Settings > Basic (iOS)?

For Android:

• Did you add Package name (same as bundleId)?
• Did you add Class Name? Usually same as bundleId with your main class name from your Android Manifest (ex: com.my.app.MainActivity).
• Did you add your Key Hashes?

To see your key hashes run in the root of your project:

expo fetch:android:hashes

app.json

Make sure you have added these values to your app.json file. Note that one has fb preceeding your app ID and the other doesn’t.

{
    "expo": {
        ...
        "facebookScheme": "fb{FACEBOOK_APP_ID}",
        "facebookAppId": "{FACEBOOK_APP_ID}",
        "facebookDisplayName": "{APP_NAME}"
    }
}

Android Manifest

Add to your manifest:

<data android:scheme="fb{FACEBOOK_APP_ID}"/>

I hope this helps.

haha, I think you mentioned the wrong person @CaioMars

This issue is for the App Store Expo Client app, not standalone or bare apps. If you’re seeing this issue in a bare app please create a new issue with a reproducible demo included.

Most likely you have not included the relevant facebookScheme and facebookAppId in info.plist if you’re seeing this in the bare workflow

@webmasterdragon No, but the problem is only there if you run the app on Expo client. On native apps, there’s no problem

incorrect. we still face this from time to time without any logic

Hi guys, I confirm that the problem only appears when the application is run on the device via the expo client. Today I did a test by doing a build and sending it with TestFlight. The login works !

@asabadyr could you share the code with us?

@YahiaBadr please read my and other comments more carefully. As I already mentioned, cruzach has reproduced the bug in Expo client https://github.com/expo/expo/issues/6459#issuecomment-608441099 and is likely working on a fix.

@vandervillain following your exact steps worked for me in the expo Client. After installing the Facebook app, did you log in to the app? (i did not)

Sorry everyone, it’s obvious that there is some issue here but without a reliable way to reproduce it it’s very hard to debug on our end 🙁 If you want to investigate in your own further, I think the best next step is to take a look at the device logs and see if there’s anything interesting there, and then I’d also recommend testing expo-facebook in a bare workflow project

I can make it happen 100% of the time on my iPhone 6S. replication steps:

1. expo init testFacebook (configure as managed workflow)
2. expo install expo-facebook
3. should have these now in dependencies: “expo”: “~36.0.0”, “expo-facebook”: “~8.0.0”
4. in my developer.facebook app, under IOS, set Bundle ID to host.exp.Exponent
5. add this to my App.tsx:

async componentDidMount() {
  await Facebook.initializeAsync([YOUR_APP_ID], [YOUR_APP_NAME])
  const result = await Facebook.logInWithReadPermissionsAsync({ permissions: ['public_profile', 'email'] })
  if (result.type === 'success') {
    console.log('success')
  } else {
    // user canceled
  }
}

1. install facebook app if not already installed
2. open safari, go to facebook.com, logout, make sure to click the gear next to your profile and “Remove account from device”. This will make it seem like you have yet to login to fb
3. start/open your app, “Expo Wants to Use facebook.com…” -> continue
4. "Open this page in “Facebook”? -> Open
5. for me, “You previously logged in to APP_NAME with Facebook” (I have logged in successfully previously when safari was logged in) -> Continue

you’ll end up on an empty white screen with “cancel” button in top left. If you feel like it, open safari, facebook.com, login, and then try again. You’ll be able to get into your app just fine. Obviously won’t be sufficient for an actual production application.

To fix this issue you just have to modify the bundle ID with the real one in the facebook developers page: Instead of host.exp.Exponent you put your com.yourapp and it should work.

This issue still happens to me. I get the white screen mentioned above: initializeAsync -> logInWithReadPermissionsAsync -> facebook app -> continue (allow access) -> white screen (within facebook app) with Cancel top left. Doesnt redirect back to the app. Switching back to Expo Client have to click Cancel again - only then logInWithReadPermissionsAsync resolved with cancel type.

Even with production mode = true same issue.

expo 36 and expo-facebook v8

I have the same issue, running on my Expo app using iPhone 8 Plus. Hope this will get fixed soon.

“expo”: “~36.0.0” “expo-facebook”: “^8.0.0”

Same issue with my Expo app on prod iOS. The Facebook app doesn’t return to the Expo app after authorization. “host.exp.Exponent” is the bundle ID on my app’s Facebook settings.

“expo”: “^36.0.0” “expo-facebook”: “~8.0.0”

I’ve had trouble redirecting back to my app when the bundle ID of my app at https://developers.facebook.com/ was set to my own bundle ID, rather than the Expo Client bundle id - host.exp.Exponent. Please make sure you are following the docs. If it’s not redirecting back to your app, it’s probably trying to find the app associated with the bundle ID you’ve put in that field. You can confirm this by installing the standalone app via testflight, and then it will probably redirect to that app

Here are my steps:

I added the following fields to my app.json facebookScheme facebookAppId facebookDisplayName

You can check the expo-facebook page on where to get them from

I also followed the steps to release an app to Testflight and ensured that my bundleId matches what apple has

When I did not have the app on Testflight installed on my phone it did not redirect back

When I downloaded my app from Test Flight and tried the FB login from there (Not the expo client) it worked fine.

I created a brand new app, it is still the same. After upgrading to v36

I don’t know if it is the same problem but I have a strange problem when i run an expo application : It fail with the expo application downloaded from the store, but not with the application downloaded with the expo-cli (even if the version number in both is 2.14.0) It result in the error “graphrequest can’t be used when facebook sdk isn’t fully initialized” (probably due to the change in the sdk that force us to call Facebook.initializeAsync in the v36.0 of expo). The problem is that the application is still in v35.0…

@pbeaume I also had this problem yesterday -> the call which is mandatory in version 36 to be called is “Facebook.initializeAsync”. This method is not available in 35 in order to manually call it and after the 36 release it seems that is no longer called by Expo. The only solution I found was to upgrade to 36 and call the Facebook.initializeAsync method…

actually it’s been fixed 😄

make sure to clear npm cache / expo cache and package-lock.json

@cruzach I tried now with the updated version 3.6 and unfortunately the same behavior @nnasiruddin explained in the description of the bug, it is still reproducible on my side. The Facebook login does never returns the logInWithReadPermissionsAsync method (after initializeAsync is done). We remain with the white screen shows up with theCancelbutton on the top left. It never goes back to my app and never resolves this.

Is there some redirects needed to be included in the app.json file which maybe we are missing? Or other important setups?