Setting up FacebookScheme doesn't do anything

Expo SDK
1

Hi all!

I’m having issue with the facebook login on iOS. When I’m using the native or system behavior. The iOS redirect doesn’t work at all, giving me a message about Safari couldn’t open the url because it is invalid. The login is working with the web behavior, but it is not a solution for what I want to do.

app.json:

{
  "expo": {
    "name": "Vibestar",
    "icon": "./src/main/assets/logo_app.png",
    "loading": {
      "hideExponentText": true,
      "backgroundColor": "#181a35",
      "icon": "./src/main/assets/logo.png",
    },
    "version": "1.0.1",
    "facebookScheme": "fb1234567", // My facebook url scheme from the code generated in Facebook Developer in the section Configure Your info.plist, step 2: Copy and paste the follower xml snippet... The code right under CFBundleURLSchemes
    // I did what the facebook tutorial said on expo.io
    "slug": "vibestar",
    "sdkVersion": "15.0.0",
    "orientation": "portrait",
    "ios": {
      "bundleIdentifier": "MY_BUNDLE_ID" // The Bundle ID, I put the the facebook dev app setting next to the host.exp.Exponent which is used in Expo while developping
    },
    "android": {
      "package": "MY_PACKAGE"
    }
  }
}

Is there anyone who might know where the problem is coming from? Is it from the Facebook Developer app setting? Or I did something wrong in my app.json?

2

That behavior only works in a standalone Expo app – are you testing in the Expo Client instead?

3

I’m testing in a standalone app which is, also, in TestFlight.

4

Can you paste the “invalid” url which Safari is trying to open?

5

Where can I find that url? When the error occurs, it only Alert the message. is it logging it in debug? Or in the response?

6

Didn’t you say Safari is trying to open a url? What does the Safari url bar contain?

7

I cannot reproduce the safari warning right now, but there’s another issue. With the native behavior, the app open Safari and ask to connect with facebook with 2 possibilities : With the app or with email/phone like a normal website.
If I choose to log in with facebook app, it ask to open facebook app.
Once the facebook app is opened, I must confirm the connection.
When I click on OK to allow access, the page is white with only the cancel on the left side of the navBar.

The url of the safari that opens when i want to connect with facebook is long, but it begins with: m.facebook.com/login.php?skip_api_login=18&api_key=123456&signed_next=1&next=........ (where 123456 is my facebookScheme from app.json but without the fb at the start)

8

Have you look into it?

9

I made additionnal test and it would looks like the issue is still from invalid URL, but the behavior change because of the SFSafariViewController. By design, facebook decided it would be better for user to login with facebook on Safari (And not the app).

If you’re not logged in on safari on your device, they propose 2 options: use Facebook app, or login with email and password. At the end of both, I can’t open back my app. The difference is that when you’re logged in on facebook on your safari browser, i actually get an alert about the invalid url. The url while i get the error is this : https://m.facebook.com/v2.9/dialog/oauth/confirm

10

I am having the same problem. As a standalone app from testflight it works, but to get back into the app from expo it fails with “safari cannot open this page because the address is invalid”

The ‘system’ option fails from within expo with a native module problem. https://docs.expo.io/versions/latest/sdk/facebook.html Does say those options cannot be used from in expo so maybe while I develop in expo I need to use web.

11

My workaround is this:

  async loginWithFacebook() {
    const response = await Facebook.logInWithReadPermissionsAsync(facebookAppID,
      {
        permissions: ['public_profile', 'email'],
        behavior: this.isAStandaloneApp() ? 'native' : 'web',
      },
    );
    ...
  }

  isAStandaloneApp = () => {
    return !(Platform.OS === 'ios' && Expo.Constants.appOwnership === 'expo');
  }

When developing, I’m using the web behavior which works for ios and android. the isAStandaloneApp allow to put the web behavior on ios (because the native one works on android)

The other behavior only works only in standalone app. So this is a workaround to make it work without having to switch the code manually each time you release or developp

Good luck!

12

Thanks arivest. That looks like a good switch!