OAuth 设置

让用户可以使用他们喜欢的社交账号登录，如 GitHub、Google 等。

什么是 OAuth？

OAuth 允许用户使用他们已有的账号（如 GitHub 或 Google）登录，而无需创建新的密码。这既更快又更安全。

GitHub OAuth 设置

详细说明请参阅 Supabase GitHub OAuth 文档。

1. 创建 GitHub OAuth 应用

访问 GitHub 开发者设置
点击 “New OAuth App”
填写信息：
- 应用名称：Your Onlook App
- 主页 URL：http://localhost:3000（或你的生产域名）
- 授权回调 URL：
  - 本地开发：http://localhost:54321/auth/v1/callback
  - 生产环境：https://your-production-domain/auth/v1/callback
点击 “Register application”
复制你的 Client ID 和 Client Secret

2. 配置 Supabase

打开你的 Supabase 控制面板
进入 Authentication → Providers
找到 GitHub 并点击 Enable
粘贴你的：
- Client ID
- Client Secret
点击 Save

3. 更新你的应用

在登录页添加 GitHub 提供者：

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

const supabase = createClient(supabaseUrl, supabaseKey)

// 添加 GitHub 登录按钮
const signInWithGitHub = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github'
  })
  if (error) console.error('错误:', error)
}

Google OAuth 设置

详细说明请参阅Supabase Google OAuth 文档。

1. 创建 Google OAuth 应用

进入 Google Cloud Console
创建新项目或选择已有项目
进入 APIs & Services → Credentials
点击 “Create Credentials” → “OAuth client ID”
选择 “Web application”
添加授权重定向 URI：
- 本地开发：http://localhost:54321/auth/v1/callback
- 生产环境：https://your-production-domain/auth/v1/callback
复制你的 Client ID 和 Client Secret

2. 配置 Supabase

在 Supabase 控制面板，进入 Authentication → Providers
找到 Google 并点击 Enable
粘贴你的 Client ID 和 Client Secret
点击 Save

3. 添加到你的应用

const signInWithGoogle = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'google'
  })
  if (error) console.error('错误:', error)
}

其他提供者

Supabase 支持多种 OAuth 提供者。有关全部提供者的完整设置说明，请参阅Supabase 社交登录文档。

常用提供者包括：

Discord：请参照 Discord Developer Portal 执行类似步骤
Twitter：在 Twitter Developer Portal 设置
Facebook：在 Facebook Developers 配置
Apple：在 Apple Developer 设置

注意：每个提供者都需添加本地 (http://localhost:54321/auth/v1/callback) 和生产 (https://your-production-domain/auth/v1/callback) 的重定向 URI，否则会出现 redirect_uri_mismatch 错误。

重要说明

环境变量

确保你的 .env.local 包含：

NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key

测试

启动你的 Onlook 应用
点击 OAuth 登录按钮
你将被重定向到相应提供者（GitHub/Google）
授权后，你会被重定向回应用
检查用户是否已登录

故障排除

“Invalid redirect URI”

仔细检查 OAuth 应用中配置的回调 URL
确认完全匹配：http://localhost:54321/auth/v1/callback

“Client ID not found”

确认你正确复制了 Client ID 和 Client Secret
检查 Supabase 中 OAuth 提供者是否已启用

“Access denied”

确定 OAuth 应用为公开状态（非开发模式）
GitHub 用户需确保有权限访问你的组织（如适用）

后续步骤

OAuth 正常后：

定制登录界面
添加用户资料信息
设置基于角色的访问控制
配置邮件通知

就是这样！现在你的用户可以使用社交账户登录啦。🎉

On this page