Expo: Expo Facebook returns cancel with native IOS facebook app on successful login

Created on 24 Jun 2019  Ā·  70Comments  Ā·  Source: expo/expo

šŸ› Bug Report

Environment

Expo CLI 2.20.2 environment info:
System:
OS: macOS 10.14.5
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.1.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
expo: ^33.0.0 => 33.0.7
react: 16.8.3 => 16.8.3
react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8
react-navigation: ^3.11.0 => 3.11.0
npmGlobalPackages:
expo-cli: 2.20.2

iOS standalone app

Steps to Reproduce

  1. Use Facebook.logInWithReadPermissionsAsync to make a facebook login.
  2. Choose to log in with the Facebook native app(not in the browser)
  3. Press continue to get back to your app.

Expected Behavior

  1. User should be successfully logged in after getting redirected back to the app

Actual Behavior

  1. The promise returns type === cancel no matter what the user actually does.

*Note: This seems to only happen to some users, but most of the time it does not work. I'd say 1/10 people actually manage to log in the first try.

Reproducible Demo

In the view I have:

 <TouchableOpacity onPress={this._handlePressAsync}>
           <Image source={facebookLogin} style={styles.facebookLogin}/>
   </TouchableOpacity>

The function called:

     _handlePressAsync = async () => {
         const {type, token,} = await Facebook.logInWithReadPermissionsAsync('fbAPPid', {
              permissions: ['public_profile', 'email'],
           });
    if (type === 'success') {
        await AsyncStorage.setItem('facebook', token)
        try {
            await fetch(constants.serverIP + '/login/auth/', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    accessToken: token,
                })
            }).then(response => response.json())
                .then(async (data) => await AsyncStorage.setItem('rest', data.auth_token))
        } catch ({message}) {
            alert("Error logging in, try again")
        }
        await this.props.navigation.navigate('App');
    } else {//// my code always gets here
        alert("Error logging in. You should try again.)
    }
}
Facebook bug iOS

Most helpful comment

This one is a showstopper for us.

We've implemented a "drop in" workaround based on @andersravn 's workaround. (Thanks!!)

It's self contained ES6 method that doesn't require a previous commitment to deep linking.

Simply call it instead of Facebook.logInWithReadPermissionsAsync.

It should also continue to work when Expo fix the problem. Hope this helps.

Import {Linking} from 'react-native;

.........

async logInWithReadPermissionsAsync(appId, options)
     {

      let capturedToken = null;

      let urlListener = (event)=>{      
        let matches = event.url.match(/access_token=(.*)\&/)
        if(matches) capturedToken = matches[1];   
      };

      try
      {
        Linking.addEventListener('url', urlListener);    
        const fbresp = await Facebook.logInWithReadPermissionsAsync(appId,options);      
        const { type} = fbresp;
        if (type === 'cancel' && capturedToken) return {type: 'success', token: capturedToken};
        return fbresp;
      }
      catch(e)
      {
        throw e;
      }
      finally
      {
        Linking.removeEventListener('url', urlListener); 
      }

     }

All 70 comments

same for me. My problem occurred on Android.

I checked in my Facebook Developer account.
I seen these error message
Screenshot 2019-07-03 at 19 49 53

I dono what to fill in Valid Oauth
Screenshot 2019-07-03 at 19 49 59

Hi,

Same issues for me. Would say that it works in 1 out of 20 but mostly the result is like type === 'cancel'.

For now I'm using:
const result = await Facebook.logInWithReadPermissionsAsync(
'fbId',
{
permissions: ['public_profile', 'email'],
behavior: 'web',
},
);

Same problem here. Successful facebook login returns "cancel" status. And as @AlessyoAndrei mentioned, some attempts go through, but most of them fail. The mode FB authentication works is on the "web" mode, but that's the worst way to do social authentication.

The same for me for expo version 32 with facebook sdk 4.X OR with the just updated expo version 33 with Facebook SDK 5.0.1
For me it only happens on Androids that are latest version, like 9.0.0. Older version Androids work perfectly, iOS never had a problem.

Anyone have any idea why this is?
expo: 33
Facebook SDK: 5.0.1

I have the same bug with SDK 33 on IOS and android.
When I change the behavior to web it works each time.
If I change from web to system just after login successfully with web behavior, it works on system.
But when I delete the application and reinstalled it, it don't work anymore (with system behavior).

So it don't work even 1/20 !! it just not work, there is a bug here.

I suppose there is something wrong with Facebook.logInWithReadPermissionsAsync(appId, options) function call?
I import it as import * as Facebook from 'expo-facebook', but I have installed expo-facebook through npm install not expo install as it says in the docs. Would this be an issue? It installs it differently?

I was also having this issue today. I have messed around with dependencies so much, that I'm not sure what I did, but it seems to be working now. I'm not getting "cancel" anymore. I've just let Expo install it through the new way in SDK 33.

import * as Facebook from 'expo-facebook';
...
async _loginFacebook(amplitudeEvent) {
    try {
      const result = await Facebook.logInWithReadPermissionsAsync('APP_ID', {
        permissions: ['public_profile', 'email'],
        behavior: 'native',
      });
      if (result.type === 'cancel') {
        event('user', 'authCancel', {
          method: amplitudeEvent.method,
        });
      } else {
        try {
          const token = result.token;
          this.props.loginFacebook(token, amplitudeEvent);
        } catch (error) {
          console.log('Could not get access token:', error);
        }
      }
    } catch (error) {
      console.log('Login failed with error: ' + error);
    }
  }

This is my code.

We have a method in App.js to handle deep links. When the Facebook app send the user back to our app it does it with a deep link including all the user information. So in the handle method I just return if I see this "weird" url. Not sure if this is relevant for others.

Sorry if this doesn't help anyone. I've been battling with getting Facebook login to work for the last two days, so I'm a bit fatigued. Just wanted to provide some status and code.

So one of the last things you've just done is reinstall the whole expo 33? If the post install worked, then I supposed there might have been some changes in package-lock.json compared to the one on git. Have you noticed any differences between the last changes and previous commits besides the login code? Like package-json, app.json, etc.

Well I've been upgrading to Expo 33 over the weekend, so it's not the single last thing I did before it worked. Today I've mainly been trying to get react-native-fbsdk to work, which we were using before. This meant removing node_modules and Pods/Podfile.lock countless times, trying different version of the library. I just got errors regarding incompatible versions of react-native-fbsdk and FBSDKCoreKit/Login/Sharing, which Expo auto-installs in a non-recent version. I ended up giving up, and wanted to opt for using Expo Facebook with web behavior until the above issue would be resolved.

Currently I only tested that it worked in development. There's no telling if it works in production...

I just checked, and don't see anything relevant in package.json. package-lock.json was not changed in the commit where it started working.

hello @andersravn right now you are using web behavior or system behavior ?

@applizem native, as you can also see in my code above.

Ah yes sorry !! to make sure it really works for you could you test your version in fresh install !!
I mean uninstall and reinstall your app !! and test again.
because for me it works when

  • I change system to web
  • login successfully with web behaviour
  • then change back web to system, and loging with the same facebook account

Hmm. That could be the case. I just tried:

  1. Delete app from phone.
  2. Delete my app in my Facebook settings under Apps and Websites.
  3. Delete the user in my local backend.
  4. Re-installed the app through Xcode.
    Native still works. Is this correct repro steps @applizem ?

Yes it is correct !! So I think it really works for you :) !! Wow you're lucky !! if you remember something special you did, it could help us.

I'm back to getting type: "cancel" today. It's just interesting, that if you have

_handleOpenURL(e) {
    console.log('E', e);
}

in App.js, it will log out

url: exp://authorize#access_token=...

with all the information you need.

So I'm thinking, as a temporary solution, to extract the information from that, and use to to authenticate with my backend.

Hi @EvanBacon could you help please ?
I just put in production my application to Android google play (SDK33 standalone) and IOS Apple Store.

But when I try to login with Facebook or Google (with Native or system behavior - tested on Samsung galaxy S6 and S8 ), you are able to see the first window which allow you to choose an account but when you select an account there is a small overlay (trying maybe to show a screen) and then nothing happen. Users are stuck. Do you have a workaround or should we wait for an update of the SDK 33 ?

@applizem To limit the problems, I can recommend using 'web' for Google, it's a nice user experience, similar to Facebook native, and it works. We've been using that in our project.

Yes, you're right !! I think I'll end up doing that !! Waiting for an update from expo team.
Cuz there is lot of trouble with native Facebook and Google login on both Android and IOS.

Web behavior in facebook and Google are more time consuming for the user than native. Registration in an application is a crucial step that must be made as easy as possible.

people do not remember their facebook or google password. He often set it up in the phone years ago.

I agree on the importance and priority of these features working on every release.

I think I have found a temporary workaround. The usual method, mentioned above, doesn't work because the Expo api always receives type: "cancel", so we can't extract the access token from the promise - as it isn't there. However, as mentioned above, if you are handling deep links with a method like _handleOpenURL(e), you will notice that the access token is present in e.url after the FB app redirects back to your app. So what I have done is to extract the access token from e.url and simply call my usual login function/endpoint from here. So something like this in App.js:

_handleOpenURL(e) {
    if (e.url) {
      if (e.url.indexOf('access_token') !== -1) {
        let indexStart = e.url.indexOf('=');
        let indexEnd = e.url.indexOf('&');
        let accessToken = e.url.substring(indexStart + 1, indexEnd);
        let amplitudeEvent = { event: 'login', method: 'facebook' };
        store.dispatch(loginFacebook(accessToken, amplitudeEvent));
        return;
      }
      let { path } = Linking.parse(e.url);
      if (path) {
        history.replace(`${path}`);
      }
    }
  }

This works for us, because we only use the access token to validate through our custom backend. It would be a different approach if you want to query the Graph API as well.

Hope this helps someone, and let me know if you have any questions regarding my approach.

I'm coming back with something I have found just now.
For me the issue was something very strange.

I am using expo v33 together with firebase for user authentication ( email/password, facebook, gmail )

On my friend's phone, his facebook never got working, but I was inspired enough to try behaviour 'web' and try to login with my personal facebook account. And it worked. It never worked with his facebook account.

The problem was that he has the same email address for both Gmail and Facebook, so firebase never let him through because the email was already in use by an account with Google provider.

The problem was within firebase related to the unique email. After deleting all his accounts, and trying again, it worked, but he can't login with Facebook AND Gmail, only one of those, because his email address is in use for both of them.

On a different note, Facebook api from expo works, both web behaviour and native / system behaviour. Please let me know if any of you had the same problem.

Solution for fb same email
Go to firebase console -> Authentication -> SignIn Method -> at the bottom at advanced, switch to 'Multiple accounts per email address'

I'm also having this issue. I'm just getting 'cancel' returned when I finish logging in via facebook app. I'll try and implement this workaround, but I'd love to see this being resolved properly, I'm really hoping I don't want to have to force a 'web' only login :(

Did some further testing and native works if you are login with safari (on IOS). To reproduce I logged out on both the Facebook app and safari (including ā€œforget me on this deviceā€), although not sure that the Facebook app logout was needed.

Any updates?!

Try setting these options in Developer.facebook.com

Developer facebook

It is working for me hope it works for you guys. Reference https://github.com/expo/examples/tree/master/with-facebook-auth . (I just turned on few flags it was working, I didn't try other stuff )

Guys, any updates? It's currently working on iOS 13 for me but not on iOS 12 (so, like, the majority...). IT always return cancels (I'm not using OAuth). Like others, I don't want to force the web login...

@brentvatne Did you guys have looked at this?

This issue still exists in Expo SDK 34. 'native' mode always return 'cancel' in logInWithReadPermissionsAsync

Yes, confirming that we are still seeing this issue in SDK 34.
Would appreciate any updates...

Try setting these options in Developer.facebook.com

Developer facebook

It is working for me hope it works for you guys. Reference https://github.com/expo/examples/tree/master/with-facebook-auth . (I just turned on few flags it was working, I didn't try other stuff )

This solved it for me

Try setting these options in Developer.facebook.com
Developer facebook
It is working for me hope it works for you guys. Reference https://github.com/expo/examples/tree/master/with-facebook-auth . (I just turned on few flags it was working, I didn't try other stuff )

This solved it for me

Can you give me an example of redirect uris? Because I tried that by settting the name of my app like this:
"myapp://" but Facebook didn't allow me to set it like that.

Try setting these options in Developer.facebook.com
Developer facebook
It is working for me hope it works for you guys. Reference https://github.com/expo/examples/tree/master/with-facebook-auth . (I just turned on few flags it was working, I didn't try other stuff )

This solved it for me

Can you give me an example of redirect uris? Because I tried that by settting the name of my app like this:
"myapp://" but Facebook didn't allow me to set it like that.

I use firebase for authentication, it does the oauth redirect link automatically

However I have to correct myself setting this flag solved it only for some of our users, I have narrowed down the problem to:
User has FB app installed on phone and is logged in
User is logged into FB in standard browser (which will be called from app)
iOS < 13

hope that helps

Try setting these options in Developer.facebook.com
Developer facebook
It is working for me hope it works for you guys. Reference https://github.com/expo/examples/tree/master/with-facebook-auth . (I just turned on few flags it was working, I didn't try other stuff )

This solved it for me

Can you give me an example of redirect uris? Because I tried that by settting the name of my app like this:
"myapp://" but Facebook didn't allow me to set it like that.

I use firebase for authentication, it does the oauth redirect link automatically

However I have to correct myself setting this flag solved it only for some of our users, I have narrowed down the problem to:
User has FB app installed on phone and is logged in
User is logged into FB in standard browser (which will be called from app)
iOS < 13

hope that helps

Yeah I don't use firebase for authentication so it doesn't help me unfortunately.

Try setting these options in Developer.facebook.com
Developer facebook
It is working for me hope it works for you guys. Reference https://github.com/expo/examples/tree/master/with-facebook-auth . (I just turned on few flags it was working, I didn't try other stuff )

This solved it for me

Can you give me an example of redirect uris? Because I tried that by settting the name of my app like this:
"myapp://" but Facebook didn't allow me to set it like that.

You dont have to turn on the Embedded Oauth Login,

@cruzach Hello, would this issue be investigated in the following version ? Thanks.

This one is a showstopper for us.

We've implemented a "drop in" workaround based on @andersravn 's workaround. (Thanks!!)

It's self contained ES6 method that doesn't require a previous commitment to deep linking.

Simply call it instead of Facebook.logInWithReadPermissionsAsync.

It should also continue to work when Expo fix the problem. Hope this helps.

Import {Linking} from 'react-native;

.........

async logInWithReadPermissionsAsync(appId, options)
     {

      let capturedToken = null;

      let urlListener = (event)=>{      
        let matches = event.url.match(/access_token=(.*)\&/)
        if(matches) capturedToken = matches[1];   
      };

      try
      {
        Linking.addEventListener('url', urlListener);    
        const fbresp = await Facebook.logInWithReadPermissionsAsync(appId,options);      
        const { type} = fbresp;
        if (type === 'cancel' && capturedToken) return {type: 'success', token: capturedToken};
        return fbresp;
      }
      catch(e)
      {
        throw e;
      }
      finally
      {
        Linking.removeEventListener('url', urlListener); 
      }

     }

This one is a showstopper for us.

We've implemented a "drop in" workaround based on @andersravn 's workaround. (Thanks!!)

It's self contained ES6 method that doesn't require a previous commitment to deep linking.

Simply call it instead of Facebook.logInWithReadPermissionsAsync.

It should also continue to work when Expo fix the problem. Hope this helps.

Import {Linking} from 'react-native;

.........

async logInWithReadPermissionsAsync(appId, options)
     {

      let capturedToken = null;

      let urlListener = (event)=>{      
        let matches = event.url.match(/access_token=(.*)\&/)
        if(matches) capturedToken = matches[1];   
      };

      try
      {
        Linking.addEventListener('url', urlListener);    
        const fbresp = await Facebook.logInWithReadPermissionsAsync(appId,options);      
        const { type} = fbresp;
        if (type === 'cancel' && capturedToken) return {type: 'success', token: capturedToken};
        return fbresp;
      }
      catch(e)
      {
        throw e;
      }
      finally
      {
        Linking.removeEventListener('url', urlListener); 
      }

     }

Thank you so much, your work around work flawlessly, thanks a lot !

This one is a showstopper for us.

We've implemented a "drop in" workaround based on @andersravn 's workaround. (Thanks!!)

It's self contained ES6 method that doesn't require a previous commitment to deep linking.

Simply call it instead of Facebook.logInWithReadPermissionsAsync.

It should also continue to work when Expo fix the problem. Hope this helps.

Import {Linking} from 'react-native;

.........

async logInWithReadPermissionsAsync(appId, options)
     {

      let capturedToken = null;

      let urlListener = (event)=>{      
        let matches = event.url.match(/access_token=(.*)\&/)
        if(matches) capturedToken = matches[1];   
      };

      try
      {
        Linking.addEventListener('url', urlListener);    
        const fbresp = await Facebook.logInWithReadPermissionsAsync(appId,options);      
        const { type} = fbresp;
        if (type === 'cancel' && capturedToken) return {type: 'success', token: capturedToken};
        return fbresp;
      }
      catch(e)
      {
        throw e;
      }
      finally
      {
        Linking.removeEventListener('url', urlListener); 
      }

     }

Hey and thank you for this. I tried it and its too bad I tested it on 3 iPhones with user logged in in facebook app, but not logged in facebook in safari Iphone 5s 6s and 7s
It works for facebook version 233

But it doesn't work for facebook app version 234 where I get the error:
Bad access token :{"code":190,"message":"Expected 1\u0027.\u0027 in the input between the postcard and the payload"}

@superphil0 I'm using Facebook 234.0 on iOS12 ok - it's unlikely the Facebook App is the problem. Are you sure the error is being thrown here? If it is then the problem is probably within Facebook.logInWithReadPermissionsAsync itself.

I'm passing in the options {permissions: ['public_profile','email'], behavior: 'native'} and I'm only using the type and token in the response.

@LordFingle on your test device are you logged into facebook in the browser? the issue only comes up for the case that the user is not logged into facebook in the browser for me. Because facebook login flow is: expo app => fb website => redirect to fb app => reroute to expo app

This one is a showstopper for us.

We've implemented a "drop in" workaround based on @andersravn 's workaround. (Thanks!!)

It's self contained ES6 method that doesn't require a previous commitment to deep linking.

Simply call it instead of Facebook.logInWithReadPermissionsAsync.

It should also continue to work when Expo fix the problem. Hope this helps.

Import {Linking} from 'react-native;

.........

async logInWithReadPermissionsAsync(appId, options)
     {

      let capturedToken = null;

      let urlListener = (event)=>{      
        let matches = event.url.match(/access_token=(.*)\&/)
        if(matches) capturedToken = matches[1];   
      };

      try
      {
        Linking.addEventListener('url', urlListener);    
        const fbresp = await Facebook.logInWithReadPermissionsAsync(appId,options);      
        const { type} = fbresp;
        if (type === 'cancel' && capturedToken) return {type: 'success', token: capturedToken};
        return fbresp;
      }
      catch(e)
      {
        throw e;
      }
      finally
      {
        Linking.removeEventListener('url', urlListener); 
      }

     }

There is a little amendment on your regex. Since the response url may include some extra query param after & symbol in some conditions and the above regex would also extract those unwanted query param after access_token. It would make the access token not valid(as the "access token" not include access token only) for using Facebook graph API

I make the following change. Hope this also helps you @superphil0
let matches = event.url.match(/access_token=([^&]*)/)

This one is a showstopper for us.
We've implemented a "drop in" workaround based on @andersravn 's workaround. (Thanks!!)
It's self contained ES6 method that doesn't require a previous commitment to deep linking.
Simply call it instead of Facebook.logInWithReadPermissionsAsync.
It should also continue to work when Expo fix the problem. Hope this helps.

Import {Linking} from 'react-native;

.........

async logInWithReadPermissionsAsync(appId, options)
     {

      let capturedToken = null;

      let urlListener = (event)=>{      
        let matches = event.url.match(/access_token=(.*)\&/)
        if(matches) capturedToken = matches[1];   
      };

      try
      {
        Linking.addEventListener('url', urlListener);    
        const fbresp = await Facebook.logInWithReadPermissionsAsync(appId,options);      
        const { type} = fbresp;
        if (type === 'cancel' && capturedToken) return {type: 'success', token: capturedToken};
        return fbresp;
      }
      catch(e)
      {
        throw e;
      }
      finally
      {
        Linking.removeEventListener('url', urlListener); 
      }

     }

There is a little amendment on your regex. Since the response url include some extra query param after & symbol and the above regex would also extract those unwanted query param after access_token. It would make the access token not valid(as the "access token" not include access token only) for using Facebook graph API

I make the following change. Hope this also helps you @superphil0
let matches = event.url.match(/access_token=([^&]*)/)

It did indeed! Verfied on two phones just now, thanks a lot!

@OscarYuen It appears to me that your solution is to able to match access_token when there _isn't_ any more query params, whereas my original was only able to match access_token where there is extra query params, so your regex is superior.

In my testing there were always extra query params, but perhaps I'm wrong. I'm glad this seems to have worked for @superphil0 , but I suspect there may be more to his issue. I'm still testing this myself.

Anyway I'm requoting the full solution with your improvement. Thanks for your help:

Import {Linking} from 'react-native;

.........

async logInWithReadPermissionsAsync(appId, options)
     {

      let capturedToken = null;

      let urlListener = (event)=>{      
        let matches = event.url.match(/access_token=([^&]*)/)
        if(matches) capturedToken = matches[1];   
      };

      try
      {
        Linking.addEventListener('url', urlListener);    
        const fbresp = await Facebook.logInWithReadPermissionsAsync(appId,options);      
        const { type} = fbresp;
        if (type === 'cancel' && capturedToken) return {type: 'success', token: capturedToken};
        return fbresp;
      }
      catch(e)
      {
        throw e;
      }
      finally
      {
        Linking.removeEventListener('url', urlListener); 
      }

     }


Unfortunately this is still happening here as well on IOS and Android. It's working 5/20 for me. Can't believe it's not yet answered by an Expo dev.

Bumping this. How do you use the latest fb sdk on expo? Do we eject? Do we update expo? Happy to submit a PR if necessary.

In SDK 35, we upgraded the underlying Facebook iOS library to v5.4.1, here's the PR

The problem is still present, at least for me.

The issue is still present in SDK 35 and the solution provided by @LordFingle doesn't work anymore in SDK 35.

I found it is solved in sdk 35 in my case.
You need to remove behavior in Facebook.logInWithReadPermissionsAsync in order to make it work
e.g.

logInWithReadPermissionsAsync('APP_ID', {
        permissions: ['public_profile', 'email'])

Even after removing the behavior: 'browser', we are having issue in SDK 35 and iOS 13.1.2.
Facebook social login works inconsistently and we are seeing the below behavior. Attached screenshot is what we see most of the time.
expo app => fb website => redirect to fb app => fb app permission => reroute to expo app

Not getting the type== success || cancel from Facebook.logInWithReadPermissionsAsync method

Skype_Picture_2019_10_01T15_47_44_924Z

Even after removing the behavior: 'browser', we are having issue in SDK 35 and iOS 13.1.2.
Facebook social login works inconsistently and we are seeing the below behavior. Attached screenshot is what we see most of the time.
expo app => fb website => redirect to fb app => fb app permission => reroute to expo app

Not getting the type== success || cancel from Facebook.logInWithReadPermissionsAsync method

Skype_Picture_2019_10_01T15_47_44_924Z

I found this issue sometimes happen when I click the button granting fb app permission very quick.

Even after removing the behavior: 'browser', we are having issue in SDK 35 and iOS 13.1.2.
Facebook social login works inconsistently and we are seeing the below behavior. Attached screenshot is what we see most of the time.
expo app => fb website => redirect to fb app => fb app permission => reroute to expo app
Not getting the type== success || cancel from Facebook.logInWithReadPermissionsAsync method
Skype_Picture_2019_10_01T15_47_44_924Z

I found this issue sometimes happen when I click the button granting fb app permission very quick.

I have the same issue on IOS 13.1.2 !! sometimes it works and sometime not !! Hello @sjchmiela is there any workaround about that ?

Can confirm that I have the same issue.

This is happening for us too in one of our live apps, To start with, browser auth seems to work flawlessly, But If the user is not logged into facebook in their browser, and they have the facebook app logged in, it will detect this and offer to Login with the Facebook App like the picture above, it will then go off to the facebook app, seek confirmation, then once you hit "Continue" it tries to Deeplink back i believe, but something isn't getting detected/handled correctly, and the "browser popup" above remains, never resolving the login promise etc. So it seems the browser window isn't receiving anything to say "you can cease to exist now" and remains.

Using the temporary fix above as well with the Linking event listener setup, if you cancel the "browser popup" it will then resolve the response as type cancel, but it will receive the auth data in the Linking listener ( Deeplink ), so when you cancel in our app's implementation it will actually then pickup the auth token we store in AsyncStorage ( received from the url event ) and "log them in". This leads me to believe it's some kind of race condition or something wrong with the handling of the facebook login Deeplink etc.

What makes this bug even more annoying is that it happens only sometimes. Sometimes it will occur ( not work ) a few times in a row, sometimes it will successfully login the user every time, and this changes between installs unreliably. And to make matters even worse, the facebook login doesn't work at all using the "native" method (using facebook app) in debug/expo client.

I don't know if this helps at all to resolve/find the issue, but it definitely seems like it is something to do with expo's implementation of the facebook SDK or it could even just be a problem within facebook's SDK.

Hi @JPig in the SDK 35, there is anymore native behavior !! all behaviors other than browser have been removed

We are using SDK 35 and it still deeplinks into the native app if you are logged into the facebook app but not the browser. So whilst there isn't "native" mode it still to some extent does "native" login/auth.

Yes you're right !! that's the choice the team expo has made. it's easier now, everyone must use the browser behavior and the SDK will choose the most appropriate way to authenticate the user (native or browser or anything else.)

If only it was us that made the decision… Behaviors were removed from native Facebook SDK (first deprecated in 4.43.0, then removed in 5.0.0).

Any solution for this?
Current version expo-facebook 7.0.0

It seems this is indeed a facebook sdk & iOS
Bug/issue, other people are experiencing it in base react native -> https://github.com/facebook/react-native-fbsdk/issues/646

This issue here on the facebook sdk repo also seems to have a fix for this.

https://github.com/facebook/facebook-ios-sdk/issues/1067

It looks like its an issue spawning from iOS changing underlying functionality that the Facebook SDK is relying on to exist.

It seems this is indeed a facebook sdk & iOS
Bug/issue, other people are experiencing it in base react native -> facebook/react-native-fbsdk#646

This issue here on the facebook sdk repo also seems to have a fix for this.

facebook/facebook-ios-sdk#1067

It looks like its an issue spawning from iOS changing underlying functionality that the Facebook SDK is relying on to exist.

Oh god, I don't know how to talk with my customer about this and I don't know what to do. My application is almost on production and I don't want upload it to Apple Store with this issue.

We never got rid of the intermittent errors with native based login, after eject from expo and running fbsdk we haven’t seen any problems.

Did anyone get the issue fixed? I also stuck on the same issue.

Don't know why expo is not fixing this.

Even after removing the behavior: 'browser', we are having issue in SDK 35 and iOS 13.1.2.
Facebook social login works inconsistently and we are seeing the below behavior. Attached screenshot is what we see most of the time.
expo app => fb website => redirect to fb app => fb app permission => reroute to expo app

Not getting the type== success || cancel from Facebook.logInWithReadPermissionsAsync method

Skype_Picture_2019_10_01T15_47_44_924Z

having same issue... with
expo sdk: 35.0.0
ios: 13.1.2 & 13.1.3

@saad12150 and @waseemtsd it seems from above that this is an upstream issue,

It seems this is indeed a facebook sdk & iOS
Bug/issue, other people are experiencing it in base react native -> facebook/react-native-fbsdk#646

This issue here on the facebook sdk repo also seems to have a fix for this.

facebook/facebook-ios-sdk#1067

It looks like its an issue spawning from iOS changing underlying functionality that the Facebook SDK is relying on to exist.

If you can provide a repro where the bug occurs in a managed Expo project, but not a bare react native project, that will clear things up

anyone found any solution for this issue?

@cruzach Sorry, I didn't catch it, upstream issue?

@saad12150 upstream issue means the problem needs be fixed in a dependency. It cannot be fixed in this project, react-native needs to fix this it seems.

Because this issue has so many conflicting comments (some say it's fixed, some indicate it's an upstream issue) I'm going to close it in favor of https://github.com/expo/expo/issues/6112 since it reports the same issue and is clear and concise, without the large list of comments

I'm attempting to repro now, and since this only occurs on standalone builds, I'll have to wait for it to go through to TestFlight

Was this page helpful?
0 / 5 - 0 ratings