React-native-firebase: Facebook auth is not working

[EvansPie]

Issue

Facebook login doesn't work. Firebase returns an error The supplied auth credential is malformed or has expired. Strangely this doesn't happen always (but like 9 out of 10 times) and it never happens when the user is logging in for the first time. Facebook credential is created correctly and I have checked that the Facebook token is valid. The problem occurs in firebase.auth().signInWithCredential. I have also triple checked my Facebook App ID and its secret on the Firebase Auth console, as well as the OAuth redirect URI on the Facebook App page and there isn't any whitespace copied.

In order to reproduce it you have to login with a Facebook user who's not already registered, sign out and then try to sign in again.

I am on react-native-firebase: 5.5.6 and react-native-fbsdk: 1.0.4.

Here's my code for Facebook auth:

loginWithFacebook = async (): Promise<void> => {
        try {
            const result = await LoginManager.logInWithPermissions(['public_profile', 'email']);
            console.log(`FB Login result:\n${JSON.stringify(result)}`);

            if (result.isCancelled) {
                return Promise.reject();
            }

            const accessTokenData = await AccessToken.getCurrentAccessToken();
            console.log(`FB Access Token Data:\n${JSON.stringify(accessTokenData)}`);

            if (!accessTokenData || !accessTokenData.accessToken) {
                throw new Error('Something went wrong obtaining the user\'s access token');
            }

            const fbCredential = firebase.auth.FacebookAuthProvider.credential(accessTokenData.accessToken);
            console.log(`Created FB credential:\n${JSON.stringify(fbCredential)}`);

            await firebase.auth().signInWithCredential(fbCredential);
            return Promise.resolve();

        } catch (error) {
            if (error.code === 'auth/invalid-credential') {

            } else if (error.code === 'auth/account-exists-with-different-credential') {

            }

            console.error(error);
            return Promise.reject(error);
        }
    }

---

Project Files

iOS

Click To Expand

#### `ios/Podfile`: - [ ] I'm not using Pods - [x] I'm using Pods and my Podfile looks like:

platform :ios, '12.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'Project' do
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
  pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'
  pod 'RNScreens', :path => '../node_modules/react-native-screens'

  pod 'FBSDKCoreKit'
  pod 'FBSDKLoginKit'
  pod 'FBSDKShareKit'

  pod 'Firebase/Analytics'
  pod 'Firebase/Auth'
  pod 'Firebase/Core'
  pod 'Firebase/Database'
  pod 'Firebase/DynamicLinks'
  pod 'Firebase/Messaging'
  pod 'Firebase/Performance'
  pod 'Firebase/RemoteConfig'
  pod 'Firebase/Storage'

  use_native_modules!
end

#### `AppDelegate.m`:

/**
 * 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 <FBSDKCoreKit/FBSDKCoreKit.h>
#import <RNGoogleSignin/RNGoogleSignin.h>

#import "RNFirebaseLinks.h"

@import Firebase;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [FIROptions defaultOptions].deepLinkURLScheme = @"com.project.rn";
  [FIRApp configure];

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

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"Project"
                                            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];
  return YES;
}

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

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  BOOL fbHandled = [[FBSDKApplicationDelegate sharedInstance] application:application
                                                                openURL:url
                                                      sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                                             annotation:options[UIApplicationOpenURLOptionsAnnotationKey]];

  BOOL googleHandled = [RNGoogleSignin application:application
                                           openURL:url
                                 sourceApplication:options[UIApplicationOpenURLOptionsSourceApplicationKey]
                                        annotation:options[UIApplicationOpenURLOptionsAnnotationKey]];

  BOOL dynamicLinkHandled = [[RNFirebaseLinks instance] application:application openURL:url options:options];

  return fbHandled || googleHandled || dynamicLinkHandled;
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler {
  return [[RNFirebaseLinks instance] application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}

@end

---

Android

Click To Expand

#### `android/build.gradle`:

// N/A

#### `android/app/build.gradle`:

// N/A

#### `android/settings.gradle`:

// N/A

#### `MainApplication.java`:

// N/A

#### `AndroidManifest.xml`:

<!-- N/A -->

---

Environment

Click To Expand

**`react-native info` output:**

System:
    OS: macOS 10.15
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 62.09 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.16.1 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 21, 22, 23, 25, 27, 28
      Build Tools: 23.0.1, 24.0.1, 27.0.3, 28.0.2, 28.0.3, 29.0.0
      System Images: android-25 | Google Play Intel x86 Atom, android-28 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

- **Platform that you're experiencing the issue on**: - [ ] iOS - [ ] Android - [ ] **iOS** but have not tested behavior on Android - [ ] **Android** but have not tested behavior on iOS - [x] Both - **`Firebase` module(s) you're using that has the issue:** - `Authentication` - **Are you using `TypeScript`?** - `Y`

---

Think react-native-firebase is great? Please consider supporting all of the project maintainers and contributors by donating via our Open Collective where all contributors can submit expenses. [Learn More]

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[Ehesp]

Have you added the SHA1 & SHA256 to the firebase config? Getting memories of this issue being raised before and it was to do with those keys.

[EvansPie]

Thanks for the response. Yes I have. Moreover, I have this issue on both platforms and the firebase config for iOS doesn't include SHA fingerprints.

Also this happened suddenly, without changing the firebase configs at all.

[milesscherrer]

I got the exact same issue starting yesterday, without any changes related to authentication being made. Also our web FB login still works fine.

[EvansPie]

I created a new Facebook app and replaced the Facebook App ID & secret wherever necessary. All worked normally. Switching back to the original ID & secret still gives me this error.

Another hint is that when I try Facebook's redirect URI validator and enter the URI that I have from Firebase (which is listed in Facebook's redirect URIs) it gives me an error.

[milesscherrer]

For me the URI validator checks without error, still cannot resolve this though.

[EvansPie]

@milesscherrer it seems that there's an issue with Firebase at the moment. They got back to me saying that other developers are experiencing the same.

[milesscherrer]

@EvansPie Alright thanks. Have you found an issue for it to follow and post info? When manually using a new access token from FB Graph API explorer I can log in with it. The access token I get from getCurrentAccessToken has refresh date today and has not expired, but according to signInWithCredential it is malformed or expired. Are you using real-time DB or Firestore?

[milesscherrer]

Ok now it seems to be working again.

[EvansPie]

Yes it's working for me as well now.

Evangelos Pittas
MEng/MBA
iOS Engineer
Mob: [phone]
Email: [email protected]
Linkedin: linkedin.com/in/evangelospittas

ᐧ

On Thu, 17 Oct 2019 at 11:17, milesscherrer [e-mail]
wrote:

Ok now it seems to be working again.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/invertase/react-native-firebase/issues/2730?email_source=notifications&email_token=ABGRVXFQNDQEH2LIBINQCVLQPANRVA5CNFSM4JAYQNIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBPHOWI#issuecomment-543061849,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABGRVXBU2NJU3SLXSECNZPDQPANRVANCNFSM4JAYQNIA
.

[Ehesp]

Strangely on another project of ours Facebook web login was erroring.. so looks like it was a Firebase issue!