如何不使用firebaseui-web实现next-firebase-auth的firebase认证回调

问题根因 #

你的手动请求报错本质是axios.post传参顺序错误：axios.post方法的入参顺序是请求地址、请求体数据、请求配置，你把headers配置放在了第二个参数（请求体）的位置，导致请求实际没有携带Authorization头，才触发了接口返回的缺少授权头报错。

next-firebase-auth完全支持不依赖firebaseui-web实现自定义登录流程，完整实现方案如下： #

1. 修正登录函数代码 #

修改你的登录请求逻辑，把headers放到axios.post的第三个参数位置，登录成功后手动跳转对应firebaseui配置中signInSuccessWithAuthResult返回false的后续逻辑：

const result = await firebase.auth().signInWithPopup(provider)
const token = await result.user.getIdToken(true)
await axios.post('/api/login', {}, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
})
// 登录成功后跳转目标页，可根据需求替换为用户之前访问的页面地址
window.location.href = '/'

2. 现有配置复用说明 #

你提供的initAuth.js配置已经正确声明了loginAPIEndpoint参数，/pages/api/login的实现也符合官方要求，不需要额外调整。

3. 服务端获取用户信息验证 #

后续在需要SSR的页面中，直接使用next-firebase-auth提供的包装方法即可正常获取用户信息和ID令牌，示例如下：

import { AuthAction, withAuthUser, withAuthUserTokenSSR } from 'next-firebase-auth'

const SSRPage = ({ userData }) => {
  return <div>用户邮箱：{userData.email}</div>
}

export const getServerSideProps = withAuthUserTokenSSR({
  whenUnauthed: AuthAction.REDIRECT_TO_LOGIN,
})(async ({ AuthUser }) => {
  // 可以正常调用getIdToken获取最新令牌
  const idToken = await AuthUser.getIdToken()
  return {
    props: {
      userData: {
        id: AuthUser.id,
        email: AuthUser.email,
      }
    }
  }
})

export default withAuthUser()(SSRPage)

内容的提问来源于stack exchange，提问作者dragoreact