javascript 在Safari中运行应用程序时,Firebase Auth 'getRedirectResult'始终为空

dxxyhpgq  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(133)

我正在使用Firebase开发一个Web应用程序。我有一个问题,因为当我在Safari中运行应用程序时,Firebase Auth getRedirectResult总是null。
前端使用Next.js。
应用程序的正确行为如下所示
1.单击登录页面中的"登录Google"按钮后,您将被重定向到/auth-redirect?redirect_uri=onboarding

  1. getRedirectResult将为空,并使用signInWithRedirect进行身份验证
    1.身份验证提供程序通过Firebase回调/auth-redirect?redirect_uri=onboarding
  2. 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
zbq4xfa0

zbq4xfa01#

我被派往凡尔赛。
我已确认此方法工作正常。
https://github.com/firebase/firebase-js-sdk/issues/6716#issuecomment-1331981547

  • 反向代理设置(next.config.js)
/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,

  async rewrites() {
    return [
      {
        source: '/__/auth/:path*',
        destination: `https://${process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN}/__/auth/:path*`,
      },
    ]
  },
}
  • 将FirebaseApp初始化为应用程序的域时,已更改authDomain
  • 在GCP中,将批准的重定向URI更改为https://<the-domain-that-serves-my-app>/__/auth/handler

相关问题