React中使用reCAPTCHA Enterprise解决auth/firebase-app-check-token-is-invalid错误

以下是针对你遇到的问题的具体排查和解决步骤：

1. 确保Firebase App和App Check仅初始化一次 #

你的当前代码中，app()函数每次调用都会创建新的Firebase App实例和App Check实例，这会导致Auth服务无法关联到正确的App Check会话。改成单例模式保证全局只初始化一次：

import { initializeApp } from "firebase/app";
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";
import { getAuth } from "firebase/auth";

const firebaseConfig = { /* 你的Firebase配置 */ };
let appInstance = null;

export const getFirebaseApp = () => {
  if (!appInstance) {
    appInstance = initializeApp(firebaseConfig);
    // 初始化App Check
    initializeAppCheck(appInstance, {
      provider: new ReCaptchaV3Provider('你的reCAPTCHA Enterprise站点密钥'),
      isTokenAutoRefreshEnabled: true
    });
  }
  return appInstance;
};

// 全局复用同一个Auth实例
export const auth = getAuth(getFirebaseApp());

然后修改登录函数，直接使用这个全局Auth实例：

export async function firebaseLogin(email, password, success, needOtp, errorCallback) {
  signInWithEmailAndPassword(auth, email, password)
    .then((user) => {
      success(user)
    })
    .catch((error) => {
      console.error("登录错误:", error);
      if (errorCallback) errorCallback(error);
    })
}

2. 验证reCAPTCHA Enterprise配置正确性 #

• 确认Firebase控制台的App Check设置中，你选择的是reCAPTCHA Enterprise提供商，而非普通reCAPTCHA v3，两者不能混用。
• 检查站点密钥是否完全匹配Google Cloud Console中生成的reCAPTCHA Enterprise站点密钥，无多余空格或字符。
• 在Google Cloud Console的reCAPTCHA Enterprise配置页，确保你的应用域名（包括本地开发的localhost:端口）已添加到允许列表中；同时Firebase控制台的App Check应用注册页的域名也要保持一致。

3. 检查App Check令牌获取状态 #

在初始化后添加调试代码，确认App Check能正常获取令牌：

import { getToken, getAppCheck } from "firebase/app-check";
import { getFirebaseApp } from "./你的初始化文件路径";

const app = getFirebaseApp();
const appCheck = getAppCheck(app);

getToken(appCheck, false).then(token => {
  console.log("App Check令牌获取成功:", token);
}).catch(err => {
  console.error("App Check令牌获取失败:", err);
});

如果令牌获取失败，优先解决这个问题（通常是reCAPTCHA配置或域名权限问题），再测试登录。

4. 确保Firebase SDK版本兼容 #

检查package.json中所有Firebase相关依赖的版本是否一致，避免版本差异导致的兼容性问题，例如：

{
  "dependencies": {
    "firebase": "^9.23.0",
    // 若分开安装依赖，需保证版本统一
    "@firebase/app": "^9.23.0",
    "@firebase/app-check": "^9.23.0",
    "@firebase/auth": "^9.23.0"
  }
}

5. 确认Firebase项目的App Check保护设置 #

在Firebase控制台的App Check页面，确保Authentication服务已被纳入App Check保护范围（默认是全局保护所有服务，但需确认未被手动排除）。

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