Firebase Auth模拟器间歇性抛出auth/emulator-config-failed错误求助

1. 连接时机延迟引发状态冲突
   你通过异步fetch检测模拟器后再调用connectAuthEmulator，这个延迟会导致Auth实例可能已经加载了本地持久化的用户登录会话。当长时间无请求后，Auth的自动令牌刷新机制启动，此时模拟器的WebSocket连接可能因闲置超时断开，或者刷新请求在模拟器连接未完全就绪时发起，从而触发auth/emulator-config-failed错误。而频繁请求时，WebSocket连接会被持续活跃的请求维持，不会触发超时。

2. HTTP检测的局限性
   fetch请求仅验证了Auth模拟器的HTTP服务是否可达，但Firebase Auth模拟器实际使用WebSocket进行实时通信。HTTP服务可用不代表WebSocket连接能稳定维持，尤其是闲置超过15秒后，模拟器或浏览器的WebSocket心跳机制可能断开连接，导致后续请求失败。

方案1：优先初始化模拟器连接，通过错误处理回退 #

开发环境下直接调用connectAuthEmulator，同时监听Auth的错误事件，捕获模拟器连接失败的情况，手动切换回云端服务：

import { initializeApp } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";

const app = initializeApp({ /** ... */ });
const auth = getAuth(app);

if (NODE_ENV === "development") {
  const authEmulatorUrl = "http://localhost:9099";
  // 直接尝试连接模拟器
  connectAuthEmulator(auth, authEmulatorUrl, { disableWarnings: true });
  
  // 监听模拟器连接失败错误，回退到云端
  auth.onAuthError((error) => {
    if (error.code === "auth/emulator-config-failed") {
      console.info("🔥 Firebase Auth: 模拟器连接失败，切换到云端服务");
      // 重置Auth实例配置，移除模拟器关联
      auth._settings = { ...auth._settings, emulator: undefined };
    }
  });
  
  console.info("🎮 Firebase Auth: 尝试连接模拟器");
}

export { auth };

方案2：禁用开发环境的Auth持久化 #

避免本地旧会话干扰模拟器连接，开发环境下设置Auth持久化为none，每次刷新都重新初始化：

import { initializeApp } from "firebase/app";
import { getAuth, connectAuthEmulator, setPersistence } from "firebase/auth";

const app = initializeApp({ /** ... */ });
const auth = getAuth(app);

if (NODE_ENV === "development") {
  // 禁用持久化，避免加载旧会话
  setPersistence(auth, "none").then(() => {
    const authEmulatorUrl = "http://localhost:9099";
    connectAuthEmulator(auth, authEmulatorUrl, { disableWarnings: true });
    console.info("🎮 Firebase Auth: 模拟器模式（无持久化）");
  }).catch(() => {
    console.info("🔥 Firebase Auth: 切换到云端服务");
  });
}

export { auth };

方案3：用WebSocket直接检测模拟器可用性 #

替换fetch为WebSocket连接检测，确保通信通道真正可用：

import { initializeApp } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";

const app = initializeApp({ /** ... */ });
const auth = getAuth(app);

if (NODE_ENV === "development") {
  (async () => {
    const authEmulatorUrl = "http://localhost:9099";
    // 转换为WebSocket地址
    const wsUrl = authEmulatorUrl.replace("http", "ws") + "/ws";
    
    await new Promise((resolve, reject) => {
      const ws = new WebSocket(wsUrl);
      ws.onopen = () => {
        ws.close();
        resolve();
      };
      ws.onerror = () => reject(new Error("模拟器不可用"));
    });
    
    connectAuthEmulator(auth, authEmulatorUrl, { disableWarnings: true });
    console.info("🎮 Firebase Auth: emulated");
  })().catch(() => {
    console.info("🔥 Firebase Auth: not emulated");
  });
}

export { auth };

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