Protección de Rutas (Auth)

Paso 4 de 7

Una app segura nunca debe dejar que un usuario no autenticado vea pantallas privadas. Usaremos expo-router y nuestro useAuth para crear un sistema de protección robusto.

El Guardián del Layout

Modificaremos nuestro src/app/_layout.tsx para que actúe como un “Portero”. Si no tienes sesión, te manda al login. Si ya tienes sesión y tratas de ir al login, te manda al home.

Implementación

import { usePushNotifications } from "@/lib/modules/notifications/usePushNotifications";
import { AuthProvider, useAuth } from "@/lib/modules/auth/AuthProvider";
import { Stack, useRouter, useSegments } from "expo-router";
import { useEffect } from "react";

function AuthLayout() {
  const { session, loading } = useAuth();
  const segments = useSegments();
  const router = useRouter();

  // 1. Iniciamos el sistema de notificaciones
  const userId = session?.user.id;
  usePushNotifications(userId);

  // 2. Efecto de Protección de Rutas
  useEffect(() => {
    if (loading) return; // Esperamos a saber si hay sesión o no

    // Verificamos si estamos en el grupo de rutas de autenticación (login/register)
    const inAuthGroup = segments[0] === '(auth)';

    if (!session && !inAuthGroup) {
      // ⛔ Si NO hay usuario y NO estamos en login -> Mandar a Login
      router.replace('/(auth)/login');
    } else if (session && inAuthGroup) {
      // ✅ Si HAY usuario y estamos en login -> Mandar al Home
      router.replace('/');
    }
  }, [session, loading, segments]);

  return <Stack />;
}


export default function RootLayout() {
  return (
    <AuthProvider>
      <AuthLayout />
    </AuthProvider>
  );
}

Explicación de segments

useSegments() nos devuelve un array con la ruta actual. Por ejemplo, si el usuario está en /app/(auth)/login, los segmentos serían ['(auth)', 'login'].

Esto nos permite saber “dónde está” el usuario antes de decidir si redirigirlo o no, evitando bucles infinitos de redirección.