请求指引：Supabase中auth用户信息实时同步至profiles表的配置

问题描述 #

Supabase项目中，Auth模块创建的用户信息无法自动实时添加到profiles表，确认前端代码逻辑无问题，需要Supabase后台的具体配置步骤。

前端代码参考 #

register.tsx #

// ... (代码顶部省略)

const joinUsHandler = async (e: FormEvent) => {
  e.preventDefault();
  if (!email || !password || !name || !confirmPassword) {
    setError("请填写所有字段");
    return;
  }
  if (password !== confirmPassword) {
    setError("密码不一致");
    return;
  }
  try {
    setLoading(true);

    const signUpResult: any = await supabase.auth.signUp({
      email,
      password,
    });

    if (signUpResult.error) {
      console.error(signUpResult.error);
      if (signUpResult.error.message.includes("Email rate limit exceeded")) {
        alert("邮件发送次数超限，请稍后重试");
      }
      return;
    }
    const { user } = signUpResult.data;

    if (user) {
      console.log("用户注册成功:", user);
      await supabase.from("profiles").upsert([
        {
          user_id: user.id,
          username: name,
        },
      ]);
      setError("");
      setSuccessRegister(true);
    }
  } catch (error) {
    console.error(error);
  } finally {
    setLoading(false);
  }
};

// ... (代码底部省略)

login.tsx #

// ... (代码顶部省略)

const loginHandler = async (e: FormEvent) => {
  e.preventDefault();
  try {
    const { data, error } = await (
      supabase.auth as SupabaseClient["auth"]
    ).signInWithPassword({
      email,
      password,
    });
    if (error) {
      console.error((error as any).message);
      alert("请检查登录信息");
      return;
    }
    
    // ...

    // zustand状态管理
    setFullName(data.user.user_metadata.full_name);

    // 存储令牌 - 普通登录
    if (data.user) {
      const session = await supabase.auth.getSession();
      // ...

      const accessToken = session?.data?.session?.access_token;
      if (accessToken) {
        localStorage.setItem("accessToken", accessToken);
        // ...

        // zustand状态管理
        setAccessToken(accessToken);

        alert("登录成功，即将跳转至首页");
        navigate("/");
      }
    }
  } catch (error) {
    console.error((error as any).message);
  }
};

// ... (代码底部省略)

Supabase后台配置步骤 #

1. 确认Profiles表结构与权限 #

• 进入Supabase控制台的数据库 -> 表，找到profiles表：
  • 确保表包含user_id字段（类型为uuid，设置为主键，并添加外键关联auth.users(id)）
  • 确保username字段存在（类型根据需求设置，比如text）
• 开启RLS（行级安全）并添加策略：
  1. 点击profiles表的安全标签，开启启用行级安全
  2. 添加插入策略：
     • 策略名称：Allow authenticated users to insert their own profile
     • 允许操作：INSERT
     • 目标角色：authenticated
     • 使用表达式：auth.uid() = user_id
  3. 可选：添加更新/选择策略，确保用户只能操作自己的profile数据

2. 创建数据库触发器实现自动同步（推荐） #

如果需要完全自动将Auth用户同步到Profiles表，无需前端手动调用upsert，可以创建触发器：

1. 进入Supabase控制台的数据库 -> SQL编辑器，新建查询：

-- 创建触发器函数：当auth.users新增用户时，自动插入profiles记录
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.profiles (user_id, username)
  VALUES (NEW.id, NEW.raw_user_meta_data->>'full_name')
  ON CONFLICT (user_id) DO NOTHING; -- 避免重复插入
  RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- 创建触发器：绑定到auth.users的INSERT事件
CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

2. 点击运行执行SQL，完成触发器创建

3. 前端代码潜在优化点 #

• 确保Supabase客户端初始化时已正确配置项目URL和anon key
• 若开启了邮箱验证，用户注册后可能处于未确认状态，此时signUp返回的user对象可能存在限制，建议通过onAuthStateChange监听用户状态变化，在用户确认邮箱后再执行profile写入：

supabase.auth.onAuthStateChange((event, session) => {
  if (event === 'SIGNED_IN' && session?.user) {
    // 这里执行profiles的upsert逻辑
  }
});

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