Nuxt 3集成Supabase Github OAuth遇500 auth session missing错误及卡顿

问题详情 #

在Nuxt 3中集成Supabase Github OAuth时，出现500 auth session missing错误，同时操作响应缓慢。引发问题的服务器中间件user.ts代码如下：

import { serverSupabaseUser } from "#supabase/server";
export default defineEventHandler(async (event) => {
  event.context.user = await serverSupabaseUser(event);
});

已确认客户端Cookie已传递至服务器，本地复现需在.env文件中配置SUPABASE_URL和SUPABASE_KEY。

解决方案 #

1. 修正Supabase模块配置 #

确保nuxt.config.ts中Supabase模块的cookie和回调配置正确：

export default defineNuxtConfig({
  modules: ["@nuxtjs/supabase"],
  supabase: {
    redirectOptions: {
      login: "/login",
      callback: "/auth/callback",
      exclude: [],
    },
    cookieOptions: {
      sameSite: "lax",
      secure: process.env.NODE_ENV === "production",
    },
  },
});

2. 给服务器中间件添加错误捕获 #

原中间件未处理认证失败的异常，导致直接抛出500错误，修改后捕获错误并将user设为null：

import { serverSupabaseUser } from "#supabase/server";
export default defineEventHandler(async (event) => {
  try {
    event.context.user = await serverSupabaseUser(event);
  } catch (err) {
    event.context.user = null;
  }
});

3. 核对OAuth回调配置 #

• 确认Supabase控制台中设置的回调URL与项目地址完全一致（本地开发需包含端口，如http://localhost:3000/auth/callback）
• 确保/auth/callback路由未被其他中间件或页面拦截

4. 排查Cookie传递有效性 #

在中间件中添加日志，确认请求头里的Cookie包含Supabase的sb-access-token和sb-refresh-token：

export default defineEventHandler(async (event) => {
  console.log("请求Cookie:", getRequestHeaders(event).cookie);
  try {
    event.context.user = await serverSupabaseUser(event);
  } catch (err) {
    console.error("认证错误:", err);
    event.context.user = null;
  }
});

若Cookie未正确传递，检查客户端Supabase初始化逻辑，确认登录后cookie已正确设置。

5. 优化响应缓慢问题 #

• 选择与开发/部署环境网络更接近的Supabase项目区域
• 避免在全局中间件中频繁调用serverSupabaseUser，仅在需要认证的路由中使用该中间件，或改用客户端的useSupabaseUser()方法

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