Firebase邮箱认证后登录/注册无法即时重定向至主页

问题现象 #

登录/注册表单首次提交后，会被重定向回登录页，第二次提交才能正常跳转到主页。

核心原因 #

登录成功后立即调用navigate("/")，但此时Firebase的onAuthStateChanged还未完成用户状态更新，currentUser仍为未登录状态，导致PrivateRoute判定用户未认证，强制跳回登录页。

解决方案 #

1. 监听用户状态变化触发重定向 #

在ContextProvider中添加对currentUser的监听，当用户状态从无到有时，执行重定向操作：

const ContextProvider = ({ children }: { children: React.ReactNode }) => {
  const navigate = useNavigate();
  const [currentUser, setCurrentUser] = useState<firebase.User | undefined | null>(undefined);
  // ... 其他状态和方法

  // 新增：监听currentUser变化，登录/注册成功后重定向
  useEffect(() => {
    const currentPath = window.location.pathname;
    if (currentUser && (currentPath.includes("/sign-in") || currentPath.includes("/sign-up"))) {
      navigate("/");
    }
  }, [currentUser, navigate]);

  // ... 其他代码
};

2. 修正登录函数的异步错误处理 #

原handleLogIn中的try/catch无法捕获Promise错误，改用async/await确保错误被正确处理，并移除直接调用的navigate：

const handleLogIn = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  if (!/^[a-zA-Z\s].*@.*$/.test(logInValues.email)) {
    return setLogInError("邮箱格式不正确");
  }
  if (logInValues.password === "") {
    return setLogInError("密码不能为空");
  }
  
  try {
    setLogInError("");
    setLoading(true);
    // 等待登录请求完成
    await logIn(logInValues.email, logInValues.password);
  } catch (error) {
    setLogInError("登录失败，请检查账号密码");
    console.error(error);
  } finally {
    setLoading(false);
  }
};

3. 优化PrivateRoute的中间态处理 #

确保在用户状态未确定时（currentUser为undefined），显示加载组件而非直接跳转：

const PrivateRoute = () => {
  const currentUser = useContextSelector(ContextAPI, (v) => v?.currentUser);
  const loading = useContextSelector(ContextAPI, (v) => v?.loading);

  // 状态未确定时显示加载
  if (loading || currentUser === undefined) {
    return <div>加载中...</div>; // 可替换为自定义加载组件
  }

  return currentUser ? <Outlet /> : <Navigate to="/sign-in" />;
};

4. 注册场景同步处理 #

注册逻辑（handleRegister）需要做同样修改：

• 改用async/await等待注册完成
• 移除注册成功后直接调用的navigate，交给currentUser的监听useEffect处理

原理说明 #

通过监听Firebase的用户状态变化来触发重定向，确保currentUser状态已经更新后，PrivateRoute才能正确识别用户已登录，避免因状态更新滞后导致的错误跳转。

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