回想起第一次独立做程序，那还是在大学做毕设的时候。
唉，青春啊，一去不复返...
那时候也实现了登录功能，微信扫码登录。
当时的微信登录使用的 OAuth2.0 协议，还要验证域名，麻烦得很。
现在，在玩 AI 编程的过程中也涉及到了登录/注册功能的实现。
我的项目是基于 Next.js 构建，采用的解决方案是 supabase，暂且先实现 github 登录吧。
前置知识
有的同学将 supabase 当做数据库，准确的说，它是一个包含了数据库的“服务平台”，说的专业一点就是：“后端即服务（Backend-as-a-Service / BaaS）”。
supabase 之所以能实现登录功能，是因为 supabase 平台中提供了一个叫做 Auth (认证) 的服务。
注册 Supabase
先进入 supabase 官网 ：supabase.com/
点击 “Sign in”，然后通过你的 github 账号授权登录：
为你的团队取个名字并创建：
为数据库设置一个安全系数高的密码，最好是保存下来，别忘记了：
出现这个界面就表示项目创建好了：
获取并配置GitHub登录令牌
依旧是在 supabase 里操作，具体操作看图。
鼠标滚轮往下扒拉，点击 github：
ID 和 Secret 需要去 Github 配置：
填写 OAuth 信息：
可以看到客户端 ID 已经生成，我们还需创建客户端秘钥：
复制客户端秘钥：
现在我们已经得到了 supabase 需要的两个信息：client ID 和 client secrets （秘钥）。
回到 supabase ，将 ID 和秘钥填进去：
保存后，在 supabase 看到 Github 呈现“Enabled” 状态。
vibe coding 实现 Github 登录功能
既然 supabase 提供了登录认证功能，那么它肯定会有文档对这个功能做介绍。
文档我直接放在这里，supabase 配置 github 登录文档：
看文档的描述，将整个登录功能分三部分，我们已经完成了前两部分：
页面右侧有菜单，点击菜单项能跳转到详情页：
我解释一下这段话：
如果你的 Vercel 项目是纯静态网站或 SPA (用 React/Vue 写的，但不是 Next.js)：
- 你就用方式一。登录凭证存在浏览器的 localStorage。
如果你在 Vercel 上用的是 Next.js (或 SvelteKit, Nuxt 等)：
- 你必须用方式二。登录凭证必须存在 Cookies，这样你的服务器代码和浏览器代码才能共享登录状态。
我们的项目是通过 Next.js 构建，所以我们采用方式二。
服务器端认证方式参考文档：
我们不需要阅读这个参考资料，我们只需要将资料发给 claude code，或者是你熟悉的 AI 编程工具。
该项目基于 Next.js 开发，部署在 vercel，请帮我使用 Supabase 实现 Github 登录功能。
Supabase 参考文档：
https://supabase.com/docs/guides/auth/social-login/auth-github
请使用服务器端认证方式，参考文档如下：
https://supabase.com/docs/guides/auth/server-side/creating-a-client
claude code 会告诉我们哪些是需要我们自己手动完成的：
一共 4 个步骤，前 3 步我们都已经完成了。
claude code 提示还需要在 .env.local 文件中配置环境变量。
关于环境变量（ supabase URL 和 Key）的获取，有两种方式：
方式1： 服务端认证参考文里有记录：
方式2： 在 supabase 界面进入项目页 -> 点击 Project Settings 图标
在 Data API 中获取 supabase URL，在 API Keys 中获取秘钥。
将获取到的 URL 和秘钥，填入 claude code 指定的文件中（.env.local）：
启动项目，验证登录功能
手动在终端执行命令或者是让 claude code 帮你运行项目，访问 http://localhost:3000/ 即可进入项目页面。
然后就能看到页面出现“Github 登录”的图标，点击图标即可通过 Github 登录。
到此，整个登录功能就完成了。
补充：配置重定向
补充一点，建议在 supabase 身份认证里设置认证后的重定向，也就是完成 GitHub 认证后，让页面回到网站主页。
点击“add URL”，填入 http://localhost:3000/auth/callback
写在最后
以上就是通过 supabase 实现 GitHub 登录的整个流程。
supabase 还能实现其他方式登录，例如：谷歌邮箱、facebook等。
比较遗憾的就是没办法这么丝滑地实现微信登录。
我后续还会继续介绍 AI 编程的其他玩法，欢迎关注。
我是 kite，希望我的内容对你有帮助。
大家加油 : )
