Supabase登录时如何同时获取用户session和profile数据？

首先明确：Supabase 原生 Auth 登录接口默认不会返回关联的 profiles 表数据，没有办法在调用登录接口的同一响应里直接拿到完整的 session 和 profile 数据，你当前的二次拉取逻辑是行业通用的常规实现，也可以通过以下两种方案优化体验、简化代码：

方案1：将profile常用字段写入JWT自定义声明（最接近「同时获取」的需求） #

这种方案可以让你直接从session中读取profile字段，不需要额外发起网络请求，适合存储昵称、头像、角色等不常更新的非敏感小字段：

• 第一步在Supabase SQL编辑器执行以下代码，创建触发器同步profile字段到Auth用户的元数据中：

-- 创建同步函数
create or replace function public.sync_profile_to_auth_metadata()
returns trigger as $$
begin
  update auth.users
  set raw_app_meta_data = raw_app_meta_data || jsonb_build_object('profile', jsonb_build_object('nickname', new.nickname, 'avatar', new.avatar))
  where id = new.id;
  return new;
end;
$$ language plpgsql security definer;

-- 绑定触发器，profile新增/更新时触发同步
create trigger on_profile_change_after_sync
after insert or update of nickname, avatar on public.profiles
for each row execute function public.sync_profile_to_auth_metadata();

• 后续你直接从session中读取即可，不需要再调用getProfile接口：

// 拿到session后直接取profile数据
const profile = session.user.app_metadata?.profile

• 补充说明：如果修改了profile字段，调用await supabase.auth.refreshSession()即可拿到更新后的声明数据，不需要用户重新登录。不要在JWT中存储敏感数据，前端可直接解码JWT查看所有声明内容。

方案2：优化现有实现，消除冗余代码 #

你当前的代码中初始session读取和onAuthStateChange回调逻辑完全重复，可以抽离公共逻辑简化代码，优化后的参考代码如下：

const [authsession, setSession] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);

const getProfile = async (id) => {
  setLoading(true);
  setError(false);
  try {
    const { data } = await supabase
      .from("profiles")
      .select("*")
      .eq("id", id)
      .single();
    setSession((s) => ({ ...s, profile: data }));
  } catch (error) {
    setError(true);
  } finally {
    setLoading(false);
  }
};

// 抽离公共session处理逻辑
const handleSession = async (session) => {
  setSession(session);
  if (session) {
    await getProfile(session.user.id);
  } else {
    setSession((s) => s ? {...s, profile: null} : null);
  }
};

useEffect(() => {
  // 处理初始session
  handleSession(supabase.auth.session());
  // 监听登录状态变化
  const { data: authListener } = supabase.auth.onAuthStateChange((_event, session) => {
    handleSession(session);
  });
  // 组件卸载时清理监听
  return () => {
    authListener?.unsubscribe();
  };
}, []);

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