iFluxArt Docs

Hey，同学！这一篇我们来聊聊认证——也就是用户登录、注册、找回密码这些「进门」的事儿～ 🚪

🤔 什么是认证？

简单来说，认证就是回答「你是谁」这个问题。在 iFluxArt 中，我们用 Supabase Auth 来处理这件事。

💡 想象一下：你的网站是一个俱乐部，认证就是「会员卡系统」——有了会员卡，你才能进来看更多内容！

🔧 支持的认证方式

方式	说明	适用场景
邮箱密码	最传统的登录方式	大部分场景
GitHub OAuth	用 GitHub 账号登录	技术人员、博客作者
邮件链接	点击链接登录，无需密码	简化流程

📁 认证相关文件

text

apps/web/src/app/
├── auth/
│   ├── login/page.tsx           # 登录页
│   ├── sign-up/page.tsx         # 注册页
│   ├── forgot-password/page.tsx # 密码找回页
│   ├── update-password/page.tsx  # 更新密码页
│   └── confirm/page.tsx         # 邮箱确认页
└── layout.tsx                   # 公共布局

🏗️ 认证流程设计

1. 注册流程

text

用户 → 填写邮箱/密码 → 提交 → Supabase 创建用户 → 发送确认邮件 → 注册成功

为什么要这样设计？

确认邮件：验证邮箱真实性，防止恶意注册
Supabase 处理：无需自己写密码存储逻辑，安全可靠

2. 登录流程

text

用户 → 填写邮箱/密码 → 提交 → Supabase 验证 → 返回 JWT Token → 登录成功

Token 的作用：

Token 是「临时身份证」，每次请求带上它，服务器就知道「你是谁」了。Supabase 会自动处理 Token 的刷新，不用你操心！

3. 密码找回流程

text

忘记密码 → 填写邮箱 → 发送重置邮件 → 点击邮件链接 → 设置新密码 → 完成

⚙️ 配置步骤

步骤 1：配置 Supabase

在 Supabase 后台开启认证 provider：

登录 Supabase
进入 Authentication → Providers
启用 Email（默认开启）
可选：启用 GitHub

步骤 2：配置环境变量

txt

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_xxx  # anon key，不是 secret！

步骤 3：配置回调地址

在 Supabase 的 Authentication → URL Configuration 中：

text

Site URL: https://your-domain.com
Redirect URLs:
  - http://localhost:3005
  - https://your-domain.com

🎨 页面定制

修改登录页面文案

typescript

// apps/web/src/app/auth/login/page.tsx
const LOGIN_CONFIG = {
  title: '欢迎回来',
  subtitle: '登录你的账户',
  // ...
};

添加社交登录

typescript

<Button variant="outline" onClick={() => signInWithGitHub()}>
  <GitHubIcon /> 使用 GitHub 登录
</Button>

🔒 安全考量

1. 密码强度

Supabase 默认要求：

至少 6 位字符

可以在 Supabase 后台调整密码策略。

2. 会话管理

默认会话时长：7 天
可在 Supabase 后台配置
支持强制登出

3. 防护措施

防护	说明
Rate Limiting	防止暴力破解
邮箱验证	新注册需验证邮箱
MFA（可选）	双重认证，更安全

🔗 与其他系统的关系

text

Web (登录入口)
   │
   ├──→ Blog (需要登录的内容)
   ├──→ Docs (需要登录的文档)
   ├──→ Admin (管理后台，必须登录)
   │
   └──→ Supabase Auth (统一认证服务)

所有子系统共享同一个认证系统，登录一次，处处通行！

💡 常见问题

Q: 登录后如何获取用户信息？

typescript

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(url, key);
const { data: { user } } = await supabase.auth.getUser();

Q: 如何判断用户是否登录？

在 Server Component 中可以通过 middleware 检查，在 Client Component 中可以用 useAuth hook。

Q: 怎么实现「记住我」？

Supabase 默认支持长期会话，如果想特别延长，可以在登录时设置 persistSession: true。

📖 下一步

主题配置 —— 让登录页面更好看
权限管理 —— 在后台管理用户
部署上线 —— 让用户能访问

🔐 认证是网站的「安全大门」，配置好之后，用户就可以「刷卡进门」啦！

Hey，同学！这一篇我们来聊聊认证——也就是用户登录、注册、找回密码这些「进门」的事儿～ 🚪

🤔 什么是认证？

简单来说，认证就是回答「你是谁」这个问题。在 iFluxArt 中，我们用 Supabase Auth 来处理这件事。

💡 想象一下：你的网站是一个俱乐部，认证就是「会员卡系统」——有了会员卡，你才能进来看更多内容！

🔧 支持的认证方式

方式	说明	适用场景
邮箱密码	最传统的登录方式	大部分场景
GitHub OAuth	用 GitHub 账号登录	技术人员、博客作者
邮件链接	点击链接登录，无需密码	简化流程

📁 认证相关文件

text

apps/web/src/app/
├── auth/
│   ├── login/page.tsx           # 登录页
│   ├── sign-up/page.tsx         # 注册页
│   ├── forgot-password/page.tsx # 密码找回页
│   ├── update-password/page.tsx  # 更新密码页
│   └── confirm/page.tsx         # 邮箱确认页
└── layout.tsx                   # 公共布局

🏗️ 认证流程设计

1. 注册流程

text

用户 → 填写邮箱/密码 → 提交 → Supabase 创建用户 → 发送确认邮件 → 注册成功

为什么要这样设计？

确认邮件：验证邮箱真实性，防止恶意注册
Supabase 处理：无需自己写密码存储逻辑，安全可靠

2. 登录流程

text

用户 → 填写邮箱/密码 → 提交 → Supabase 验证 → 返回 JWT Token → 登录成功

Token 的作用：

Token 是「临时身份证」，每次请求带上它，服务器就知道「你是谁」了。Supabase 会自动处理 Token 的刷新，不用你操心！

3. 密码找回流程

text

忘记密码 → 填写邮箱 → 发送重置邮件 → 点击邮件链接 → 设置新密码 → 完成

⚙️ 配置步骤

步骤 1：配置 Supabase

在 Supabase 后台开启认证 provider：

登录 Supabase
进入 Authentication → Providers
启用 Email（默认开启）
可选：启用 GitHub

步骤 2：配置环境变量

txt

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_xxx  # anon key，不是 secret！

步骤 3：配置回调地址

在 Supabase 的 Authentication → URL Configuration 中：

text

Site URL: https://your-domain.com
Redirect URLs:
  - http://localhost:3005
  - https://your-domain.com

🎨 页面定制

修改登录页面文案

typescript

// apps/web/src/app/auth/login/page.tsx
const LOGIN_CONFIG = {
  title: '欢迎回来',
  subtitle: '登录你的账户',
  // ...
};

添加社交登录

typescript

<Button variant="outline" onClick={() => signInWithGitHub()}>
  <GitHubIcon /> 使用 GitHub 登录
</Button>

🔒 安全考量

1. 密码强度

Supabase 默认要求：

至少 6 位字符

可以在 Supabase 后台调整密码策略。

2. 会话管理

默认会话时长：7 天
可在 Supabase 后台配置
支持强制登出

3. 防护措施

防护	说明
Rate Limiting	防止暴力破解
邮箱验证	新注册需验证邮箱
MFA（可选）	双重认证，更安全

🔗 与其他系统的关系

text

Web (登录入口)
   │
   ├──→ Blog (需要登录的内容)
   ├──→ Docs (需要登录的文档)
   ├──→ Admin (管理后台，必须登录)
   │
   └──→ Supabase Auth (统一认证服务)

所有子系统共享同一个认证系统，登录一次，处处通行！

💡 常见问题

Q: 登录后如何获取用户信息？

typescript

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(url, key);
const { data: { user } } = await supabase.auth.getUser();

Q: 如何判断用户是否登录？

在 Server Component 中可以通过 middleware 检查，在 Client Component 中可以用 useAuth hook。

Q: 怎么实现「记住我」？

Supabase 默认支持长期会话，如果想特别延长，可以在登录时设置 persistSession: true。

📖 下一步

主题配置 —— 让登录页面更好看
权限管理 —— 在后台管理用户
部署上线 —— 让用户能访问

🔐 认证是网站的「安全大门」，配置好之后，用户就可以「刷卡进门」啦！