[英]next.js Firebase Error (auth/operation-not-supported-in-this-environment)
I have deployed a vercel hosted next app with firebase authentication that works for users.我已经部署了一个 vercel 托管的下一个应用程序,该应用程序具有适用于用户的 firebase 身份验证。 But mysteriously during the "npm run build" phase this error pops up:但是在“npm run build”阶段神秘地出现了这个错误:
FirebaseError: Firebase: Error (auth/operation-not-supported-in-this-environment). FirebaseError:Firebase:错误(auth/operation-not-supported-in-this-environment)。
and和
code: 'auth/operation-not-supported-in-this-environment', customData: {}代码:'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.我尽可能地贴近 firebase 文档。
Is there a reason related to next.js or the "Authorized Domains" firebase requires that this build/deployment error is being caused?是否有与 next.js 或“授权域”firebase 相关的原因要求导致此构建/部署错误?
Thank you for your consideration.谢谢您的考虑。
Bonus Info Versions:奖金信息版本:
Firebase: 9.8.4 Next Js: 12.1.5 Firebase:9.8.4 下一个 Js:12.1.5
This is how I'm initializing the firebase app.这就是我初始化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>
)
}
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.我通过初始化 getAuth(app) 一次而不是多次,然后将其导出到我需要它的地方,为自己解决了这个问题。 I also stopped carrying user auth state in a hook and instead wrapped my entire application in an AuthContext.我还停止在挂钩中携带用户身份验证状态,而是将整个应用程序包装在 AuthContext 中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.