useAuthState() and useIdToken() not logging the user in with Google

[jambudipa]

These two hooks will regularly, but not all the time, return an indeterminate state. That is, user is null; loading is false; and error is null.

This occurs when logging in with Google. It navigates successfully to the Google login page and no errors occur when redirecting back. loading switches from true to false, but user and error are both null.

This is an intermittent problem, happening seemingly according to no obvious pattern.

My particular use case is not important, since I can recreate it easily with the sample code, which I have here:

import { getAuth, signInWithEmailAndPassword, signOut } from 'firebase/auth';
import { useAuthState } from 'react-firebase-hooks/auth';
import { GoogleAuthProvider } from 'firebase/auth';

const auth = getAuth(firebaseApp)

const login = () => {
  signInWithRedirect(auth, new GoogleAuthProvider());
};
const logout = () => {
  signOut(auth)
};

const CurrentUser = () => {
  const [user, loading, error] = useAuthState(auth);

  if (loading) {
    return (
      <div>
        <p>Initialising User...</p>
      </div>
    );
  }
  if (error) {
    return (
      <div>
        <p>Error: {error}</p>
      </div>
    );
  }
  if (user) {
    return (
      <div>
        <p>Current User: {user.email}</p>
        <button onClick={logout}>Log out</button>
      </div>
    );
  }
  return <button onClick={login}>Log in</button>;
};

My code is not doing anything exotic. I have:

export const firebaseApp = initializeApp(firebaseConfig);

and have checked the firebaseConfig carefully for correctness.