← ClaudeAtlas

login_autolisted

基于 Supabase Auth + Resend SMTP 实现通用登录系统,零新依赖。覆盖邮箱密码登录、OAuth(google/github)、邮箱验证码注册、邮箱验证码改密。验证码邮件经 Supabase 自定义 SMTP 接入 Resend 投递。当用户说"login_auto"、"登录实现"、"Supabase登录"、"通用登录"时触发。
weiyi88/cc-code · ★ 5 · AI & Automation · score 74
Install: claude install-skill weiyi88/cc-code
# 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 + ANO