使用GitHub登录

要为项目启用GitHub Auth，您需要设置一个GitHub OAuth应用程序，并将应用程序凭据添加到Supabase Dashboard。

概述

为应用程序设置GitHub登录由三部分组成:

访问您的GitHub帐户#

  • 进入 github.com.
  • 单击右上角的登录以登录。

GitHub开发者门户。

创建GitHub Oauth应用程序#

转到GitHub开发者设置页面:

  • 单击右上方的个人资料照片
  • 单击菜单底部附近的设置
  • 在左侧边栏中，单击开发人员设置（靠近底部）
  • 在左侧边栏中，单击OAuth Apps

查找回调URL#

下一步需要回调URL，如下所示：

https://<project-ref>.supabase.co/auth/v1/callback

  • 转到MemFire Cloud项目仪表板.
  • 单击左侧边栏底部的设置图标。
  • 单击列表中的API。
  • 在Config/URL下，您将找到您的API URL，您可以单击复制将其复制到剪贴板。
  • 现在只需在末尾添加/auth/v1/callback即可获得完整的OAuth重定向URI。

注册新的OAuth应用程序#

  • 单击注册新应用程序。如果您以前创建过应用程序，请单击此处的新建OAuth应用程序。
  • 在应用程序名称中，键入应用程序的名称。
  • 在主页URL中，键入应用程序网站的完整URL。
  • 在授权回调URL中，键入应用的回调URL。
  • 在有效OAuth重定向URI框中输入URL。
  • 单击右下角的保存更改。
  • 单击注册应用程序。

复制新的OAuth凭据

  • 复制并保存客户端ID。
  • 单击生成新客户端密钥。
  • 复制并保存客户端密码。

将您的GitHub凭据输入到Supabase项目中#

  • 转到MemFire Cloud项目仪表板
  • 在左侧边栏中，单击身份验证图标（靠近顶部）
  • 单击列表中的设置以转到身份验证设置页面
  • 在站点URL下输入应用程序的最终（托管）URL（这很重要）
  • 在外部OAuth提供程序下，将已启用GitHub设置为ON
  • 输入上一步中保存的GitHub客户端ID 和GitHubClient Secret
  • 单击保存

将登录代码添加到客户端应用程序

当您的用户登录时,调用signInWithOAuth(),将github作为provider:

1async function signInWithGitHub() {
2  const { data, error } = await supabase.auth.signInWithOAuth({
3    provider: 'github',
4  })
5}

当用户注销时，调用signOut()将其从浏览器会话和localStorage中删除：

1async function signout() {
2  const { error } = await supabase.auth.signOut()
3}

资源