next.js Firebase Error (auth/operation-not-supported-in-this-environment)

Question

I have deployed a vercel hosted next app with firebase authentication that works for users. But mysteriously during the "npm run build" phase this error pops up:

FirebaseError: Firebase: Error (auth/operation-not-supported-in-this-environment).

and

code: '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)
      // ...
    })

This is the meat of the authentication code. I stuck as closely as I could to the firebase docs.

Is there a reason related to next.js or the "Authorized Domains" firebase requires that this build/deployment error is being caused?

Thank you for your consideration.

Bonus Info Versions:

Firebase: 9.8.4 Next Js: 12.1.5

This is how I'm initializing the firebase app.

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

I fixed this for myself by initializing getAuth(app) just the once instead of multiple times and then exporting it to the places I needed it. I also stopped carrying user auth state in a hook and instead wrapped my entire application in an AuthContext.