会话在客户端未定义，尽管在 NextAuth.js v4 beta 中的服务器端可用
Posted
技术标签:
【中文标题】会话在客户端未定义，尽管在 NextAuth.js v4 beta 中的服务器端可用【英文标题】：Session undefined in client side although available in server side in 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"
【问题讨论】：
【参考方案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 ,
【讨论】：
以上是关于会话在客户端未定义，尽管在 NextAuth.js v4 beta 中的服务器端可用的主要内容，如果未能解决你的问题，请参考以下文章
在 Apollo Server 上下文中获取 NextAuth.js 用户会话