NextJS v13.4.3中useSession()始终返回undefined问题求助

你的核心问题是NextAuth的useSession钩子无法读取后端设置的JWT HttpOnly Cookie，导致返回的data始终为undefined或null，以下是具体排查方向和修复步骤：

1. 修正RootLayout的结构错误 #

你的RootLayout将AuthContext（即SessionProvider）包裹在了<html>标签外层，这不符合NextJS App Router的布局规则——RootLayout必须以<html>作为顶级元素。错误的层级会导致SessionProvider无法正确作用于客户端组件。

修改src/app/layout.tsx，将AuthContext移到<body>内部：

import '@styles/global.css';
import AuthContext from './auth/auth-context';

export const metadata = {
  title: 'myTitle',
  description: 'myDescription',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element {
  return (
    <html lang="en">
      <body>
        <AuthContext>
          <main>{children}</main>
        </AuthContext>
      </body>
    </html>
  );
}

2. 必须配置NextAuth的自定义认证路由 #

你缺少了NextAuth的核心配置文件，App Router下需要创建src/app/api/auth/[...nextauth]/route.ts，用于对接你的后端认证逻辑：

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions = {
  session: {
    // 使用JWT模式，适配你的后端JWT认证
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {},
      async authorize(credentials, req) {
        // 从请求中获取后端设置的JWT Cookie
        const jwtCookie = req.cookies["你的后端JWT Cookie名称"];
        
        if (!jwtCookie) {
          return null;
        }

        // 调用后端接口验证JWT的有效性，并获取用户信息
        const res = await fetch("你的后端验证JWT接口地址", {
          headers: {
            Authorization: `Bearer ${jwtCookie}`,
          },
        });

        const user = await res.json();

        if (res.ok && user) {
          // 返回用户信息，NextAuth会将其存入session
          return user;
        }
        return null;
      },
    }),
  ],
  // 自定义Cookie名称，匹配后端设置的Cookie键名
  cookies: {
    sessionToken: {
      name: "你的后端JWT Cookie名称",
      // 根据后端Cookie的配置设置domain、path、secure等属性
      domain: process.env.NEXT_PUBLIC_APP_DOMAIN,
      path: "/",
      secure: process.env.NODE_ENV === "production",
      httpOnly: true,
      sameSite: "lax",
    },
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

3. 检查Cookie的属性匹配度 #

确保后端设置的JWT Cookie的以下属性和前端/NextAuth配置一致：

• Name：必须和NextAuth配置中cookies.sessionToken.name完全一致
• Domain：如果前后端域名不同，需设置为共享的父域名（如.example.com）；本地开发时设为localhost
• Path：需设置为/，确保全站可访问
• Secure：生产环境必须设为true（仅HTTPS），开发环境可设为false
• SameSite：建议设为lax或strict，避免跨域Cookie问题

4. 完善useSession的状态判断 #

在客户端组件中，需同时监听status状态，避免在loading阶段误判session：

'use client';

import { useSession } from 'next-auth/react';

export default function Home() {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return <div>加载中...</div>;
  }

  if (status === "unauthenticated") {
    return <div>请登录</div>;
  }

  return (
    <div>
      HOME
      <p>{session?.user?.name}</p>
      <p>{session?.user?.email}</p>
    </div>
  );
}

5. 验证NextAuth API路由的可用性 #

访问http://localhost:3000/api/auth/session，查看返回结果：

• 如果返回{ "user": {...}, "expires": "..." }，说明session正常
• 如果返回{}或错误，说明NextAuth的authorize逻辑或Cookie读取存在问题，可在authorize函数中添加日志排查

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