2 篇博文含有标签「Supabase」

绕过 Supabase Auth 实现 Playwright E2E 测试免登录

2026年3月19日 · 阅读需 4 分钟

在为客户构建 AI Agent SaaS 平台时遇到此问题，记录根因与解法。

TL;DR

E2E 测试不应该依赖真实的 OAuth 登录流程。通过在 useAuth hook 中检测 localStorage 的测试标记，直接注入 mock 认证状态，跳过 Supabase 初始化。同时将 Zustand store 的 loading 默认值改为 false，避免 AuthGuard 卡在无限 spinner。

问题现象

使用 Playwright 测试 React SPA 时，页面被 AuthGuard 组件保护，需要 Supabase 认证才能访问。测试启动后，页面一直显示 loading spinner，无法进入业务流程。

// AuthGuard 组件 - 测试时卡在这里
export function AuthGuard({ children }: AuthGuardProps) {
  const { isAuthenticated, loading } = useAuth()

  if (loading) {
    return <Spinner />  // 永远显示 spinner
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" />
  }

  return <>{children}</>
}

测试代码尝试模拟登录，但 Supabase Auth SDK 内部状态无法通过简单的 API mock 控制。

根因

1. Supabase Auth 是异步初始化的

useAuth hook 在 useEffect 中调用 supabase.auth.getSession()，这是异步操作。测试环境下网络请求可能失败或超时，导致状态永远停留在 loading: true。

2. Zustand Store 的默认值问题

// authStore.ts - 问题代码
export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      loading: true,  // 👈 默认值是 true
      // ...
    }),
    { name: 'auth-storage' }
  )
)

测试启动时，loading: true + 异步初始化失败 = 永远 loading。

3. OAuth 流程无法自动化

即使能 mock API，OAuth 的重定向流程需要真实浏览器交互，E2E 测试无法可靠模拟。

解决方案

步骤 1：在 useAuth hook 中添加测试模式检测

// hooks/useAuth.ts
export function useAuth() {
  const { user, token, loading, setUser, setToken, setLoading } = useAuthStore()

  useEffect(() => {
    const initAuth = async () => {
      // 👇 优先检测测试模式
      const testAuthUser = localStorage.getItem('test-auth-user')
      const testAuthToken = localStorage.getItem('test-auth-token')

      if (testAuthUser && testAuthToken) {
        try {
          const userData = JSON.parse(testAuthUser) as User
          setUser(userData)
          setToken(testAuthToken)
          setLoading(false)
          console.log('[useAuth] Using test mode auth')
          return  // 👈 直接返回，跳过 Supabase 初始化
        } catch (e) {
          console.error('Failed to parse test auth user:', e)
        }
      }

      // 👇 正常模式：走 Supabase Auth
      try {
        const { data: { session } } = await supabase.auth.getSession()
        if (session) {
          setUser(session.user as User)
          setToken(session.access_token)
        }
      } catch (error) {
        console.error('Auth init failed:', error)
      } finally {
        setLoading(false)
      }
    }

    initAuth()

    // 👇 测试模式下跳过 auth state listener
    if (localStorage.getItem('test-auth-user')) {
      return
    }

    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        // ... 正常的 auth state 处理
      }
    )

    return () => subscription.unsubscribe()
  }, [])
}

步骤 2：修改 Zustand Store 默认值

// stores/authStore.ts
export const useAuthStore = create<AuthState>()(
  persist(
    (set) => ({
      user: null,
      token: null,
      loading: false,  // 👈 改为 false，让 useAuth hook 控制状态
      setUser: (user) => set({ user }),
      setToken: (token) => set({ token }),
      setLoading: (loading) => set({ loading }),
      logout: () => set({ user: null, token: null, loading: false }),
    }),
    {
      name: 'auth-storage',
      partialize: (state) => ({ user: state.user, token: state.token }),
    }
  )
)

步骤 3：在 Playwright Fixture 中注入测试认证

// e2e/fixtures.ts
import { test as base } from '@playwright/test'

export const mockUser = {
  id: 'test-user-id',
  email: 'test@example.com',
  created_at: '2024-01-01T00:00:00Z',
}

export const test = base.extend({
  authenticatedPage: async ({ page }, use) => {
    // 先访问页面以设置 localStorage 的 origin
    await page.goto('/login')

    // 👇 注入测试认证状态到 localStorage
    await page.evaluate(
      ({ user, token }) => {
        localStorage.setItem('test-auth-user', JSON.stringify(user))
        localStorage.setItem('test-auth-token', token)
      },
      { user: mockUser, token: 'mock-access-token' }
    )

    // 导航到受保护页面，useAuth 会检测到测试模式
    await page.goto('/dashboard')

    await use(page)
  },
})

步骤 4：在测试中使用

// e2e/dashboard.spec.ts
import { test, expect } from './fixtures'

test('dashboard shows user agents', async ({ authenticatedPage }) => {
  // authenticatedPage 已经通过认证，无需登录
  await expect(authenticatedPage.getByText('Test Agent')).toBeVisible()
})

完整代码结构

agent-frontend/
├── e2e/
│   ├── fixtures.ts          # Playwright fixture + mock 数据
│   ├── dashboard.spec.ts    # 测试用例
│   └── ...
├── src/
│   ├── hooks/
│   │   └── useAuth.ts       # 测试模式检测
│   └── stores/
│       └── authStore.ts     # loading: false 默认值
└── playwright.config.ts

关键要点

测试模式 key 使用特殊前缀：test-auth-* 不会在生产环境中出现
检测优先于初始化：先检查 localStorage，再走 Supabase Auth
跳过 auth listener：测试模式下不需要监听 auth state 变化
loading 默认值改为 false：让 hook 显式控制 loading 状态

对类似需求感兴趣？联系合作

集成 Supabase Auth 到 FastAPI 的三个坑

2026年3月14日 · 阅读需 4 分钟

CCLEE

在为客户构建 SaaS 认证系统时遇到此问题，记录根因与解法。

TL;DR

Supabase Auth + FastAPI 集成有三个常见坑：JWKS 路径不是标准路径、ES256 签名需转换为 DER 格式、用户首次登录时本地数据库无记录。本文提供完整解决方案。

问题现象

坑 1：JWKS 路径 404

GET https://xxx.supabase.co/.well-known/jwks.json
# 404 Not Found

所有 JWT 验证请求返回 401 Invalid Token。

坑 2：ES256 签名验证失败

from jose import jwt
payload = jwt.decode(token, key, algorithms=["ES256"])
# JWTError: Signature verification failed

明明公钥是对的，但签名验证总是失败。

坑 3：用户首次登录无本地记录

# 创建 Agent 时
agent = Agent(user_id=current_user["user_id"], ...)
db.add(agent)
# ForeignKeyViolation: user_id 不存在

Supabase Auth 用户通过了 JWT 验证，但本地 agent_users 表没有该用户记录。

根因

坑 1：Supabase 非标准 JWKS 路径

标准 OAuth/OIDC 服务器 JWKS 在 /.well-known/jwks.json，但 Supabase 把认证服务放在 /auth/v1/ 子路径下：

标准路径	Supabase 路径
`/.well-known/jwks.json`	`/auth/v1/.well-known/jwks.json`

坑 2：ES256 原始签名 vs DER 格式

Supabase JWT 使用 ES256（P-256 曲线）签名。JWT 中的签名是 raw 格式（r || s 拼接，64 字节），但 Python cryptography 库的 verify() 方法需要 DER-encoded ASN.1 格式。

Raw:     r (32 bytes) || s (32 bytes) = 64 bytes
DER:     0x30 <len> 0x02 <r_len> <r> 0x02 <s_len> <s>

python-jose 的 jwt.decode() 在处理 ES256 时有兼容性问题，需要手动验证签名。

坑 3：认证与数据分离

Supabase Auth 是独立服务，用户注册/登录后只存在于 Supabase 的 auth.users 表。本地数据库的 agent_users 表需要手动同步。

解决方案

1. 正确的 JWKS URL

# config.py
class Settings(BaseSettings):
    supabase_url: str = "https://xxx.supabase.co"

    @property
    def jwks_url(self) -> str:
        # 关键：/auth/v1/ 前缀
        return f"{self.supabase_url}/auth/v1/.well-known/jwks.json"

2. ES256 签名验证（完整代码）

import json
import base64
from cryptography.hazmat.primitives.asymmetric import ec
from cryptography.hazmat.primitives import hashes
from cryptography.hazmat.backends import default_backend
from cryptography.hazmat.primitives.asymmetric.utils import encode_dss_signature

def _base64url_decode(data: str) -> bytes:
    """Base64url 解码，自动补 padding"""
    rem = len(data) % 4
    if rem > 0:
        data += "=" * (4 - rem)
    return base64.urlsafe_b64decode(data)

def _raw_to_der_signature(raw_sig: bytes) -> bytes:
    """将 raw ECDSA 签名 (r||s) 转为 DER 格式"""
    # P-256: r 和 s 各 32 字节
    r = int.from_bytes(raw_sig[:32], "big")
    s = int.from_bytes(raw_sig[32:], "big")
    return encode_dss_signature(r, s)

def verify_es256_signature(token: str, public_key_jwk: dict) -> dict:
    """验证 ES256 JWT 签名，返回 payload"""
    parts = token.split(".")
    if len(parts) != 3:
        raise ValueError("Invalid JWT format")

    header_b64, payload_b64, signature_b64 = parts

    # 1. 构建 EC 公钥
    x = _base64url_decode(public_key_jwk["x"])
    y = _base64url_decode(public_key_jwk["y"])
    x_int = int.from_bytes(x, "big")
    y_int = int.from_bytes(y, "big")

    public_key = ec.EllipticCurvePublicNumbers(
        x_int, y_int, ec.SECP256R1()
    ).public_key(default_backend())

    # 2. 验证签名
    message = f"{header_b64}.{payload_b64}".encode()
    raw_signature = _base64url_decode(signature_b64)
    der_signature = _raw_to_der_signature(raw_signature)

    public_key.verify(
        der_signature,
        message,
        ec.ECDSA(hashes.SHA256())
    )

    # 3. 返回 payload
    return json.loads(_base64url_decode(payload_b64))

3. 用户同步服务

# app/services/user_service.py
from sqlalchemy import select
from sqlalchemy.ext.asyncio import AsyncSession
from app.models.user import AgentUser

async def ensure_user_exists(
    db: AsyncSession,
    user_id: str,
    email: str,
    plan: str = "free"
) -> AgentUser:
    """确保用户存在于本地数据库（从 Supabase Auth 同步）"""
    # 检查是否存在
    result = await db.execute(
        select(AgentUser).where(AgentUser.user_id == user_id)
    )
    user = result.scalar_one_or_none()

    if user:
        return user

    # 创建新用户
    user = AgentUser(
        user_id=user_id,
        email=email,
        plan=plan,
        role="user"
    )
    db.add(user)
    await db.commit()
    await db.refresh(user)
    return user

4. 在创建资源前调用

# app/routers/agents.py
@router.post("/")
async def create_agent(
    input: CreateAgentInput,
    db: AsyncSession = Depends(get_db),
    current_user: dict = Depends(get_current_user)
):
    # 关键：确保用户存在
    user = await ensure_user_exists(
        db,
        user_id=current_user["user_id"],
        email=current_user["email"],
        plan=current_user["plan"]
    )

    # 现在可以安全创建 Agent
    agent = Agent(
        user_id=user.user_id,
        name=input.name,
        llm_config=input.llm_config.model_dump()
    )
    ...

FAQ

Q: Supabase JWT 验证返回 404 怎么办？

A: Supabase 的 JWKS 路径是 /auth/v1/.well-known/jwks.json，不是标准的 /.well-known/jwks.json。检查你的 JWKS URL 配置。

Q: python-jose 验证 ES256 签名失败怎么解决？

A: python-jose 对 ES256 支持不完善。使用 cryptography 库手动验证，需要将 JWT 的 raw 签名（r||s 64字节）转换为 DER 格式。

Q: FastAPI 如何同步 Supabase Auth 用户到本地数据库？

A: 在需要用户记录的 API（如创建资源）入口处调用 ensure_user_exists()，从 JWT 提取用户信息并同步到本地表。

Q: Supabase JWT 中的 user_id 在哪个字段？

A: sub 字段包含用户 UUID，email 字段包含邮箱，app_metadata.plan 包含订阅计划（自定义字段）。

TL;DR​

问题现象​

根因​

1. Supabase Auth 是异步初始化的​

2. Zustand Store 的默认值问题​

3. OAuth 流程无法自动化​

解决方案​

步骤 1：在 useAuth hook 中添加测试模式检测​

步骤 2：修改 Zustand Store 默认值​

步骤 3：在 Playwright Fixture 中注入测试认证​

步骤 4：在测试中使用​

完整代码结构​

关键要点​

TL;DR​

问题现象​

坑 1：JWKS 路径 404​

坑 2：ES256 签名验证失败​

坑 3：用户首次登录无本地记录​

根因​

坑 1：Supabase 非标准 JWKS 路径​

坑 2：ES256 原始签名 vs DER 格式​

坑 3：认证与数据分离​

解决方案​

1. 正确的 JWKS URL​

2. ES256 签名验证（完整代码）​

3. 用户同步服务​

4. 在创建资源前调用​

FAQ​

Q: Supabase JWT 验证返回 404 怎么办？​

Q: python-jose 验证 ES256 签名失败怎么解决？​

Q: FastAPI 如何同步 Supabase Auth 用户到本地数据库？​

Q: Supabase JWT 中的 user_id 在哪个字段？​

TL;DR

问题现象

根因

1. Supabase Auth 是异步初始化的

2. Zustand Store 的默认值问题

3. OAuth 流程无法自动化

解决方案

步骤 1：在 useAuth hook 中添加测试模式检测

步骤 2：修改 Zustand Store 默认值

步骤 3：在 Playwright Fixture 中注入测试认证

步骤 4：在测试中使用

完整代码结构

关键要点

TL;DR

问题现象

坑 1：JWKS 路径 404

坑 2：ES256 签名验证失败

坑 3：用户首次登录无本地记录

根因

坑 1：Supabase 非标准 JWKS 路径

坑 2：ES256 原始签名 vs DER 格式

坑 3：认证与数据分离

解决方案

1. 正确的 JWKS URL

2. ES256 签名验证（完整代码）

3. 用户同步服务

4. 在创建资源前调用

FAQ

Q: Supabase JWT 验证返回 404 怎么办？

Q: python-jose 验证 ES256 签名失败怎么解决？

Q: FastAPI 如何同步 Supabase Auth 用户到本地数据库？

Q: Supabase JWT 中的 user_id 在哪个字段？