next.js Firebase 錯誤（auth/operation-not-supported-in-this-environment）

Question

我已經部署了一個 vercel 托管的下一個應用程序，該應用程序具有適用於用戶的 firebase 身份驗證。 但是在“npm run build”階段神秘地出現了這個錯誤：

FirebaseError：Firebase：錯誤（auth/operation-not-supported-in-this-environment）。

和

代碼：'auth/operation-not-supported-in-this-environment'，customData：{}

  const provider = new GoogleAuthProvider()
  const auth = getAuth()

  const handleLogin = () => {
    signInWithRedirect(auth, provider)
      .then((result) => {
        console.log('with redirect: ' + result)
      })
      .catch((error) => {
        // Handle Errors here.
        console.log(error)
      })
  }
  getRedirectResult(auth)
    .then((result) => {
      // This gives you a Google Access Token. You can use it to access Google APIs.
      const credential = GoogleAuthProvider.credentialFromResult(result)
      const token = credential.accessToken

      // The signed-in user info.
      const user = result.user
      console.log(user)

    })
    .catch((error) => {
      // Handle Errors here.
      console.log(error)
      // ...
    })

這是驗證碼的核心。 我盡可能地貼近 firebase 文檔。

是否有與 next.js 或“授權域”firebase 相關的原因要求導致此構建/部署錯誤？

謝謝您的考慮。

獎金信息版本：

Firebase：9.8.4 下一個 Js：12.1.5

這就是我初始化firebase應用程序的方式。

const initMyFirebase = () => {
  if (!getApps().length) {
    const app = initializeApp(firebaseConfig)

    // creating auth for authentication
    const auth = getAuth(app)

const theme = extendTheme({ colors })

function MyApp({ Component, pageProps }) {
  initMyFirebase()
  return (
    <ChakraProvider theme={theme}>
      {/*// <ChakraProvider>*/}
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

Answer 1

我通過初始化 getAuth(app) 一次而不是多次，然后將其導出到我需要它的地方，為自己解決了這個問題。 我還停止在掛鈎中攜帶用戶身份驗證狀態，而是將整個應用程序包裝在 AuthContext 中。