NextJS13 /app目录下getServerSession可用但useSession无返回的问题

1. 修正Database策略下的Session回调逻辑 #

Database策略模式中，session回调的token参数为undefined，当前代码直接将session.user赋值为user，缺少客户端关联所需的标识信息。修改回调逻辑：

async session({ session, user }) {
  // 注入用户唯一标识，确保客户端能匹配到对应会话
  session.user.id = user.id;
  // 合并用户完整信息到session
  session.user = { ...session.user, ...user };
  return session;
}

2. 根布局中正确配置SessionProvider #

在app/layout.tsx（根布局文件）中，必须用客户端组件包裹SessionProvider，确保全局会话上下文生效：

// app/layout.tsx
import { SessionProvider } from "next-auth/react";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <SessionProvider>{children}</SessionProvider>
      </body>
    </html>
  );
}

3. 调整Middleware的配置（适配Database策略） #

Database策略下，Middleware需要读取数据库会话，不能直接导出默认的next-auth/middleware，需显式关联authOptions：

// middleware.ts
import { withAuth } from "next-auth/middleware";
import { authOptions } from "./app/api/auth/[...nextauth]/route";

export default withAuth({
  callbacks: {
    authorized({ token, req }) {
      // 自定义授权逻辑，校验会话有效性
      return !!token;
    },
  },
  ...authOptions,
});

export const config = {
  matcher: ['/profile']
};

4. 客户端组件规范使用useSession #

确保客户端组件添加'use client'指令，并处理会话加载状态：

'use client';

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

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

  if (status === "loading") return <div>加载中...</div>;
  if (!session) return <div>请先登录</div>;

  return <div>欢迎，{session.user.name}</div>;
}

关键排查点 #

• 确认supabase适配器配置正确，数据库sessions表存在有效会话数据
• 检查/api/auth/[...nextauth]/route.ts是否正确导出authOptions并配置了supabase适配器
• 查看浏览器Cookie，确认存在next-auth.session-token或next-auth.callback-url，确保Cookie正常存储

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