Next.js 14集成Supabase时signInWithPassword报401未授权错误排查

核心定位 #

大概率是会话Cookie的同步或存储逻辑出问题，不是Supabase本身的锅。Supabase控制台显示登录是因为服务端已经创建了会话，但你的网站请求接口时没带上有效的认证Cookie，才会触发/auth/v1/user的401错误。

常见问题及修复步骤 #

1. Cookie配置不匹配 #

• 先去Supabase项目设置里核对Site URL，必须和你的Next.js项目域名完全一致（本地开发要填http://localhost:3000，线上要填正式域名，注意http/https和端口），Cookie的SameSite、Domain规则完全依赖这个配置。
• 创建Supabase客户端时，要根据环境设置cookieOptions：本地开发时secure必须设为false（http协议下带secure标记的Cookie不会被浏览器存储），线上再开true：

  const supabase = createServerComponentClient({ cookies }, {
    cookieOptions: {
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'lax',
    },
  });
  

2. 会话读写逻辑错误 #

• 检查login/route.js：登录成功后必须用Supabase自带的setSession方法写入Cookie，不能手动操作Cookie。正确写法参考：

  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });
  if (error) throw error;
  // 必须调用这个方法同步会话到Cookie
  await supabase.auth.setSession(data.session);
  

• 检查auth/callback/route.js：回调时要完成exchangeCodeForSession，然后同步会话，再重定向，不能跳太早：

  const { data, error } = await supabase.auth.exchangeCodeForSession(code);
  if (error) throw error;
  await supabase.auth.setSession(data.session);
  // 确保会话写入后再跳转
  return NextResponse.redirect(new URL('/dashboard', request.url));
  

3. 客户端/服务端身份验证逻辑不一致 #

• 客户端组件里用createBrowserClient创建实例，必须开启会话持久化和自动刷新：

  const supabase = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      auth: {
        persistSession: true,
        autoRefreshToken: true,
      },
    }
  );
  

• 服务端组件必须用createServerComponentClient并传入cookies参数，不然读不到Cookie里的会话。

4. Next.js缓存干扰 #

• App Router默认会缓存服务端组件，如果你的认证逻辑在缓存组件里，可能读到旧的会话状态。给路由组件加export const dynamic = 'force-dynamic'强制禁用缓存。

快速验证手段 #

1. 登录成功后，打开浏览器开发者工具的Application > Cookies，检查有没有sb-access-token和sb-refresh-token两个Cookie，Domain和Path是否和你的项目域名匹配。
2. 在服务端组件和客户端组件里分别调用supabase.auth.getSession()并打印，对比两边的会话是否一致。

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