How do I know when auth.currentUser is readable?

[hitsthings]

I have some redirections in place so that the user is sent to the /login page if they are not logged in. Unfortunately, at least when using the auth emulator, auth.currentUser is null for a moment and then becomes populated. So I end up redirecting to login, then back once it finally initializes.

Is there a good way to wait for the state of auth.currentUser to be ready for reading? I don't think I can wait for onAuthStateChanged since if the user really is logged out, I really do want to redirect them immediately.

Thanks!

[OrhanTozan]

Use onAuthStateChanged. Can you explain more detailed why you don't want to use onAuthStateChanged?

[ryanmio]

Use onAuthStateChanged with conditional redirection logic.

1. Initialize State: Use a state variable like isAuthChecked set to false initially.

const [isAuthChecked, setIsAuthChecked] = useState(false);

2. onAuthStateChanged: Attach the listener and set isAuthChecked to true when the callback runs.

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(user => {
    setIsAuthChecked(true);
    // Your redirect logic here
  });
  return () => unsubscribe();
}, []);

3. Conditional Redirection: Redirect only when isAuthChecked is true.

if (isAuthChecked && !auth.currentUser) {
  // Redirect to login
}

Context: onAuthStateChanged runs immediately upon attaching, indicating the initial auth state. Using a flag like isAuthChecked helps differentiate between 'not checked' and 'not logged in'.

[hitsthings]

I have not been using firebase recently so I have forgotten context here. Sorry for not responding earlier - missed the reply.

I do think onAuthStateChanged would have solved it. I probably just didn't realize it would be called initially (the naming doesn't really imply a cold event stream). Sorry for the noise.