使用 Email 完成注册与登录

本课将基于 Next.js + Supabase 实现最基础却最常用的邮箱注册/登录流程。

Supabase 项目配置,参考相关课程 Supabase 基础: 快速上手 之 Supabase Auth：Email 登录配置

1. 安装依赖

安装 Supabase 官方 SDK 以及本项目所需的 UI 组件：

pnpm add @supabase/supabase-js @supabase/ssr
npx shadcn@latest add button card input label tabs sonner

2. 配置环境变量

NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=sb_publishable_xxx

注意：NEXT_PUBLIC_SUPABASE_ANON_KEY 是前端可用的 匿名密钥（Publishable API Key），请勿在此处使用 secret key。

3. 初始化服务端客户端

创建服务端 Supabase 客户端 lib/supabase/server.ts，用于在 Server Components / Route Handlers 中安全地访问 Supabase

4. 创建登录页面与回调处理

1. 登录页面 app/login/page.tsx
2. 回调处理逻辑 app/auth/callback/route.ts

5. commit：添加 Supabase 邮箱登录完整流程

完成这一步后，访问 /login 页面，即可进行邮箱注册和登录测试。