Next.js 13 + Supabase：解决next-auth会话持久化与登录异常问题

1. 解决存储警告问题 #

控制台警告的核心是NextAuth客户端缺少会话持久化的存储配置，可通过以下两种方式处理：

选项A：启用会话持久化并配置存储（推荐） #

若需要会话在页面刷新后保留，需确保NextAuth能访问浏览器存储，并在配置中明确会话策略：

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import SupabaseProvider from "next-auth/providers/supabase";
import { createClient } from "@supabase/supabase-js";

export const authOptions = {
  providers: [
    SupabaseProvider({
      clientId: process.env.NEXT_PUBLIC_SUPABASE_CLIENT_ID!,
      clientSecret: process.env.SUPABASE_SERVICE_ROLE_KEY!,
      url: process.env.NEXT_PUBLIC_SUPABASE_URL!,
    }),
  ],
  session: {
    strategy: "jwt", // 使用JWT策略无需数据库存储会话
    maxAge: 24 * 60 * 60, // 会话有效期1天
  },
  jwt: {
    secret: process.env.NEXTAUTH_SECRET!,
  },
  callbacks: {
    async session({ session, token }) {
      // 同步用户ID到会话对象，方便后续使用
      session.user.id = token.sub;
      return session;
    },
  },
};

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

同时，在客户端组件中需声明'use client'以确保能访问浏览器localStorage：

'use client';

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

export function UserProfile() {
  const { data: session } = useSession();
  // 渲染用户信息或登录状态
}

选项B：禁用会话持久化（仅测试场景） #

若无需会话持久化，可在useSession钩子中关闭该功能：

'use client';

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

export function TemporaryAuthComponent() {
  const { data: session } = useSession({ persistSession: false });
  // ...
}

2. 解决SessionRequired异常（存在会话却返回错误） #

该问题多因客户端与服务端会话不同步或验证逻辑错误导致，可按以下步骤排查：

（1）服务端会话获取需用getServerSession #

在Server Components或API路由中，必须使用服务端方法获取会话，不能直接调用客户端钩子：

// app/protected/page.tsx
import { getServerSession } from "next-auth/next";
import { authOptions } from "../api/auth/[...nextauth]/route";
import { redirect } from "next/navigation";

export default async function ProtectedPage() {
  const session = await getServerSession(authOptions);
  if (!session) redirect("/login");
  
  return <div>仅登录用户可见内容</div>;
}

（2）同步NextAuth与Supabase会话 #

若同时使用NextAuth和Supabase Auth，需在登录回调中同步两者会话：

// 在authOptions的callbacks中添加signIn回调
callbacks: {
  async signIn({ account }) {
    if (account.provider === "supabase") {
      const supabase = createClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
      );
      // 将NextAuth返回的凭证同步到Supabase
      await supabase.auth.setSession({
        access_token: account.access_token!,
        refresh_token: account.refresh_token!,
      });
    }
    return true;
  },
  // ...其他回调
}

（3）清除旧会话缓存 #

浏览器缓存的过期会话可能导致冲突，可手动清除浏览器的localStorage和Cookie，重新登录测试。

（4）检查环境变量配置 #

确保以下环境变量已正确设置：

• NEXTAUTH_SECRET：NextAuth加密会话的密钥
• NEXT_PUBLIC_SUPABASE_URL、NEXT_PUBLIC_SUPABASE_ANON_KEY：Supabase公开配置
• SUPABASE_SERVICE_ROLE_KEY：Supabase服务端密钥（用于NextAuth provider验证）

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