Firebase throws "Cannot parse ID Token" after passing FacebookAuthProvider.credential(access_token)

[plemonsbrett]

Please provide the following:

1. SDK Version: 42
2. Platforms(Android/iOS/web/all): Android/iOS

I am attempting to integrate Facebook authentication into my app that interacts with firebase auth. I have followed the guide provided on the expo.dev docs for Facebook but am having a hard time getting it working. I am able to successfully log in to facebook, and return an access_token. I am even successfully generating the firebase credential with FacebookAuthProvider.credential(access_token). But when trying to then authenticate with firebase I get a Cannot parse ID token. I was able to implement authentication with Google with no issues following the same methods but Facebook just will not work.

Here is the code in question:

import React, { useEffect, useState } from "react";
import { View } from "react-native";
import { FontAwesome5 } from "@expo/vector-icons";

import { useDispatch, useSelector } from "react-redux";

import * as WebBrowser from 'expo-web-browser';
import { ResponseType } from 'expo-auth-session';
import * as Facebook from 'expo-auth-session/providers/facebook';

import { addError } from "../../redux/actions/error.actions";
import { firebaseLogin } from "../../redux/actions/firebase.actions";
import { auth, facebookProvider } from '../../config';


WebBrowser.maybeCompleteAuthSession();

export default function FacebookLogin() {
    const dispatch = useDispatch();

    const [ request, response, promptAsync] = Facebook.useAuthRequest({
        responseType: ResponseType.Token,
        clientId: 'XXXXXXXXXXXXXXX',
    });
    
    useEffect(() => {
        if (response?.type === 'success') {
            const {access_token} = response.params;
            console.warn(`access_token type: ${typeof access_token}`);
            const credential = facebookProvider.credential(access_token);

            auth.signInWithCredential(credential).then(
                (userCredential) => {
                    if (userCredential.additionalUserInfo.isNewUser) {
                        console.warn('New Facebook User.');
                    } else {
                        dispatch(firebaseLogin(userCredential.user));
                    }
                },
                (error) => {
                    let email = error.email;
                    let credential = error.credential;
                    // TODO: Handle linking of account if credential exists.
                    if (error.code === "auth/popup-closed-by-user") {
                        console.log('user closed popup');
                    }
                }
            )
            .catch((error) => {
                setError(true);
                setErrorMessage({ type: "Facebook Login", message: error });
                dispatch(addError({ type: "Facebook Login", message: error }));
            });
        }
    }, [response]);

    return (
        <View style={{ marginBottom: 10 }}>
          <FontAwesome5.Button
            name="facebook-f"
            backgroundColor="#3B5998"
            onPress={promptAsync}
            borderRadius={24}
            size={18}
            style={{ marginLeft: 7, marginRight: 7 }}
          >
            Sign In with Facebook
          </FontAwesome5.Button>
        </View>
    )
}

The only thing not visible in this component is how how auth or facebookProvider are defined.

import firebase from 'firebase/app';
import 'firebase/auth';

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app();
}

export const auth = firebase.auth();
export const facebookProvider = new firebase.auth.FacebookAuthProvider();
export {firebase};

[mudiman]

I am also facing same issue is there any solution to this. Can we get idToken from facebook instead of access token