出海建站实战：为 Next.js + Supabase 项目接入 GitHub OAuth 登录（告别个人账户）

之前分享过如何为网站接入 Google 登录，今天我们来把另一种主流方式——GitHub 登录——也搞定。两者结合，基本覆盖了出海网站最常用的社会化登录方案。尤其对于技术社区的开发者用户，使用 GitHub 登录会显得更专业，也更容易获得他们的信任。

起初，我直接在个人 GitHub 账户下创建了 OAuth App。虽然创建成功且功能可用，但在测试登录时，授权页面上显示的是我的个人昵称。这看起来更像一个个人项目，不够正式。随着项目增多，将所有 OAuth App 都挂在个人账户下，管理也显得混乱。

因此，更优的做法是：先创建一个 GitHub Organization，然后将 OAuth App 注册在该 Organization 名下。

创建路径很简单：在 GitHub 右上角点击头像 -> Your organizations -> New organization。选择免费套餐，填写一个组织名称即可完成创建。

这样做有几个明显优势：

1. 专业形象：授权页面显示的是 Organization 名称，而非个人昵称，让产品看起来更专业。
2. 集中管理：一个 Organization 下可以创建多个独立的 OAuth App，分别对应不同的网站项目，每个 App 都有自己的 Client ID、Secret 和回调 URL，管理结构清晰。
3. 灵活复用：Organization 的名称可以起得比较通用，不绑定特定产品，方便后续所有项目的 OAuth App 都归集于此。

在 Organization 下创建 OAuth App

进入刚创建的 Organization 页面，导航路径为：Settings -> Developer settings -> OAuth Apps。

点击 “New OAuth App” 按钮，填写必要的应用信息：

• Application name：你的产品名称，用户会在授权页看到。
• Homepage URL：你的网站首页地址。
• Authorization callback URL：这是关键步骤。由于我使用 Supabase 处理身份验证，这里的回调地址需要填写 Supabase 提供的专用 URL，而不是你的网站域名。

如何获取 Supabase 的回调地址？
在 Supabase Dashboard 中，进入 Authentication -> Sign In / Providers -> GitHub。点开 GitHub 提供商的设置，页面上会明确显示一个 “Callback URL (for OAuth)”，格式通常为：
https://<your-project-ref>.supabase.co/auth/v1/callback
复制这个地址，粘贴到 GitHub OAuth App 的回调 URL 字段即可。

填写完毕后，点击 “Register application”。创建成功后，页面会显示你的 Client ID。此时你需要手动点击生成 Client Secret，生成后立即复制并妥善保存，因为它只显示一次。

在项目中配置 GitHub 登录

我使用的技术栈是 Next.js 配合 Supabase Auth。拿到 Client ID 和 Client Secret 后，回到 Supabase Dashboard 的相同位置 (Authentication -> Sign In / Providers -> GitHub)，将这两个值分别填入对应输入框，保存配置。

至此，配置就完成了。你可以在网站上测试登录功能，用户点击使用 GitHub 登录后，会跳转到类似下面的授权页面。

用户如何撤销授权？

如果用户想要取消对你的网站的 GitHub 授权，他们可以通过通用入口操作：登录 GitHub，进入 Settings -> Applications -> Authorized OAuth Apps，找到对应的应用，点击撤销 (Revoke) 即可。

通过这样的实践，不仅实现了功能，更优化了项目在用户心中的专业形象。这种在 GitHub Organization 下统一管理第三方应用授权的做法，是很多成熟 开源实战 项目的常见最佳实践。如果你对 Google 登录的接入也感兴趣，可以查阅我们之前的教程。将这两种登录方式结合起来，出海产品的社会化登录体系就基本完善了。更多关于前端工程化和全栈开发的讨论，欢迎来 云栈社区 交流。