Supabase JS 在 React Native 中 Google OAuth 登录卡顿问题解析与解决方案

问题背景

在 React Native (Expo) 应用中使用 Supabase JS 库实现 Google OAuth 登录时，开发者可能会遇到一个棘手的问题：当调用 supabase.auth.setSession 方法设置会话时，应用会卡住无响应。虽然认证过程在后台实际上已经成功完成（用户已在 Supabase 中创建/授权），但前端界面却无法正常继续后续流程。

问题现象

具体表现为：

1. Google OAuth 流程正常启动
2. 用户能够顺利完成 Google 认证
3. 应用接收到包含有效令牌的重定向 URL
4. 调用 supabase.auth.setSession 设置会话
5. 虽然后台操作成功，但 Promise 却永远不会 resolve
6. 应用在此处卡住，无法继续后续流程

值得注意的是，这个问题仅出现在 Google OAuth 流程中，而使用 Apple 登录在相同实现下却能正常工作。

根本原因

经过深入分析，问题的根源在于 onAuthStateChange 监听器中的异步操作处理不当。Supabase 官方文档明确指出，在 onAuthStateChange 回调中直接使用 await 可能会导致死锁问题。

具体来说，当 setSession 被调用时，它会触发 onAuthStateChange 事件。如果回调函数中又包含需要等待的异步操作（如访问 Supabase 的其他方法），就会形成一个循环等待的僵局，最终导致整个流程卡住。

解决方案

1. 使用 setTimeout 解耦异步操作

最有效的解决方案是将 onAuthStateChange 回调中的异步操作包裹在 setTimeout 中，这样可以将这些操作推迟到下一个事件循环执行，避免直接阻塞当前调用链：

const { data } = supabase.auth.onAuthStateChange((event, session) => {
  // 使用 setTimeout 延迟异步操作，避免死锁
  setTimeout(async () => {
    if (event === 'SIGNED_IN' && session?.user) {
      const userData = await createUserDataFromSupabaseUser(session.user);
      setUser(userData);
      await storeUserData(userData);
    } else if (event === 'SIGNED_OUT') {
      setUser(null);
      await AsyncStorage.removeItem(USER_STORAGE_KEY);
    }
  }, 0);
});

2. 正确管理监听器生命周期

同时，我们需要确保在组件卸载时正确清理监听器，避免内存泄漏：

useEffect(() => {
  let authListener: { subscription: { unsubscribe: () => void } } | null = null;
  
  const initialize = async () => {
    // 初始化代码...
    
    const { data } = supabase.auth.onAuthStateChange((event, session) => {
      setTimeout(async () => {
        // 处理逻辑...
      }, 0);
    });
    
    authListener = data;
  };
  
  initialize();
  
  return () => {
    if (authListener?.subscription) {
      authListener.subscription.unsubscribe();
    }
  };
}, []);

最佳实践建议

1. 避免在回调中直接使用 await：特别是在 onAuthStateChange 这类核心认证回调中，应该将异步操作解耦。

2. 使用状态管理：考虑将用户状态管理集中到 Redux 或 Context 中，而不是直接在认证回调中处理。

3. 错误边界处理：为所有异步操作添加 try-catch 块，确保错误能被妥善处理。

4. 性能监控：在关键路径添加性能日志，帮助诊断潜在问题。

总结

Supabase JS 在 React Native 中的 Google OAuth 登录卡顿问题，本质上是一个异步编程模型的问题。通过理解 Supabase 内部的事件机制和 React Native 的执行环境，我们能够找到优雅的解决方案。记住，在处理认证流程时，特别是在回调函数中，谨慎处理异步操作是避免这类问题的关键。

这个案例也提醒我们，在集成第三方认证服务时，不仅要关注功能实现，还需要深入理解其内部工作机制，这样才能构建出稳定可靠的认证流程。