Firebase Auth emulator does not work after updating version to 9.6.3

user_11368422 0
Viewed 332

We have recently updated firebase to version 9.6.3 from 8.10.0 (also expo from sdk 41 to 44). After the update the app throws this error when using the auth emulator.

Uncaught FirebaseError: Firebase: Error (auth/argument-error).
at createErrorInternal (index-1679a2b2.js:475)
at _assert (index-1679a2b2.js:479)
at index-1679a2b2.js:9249
at Component.instanceFactory (index-1679a2b2.js:9264)
at Provider.getOrInitializeService (index.esm2017.js:290)
at Provider.initialize (index.esm2017.js:234)
at new Auth (index.esm2017.js:641)
at Component.instance.INTERNAL.registerComponent._firebase_component__WEBPACK_IMPORTED_MODULE_2__.Component.setServiceProps.ActionCodeInfo.Operation.EMAIL_SIGNIN [as instanceFactory] (index.esm2017.js:959)
at Provider.getOrInitializeService (index.esm2017.js:290)
at Provider.getImmediate (index.esm2017.js:128)
at FirebaseAppImpl._getService (index.esm2017.js:83)
at FirebaseAppImpl.firebaseAppImpl.<computed> [as auth] (index.esm2017.js:291)
at Object.serviceNamespace [as auth] (index.esm2017.js:275)
at Module../src/firebase/config.js (config.js:87)

The code on line 87 in config.js is firebase.auth().useEmulator("http://localhost:9099") which worked perfectly fine till the update happened. We have also changed the imports according to firebase docs. The question is, what is causing this error to occur? Thanks in advance.

firebase-tools expo firebase react-native
1 Answers

Make sure you use the second item in array returned by useIdTokenAuthRequest as response instead of value returned by promptAsync() because value returned by promptAsync() doesn't contain id_token

This doesn't work ❌

import React from "react";
import { TouchableOpacity, Text } from "react-native";
import { getAuth, GoogleAuthProvider, signInWithCredential } from "firebase/auth";
import * as Google from "expo-auth-session/providers/google";

export default function SignInWithGoogle() {
  const [_, __, promptAsync] = Google.useIdTokenAuthRequest({
    // your client IDs
  });

  const handleSignIn = async ()=> {
    const response = await promptAsync();
    if (response?.type === "success") {
      const { id_token } = response.params;
      const auth = getAuth();
      const credential = GoogleAuthProvider.credential(id_token);
      signInWithCredential(auth, credential);
    }
  }

  return (
    <TouchableOpacity onPress={() => handleSignIn()} >
      <Text>Sign in with Google</Text>
    </TouchableOpacity>
  );
}

This works ✅

import React, { useEffect } from "react";
import { TouchableOpacity, Text } from "react-native";
import { getAuth, GoogleAuthProvider, signInWithCredential } from "firebase/auth";
import * as Google from "expo-auth-session/providers/google";

export default function SignInWithGoogle() {
  const [_, response, promptAsync] = Google.useIdTokenAuthRequest({
    // your client IDs
  });

  useEffect(() => {
      if (response?.type === "success") {
        const { id_token } = response.params;
        const auth = getAuth();
        const credential = GoogleAuthProvider.credential(id_token);
        signInWithCredential(auth, credential);
      }
  }, [response]);

  return (
    <TouchableOpacity onPress={() => promptAsync()} >
      <Text>Sign in with Google</Text>
    </TouchableOpacity>
  );
}
user_147107840
Related