Supabase移动端如何获取经网页确认账户后的会话

问题根源 #

Supabase Auth的会话是绑定在当前设备的本地存储（浏览器用localStorage，移动端用AsyncStorage）中的。当你在网页端完成账户验证后，验证后的会话仅保存在电脑浏览器的存储里，移动端的Supabase实例无法直接读取这个数据，所以getSession()和getUser()会返回null——这是正常的，因为移动端本地没有更新后的会话记录。

方案1：利用移动端未验证会话刷新状态 #

用户在移动端创建账户后，Supabase会返回一个未验证的临时会话（保存在移动端本地存储）。你可以通过refreshSession()主动向服务器请求同步用户的最新验证状态，而不是仅读取本地数据。

修改移动端的定时检查逻辑：

useEffect(() => {
  const interval = setInterval(async () => {
    try {
      // 刷新会话，同步服务器端的用户验证状态
      const { data: { session }, error } = await supabase.auth.refreshSession();
      
      if (error) {
        captureException(error);
        // 处理会话过期情况
        if (error.message.includes('Session not found')) {
          clearInterval(interval);
          // 可跳转至登录页或提示用户重新触发验证
        }
        return;
      }

      // 检查用户是否已完成邮箱验证
      if (session?.user?.email_confirmed_at) {
        setAccountConfirmed(true);
        clearInterval(interval);
      }
    } catch (err) {
      captureException(err);
    }
  }, 3000);

  return () => clearInterval(interval);
}, []);

方案2：通过Realtime推送验证完成通知 #

如果移动端可能丢失临时会话（比如用户重启APP），可以用Supabase Realtime监听用户表的更新事件，当网页端完成验证后，主动通知移动端触发登录流程。

步骤1：开启Realtime权限 #

在Supabase控制台的「Realtime」面板，开启auth.users表的UPDATE事件权限。

步骤2：移动端订阅更新 #

useEffect(() => {
  // 假设创建账户时已保存用户邮箱
  const userEmail = 'user@example.com';
  
  // 订阅auth.users表的更新事件
  const channel = supabase.channel('user_verification')
    .on(
      'postgres_changes',
      {
        event: 'UPDATE',
        schema: 'auth',
        table: 'users',
        filter: `email=eq.${userEmail}`
      },
      async (payload) => {
        // 检测到用户已验证
        if (payload.new.email_confirmed_at) {
          // 用账户信息重新登录（需提前保存密码，或用OTP登录）
          const { data, error } = await supabase.auth.signInWithPassword({
            email: userEmail,
            password: savedUserPassword // 创建账户时保存的密码
          });
          
          if (data?.session) {
            setAccountConfirmed(true);
            channel.unsubscribe(); // 订阅完成后取消监听
          }
        }
      }
    )
    .subscribe();

  return () => channel.unsubscribe();
}, []);

方案3：引导用户手动触发登录 #

如果以上方案都不适用，最简单的方式是在移动端/confirm页面显示提示：「账户已验证，请点击下方按钮重新登录」，让用户手动触发signInWithPassword或signInWithOtp流程，直接获取验证后的会话。

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