如何访问Supabase访问令牌？Next.js13本地域Cookie读取问题求助

1. 修正Supabase客户端的Cookie配置 #

初始化Supabase客户端时，必须明确指定Cookie参数，确保开发环境下Cookie绑定到localhost：

// utils/supabase/server.ts 或 client.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    cookieOptions: {
      domain: process.env.NODE_ENV === 'development' ? 'localhost' : '你的生产域名',
      path: '/',
      secure: process.env.NODE_ENV === 'production', // 开发环境设为false，适配localhost的HTTP协议
      sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax',
      maxAge: 60 * 60 * 24 * 7, // 可选，设置Cookie有效期
    },
  },
});

同时前往Supabase控制台「设置」->「API」页面，将「站点URL」设为http://localhost:3000（开发环境），确保Supabase允许该域名的Cookie操作。

2. 正确在Next.js中间件中读取Cookie #

Next.js 13中间件运行在服务端，需通过Request对象的cookies方法读取，不能使用浏览器的document.cookie：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { supabase } from '@/utils/supabase/server';

export async function middleware(request: NextRequest) {
  // 读取Supabase的访问令牌Cookie
  const accessToken = request.cookies.get('sb-access-token')?.value;

  if (!accessToken) {
    // 未登录状态重定向到登录页
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // 可选：验证令牌有效性
  const { data: user, error } = await supabase.auth.getUser(accessToken);
  if (error || !user) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// 指定中间件作用路径（排除静态资源和API接口）
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

3. 清除旧Cookie并重新测试 #

浏览器可能缓存了之前域名不匹配的Cookie，先清除localhost相关的Cookie，重新登录生成新Cookie后再测试中间件读取逻辑。

4. HTTPS开发环境适配（可选） #

如果你的Next.js开发环境启用了HTTPS（如使用next dev --experimental-https），需将cookieOptions.secure设为true，同时Supabase控制台的站点URL改为https://localhost:3000。

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