Firebase auth/user-token-expired错误：React中更新邮箱密码失败求助

问题核心 #

更新用户邮箱或密码时触发auth/user-token-expired错误，尝试auth.currentUser.reload()和文档中的重新认证步骤未解决问题，根源在于以下几点：

• React组件重渲染导致auth.currentUser引用过时，未同步最新的认证状态
• 同时用Promise.all并行更新邮箱和密码，会因认证状态变化引发token冲突
• 重新认证的流程未正确执行（仅调用reload无效，必须通过用户凭证重新验证身份）

修复步骤 #

1. 重构Firebase工具函数，避免依赖全局auth.currentUser #

修改firebase.js中的函数，改为接收用户实例参数，确保操作使用的是最新的用户对象：

import { updateEmail, updatePassword } from "firebase/auth";

export const updateUserEmail = (user, newEmail) => {
  return updateEmail(user, newEmail);
};

export const updateUserPassword = (user, newPassword) => {
  return updatePassword(user, newPassword);
};

2. 在React组件中维护最新的用户状态 #

使用useState和onAuthStateChanged监听认证状态，避免使用过时的auth.currentUser引用：

import { useState, useEffect } from "react";
import { getAuth, onAuthStateChanged } from "firebase/auth";

const UpdateProfile = () => {
  const [currentUser, setCurrentUser] = useState(null);
  const auth = getAuth();

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
    return unsubscribe; // 组件卸载时取消监听
  }, [auth]);

  // 其他组件逻辑...
};

3. 正确实现重新认证+串行更新流程 #

更新邮箱/密码属于敏感操作，必须先让用户重新输入当前密码完成身份验证，再串行执行更新操作（避免并行操作导致的状态冲突）：

import { EmailAuthProvider } from "firebase/auth";
import { updateUserEmail, updateUserPassword } from "./firebase";

async function handleUpdateProfile() {
  setErrorMessage('');
  setIsLoading(true);

  // 基础校验：新密码一致性
  if (passwordInputRef.current.value !== confirmPasswordInputRef.current.value) {
    setErrorMessage('密码不匹配');
    setIsLoading(false);
    return;
  }

  if (!currentUser) {
    setErrorMessage('用户未登录');
    setIsLoading(false);
    return;
  }

  try {
    // 步骤1：重新认证用户（必须，解决token过期问题）
    const credential = EmailAuthProvider.credential(
      currentUser.email,
      currentPasswordRef.current.value // 新增的当前密码输入框
    );
    await currentUser.reauthenticateWithCredential(credential);

    // 步骤2：串行执行更新操作
    if (emailInputRef.current.value !== currentUser.email) {
      await updateUserEmail(currentUser, emailInputRef.current.value);
      await currentUser.reload(); // 更新邮箱后刷新用户信息
    }

    if (passwordInputRef.current.value.trim()) {
      await updateUserPassword(currentUser, passwordInputRef.current.value);
    }

    navigate('/');
  } catch (err) {
    console.error(err);
    // 根据错误码给出精准提示
    switch (err.code) {
      case 'auth/user-token-expired':
        setErrorMessage('登录状态已过期，请重新登录后再尝试');
        break;
      case 'auth/wrong-password':
        setErrorMessage('当前密码输入错误');
        break;
      default:
        setErrorMessage('无法更新你的资料');
    }
  } finally {
    setIsLoading(false);
  }
}

关键说明 #

• auth.currentUser.reload()仅能在token有效的情况下刷新用户信息，token过期时无法生效，必须通过reauthenticateWithCredential重新验证身份
• 并行更新邮箱和密码会导致认证状态冲突，因为更新邮箱会触发用户token变更，串行执行能保证每一步使用的都是最新的用户状态
• 维护React组件内的currentUser状态，能避免组件重渲染带来的引用过时问题

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