Supabase Auth异常：仅刷新应用后才可正常登录

问题场景 #

使用Supabase Auth实现登录登出功能，登录函数如下：

const signIn = async (email: string, password: string) => {
    try {
      const { data, error } = await supabase.auth.signInWithPassword({ email, password });

      if (error) {
        console.error('SIGN IN ERROR:', error.message);
        // Handle error accordingly, e.g., show an error message to the user
      } else {
        console.log('SIGN IN SUCCESS:', data);
        // Continue with the logic after successful sign-in
      }
    } catch (error) {
      console.error('SIGN IN EXCEPTION:', error.message);
      // Handle unexpected exceptions, e.g., network issues, etc.
    }
}

出现异常：登录功能仅首次有效，用户登出后再次登录时，supabase.auth.signInWithPassword的POST请求已发起，但try/catch块内代码完全不执行，必须刷新应用才能恢复正常。问题自创建Auth Provider共享用户信息后出现。

可能原因 #

1. Auth Provider状态未正确重置：登出后未同步清除Provider中的用户状态，导致后续Auth状态监听或异步流程被阻塞
2. Supabase实例复用问题：在Provider中重复创建Supabase实例，或实例会话状态未在登出后彻底清理
3. 登出操作不完整：仅调用了登出方法，但未清除本地会话或重置关联状态，导致登录请求的会话上下文冲突

解决方案与排查步骤 #

1. 检查并修复登出逻辑 #

确保登出时完整清除会话并重置Provider状态：

const signOut = async () => {
  const { error } = await supabase.auth.signOut();
  if (error) console.error('SIGN OUT ERROR:', error.message);
  // 必须同步重置Auth Provider中的用户状态（如使用React的setUser或类似状态管理）
  setUser(null);
};

2. 确保Supabase实例为全局单例 #

不要在Auth Provider内部重复创建实例，统一在单独文件初始化：

// supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

在Provider和登录函数中直接导入该单例，避免实例冲突。

3. 使用Auth状态监听同步用户状态 #

在Auth Provider中通过onAuthStateChange自动同步状态，避免手动维护状态导致的不一致：

// Auth Provider内部
useEffect(() => {
  const authListener = supabase.auth.onAuthStateChange((event, session) => {
    setUser(session?.user ?? null);
    // 针对SIGNED_OUT事件额外清理关联状态
    if (event === 'SIGNED_OUT') {
      // 重置其他相关状态（如权限、缓存等）
    }
  });

  return () => authListener.unsubscribe(); // 组件卸载时移除监听
}, []);

4. 排查Promise阻塞问题 #

在登录函数中添加日志，定位是否卡在await阶段：

const signIn = async (email: string, password: string) => {
    console.log('🔍 开始登录流程');
    try {
      console.log('🔍 调用signInWithPassword');
      const { data, error } = await supabase.auth.signInWithPassword({ email, password });
      console.log('🔍 signInWithPromise执行完成'); // 若未打印，说明Promise未完成
      if (error) {
        console.error('❌ 登录错误:', error.message);
      } else {
        console.log('✅ 登录成功:', data);
      }
    } catch (error) {
      console.error('⚠️ 登录异常:', error.message);
    }
}

如果卡在await，检查localStorage中是否残留sb-开头的会话键，手动清除后测试是否恢复正常。

总结 #

该问题核心是Auth Provider的状态管理或Supabase实例复用不当，导致登出后会话状态未彻底清理，阻塞了后续登录的异步流程。通过统一实例、正确重置状态、使用官方状态监听，基本可以解决这类问题。

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