Supabase 用户认证入门

从这一篇开始学习 Auth 模块。认证系统是所有产品的地基，而 Supabase 把它做成了开箱即用的模块，本篇学习最常用的邮箱密码注册登录，以及会话机制。

Auth 模块是什么

Supabase Auth 是现成的用户系统，你不需要写注册页逻辑、不需要管理密码加密、不需要处理登录状态存储。后台点几下开启功能，前端调几个方法，用户体系就建起来了。

用户数据存在数据库里一个叫 auth.users 的表中，这张表由 Supabase 托管，只能读取不能修改。注意区分，auth.users 管账号，业务数据要放你自己的表（比如 profiles）。

注册

注册用 signUp 方法，传入邮箱和密码，返回的 data.user 就是新用户

const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: '12345678'
})

if (error) console.log(error.message)

邮箱确认开关

Supabase 默认开启邮箱确认，注册后要点击邮件里的链接才能登录。开发阶段这个流程很麻烦，建议先关闭

在 Dashboard 的 Authentication 菜单，找到 Sign In / Up 页面里的 Email 选项，关闭 Confirm email 开关。

确认开关不影响注册接口本身，只是决定注册后是否需要验证。线上项目强烈建议保持开启。

登录

登录用 signInWithPassword，成功后返回会话信息

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: '12345678'
})

console.log(data.session)  // 登录成功后不为 null

会话与 Token

登录成功后，Supabase 会自动管理会话。会话（Session）里装着两种 Token，JWT 格式的字符串

之后每次调用数据库接口，Supabase 会自动把 access_token 带在请求里，服务端用它识别你是谁。整个流程对开发者透明，不用手动处理 Token 的获取和刷新。

读取当前用户

登录状态从 sessionStorage 恢复，页面刷新后依然有效

const { data } = await supabase.auth.getUser()
console.log(data.user)  // 未登录时 data.user 为 null

监听登录状态变化，适合做路由守卫

supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_IN') console.log('登录了')
  if (event === 'SIGNED_OUT') console.log('登出了')
})

登出

await supabase.auth.signOut()

登录注册表单

把知识串起来，写一个完整的登录注册组件。用一个 mode 变量切换两种模式

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

const mode = ref('login')
const email = ref('')
const password = ref('')
const message = ref('')

async function submit() {
  const { data, error } = mode.value === 'login'
    ? await supabase.auth.signInWithPassword({ email: email.value, password: password.value })
    : await supabase.auth.signUp({ email: email.value, password: password.value })

  message.value = error ? error.message : '操作成功'
}
</script>

<template>
  <div>
    <h2>{{ mode === 'login' ? '登录' : '注册' }}</h2>
    <input v-model="email" type="email" placeholder="邮箱" />
    <input v-model="password" type="password" placeholder="密码" />
    <button @click="submit">{{ mode === 'login' ? '登录' : '注册' }}</button>
    <button @click="mode = mode === 'login' ? 'signup' : 'login'">
      切换到{{ mode === 'login' ? '注册' : '登录' }}
    </button>
    <p>{{ message }}</p>
  </div>
</template>

用户资料表

登录后拿到的是用户 ID，它是 auth.users 表主键，类型是 uuid。建议把业务资料存进自己的 profiles 表，让 id 字段与用户 ID 对应

insert into profiles (id, username)
values (auth.uid(), '小明');

SQL 里的 auth.uid() 会返回当前登录用户的 ID。这一句暂时在 SQL Editor 里执行，第八篇会用它写安全策略，也能看到查询和修改如何与用户身份联动。

下一篇 Supabase 第三方登录