Firebase登录重定向异常求助：首次认证用户状态误判

Hey Steve, I see exactly what's going on here—let's break down the problem and fix it step by step.

What's Causing the Flicker & Null User Blip? #

Your current code has two key issues creating that weird "error message pops up then disappears" behavior:

1. You're attaching the onAuthStateChanged listener inside the login button's click handler
   Every time you click "Sign In", you add a new auth state listener. When the listener first runs right after clicking, Firebase hasn't finished processing the login request yet, so user is still null—that's why your error text shows up. Then, once the login succeeds, the listener fires again with a valid user, hiding the error message. Over time, this will also create duplicate listeners that cause unexpected behavior.
2. You're using auth state null as a "login failed" indicator
   A null user doesn't always mean a failed login—it's also the default state when the page first loads, before any auth action happens. Your current code treats both cases the same, which is incorrect.

The Fixed Code #

Let's restructure your code to fix these issues:

// Initialize auth state listener ONCE when the page loads, not on every button click
firebase.auth().onAuthStateChanged(function(user) {
  var wrongEmail = document.getElementById('incorrectEmail');
  if(user) {
    console.log("User is logged in—redirecting");
    wrongEmail.style.display = "none";
    // window.location.href = "dashboard.html";
  } else {
    console.log("User is not logged in (initial state or signed out)");
    // Don't show the error message here—only show it on login failure
    wrongEmail.style.display = "none";
  }
});

// Handle login button click separately
document.getElementById('signinSubmit').addEventListener('click', function() {
  var signinEmail = document.getElementById('inputEmail').value;
  var signinPassword = document.getElementById('inputPassword').value;
  var wrongEmail = document.getElementById('incorrectEmail');

  // Reset error message before attempting login
  wrongEmail.style.display = "none";

  firebase.auth().signInWithEmailAndPassword(signinEmail, signinPassword)
    .catch(function(error) {
      // Only show the error message IF the login request fails
      var errorCode = error.code;
      var errorMessage = error.message;
      console.log("Failed login + REASON: " + errorMessage + " CODE: " + errorCode);
      wrongEmail.style.display = "block";
    });
});

Key Changes Explained #

• Moved onAuthStateChanged outside the click handler: This listener runs once when the page loads, and only fires when the auth state actually changes (like when a user logs in/out). No more duplicate listeners, and it won't trigger a false "null user" state right after clicking login.
• Separated login failure handling: The error message now only shows up when signInWithEmailAndPassword throws an error (i.e., invalid credentials, network issues, etc.). The initial "user is null" state (before any login attempt) no longer triggers the error message.
• Reset error message on login attempt: We hide the error message before starting the login request, so old errors don't linger if the user tries again with correct credentials.

This should eliminate that annoying flicker and make your auth flow behave as expected.

内容的提问来源于stack exchange，提问作者Steve Li