Cannot get useAuthState() or useIdToken() from react-firebase-hooks to work consistently

Question

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.

Answer 1

Personally I do not use react-firebase-hooks. I have helped many people dealing with issues using the package. IMO, it does not provide sufficient benefit above using the core Firebase Web Client SDKs to make it worth it.

I recommend you make use of the onAuthStateChanged() listener in your own code so that your code is capturing the completion of the Authentication process and you then get the user value directly yourself.

Here is a sample project you could look to that showcases this use. Take a look at the AuthProvider.jsx code for how it registers the onAuthStateChanged() listener, and how it is invoked in App.jsx.