如何在Supabase中使用用户名完成用户授权？

Supabase默认仅支持邮箱+密码的认证方式，要实现用户名+密码登录，需通过扩展用户表字段+自定义登录逻辑完成，具体步骤如下：

1. 为用户添加用户名字段 #

首先要在用户表中添加唯一的用户名字段，两种实现方式：

• 控制台操作：进入Supabase控制台，找到auth.users表，添加类型为varchar的username字段，并开启唯一约束（防止重复用户名）。
• SQL语句执行：在SQL编辑器中运行以下语句：

  ALTER TABLE auth.users ADD COLUMN username varchar UNIQUE NOT NULL;
  

  也可将用户名存入user_metadata（适合无需单独查询的场景），但单独字段更便于后续查询操作。

2. 自定义用户注册流程 #

默认的signUp方法仅接受邮箱和密码，需在注册时额外设置用户名：

客户端注册示例（JavaScript） #

// 1. 先通过邮箱创建用户
const { data: userData, error: createError } = await supabase.auth.signUp({
  email: userInputEmail, // 可让用户填写，或后台生成临时邮箱（不推荐）
  password: userInputPassword,
});

if (createError) throw createError;

// 2. 为刚创建的用户设置用户名
const { error: updateError } = await supabase
  .from('auth.users')
  .update({ username: userInputUsername })
  .eq('id', userData.user.id);

if (updateError) throw updateError;

服务器端注册示例（更安全，比如Edge Function） #

// 服务器端代码，避免客户端直接操作用户表
const { data, error } = await supabase.auth.admin.createUser({
  email: userEmail,
  password: userPassword,
  user_metadata: {
    username: desiredUsername
  }
});

3. 实现用户名登录逻辑 #

核心思路：先通过用户名查询对应的邮箱，再调用signInWithPassword完成登录：

async function signInWithUsername(username, password) {
  // 1. 根据用户名查询关联的邮箱
  const { data: user, error: fetchError } = await supabase
    .from('auth.users')
    .select('email')
    .eq('username', username)
    .single();

  if (fetchError) {
    // 处理用户名不存在的情况
    return { error: new Error('用户名或密码错误') };
  }

  // 2. 用查询到的邮箱执行登录
  const { data, error } = await supabase.auth.signInWithPassword({
    email: user.email,
    password: password,
  });

  return { data, error };
}

// 调用示例
const { data, error } = await signInWithUsername('my_user', 'my_pass123');
if (error) console.error(error);

注意事项 #

• 确保用户名字段的唯一性，避免重复注册。
• 服务器端操作用户表更安全，防止客户端直接修改敏感数据。
• 前端可隐藏邮箱输入框，仅展示用户名和密码输入，让用户感知不到邮箱的存在。

内容的提问来源于stack exchange，提问作者Sujit