IOS: The FBSDK not work when facebook app is installed

[hm-harshit]

check this issue https://github.com/facebookarchive/react-native-fbsdk/issues/785

FBSDK not work when facebook app is installed

[thebergamo]

We need a way to reproduce the issue.

Would you be able to provide a minimum reproducible example that we can run and verify ?

[hoangdoan267]

@thebergamo to be more clear, let me reproducible this issue for you. Follow these steps below

1. Use LoginManager to make login request to facebook.
2. If you has not been logged in to facebook in Safari (or default browser), and your device has Facebook app installed, you will be directed to Facebook app and Login progress will be success. Then you will be back to your current app.
3. However, you cannot use Profile.getCurrentProfile() to get user information, it will return null

  const loginRequest = await LoginManager.logInWithPermissions(["public_profile", "email"])
  if (!loginRequest.isCancelled) {
    const accessToken = await AccessToken.getCurrentAccessToken()
    const currentProfile = await Profile.getCurrentProfile()
    console.log(accessToken) // -> return accessToken object
    console.log(currentProfile) // -> return null
  }

@hm-harshit Is my reproduce exactly like you? If yes, please try to get user information using fetch while we investigate the root cause. For example

const getFacebookData = async (token) => {
  const fetchResult = await fetch(
    "https://graph.facebook.com/v9.0/me?fields=email,name,friends&access_token=" + token,
  )
  const result = await fetchResult.json()
  return result
}

const loginRequest = await LoginManager.logInWithPermissions(["public_profile", "email"])
  if (!loginRequest.isCancelled) {
    const tokenData = await AccessToken.getCurrentAccessToken()
    const currentProfile = await getFacebookData(tokenData.accessToken)
    console.log(tokenData) // -> return accessToken object
    console.log(currentProfile) // -> return your currentProfile
}

[mikehardy]

Just to mention that the phrase "while @thebergamo finding solution for this issue" should, in open source terms, be re-written "while I investigate the root cause of the issue and make a PR". No one should be expected to do work for you in an open source repository.

If those words are not words you will type - that is, if you are not willing to personally investigate the root cause and post a PR, then an alternative phrase could be "hopefully someone has the extra free time to find the solution for my problem"

[hoangdoan267]

@mikehardy so sorry for my words. I've edited my comment. Thank you so much.

[mikehardy]

No problem, and I was not offended or anything, I just take great care to set reasonable expectations for open source repositories. It's all volunteer work essentially, and repositories always need more people to help, so the words are important. Cheers

[hm-harshit]

const fblogin = () => {
    setFacebookIsLoading(true);
    LoginManager.logInWithPermissions(['email', 'public_profile']).then(
      function (result) {
        console.warn(result);
        if (result.isCancelled) {
          console.log('Login cancelled');
          setFacebookIsLoading(false);
        } else {
          if (Platform.OS === 'ios') {
            console.warn(result);
            AuthenticationToken.getAuthenticationTokenIOS().then(data => {
              console.log(data);
              api.social_login()

            });
          } else {
            AccessToken.getCurrentAccessToken().then(data => {
              api.social_login()
            });
          }
        }
      },

not working with this code top 👆

POC video https://user-images.githubusercontent.com/34433141/123284685-13a73500-d52a-11eb-8391-03b94f3f1a10.mp4

[mikehardy]

So, when you reach in to node_modules and modify this module's code to print out the arguments used to call the native SDK's API, and then you print out all the results to verify what they are, what exactly is shown, and is it different then expectations? That way you may determine if it is a problem in this module, or in the native SDK. And if it's in the native SDK you'll know to go search their issue tracker to see if there is an existing issue or if you need to make a native-level reproduction and post one there so they can fix it

[hm-harshit]

@thebergamo to be more clear, let me reproducible this issue for you. Follow these steps below

1. Use LoginManager to make login request to facebook.
2. If you has not been logged in to facebook in Safari (or default browser), and your device has Facebook app installed, you will be directed to Facebook app and Login progress will be success. Then you will be back to your current app.
3. However, you cannot use Profile.getCurrentProfile() to get user information, it will return null

  const loginRequest = await LoginManager.logInWithPermissions(["public_profile", "email"])
  if (!loginRequest.isCancelled) {
    const accessToken = await AccessToken.getCurrentAccessToken()
    const currentProfile = await Profile.getCurrentProfile()
    console.log(accessToken) // -> return accessToken object
    console.log(currentProfile) // -> return null
  }

@hm-harshit Is my reproduce exactly like you? If yes, please try to get user information using fetch while we investigate the root cause. For example

const getFacebookData = async (token) => {
  const fetchResult = await fetch(
    "https://graph.facebook.com/v9.0/me?fields=email,name,friends&access_token=" + token,
  )
  const result = await fetchResult.json()
  return result
}

const loginRequest = await LoginManager.logInWithPermissions(["public_profile", "email"])
  if (!loginRequest.isCancelled) {
    const tokenData = await AccessToken.getCurrentAccessToken()
    const currentProfile = await getFacebookData(tokenData.accessToken)
    console.log(tokenData) // -> return accessToken object
    console.log(currentProfile) // -> return your currentProfile
}

I tried this code also but it dosen't work ! Anyone here please help me out.

[hm-harshit]

@mikehardy would you like to suggest any other library that I can use you bypass this issue ?

[mikehardy]

@hm-harshit no, this is/was my suggestion, it would actually move us all forward:

So, when you reach in to node_modules and modify this module's code to print out the arguments used to call the native SDK's API, and then you print out all the results to verify what they are, what exactly is shown, and is it different then expectations? That way you may determine if it is a problem in this module, or in the native SDK. And if it's in the native SDK you'll know to go search their issue tracker to see if there is an existing issue or if you need to make a native-level reproduction and post one there so they can fix it

[osvald0]

Any update? I have a similar issue. After press the Continue as user_name button I get an error message with the text: "app_name" is No Longer Available.

[abhinav-official]

Any Resolutions?

[mikehardy]

There will not be resolution until someone that can reproduce this investigates it personally, spending their time to do so, and posts a PR. If you do not see someone saying they have done this, posting comments here is not a valuable use of time.

Someone that can reproduce it please do the work and make the fix, we can merge and release any time if we get a PR

[mikehardy]

The underlying SDKs have been updated across several major version boundaries in their versioning systems. You should retest, for sure, using latest v6 version from here

[djwesty]

Hi all, I am still able to reproduce this issue with the latest v6 code, specifically using the example app. Here are the steps I took to do so

https://user-images.githubusercontent.com/3537850/146036734-5ebc4879-095b-4846-b377-fc576822b8b4.mp4

1. Clone the example code on a Mac
2. Replace the App ID, Client token and CFBundleURLSchemes in ios/RNFBSDKExample/Info.plist with your respective values
3. Install Facebook on your iOS device
4. Build and Run the example App on your iOS device via Xcode
5. Try to log in with a know user which would otherwise work on Android, or work on iOS when the Facebook app is not installed

For this test I created a new Facebook App in the Facebook developer console, and followed the relevant instructions for adding the Facebook login product to the app.

It's unlikely that I will be able to PR this myself, but I hope these reproduction steps may help someone else. Thank you everyone who has looked into this so far.

[mikehardy]

I won't have time to investigate this personally for a while, so anyone else should take a shot at it. Really curious for anyone to dive in to node_modules code directly, instrument it if needed (adding NSLog statements of API calls and parameters going in to APIs, and any results that come back) and comparing our use of API with the upstream facebook-ios-sdk docs

That's how I'd start anyway, if I had time

[Geremp]

Hello, we have the same problem. Step to reproduce here :

• On facebook native APP, connect your facebook account
• On your native phone browser, disconnect your account from facebook.com
• Now, try to connect your custom app with login facebook

The problem occurs when facebook app is present on the phone AND your are not connected on facebook with your native browser

[jwainwright87]

I am also suffering the same fate, unfortunately.

https://user-images.githubusercontent.com/49211465/150681079-db25706f-3277-4196-aa96-944b4abf3dd6.mp4

The problem is only occurring on iOS when the user is logged into the Facebook app on a physical device.

This is my environment setup:

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 149.78 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.11.1 - /usr/local/bin/node
    Yarn: Not Found
    npm: 8.0.0 - /usr/local/bin/npm
    Watchman: 2021.10.18.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 29.0.2, 30.0.2
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google APIs ARM 64 v8a, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play ARM 64 v8a, android-31 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.4 => 0.66.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

"react-native-fbsdk-next": "^4.6.0"

Some seem to suggest modifying AppDelegate.m to include openURL:(NSURL *)url however this only breaks the whole application and it fails to build.

Here is how my ​AppDelegate.m looks:

#import <Firebase.h>
#import "AppDelegate.h"

#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <React/RCTLinkingManager.h>

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];

#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"NestBoxAppReactNative"
                                            initialProperties:nil];

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  [[FBSDKApplicationDelegate sharedInstance] application:application didFinishLaunchingWithOptions:launchOptions];

  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

Adding LoginManager.setLoginBehavior('web_only') before I call LoginManager.logInWithPermissions(['email', 'public_profile', 'publish_video']) is also ineffective.

I am running out of options on this one.

Thanks for the work you do on this and I hope my input can provide some further movement on the topic.

Best, Jamie

[mikehardy]

@jwainwright87 this may not help - I haven't checked this PR yet, but have you tried modifying this related chunk of code inside node_modules to see if it has an effect? https://github.com/thebergamo/react-native-fbsdk-next/pull/179/files ? We just merged a typescript rewrite so I am certain it moved around, but you should hopefully still be able to locate it and try the PR's attempted change?

[jwainwright87]

@mikehardy Thanks for your response Mike.

Here's what I did. I updated FBLoginManager.js so that it now has this:

export type LoginBehaviorIOS =
  // Attempts log in through the Safari browser.
  // This is the only behavior supported by the native sdk.
  // 'browser';
  | 'FBSDKLoginBehaviorNative'
  | 'FBSDKLoginBehaviorWeb';

Cleaned iOS build folder, rebuilt the app in xcode and ran on iPad.

The result is the same and LoginManager.getLoginBehavior() still reports browser.

Have I missed any steps here?

Thanks, Jamie

[jwainwright87]

@mikehardy I also tried the following as mentioned in your comment for the PR

Running npx patch-package react-native-fbsdk-next and this was the output:

patch-package 6.4.7
• Creating temporary folder
• Installing react-native-fbsdk-next@4.6.0 with npm
• Diffing your files with clean files
✔ Created file patches/react-native-fbsdk-next+4.6.0.patch

💡 react-native-fbsdk-next is on GitHub! To draft an issue based on your patch run

    npx patch-package react-native-fbsdk-next --create-issue

I then cd node_modules/react-native-fbsdk-next and was not sure what to run inside here as I am using npm as apposed to yarn

[Marcoo09]

I had this problem on Android and the root of the problem is related that Google Play sign in the app for me. I thought that putting the keyhash of my production keystore was enough but I should also put the keyhash given by Play Store on Facebook Developer account. To see this you need to go to Goole play console -> -> Application integrity -> Application signing key certificate.

[jwainwright87]

@hm-harshit Thanks for creating the issue in the facebook-ios-sdk repo but they are unable to offer any support.

Any idea how I can modify my AppDelegate.m file (posted above) without breaking everything else?

Thanks in advance.

[mikehardy]

@jwainwright87 / @hm-harshit it is not that they cannot help, it is that they need a https://stackoverflow.com/help/minimal-reproducible-example based on using their code directly.

That means starting here (probably) https://github.com/facebook/facebook-ios-sdk/tree/main/samples/FacebookLoginSample

...and reproducing the bug directly using their APIs with a little throwaway sample app that you toss up on a github.

What we'll learn if/when someone does that is whether the problem is in this module (at which point the facebook-ios-sdk team response is exactly right!) or that they have a problem in that SDK (at which point the facebook-ios-sdk now has a repro they can work with, without unreasonably expecting them to bring up a full react-native environment when they are iOS devs)

It's a bit more work but it's a critical step I think, to move this forward. I am not an iOS dev by nature (I'm a java guy from when dinosaurs roamed the earth) but even I can usually get a sample app running and reproduce things just by hacking around, so don't be intimidated out of even trying it, you might be surprised :-). Good luck

[Eighke]

@jwainwright87 You should try to add at the end of AppDelegate.m

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

I had a similar problem and it was needed.

[scottarnold]

@jwainwright87 You should try to add at the end of AppDelegate.m

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

I had a similar problem and it was needed.

Thank you! Confirming that this resolved the issue for me.

[jwainwright87]

@jwainwright87 You should try to add at the end of AppDelegate.m

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

I had a similar problem and it was needed.

Wow this has resolved the issue! Thank you so much!

Forever I was thinking I had to edit the existing - (BOOL)application etc because that contained the original FBSDKApplicationDelegate

Many thanks!

[pehagg]

I can verify that @scottarnold 's piece of code fixed the issue for us as well. We already had the same call to FBSDKApplicationDelegate in application didFinishLaunchingWithOptions but that doesn't seem to be enough.

[mikehardy]

If this is not documented well :pray: :pray: :pray: if someone could open a PR to the docs and cross-link it to close this out, that would clearly help a lot of people

[jorgegvallejo]

@jwainwright87 You should try to add at the end of AppDelegate.m

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

I had a similar problem and it was needed.

This didnt work for us. We initially had this in our AppDelegate.m:

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{

  BOOL handled = [[FBSDKApplicationDelegate sharedInstance] application:application
    openURL:url
    sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
    annotation:options[UIApplicationOpenURLOptionsAnnotationKey]
  ];

return handled;

}

We tried the suggested code by others as well as what the docs suggest when using the RCTLinkingManager, but no luck.

[Milen-Donchev]

@jwainwright87 You should try to add at the end of AppDelegate.m

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

I had a similar problem and it was needed.

I had the same exact issue and can also confirm that this code fixes it. Cheers mate!

[serhiiharbo]

I have used solution from here https://github.com/facebookarchive/react-native-fbsdk/issues/785#issuecomment-731925742 In my case I have just moved [[FBSDKApplicationDelegate sharedInstance] application:app openURL:url options:options] above all other conditions (highlighted lines). And that fixed the issue.

[mikehardy]

If this is not documented well pray pray pray if someone could open a PR to the docs and cross-link it to close this out, that would clearly help a lot of people

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[akhileshsinha]

https://github.com/facebookarchive/react-native-fbsdk/issues/785#issuecomment-731925742 is the solution which worked for me.... Saved my day.... Note: I added the suggested piece of code at the bottom of the file. It worked.

[mohammad-hazim]

i open the app from real device

but never show popup (open in "facebook"?)

can you help.

[michalis-ligopsychakis]

Hello there :) I have the same issue but I am using SceneDelegate.

Is there any alternative of this solution that works for SceneDelegate because right now the "openURL" method doesn't get called from my AppDelegate.

Thanks!

[mikehardy]

@michalis-ligopsychakis Hi there! I'm unaware of how to get openURL to work with SceneDelegates, the react-native ecosystem is still entirely based on AppDelegate so I have no experience nor have I even seen how to do it. So I guess it is time to hit the API documentation and start experimenting.

I will admit to being quite curious though, I have a similar question I'm unable to answer here https://github.com/invertase/react-native-firebase/issues/6657 and I would love to have an answer if you could post back any of your findings

[michalis-ligopsychakis]

Ok @mikehardy .. Thank you for the quick response :)

[michalis-ligopsychakis]

Ok I think I figured out a solution.. I added this method on my SceneDelegate:

- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts
{
  if ([URLContexts.allObjects count] > 0) {
    NSURL *url = URLContexts.allObjects.firstObject.URL;

    if ([url.absoluteString rangeOfString:@"facebook"].location != NSNotFound) {
      [[FBSDKApplicationDelegate sharedInstance]
      application: [UIApplication sharedApplication]
      openURL: url
      sourceApplication: nil
      annotation: nil];
    }
  }
}

[harshilmobmaxime]

add this code at the end of AppDelegate.m file. it's fix for me

[usmanArif22]

Hello there :) I have the same issue but I am using SceneDelegate.

Is there any alternative of this solution that works for SceneDelegate because right now the "openURL" method doesn't get called from my AppDelegate.

Thanks!

Follow this official Facebook documentation for Guide on SceneDelegate https://developers.facebook.com/docs/ios/getting-started/?sdk=cocoapods

[MohitBishtTech]

I have removed below from info.plist so fbapi will not open the facebook popup so it works like login behavior to browser by default.

LSApplicationQueriesSchemes

<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
</array>

[kaxi1993]

@jwainwright87 You should try to add at the end of AppDelegate.m

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

I had a similar problem and it was needed.

Thank you man, this worked for me as well!

[MuhammadAbdullah7]

@jwainwright87 You should try to add at the end of AppDelegate.m

- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

I had a similar problem and it was needed.

this fixed my problem, can someone explain how this works?