SvelteKit与Supabase服务端认证：无法创建带Token的Cookie

问题原因 #

服务端环境下，直接使用客户端Supabase实例登录时，Supabase无法自动将认证Token写入浏览器Cookie——客户端实例默认依赖浏览器的localStorage，而服务端需要手动通过响应头处理Cookie存储。

解决方案 #

使用Supabase提供的服务端专用客户端，结合SvelteKit的cookies API手动处理认证会话的Cookie存储：

1. 安装Supabase SSR依赖（未安装则执行） #

npm install @supabase/ssr

2. 修改src/routes/login/+page.server.ts代码 #

import { createServerClient } from '@supabase/ssr';
import { redirect } from '@sveltejs/kit';
import type { Actions } from './$types';
import type { Database } from '$lib/types/database.types';

export const actions: Actions = {
  'login-with-password': async ({ request, cookies }) => {
    const formData = await request.formData();
    const email = formData.get('email') as string;
    const password = formData.get('password') as string;

    // 创建绑定cookies上下文的服务端Supabase实例
    const supabase = createServerClient<Database>(
      import.meta.env.VITE_SUPABASE_URL,
      import.meta.env.VITE_SUPABASE_ANON_KEY,
      {
        cookies: {
          get: (key) => cookies.get(key),
          set: (key, value, options) => cookies.set(key, value, options),
          remove: (key, options) => cookies.delete(key, options)
        }
      }
    );

    const { data, error } = await supabase.auth.signInWithPassword({ email, password });

    if (error) {
      return { error: error.message };
    }

    // 登录成功后，Supabase会自动通过cookies API设置认证Cookie
    throw redirect(302, '/');
  }
};

关键说明 #

• createServerClient是Supabase专为服务端环境设计的客户端，通过传入的cookies对象操作浏览器Cookie，替代客户端的localStorage存储逻辑。
• 必须传入SvelteKit action中的cookies参数，让Supabase能在服务端生成并返回认证Cookie。
• 无需手动编写Cookie写入逻辑，signInWithPassword成功后，Supabase会自动完成Cookie的设置。

额外检查项 #

• 确认.env文件中VITE_SUPABASE_URL和VITE_SUPABASE_ANON_KEY配置正确。
• 检查hooks.server.ts中是否存在覆盖或清除Cookie的逻辑（若有配置）。

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