Zenn
Open4

nextjsにfirebaseのappCheckを導入

ebiyyebiyy

firebase cosole > appCheck > デバッグトークンを管理

トークンを生成し、名前をつけて、トークンを環境変数に設定。
このトークンはローカルでの開発用

ebiyyebiyy

下記のエラーが発生するため、 initializeAppCheck はクライアントが読み込まれた後に実行
document is not defined javascript error

// _app.tsx

  useEffect(() => {
    if (process.env.FIREBASE_APPCHECK_DEBUG_TOKEN) {
      window.FIREBASE_APPCHECK_DEBUG_TOKEN =
        process.env.FIREBASE_APPCHECK_DEBUG_TOKEN
    }
    initializeAppCheck(app, {
      provider: new ReCaptchaV3Provider(
        process.env.NEXT_PUBLIC_RECAPTCHA_KEY as string
      ),
      // Optional argument. If true, the SDK automatically refreshes App Check
      // tokens as needed.
      isTokenAutoRefreshEnabled: true,
    })
  }, [])