使用thirdweb Auth无法通过Firebase登录的问题排查

我克隆了仓库https://github.com/thirdweb-example/firebase-auth.git，配置好对应环境变量后在localhost:3001运行项目，点击“Sign in with Wallet”按钮无响应，同时出现三个错误，已确认Firebase初始化的环境变量配置正确（代码如下），其余代码未修改，请问为何会抛出这些错误？

export default function initializeFirebaseClient(): {
  db: Firestore;
  auth: Auth;
} {
  const firebaseApp = initializeApp({
    apiKey: process.env.NEXT_PUBLIC_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_APP_ID,
  });

  const db = getFirestore(firebaseApp);
  const auth = getAuth(firebaseApp);

  return {
    db,
    auth,
  };
}

可能的错误原因及解决方案 #

1. thirdweb 核心配置缺失 #

该仓库同时依赖thirdweb服务，仅配置Firebase环境变量不足以完成初始化：

• 检查项目根目录.env.local文件，是否添加了NEXT_PUBLIC_THIRDWEB_CLIENT_ID（需从thirdweb控制台获取）
• 确认_app.tsx中thirdweb客户端初始化是否正确，示例配置如下：

  import { ThirdwebProvider } from "@thirdweb-dev/react";
  import { Goerli } from "@thirdweb-dev/chains";
  
  function MyApp({ Component, pageProps }) {
    return (
      <ThirdwebProvider
        activeChain={Goerli}
        clientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
      >
        <Component {...pageProps} />
      </ThirdwebProvider>
    );
  }
  

2. 链配置与钱包网络不匹配 #

• 确认项目中ThirdwebProvider配置的链（如默认Goerli测试网）和你钱包当前连接的网络完全一致
• 若切换其他网络，需同步修改activeChain参数，并确保钱包切换到对应网络

3. Firebase Auth 登录方式未启用 #

即使Firebase初始化正确，仍需在控制台启用对应登录能力：

• 登录Firebase控制台，进入Authentication > Sign-in method
• 检查是否启用了自定义令牌认证或对应Web3相关的登录方式，同时确认http://localhost:3001已添加到Authorized domains列表

4. thirdweb 授权域名未配置 #

• 登录thirdweb控制台，将http://localhost:3001添加到项目的授权域名列表中，避免跨域或权限拦截问题

5. 依赖版本冲突 #

仓库可能依赖特定版本的thirdweb和Firebase包，尝试重新安装依赖：

rm -rf node_modules package-lock.json
npm install

或使用yarn：

rm -rf node_modules yarn.lock
yarn install

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