1 Supabase增加Github用户登录鉴权

Supabase支持多种身份验证提供商,比如Google、Github、Apple、Azure等,具体支持的平台如下图所示

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

本文就以在supabase中配置github认证登录为例写一个教程备忘。

1.1 Supabase获取项目Github认证回调地址

这里假设已经在Supabase中已经新建了一个项目,然后我们可以在左侧点击Authentication,如下图所示

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

然后在Authentication页面点击Providers,如下图所示

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

然后在该页面找到Github,

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

然后点开就可以看见Supabase为该项目的Github所设置的回调地址,如下图所示

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

1.2 Github新增OAuth Apps OAuth

登录Github账号,进入 个人的Settin页面,具体入口如下所示

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

然后在Setting页面的左侧Tab菜单点击Developer setting,然后点击OAuth Apps OAuth,然后点击右上角New OAuth App新增一个用于Supabase项目的OAuth认证项目。

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

然后进入新的OAuth的注册页面,

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog

这里需要填写以下信息:

  • Application name:应用名称,为你的这个认证项目取一个好分辨的名字
  • Homepage:你的认证网站地址,这里我因为在nextjs中进行本地调试,所以写的http://localhost:3000,如果你是生产服务,记得修改地址
  • Authorization callback URL:授权回调地址,这里写1.1节中Supabase为该项目的Github所设置的回调地址,形如:https://xxxxx.supabase.co/auth/v1/callback

根据你自己的项目,将上述的信息补充完整,然后点击注册即可。

之后就是根据你自己的项目和supabase的文档,在你自己的项目中集成不同的provider鉴权认证,如果调用正确,则会出现以下Github的授权登录页面

独立开发 – Supabase增加Github用户登录鉴权认证-StubbornHuang Blog