Supabase 第三方登录

用户最讨厌注册新账号，支持 GitHub 或 Google 一键登录能明显提高注册转化率。这一篇学习 OAuth 第三方登录的完整流程，从后台配置到前端调用，再到获取第三方用户信息。

OAuth 是什么

你在很多网站见过”使用 GitHub 登录”的按钮，这就是 OAuth。用户不用在网站注册，直接用已有平台账号登录，网站拿到用户的身份信息。整个流程用户感知就一步，点击后跳转到 GitHub 授权页面，再跳回来就已登录。

在 GitHub 创建 OAuth App

以 GitHub 为例，先到 GitHub 账号里创建 OAuth App

登录 GitHub，打开 Settings 的 Developer settings 页面
进入 OAuth Apps，点击 New OAuth App
填写名称，任意
Homepage URL 填你的网站地址，本地开发填 http://localhost:3000
Authorization callback URL 填 Supabase 的回调地址，格式如下

https://你的项目URL.supabase.co/auth/v1/callback

创建完成后会得到 Client ID 和 Client Secret 两个值。

在 Supabase 后台开启 Provider

打开 Dashboard 的 Authentication 菜单，找到 Providers 页面，点击 GitHub 的编辑按钮

打开 Enable Sign in with GitHub 开关
填入刚才的 Client ID 和 Client Secret
保存

Google 的配置流程完全相同，只是要先去 Google Cloud 控制台创建 OAuth 凭据。其他 Provider 还有微信、QQ 等，操作模式都一样。

前端调用

前端只需要一行调用，用户会跳转到授权页面

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: 'github',
  options: {
    redirectTo: 'http://localhost:3000/auth/callback'
  }
})

provider 填后台开启的那个名字，github、google 都是官方支持的关键字。redirectTo 是授权完成后的跳转地址，必须和后台配置的回调地址保持同源。

回调处理

用户从 GitHub 回来时带着授权码，Supabase 会在回调地址自动完成换 Token 的动作。回调页面只需要创建客户端，然后读取会话

<script setup>
import { supabase } from '@/lib/supabase'

onMounted(async () => {
  const { data } = await supabase.auth.getSession()
  if (data.session) {
    console.log('登录成功', data.session.user)
    navigateTo('/')  // 跳回首页
  }
})
</script>

在 Nuxt 里，回调页面通常建在 pages/auth/callback.vue，配合 useSupabaseClient 使用。登录成功后，访问任意页面 getUser 都能拿到用户信息。

获取第三方用户信息

第三方用户的信息不在注册时填写的字段里，存在 user.user_metadata 中，GitHub 会返回昵称和头像

const { data } = await supabase.auth.getUser()
const meta = data.user.user_metadata

console.log(meta.user_name)    // GitHub 昵称
console.log(meta.avatar_url)   // GitHub 头像地址
console.log(meta.name)         // 真实姓名，可能为空

存入资料表

登录后把这些信息同步到 profiles 表，完成首次资料初始化

const { data: { user } } = await supabase.auth.getUser()

if (user) {
  await supabase
    .from('profiles')
    .upsert({
      id: user.id,
      username: user.user_metadata.user_name || '新用户',
      avatar_url: user.user_metadata.avatar_url || null
    })
}

这里用了 upsert，已存在就更新，不存在就插入，避免重复创建资料行。这张表结构里的 avatar_url 列需要用 SQL 补上

alter table profiles add column avatar_url text;

本地开发注意

本地开发时，前端地址和 Supabase 回调地址必须都允许，超出的域名会被拒绝
邮箱密码登录和第三方登录可以同时开启，两种方式登录同一个账号体系
线上部署后，记得在 GitHub OAuth App 里把回调地址改为主域名

下一篇是本教程的重头戏，行级安全策略 RLS，学会它才算真正懂 Supabase 的安全模型。

下一篇 Supabase 行级安全策略 RLS

Supabase 用户认证入门

Supabase 行级安全策略 RLS