学习如何使用 Supabase Auth 实现用户注册、登录、OAuth 社交登录等功能
Supabase 身份认证完全指南
Supabase Auth 是一个功能强大的身份认证解决方案，提供了开箱即用的用户管理功能。本文将带你深入了解如何在项目中集成 Supabase Auth。
为什么选择 Supabase Auth？
- **免费额度充足**：每月 50,000 活跃用户
- **多种登录方式**：邮箱、手机、OAuth 社交登录
- **内置安全机制**：JWT、RLS 行级安全
- **易于集成**：提供多种语言 SDK
初始化配置
首先安装 Supabase 客户端：
npm install @supabase/supabase-js
创建 Supabase 客户端：
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
邮箱密码注册
const { data, error } = await supabase.auth.signUp({
email: 'user@example.com',
password: 'secure-password',
options: {
data: {
full_name: '张三',
avatar_url: 'https://example.com/avatar.png'
}
}
})
if (error) {
console.error('注册失败:', error.message)
} else {
console.log('注册成功，请查收验证邮件')
}
邮箱密码登录
const { data, error } = await supabase.auth.signInWithPassword({
email: 'user@example.com',
password: 'secure-password'
})
if (error) {
console.error('登录失败:', error.message)
} else {
console.log('登录成功:', data.user)
}
OAuth 社交登录
GitHub 登录
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'github',
options: {
redirectTo: 'https://yoursite.com/auth/callback'
}
})
Google 登录
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: 'https://yoursite.com/auth/callback',
queryParams: {
access_type: 'offline',
prompt: 'consent'
}
}
})
获取当前用户
// 获取当前会话
const { data: { session } } = await supabase.auth.getSession()
// 获取当前用户
const { data: { user } } = await supabase.auth.getUser()
if (user) {
console.log('当前用户:', user.email)
}
监听认证状态变化
supabase.auth.onAuthStateChange((event, session) => {
switch (event) {
case 'SIGNED_IN':
console.log('用户已登录')
break
case 'SIGNED_OUT':
console.log('用户已登出')
break
case 'TOKEN_REFRESHED':
console.log('Token 已刷新')
break
}
})
退出登录
const { error } = await supabase.auth.signOut()
if (!error) {
console.log('已成功退出登录')
}
密码重置
发送重置邮件
const { error } = await supabase.auth.resetPasswordForEmail(
'user@example.com',
{
redirectTo: 'https://yoursite.com/reset-password'
}
)
更新密码
const { error } = await supabase.auth.updateUser({
password: 'new-secure-password'
})
行级安全 (RLS)
配合 RLS 可以实现数据级别的访问控制：
-- 用户只能查看自己的数据
CREATE POLICY "Users can view own data"
ON profiles FOR SELECT
USING (auth.uid() = user_id);
-- 用户只能更新自己的数据
CREATE POLICY "Users can update own data"
ON profiles FOR UPDATE
USING (auth.uid() = user_id);
最佳实践
- **始终验证服务端**：不要只依赖客户端验证
- **使用 RLS**：为所有表启用行级安全
- **安全存储密钥**：使用环境变量存储敏感信息
- **处理错误**：为用户提供友好的错误提示
- **定期刷新 Token**：确保会话安全
总结
Supabase Auth 提供了完整的身份认证解决方案，从简单的邮箱登录到复杂的 OAuth 集成都能轻松实现。结合 RLS 行级安全，可以构建安全可靠的应用程序。
