React-native-fbsdk: Facebook login sends iOS to browser and can't log in

[LeDigital]

Hello,

I have issue that react-native-fbsdk launches browser instead on native app and it's not possible to log in.

To reproduce this you need to do following steps:

1. Log in your Facebook account trough safari browser
2. Then log in your Facebook native app

3. Open app which uses react-native-fbsdk and try to log in ( in my case it opens browser/web and shows two options:

4. Log in with the Facebook App (which doesn't work)

5. Log in With Phone number or Email Adress

Does anyone else have this ?

Android works good.

[mrcarjul]

I'm having the same problem in iOS only in certain devices, as reported by users, have you been able to solve it?

[LeDigital]

No i couldn't find solution, but this issue is really bad for user experience

[devpms]

Facing exact same issue. Is there a work around for same?

[khalidahmedshalabi]

Have you implemented this step? https://developers.facebook.com/docs/ios/getting-started/#app-delegate

[AdrienV]

Have you implemented this step? https://developers.facebook.com/docs/ios/getting-started/#app-delegate

Same issue for me. I tried to add it in the AppDelegate.m, but nothing change, the login button open the browser first, and after the app :/

#import 
#import "AppDelegate.h"
#import "RNSplashScreen.h"
#import 
#import 
#import 
#import 

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIRApp configure];
  [GMSServices provideAPIKey:@"xxx"];
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"xxx"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [UIColor blackColor];
  
  [[FBSDKApplicationDelegate sharedInstance] application:application
  didFinishLaunchingWithOptions:launchOptions];

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


- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}
- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
  sourceApplication:(NSString *)sourceApplication
         annotation:(id)annotation {
  return [[FBSDKApplicationDelegate sharedInstance] application:application
                                                         openURL:url
                                               sourceApplication:sourceApplication
                                                      annotation:annotation];
}

@end

[khalidahmedshalabi]

We have it like this and it works fine @AdrienV

"react": "16.8.3",
"react-native": "0.59.10",
"react-native-fbsdk": "0.10.1",

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <Firebase.h>
#import "RNFirebaseNotifications.h"
#import "RNFirebaseMessaging.h"
#import <UserNotifications/UserNotifications.h>
#import <FBSDKCoreKit/FBSDKCoreKit.h>

@implementation AppDelegate

- (void)applicationDidBecomeActive:(UIApplication *)application {
  [FBSDKAppEvents activateApp];
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];

  [FIRApp configure];
  [RNFirebaseNotifications configure];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"MyApp"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

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

  // You can skip this line if you have the latest version of the SDK installed
  [[FBSDKApplicationDelegate sharedInstance] application:application
    didFinishLaunchingWithOptions:launchOptions];
  // Add any custom logic here.
  return YES;
}

- (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]
  ];
  // Add any custom logic here.
  return handled;
}

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

- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
  [[RNFirebaseNotifications instance] didReceiveLocalNotification:notification];
}

- (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo
fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
  [[RNFirebaseNotifications instance] didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings:(UIUserNotificationSettings *)notificationSettings {
  [[RNFirebaseMessaging instance] didRegisterUserNotificationSettings:notificationSettings];
}

@end

[AdrienV]

@khalidahmedshalabi Same thing with your code :(

[ste00martin]

I'm having the same issue - it cropped up after switching from react-native-fbsdk 0.x.x to react-native-fbsdk 1.x.x

[amitbravo]

@khalidahmedshalabi
I used the code way you show in appdelegate.m
I am using
"react-native": "0.59.9",
"react-native-fbsdk": "0.10.3",
"react": "16.8.3",
testing on iOS device (iphone SE) and though I am having facebook app installed and loggedin yet , it does not open facebook app but a browser modal .
would this problem go away if I switch to react-native .60+ and react-native-fbsdk 1.x.x + ?

[amitbravo]

I switch to RN .60.x.x
I am testing on iOS device (iphone SE) facebook app already installed , still no luck.

[prashantvv]

For me setting behaviour to 'web', fb login dialog box opens up in the app, i needed the same but then its not opening fb native app for login if installed ?

[svrpeakers]

I'm having the exact same problem. not sure why and can't seem to resolve in any way.

[saurabh874]

I am having the exact same problem, anybody have idea how to resolve it?
https://developers.facebook.com/docs/ios/getting-started/#app-delegate this link is also not working for me.

[aguscha333]

I found this answer very helpful to fix this exact same issue https://github.com/facebook/react-native-fbsdk/issues/785#issuecomment-731925742

For more context on how to reproduce it, you need to be logged out of Facebook in safari and have the Facebook app downloaded and be logged in. If you are logged in in safari then it doesn't get to the Facebook app because you already have the account setup on the web view.