OAuth2 client id in access token audience is not found

Question

First of all, I am sorry for my poor English. I created an Android app using Expo. I implemented Google login through Firebase. It worked without a problem. In order to deliver the results to the customer, the ownership of the Firebase project was handed over to the customer. I changed my authority to editor.

But there was a problem.

firebase.auth().signInWithCredential function caused an error. The error code and message are as follows.

auth/invalid-credential OAuth2 client id in access token anaudience is not found.

I've googled the error message to solve this problem, but I couldn't find it in my ability. That's why I write on Stack Overflow.

LoginScreen.js

import React, { useEffect, useState } from 'react';
import { Button, Image, ImageBackground, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import * as Google from 'expo-google-app-auth';
import firebase from 'firebase'
import { fireAuth, fireStore } from '../Components/FireConfig';
import { screenHeight, screenWidth } from '../Components/Base';
import i18n from 'i18n-js';
import { ActivityIndicator } from 'react-native-paper';
export function LoginScreen({ navigation, route }) {

    const [isLoading, setIsLoading] = useState(false)

    // var provider = new firebase.auth.GoogleAuthProvider();

    function isUserEqual(googleUser, firebaseUser) {
        if (firebaseUser) {
            var providerData = firebaseUser.providerData;
            for (var i = 0; i < providerData.length; i++) {
                console.log('providerData[i].providerId', providerData[i].providerId)
                console.log('providerData[i].uid', providerData[i].uid)
                if (providerData[i].providerId === firebase.auth.GoogleAuthProvider.PROVIDER_ID &&
                    // providerData[i].uid === googleUser.getBasicProfile().getId()) {
                    providerData[i].uid === googleUser.user.id) {
                    // We don't need to reauth the Firebase connection.
                    return true;
                }
            }
        }
        return false;
    }

    function onSignIn(googleUser) {
        // console.log('Google Auth Response', googleUser);
        // We need to register an Observer on Firebase Auth to make sure auth is initialized.
        var unsubscribe = fireAuth.onAuthStateChanged(function (firebaseUser) {
            unsubscribe();
            // Check if we are already signed-in Firebase with the correct user.
            if (!isUserEqual(googleUser, firebaseUser)) {
                // Build Firebase credential with the Google ID token.
                var credential = firebase.auth.GoogleAuthProvider.credential(
                    //googleUser.getAuthResponse().id_token
                    googleUser.idToken,
                    googleUser.accessToken,
                )
                console.log("credential", credential)
                // Sign in with credential from the Google user.
                fireAuth
                    .signInWithCredential(credential)
                    .then((result) => {
                        const uid = result.user.uid
                        if (result.additionalUserInfo.isNewUser) {
                            fireStore
                                .collection('users')
                                .doc(uid)
                                .set({
                                    google_email: result.user.email,
                                    google_profile_picture: result.additionalUserInfo.profile.picture,
                                    google_locale: result.additionalUserInfo.profile.locale,
                                    google_name: result.additionalUserInfo.profile.name,
                                    created_at: Date.now(),
                                    isPushInfo: false
                                })
                        } else {
                            fireStore
                                .collection('users')
                                .doc(uid)
                                .update({
                                    last_logged_in: Date.now()
                                })
                        }
                    })
                    .catch((e) => {
                        console.log(e.code, e.message)
                    });
            } else {
                console.log('User already signed-in Firebase.', fireAuth.languageCode);
            }
        });
    }

    async function signInWithGoogleAsync() {
        setTimeout(() => {
            setIsLoading(true)
        }, 500)
        try {
            const result = await Google.logInAsync({
                androidClientId : "!!!.apps.googleusercontent.com",
                androidStandaloneAppClientId : "@@@.apps.googleusercontent.com",
                iosClientId : "###.apps.googleusercontent.com",
                iosStandaloneAppClientId : "$$$.apps.googleusercontent.com",
                scopes: ['profile', 'email']
            });
            if (result.type === 'success') {
                console.log(result.type)
                onSignIn(result)
                return result.accessToken;
            } else {
                setIsLoading(false)
                console.log(result)
                alert(result)
                return { cancelled: true };
            }
        } catch (e) {
            setIsLoading(false)
            console.log(e)
            alert(e)
            return { error: true };
        }
    }

    return (
        <View style={styles.container}>
                <TouchableOpacity
                    style={{
                        alignItems: "center",
                        justifyContent: "center",
                        borderRadius: 10,
                        backgroundColor: "white",
                        width: screenWidth * 0.8,
                        height: 50
                    }}
                    title="Sign In With Google"
                    onPress={() => {
                        signInWithGoogleAsync();
                    }} >
                    <Text style={{ color: "#5887f9" }}>{i18n.t('SignInWithGoogle')}</Text>
                </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
})

As you can see from the link below

https://console.developers.google.com/apis/credentials

app.json

{
  "expo": 

    ...

    "android": {
      "package": "com.mycompany.myapp",
      "versionCode" : 2,
      "permissions": [
        "READ_EXTERNAL_STORAGE",
        "READ_INTERNAL_STORAGE",
        "WRITE_EXTERNAL_STORAGE",
        "ACCESS_FINE_LOCATION",
        "INTERNET",
        "CAMERA_ROLL",
        "CAMERA"
      ],
      "googleServicesFile": "./google-services.json",
      "useNextNotificationsApi": true,
      "config": {
        "googleMobileAdsAppId": "```",
        "googleSignIn" :{
          "apiKey" : "my apiKey",
          "certificateHash" : "11:22:---:11:22"
        }
      }
    }

    ...

  }
}

The API key and OAuth 2.0 client ID must be written as the contents found in the link.

I look forward to your kind cooperation.

Answer 1

Regarding to this ticket on GitHub: https://github.com/FirebaseExtended/flutterfire/issues/4053 there was a central issue with Google Sign In & Firebase Auth. I contacted the GCP support and after some hours they fixed it ❤️