undefined is not an object firebase.auth.FacebookAuthProvider.credential

Question

Here is my code.. its pretty simple.. just trying to allow a user to authenticate through facebook and then add it to the Firebase system! I should mention that I am using React Native, I did read that various parts of the Firebase library does not work with React Native.

const auth = firebase.auth();
const provider = firebase.auth.FacebookAuthProvider;

LoginManager.logInWithReadPermissions(['public_profile'])
.then(loginResult => {

    alert("login results")
    if (loginResult.isCancelled) {
        alert('user canceled');
        return;
    }
    AccessToken.getCurrentAccessToken()
    .then(accessTokenData => {
        const credential = firebase.auth.FacebookAuthProvider.credential(accessTokenData.accessToken);
        alert("Credential: " + credential )
        return auth.signInWithCredential(credential);
    })
    .then(credData => {
        console.log(credData);
        alert("CRED data:::" + credData)
        alert(firebase)
    })
    .catch(err => {
        console.log(err);
        alert("ERROR:::" + err)
        alert(firebase)

    });
});

The only reasoning I can really think of for this is that Firebase is undefined or it does not finish initializing.. although it seems to be.. maybe I can put in some sort of promise to ensure it has initialized. (Any ideas on how to do that?)

Although firebase seems to be initalized.. but I went through the api reference and can't really find any reason why .auth.FacebookAuthProvider.credential would not exist

Any help would be great!

Answer 1

I was having this exact same issue, and I have a solution that worked for me, but I'm not sure if it will be the same for you.

I was instantiating my firebase class through a separate module, in a file called FirebaseService.js

'use-strict';

const firebase = require('firebase');
const APP_BASE = 'https://your-unique-url.firebaseapp.com/'

const FIREBASE_CONFIG = {
    apiKey: '[super_unique]',
    authDomain: 'your-unique-url.firebaseapp.com',
    databaseURL: APP_BASE,
    storageBucket: 'your-unique-url.appspot.com',
};

export const Firebase = firebase.initializeApp(FIREBASE_CONFIG);

I was then using it everywhere else in my code by importing it:

const { Firebase } = require ('./services/FirebaseService');

This appeared to be fine until I got around to implementing facebook login, and that's when I started having the same issue.

I had to import firebase in the screen that was trying to login with facebook. instead of requiring my own service, I used the npm module:

const firebase = require('firebase'); 

After that, I was able to access FacebookAuthProvider.credential. I'm really not sure why this is the case, there may have been something wrong with my use of modules