本文详解如何在 expo + supabase 项目中正确监听用户认证状态，避免因时机错误导致的“已登录却跳转至登录页”问题，并提供健壮、可复用的状态检查方案。
本文详解如何在 expo + supabase 项目中正确监听用户认证状态，避免因时机错误导致的“已登录却跳转至登录页”问题，并提供健壮、可复用的状态检查方案。
在使用 Supabase 的 @supabase/supabase-js SDK 构建 Expo（react native）应用时，一个常见痛点是：无法准确判断用户是否已登录，进而错误地重定向到登录页。根本原因在于对 session 状态的读取时机不当——例如在 useEffect 中未等待异步认证状态就立即执行跳转逻辑，或在组件挂载初期 session 尚为 NULL 时误判为“未登录”。
✅ 正确做法：使用 onAuthStateChange 统一监听
Supabase 的 auth.onAuthStateChange() 是官方推荐的权威方式，它不仅响应用户主动登录/登出事件，还会在监听器注册后立即触发一次初始回调（含当前 session 或 null）。这意味着你无需额外调用 getSession()，即可同步获取真实认证状态。
以下是推荐的实现方案（适用于函数组件）：
import { useState, useEffect } from 'react'; import { NavigationProp } from '@react-navigation/native'; import { supabase } from '@/lib/supabase'; // 你的 Supabase 客户端实例 export default function Home({ navigation }: { navigation: NavigationProp<any> }) { const [session, setSession] = useState<AuthSession | null>(null); useEffect(() => { // 注册监听器：首次调用即返回当前会话（含缓存 session） const { data: authListener } = supabase.auth.onAuthStateChange( (event, newSession) => { setSession(newSession); // ✅ 关键：在此处做跳转判断 —— 确保 newSession 已真实就绪 if (!newSession?.user) { navigation.replace('Login'); // 使用 replace 避免返回栈堆积 } } ); // 清理监听器（组件卸载时） return () => { authListener.subscription.unsubscribe(); }; }, [navigation]); // 渲染主内容（仅当 session.user 存在时） if (!session?.user) { return null; // 或加载态 spinner，避免闪屏 } return ( <View> <Text>Welcome, {session.user.email}!</Text> {/* 其他受保护页面内容 */} </View> ); }⚠️ 注意事项与最佳实践
- 不要在 useEffect 依赖数组为空时直接检查 session：如原始代码 if (!session?.user) navigation.navigate(…) 放在 [] 闭包内，此时 session 仍为初始 null，必然触发跳转。
- 优先使用 navigation.replace() 而非 navigate()：防止用户登录后点击返回按钮意外回到 Home 页面再被重定向，造成循环。
- 处理加载态（可选但推荐）：可在 session === null 时显示
，提升用户体验；避免 null → logged-in → redirect 的视觉闪烁。 - 确保 Supabase 客户端已正确初始化：需在 App.tsx 或入口文件中完成 createClient() 并启用 autoRefreshToken（默认开启），否则本地 token 过期后不会自动续期。
- 类型安全提示：建议定义 type AuthSession = Session | null 并导入 Session 类型（来自 @supabase/supabase-js），增强 typescript 可靠性。
✅ 总结
Supabase 的 onAuthStateChange 是 React Native 认证流程的“单点真相源”。通过将其作为唯一状态入口，并将路由逻辑严格置于回调内部，即可彻底规避竞态条件与初始状态误判。该模式简洁、可靠、符合官方最佳实践，适用于所有需要受保护路由的 Expo + Supabase 场景。