我正在使用Firebase开发一个Web应用程序。我有一个问题,因为当我在Safari中运行应用程序时,Firebase Auth getRedirectResult
总是null。
前端使用Next.js。
应用程序的正确行为如下所示
1.单击登录页面中的"登录Google"按钮后,您将被重定向到/auth-redirect?redirect_uri=onboarding
getRedirectResult
将为空,并使用signInWithRedirect
进行身份验证
1.身份验证提供程序通过Firebase回调/auth-redirect?redirect_uri=onboarding
。getRedirectResult
变为非空值并移至redirect_uri
我期待上述行为,但当使用Safari时,getRedirectResult
的结果仍然是null
为4。当使用chrome时,它是非空的。auth-redirect
的实现方式如下。
import { NextPage } from 'next'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as firebaseAuth from 'firebase/auth'
import Layout from '../components/Layout'
import { auth } from '../lib/firebase'
const redirectableWhiteList = ['', 'onboarding']
const AuthRedirectPage: NextPage = () => {
const router = useRouter()
useEffect(() => {
if (!router.isReady) {
return
}
;(async () => {
const result = await firebaseAuth.getRedirectResult(auth)
if (result == null) {
await firebaseAuth
.signInWithRedirect(auth, new firebaseAuth.GoogleAuthProvider())
.catch((error) => {
console.log(error)
})
} else {
const redirectUri = router.query['redirect_uri'] as string | undefined
if (redirectableWhiteList.includes(redirectUri)) {
router.push(redirectUri)
} else {
router.push(redirectUri || '/')
}
}
})()
}, [router, router.isReady])
return (
<Layout>
<div className='text-center'>
<div className='row justify-content-center'>
<h1>Loading</h1>
</div>
</div>
</Layout>
)
}
export default AuthRedirectPage
为什么使用Safari时const result = await firebaseAuth.getRedirectResult(auth)
为null?
当我在Web检查器中查看日志时,我看到只有在使用Safari WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: WebSocket is closed due to suspension.
时才会出现错误,但由于它是HMR,我不认为有问题。
我不知道该考虑什么,所以我很感激你的建议。
我的环境
- Safari版本:第十六章二节(18614.3.7.1.5)
- Chrome版本:109.0.5414.87(正式构建)(臂64)
- 下一版本:13.0.6
- Firebase 版本:9.8.1
1条答案
按热度按时间zbq4xfa01#
我被派往凡尔赛。
我已确认此方法工作正常。
https://github.com/firebase/firebase-js-sdk/issues/6716#issuecomment-1331981547
https://<the-domain-that-serves-my-app>/__/auth/handler
。