React应用使用Firebase Auth创建用户时出现auth/timeout超时错误

核心错误原因 #

你当前的代码存在3个典型错误会触发auth/timeout异常：模拟器连接逻辑调用时机错误、创建用户接口入参类型错误、异步方法执行顺序错误，对应修复方案如下：

1. 修正Auth模拟器连接逻辑 #

connectAuthEmulator方法仅允许在auth实例初始化完成后调用一次，禁止在每次提交表单时重复调用，需要将该逻辑从handleSubmit中移除，移到你的入口文件index.js的Firebase初始化流程中：

// index.js 初始化Firebase App后立即执行
import { getAuth, connectAuthEmulator, setPersistence, inMemoryPersistence } from "firebase/auth";

const auth = getAuth(app);
// 仅开发环境连接模拟器
if (process.env.NODE_ENV === "development") {
  connectAuthEmulator(auth, "http://localhost:9099");
}
// 持久化设置也统一在初始化阶段完成
setPersistence(auth, inMemoryPersistence);

2. 修正创建用户接口的入参 #

你当前传给createUserWithEmailAndPassword的e.target.email、e.target.password是DOM元素对象，不是用户输入的内容，需要获取DOM的value属性拿到真实输入值，修改handleSubmit中的调用逻辑：

// 直接使用全局初始化好的auth实例即可，不需要重复getAuth
createUserWithEmailAndPassword(auth, e.target.email.value, e.target.password.value)

3. 验证模拟器运行状态 #

执行以下检查确认Auth模拟器正常工作：

• 运行firebase emulators:start后，控制台输出日志中存在✔ auth: Emulator started at http://localhost:9099标识
• 浏览器直接访问http://localhost:9099可以正常打开Auth模拟器的管理页面

4. 清理冗余代码 #

将handleSubmit方法中重复的getAuth、connectAuthEmulator、setPersistence代码全部删除，避免重复初始化导致的连接异常。

修改完成后重新测试即可正常在Auth模拟器中生成用户。

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