Facebook login with Firebase in React Native error 400

Question

I am having trouble to register a user in Firebase with his Facebook credentials in RN. The Facebook and the Firebase apps are setup correctly, since everything is working as expected in Swift. The OAuth redirect URI is also setup correctly.

However when I try to do the same process from RN it fails. My setup is the following, when the user taps my login button I call FB's LoginManager.logInWithReadPermissions(['public_profile', 'email']) and on its success I call FirebaseManager's (which is my custom class for managing Firebase) signUpWithFacebook(). I get a FB access token correctly and I can see that a credential object is created.

However, Firebase always returns the error:

{"error":{"errors":[{"domain":"global","reason":"invalid","message":"A system error has occurred"}],"code":400,"message":"A system error has occurred"}}

The FirebaseManager looks like this:

import { AsyncStorage, NativeModules } from "react-native";
import * as firebase from 'firebase';

const firebaseConfig = {
    apiKey: "key",
    authDomain: "domain",
    databaseURL: "db_url",
    projectId: "project_id",
    storageBucket: "storage_bucket"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

const FBSDK = require('react-native-fbsdk');
const {
    AccessToken
} = FBSDK;

export default class FirebaseManager {

    constructor() {
        // Some logic...
    }

    signUpWithFacebook() {
        AccessToken.getCurrentAccessToken().then((data) => {
            let accessToken = data.accessToken
            console.log('FB accessToken: ' + accessToken)

            const provider = new firebase.auth.FacebookAuthProvider();
            const credential = provider.credential(accessToken);
            console.log('FB credential: ' + credential)
   
            firebase.auth().signInWithCredential(credential)
                .then()
                .catch((error) => {
                    console.log('Failed to sign in Firebase with Facebook. ' + error)
              })
        })
    }
}

I would also like to note that Firebase's anonymous & email/password authentication are working with no problem.

My workaround for the moment is to do the Facebook login from Swift and return the user object in RN with a bridge and RN's NativeModules.

Some more info about my project:

react-native: 0.44.2

firebase: 4.0.0

react-native-fbsdk: 0.6.0

Any help would be appreciated!

Also make sure you configured the correct OAuth client ID and secret for Facebook in the Firebase Console. — bojeil
Yes Facebook is enabled as an auth provider and the OAuth client ID is setup correctly. As I have mentioned I am able to login in Firebase with Facebook natively, i.e. if I do it in Swift and pass the user object in RN with NativeModules. I also can register correctly from RN with the anonymous login and with the email/password login. Therefore, I suppose that I have setup my firebase object correctly. — e_pie
Did you ever resolve this? I'm getting the exact same issue. — svarrall

Rikard Askelöf Rikard Askelöf · Accepted Answer · 2018-04-09T14:26:50

Might be a long shoot but this looks VERY similar to a an issue in firebase JS SDK. The solution was to not make an instance of FacebookAuthProvider, by changing these lines:

const provider = new firebase.auth.FacebookAuthProvider();
const credential = provider.credential(accessToken);

to this:

var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

Facebook login with Firebase in React Native error 400

1 Answers