会话在客户端未定义，尽管在 NextAuth.js v4 beta 中的服务器端可用答案

【问题标题】：Session undefined in client side although available in server side in NextAuth.js v4 beta会话在客户端未定义，尽管在 NextAuth.js v4 beta 中的服务器端可用
【发布时间】：2022-01-02 15:38:32
【问题描述】：

我正在使用NextAuth.js v4 beta 版本来设置服务器端渲染并通过道具添加会话。

session 数据从index.js 文件中的getServerSideProps 函数获得控制台记录，但是，session 的客户端控制台日志结果为undefined。

这里可能是什么问题？我该如何解决这个问题？

_app.js 代码：

import { SessionProvider } from "next-auth/react"

export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}) {
  return (
    <SessionProvider session={session} refetchInterval={5 * 60}>
      <Component {...pageProps} />
    </SessionProvider>
  )
}

[...nextauth].js代码：

import NextAuth from "next-auth"
import GoogleProvider from "next-auth/providers/google"
import { PrismaAdapter } from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.SECRET,
})

index.js代码：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { signIn, signOut, getSession } from 'next-auth/react'

export default function Home({session}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs</title>
        <meta name="description" content="Nextjs" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {!session && (
          <>
            <h1>
              Nextjs
            </h1>
            <h2 className={styles.subheader}>
              You're not logged in
            </h2>
            <br />
            <button onClick={() => signIn("google")}>Sign In</button>
          </>
        )}
        {session && (
          <>
            <h1>
              Dashboard
            </h1>
            <h2 className={styles.subheader}>
              Signed in as {session.user.email}
            </h2>
            <br />
            <button onClick={signOut}>Sign Out</button>
          </>
        )}
      </main>
    </div>
  )
}


export async function getServerSideProps(ctx) {
  const session = await getSession(ctx)
  return {
    props: { session },
  }
}]

这是我的dependencies：

"@next-auth/prisma-adapter": "^0.5.2-next.19",
"@prisma/client": "^3.5.0",
"next": "12.0.4",
"next-auth": "^4.0.0-beta.7",
"react": "17.0.2",
"react-dom": "17.0.2"

【问题讨论】：

标签： reactjs next.js prisma next-auth

【解决方案1】：

这似乎有效：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { signIn, signOut, getSession } from 'next-auth/react'

export default function Home({user}) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Nextjs</title>
        <meta name="description" content="Nextjs" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {!user && (
          <>
            <h1>
              Nextjs
            </h1>
            <h2 className={styles.subheader}>
              You're not logged in
            </h2>
            <br />
            <button onClick={() => signIn("google")}>Sign In</button>
          </>
        )}
        {user && (
          <>
            <h1>
              Dashboard
            </h1>
            <h2 className={styles.subheader}>
              Signed in as {user.email}
            </h2>
            <br />
            <button onClick={signOut}>Sign Out</button>
          </>
        )}
      </main>
    </div>
  )
}


export async function getServerSideProps(ctx) {
  const session = await getSession(ctx)
  if (!session) {
    return {
      props: {}
    }
  }
  const { user } = session;
  return {
    props: { user },
  }
}

【讨论】：