在Expo应用中使用Supabase验证用户登录状态及跳转异常问题

问题场景 #

在Expo应用中集成Supabase认证系统，原本想实现用户未登录时自动跳转登录页，但不管用户实际有没有登录，都会被强制跳转到登录页面，完全达不到预期效果。

初始代码 #

export default function Home({navigation, session}) {
  useEffect(() => {
    if (!session?.user) navigation.navigate('Login');
  }, [session]);

  return (
  )
}

更新后的代码 #

const [session, setSession] = useState(null);

useEffect(() => {
  supabase.auth.getSession().then(({ data: { session } }) => {
    setSession(session);
  })
  supabase.auth.onAuthStateChange((event, session) => {
    setSession(session);
  })

  if (!session?.user) navigation.navigate('Login')
}, []);

问题根源 #

1. 初始代码问题：如果session参数没有从Supabase的认证上下文正确传递到Home组件，会导致session一直是null，触发跳转逻辑。
2. 更新后代码的核心bug：useEffect里的跳转判断是同步执行的，这时候session还是初始的null（因为getSession是异步操作，还没完成赋值），所以不管用户实际登录状态如何，都会执行跳转。而且useEffect依赖数组为空，后续session更新后也不会重新检查登录状态。

正确实现方式 #

方式一：监听session状态变化再判断 #

把跳转逻辑单独放在一个依赖session的useEffect里，确保状态更新后再做判断：

import { useState, useEffect } from 'react';
import supabase from './你的Supabase客户端路径';

export default function Home({ navigation }) {
  const [session, setSession] = useState(null);

  useEffect(() => {
    // 初始化获取当前会话
    const fetchInitialSession = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      setSession(session);
    };
    fetchInitialSession();

    // 监听认证状态变化
    const authSubscription = supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });

    // 组件卸载时清理监听器，防止内存泄漏
    return () => {
      authSubscription.data.subscription.unsubscribe();
    };
  }, []);

  // 当session变化时，检查登录状态并跳转
  useEffect(() => {
    if (!session?.user) {
      navigation.navigate('Login');
    }
  }, [session, navigation]);

  return (
    // 这里放你的Home组件内容
  );
}

方式二：全局维护认证状态（推荐） #

在App层面创建Auth上下文，统一管理登录状态，避免每个组件重复处理：

1. 创建AuthContext.js

import { createContext, useContext, useState, useEffect } from 'react';
import supabase from './你的Supabase客户端路径';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [session, setSession] = useState(null);

  useEffect(() => {
    const fetchInitialSession = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      setSession(session);
    };
    fetchInitialSession();

    const authSubscription = supabase.auth.onAuthStateChange((event, session) => {
      setSession(session);
    });

    return () => {
      authSubscription.data.subscription.unsubscribe();
    };
  }, []);

  return (
    <AuthContext.Provider value={{ session }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

2. 在App.js中包裹组件

import { AuthProvider } from './AuthContext';
import { NavigationContainer } from '@react-navigation/native';
// 其他导入...

export default function App() {
  return (
    <AuthProvider>
      <NavigationContainer>
        {/* 你的导航栈 */}
      </NavigationContainer>
    </AuthProvider>
  );
}

3. 在Home组件中使用

import { useAuth } from './AuthContext';
import { useEffect } from 'react';

export default function Home({ navigation }) {
  const { session } = useAuth();

  useEffect(() => {
    if (!session?.user) {
      navigation.navigate('Login');
    }
  }, [session, navigation]);

  return (
    // 你的Home组件内容
  );
}

关键提醒 #

• 必须等异步获取session的操作完成后再判断登录状态，别用初始的null状态做判断
• 要监听session的变化，确保状态更新后重新执行跳转逻辑
• 记得清理Supabase的认证监听器，避免内存泄漏
• 全局维护认证状态能让多个组件间的登录状态同步更可靠

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