Next-Auth：在没有 getServerSideProps 的情况下使会话在 _app.js 可用

Question

使用 React.js 和 React-Auth 时，调用 getServerSideProps 等服务器端函数将阻止您通过 next export 导出项目。这是我的pages/_app.js的内容，我从文档(https://next-auth.js.org/getting-started/client and also https://github.com/nextauthjs/next-auth/issues/1210#issuecomment-782630909)复制了结构：

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    console.log(session), // -> undefined in server- and client-console
    <SessionProvider session={session}>
      {Component.auth ? (
        <Auth>
          <Component {...pageProps} />
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </SessionProvider>
  )
}

function Auth({ children }) {
  const { data: session, status, loading } = useSession({required: true})
  const isUser = !!session?.user 
  console.log(session)// -> undefined in server- but correct in client-console
  React.useEffect(() => {
      if (loading) return   // Do nothing while loading
      if (!isUser) signIn()
  }, [isUser, loading])

  if (isUser) {
    return children
  }

  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div>Loading...</div>
}

这里的问题是 session 在服务器端总是 undefined。每次成功登录后，我都会在回调将我带到所需的受保护页面后重定向到 signIn 页面。但是，我认为 useEffect 只会在客户端运行 - 因此我不确定为什么我会重定向到 signIn().

但是，请考虑以下文件 pages/index.js:

export default function Index() {
  const {data: session} = useSession();
  console.log(session); // -> will return actual session
  // session is always non-null inside this page, all the way down the React tree.
  return "Some super secret dashboard"
}

Index.auth = false // For testing, to avoid redirect to signIn

在这里我可以毫无问题地阅读会话（即使会话似乎一直在重新创建）。看来我必须找到一种方法将会话数据推送到 pageProps。否则每次（成功）登录后我都会被重定向到登录页面。

如果我将以下代码添加到 pages/index.js（在 page/_app.js 中不起作用），会话数据已正确添加到 pages/_app.js 中的 pageProps :

export async function getServerSideProps(ctx) {
  return {
    props: {
      session: await getSession(ctx)
    }
  }
}

将 session 添加到 pages/_app.js 中的 pageProps 而不使用像 getServerSideProps 这样的任何服务器端函数的最佳方法是什么？

Answer 1

useEffect-Hook 实际上有问题：

React.useEffect(() => {
    if (loading) return   // Do nothing while loading
    if (!isUser) signIn()
}, [isUser, loading])

loading 没有说实话。我这样修改了块：

React.useEffect(() => {
    if (status === 'loading') return   // Do nothing while loading
    if (!isUser) signIn()
}, [isUser, status])

登录现在按预期工作。

Next-Auth：在没有 getServerSideProps 的情况下使会话在 _app.js 可用

Next-Auth: Make Session Available In _app.js Without getServerSideProps

javascript

node.js

next.js

next-auth