firebase - 如何协调 Firebase Auth token 刷新与服务器端呈现

Question

我们在工作中的 Next.js 应用程序中使用 Firebase。我对两者都是新手，但我尽力阅读了两者。我的问题更多是 Firebase，而不是 Next.js。这是上下文:

• 在客户端应用程序中，我对我们的 API 进行了一些调用，在 Authorization header 中传递了 JWT(ID token )。 API 调用 admin.auth().verifyIdToken 来检查 ID token 是否足够新鲜。这很好用，因为我或多或少保证 ID token 会定期刷新(通过使用 onIDTokenChanged ( doc link )

• 现在我希望能够在服务器端呈现我的应用程序页面。为此，我将 ID token 存储在服务器可读的 cookie 中。但从现在开始，我无法保证下次用户通过整页加载来加载应用时 ID token 是否足够新鲜。

我找不到与 onIDTokenChanged 等效的服务器端。

这blog post提到 google API endpoint刷新 token 。我可以从服务器上访问它并给它一个刷新 token ，但感觉就像我完全走出了 Firebase 领域，我担心维护一个临时系统会是一个负担。

所以我的问题是，人们通常如何协调 Firebase 身份验证与 SSR？我错过了什么吗？

谢谢!

Answer 1

我最近遇到了同样的问题，我自己解决了。我创建了一个非常简单的页面，负责强制刷新 firebase token ，并将用户重定向回请求的页面。它是这样的:

• 在服务器端，从 cookie 中提取 token exp 值后检查它(如果您在该服务器上使用 firebase-admin，它可能会在验证后告诉您错误)

// Could be a handler like this
const handleTokenCookie = (context) => {
  try {
    const token = parseTokenFromCookie(context.req.headers.cookie)
    await verifyToken(token)
  } catch (err) {
    if (err.name === 'TokenExpired') {
      // If expired, user will be redirected to /refresh page, which will force a client-side
      // token refresh, and then redirect user back to the desired page
      const encodedPath = encodeURIComponent(context.req.url)
      context.res.writeHead(302, {
        // Note that encoding avoids URI problems, and `req.url` will also
        // keep any query params intact
        Location: `/refresh?redirect=${encodedPath}`
      })
      context.res.end()
    } else {
      // Other authorization errors...
    }
  }
}

这个处理程序可以在/pages 上使用，像这样

// /pages/any-page.js
export async function getServerSideProps (context) {
  const token = await handleTokenCookie(context)
  if (!token) {
    // Token is invalid! User is being redirected to /refresh page
    return {}
  }

  // Your code...
}

• 现在您需要创建一个简单的/refresh 页面，负责在客户端强制刷新 firebase token ，并且在更新 token 和 cookie 后，它应该将用户重定向回所需的页面.

// /pages/refresh.js

const Refresh = () => {
  // This hook is something like https://github.com/vercel/next.js/blob/canary/examples/with-firebase-authentication/utils/auth/useUser.js
  const { user } = useUser()
  React.useEffect(function forceTokenRefresh () {
    // You should also handle the case where currentUser is still being loaded

    currentUser
      .getIdToken(true) // true will force token refresh
      .then(() => {
        // Updates user cookie
        setUserCookie(currentUser)

        // Redirect back to where it was
        const decodedPath = window.decodeURIComponent(Router.query.redirect)
        Router.replace(decodedPath)
      })
      .catch(() => {
        // If any error happens on refresh, redirect to home
        Router.replace('/')
      })
  }, [currentUser])

  return (
    // Show a simple loading while refreshing token?
    <LoadingComponent />
  )
}

export default Refresh

当然如果token过期会延迟用户的第一次请求，但它保证了有效的token而不强制用户重新登录。