login_auto

Supabase Auth 通用登录系统实现指南

本 skill 是与项目无关的通用登录逻辑指南，适用于任意 Next.js + Supabase 项目。不绑定特定 i18n 框架、不绑定特定语言组合、不绑定特定 UI 库。三大场景全覆盖：

• 登录：邮箱密码 + OAuth (Google/GitHub)
• 注册：邮箱 + 验证码 + 密码 + 确认密码
• 修改密码（忘记密码/未登录）：邮箱 + 验证码 + 新密码

邮件通道：验证码邮件由 Supabase Auth 触发，经 Supabase 自定义 SMTP 接入 Resend 投递（不在代码里调 Resend API，不自造验证码存储）。

---

Skill 启动流程（显式触发时按此走）

Step 1  整理项目当前登录逻辑
        读项目 auth 相关代码(auth-modal/回调路由/profile/middleware)
        → 画「项目现状登录逻辑」ASCII 图
Step 2  对比 skill 标准逻辑 vs 项目现状
        逐链路差异表: ✅一致 / ⚠️偏离 / ❌缺失
        (标准逻辑见下方「三大场景」与 Phase 1-3)
Step 3  环境盘点 + 询问 key
        检查: 依赖 / Supabase(URL+anon key, service_role可选)
              / Resend(API Key+发件域名) / OAuth(Client ID+Secret)
              / Dashboard(Confirm email关闭? SMTP配Resend? Redirect URLs? Providers?)
        缺什么列清单 → 询问主人提供
Step 4  整理改动清单
        输出表: 文件 | 现状 | 目标 | 动作
Step 5  调用 /cc-code:cc-code 执行
        按角色串行 PM→Architect→Dev→QA 落地
        (本 skill 只整理方案, 执行交 cc-code 工作流)

本 skill 主体是「标准逻辑 + 实现指南」，供 Step 2 对比、Step 4 改动参考。Step 5 不在本 skill 内写代码，交由 /cc-code:cc-code。

---

实现指南流程

Phase 0 → Phase 1 → Phase 2 → Phase 3 → Phase 4
环境检查   后端实现   前端UI    回调路由   构建验证

---

Phase 0: 环境检查

0.1 检查已有 Supabase 配置

扫描:
├── package.json → @supabase/supabase-js 存在?
├── package.json → @supabase/ssr 存在?
├── lib/supabase/client.ts 存在?
├── lib/supabase/server.ts 存在?
├── middleware.ts (或 Next.js 16 的 proxy.ts) → 包含 supabase session 刷新?
├── .env.local → NEXT_PUBLIC_SUPABASE_URL + ANON_KEY 存在?
└── app/auth/callback/route.ts 存在?

若项目使用 i18n，额外检查其 Auth 命名空间是否已含本 skill 所需的错误消息 key（见文末「错误消息键名清单」）。i18n 框架与语言组合由项目自定，本 skill 不强制。

0.2 若缺失，先安装依赖

pnpm add @supabase/supabase-js @supabase/ssr

0.3 若缺失，先创建基础设施文件

按下面的模板创建缺失文件，已有的跳过。

---

Phase 1: 后端实现

1.1 环境变量

.env.example 追加:

# Supabase Auth
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

.env.local 填入实际值。

1.2 Supabase 客户端

lib/supabase/client.ts (浏览器端):

import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )
}