Protected

Protected controla acceso a UI privada según el estado de autenticación.
Es un guard de cliente: decide si renderiza el contenido, muestra loading, o redirige.

Cuándo usarlo

• Rutas privadas (/dashboard, /settings, /billing)
• Secciones internas que requieren sesión activa
• Flujos con verificación inicial de auth (isLoading)

API (configObject)

Campo	Tipo	Requerido	Qué hace
states.user	TUser | null	Sí	Usuario autenticado; si es null, no hay sesión
states.isLoading	boolean	Sí	Estado de verificación de sesión
redirectionPath	string	Sí	Ruta interna destino cuando no hay sesión
loadingComponent	ReactNode	No	UI personalizada mientras carga
defaultMessage	string	No	Texto de fallback si no define loadingComponent

type ProtectedConfig<TUser = unknown> = {
  states: {
    user: TUser | null;
    isLoading: boolean;
  };
  redirectionPath: string;
  loadingComponent?: React.ReactNode;
  defaultMessage?: string;
};

Flujo de decisión (cómo funciona)

1. isLoading === true

   • Muestra loadingComponent si existe.
   • Si no, muestra defaultMessage (si existe).
   • Si no hay ninguno, renderiza null.

2. isLoading === false y user === null

   • Redirige a redirectionPath con replace: true (no agrega historial extra).

3. isLoading === false y hay user

   • Renderiza children.

Ejemplo recomendado

import { Protected } from '@arielgonzaguer/michi-router/protected';

const protectedConfig = {
  states: { user, isLoading },
  redirectionPath: '/login',
  loadingComponent: <div>Verificando autenticación...</div>,
  defaultMessage: 'Cargando...'
};

{
  path: '/dashboard',
  component: (
    <Protected configObject={protectedConfig}>
      <Dashboard />
    </Protected>
  )
}

Buenas prácticas

• Inicialice isLoading en true hasta finalizar verificación de sesión.
• Mantenga redirectionPath simple e interna (/login, /).
• Use loadingComponent para evitar parpadeo visual.
• Mantenga el guard delgado: no haga fetches pesados dentro de Protected.
• Para control por roles, componga encima de Protected.

Patrón por roles

function AdminOnly({ children }: { children: React.ReactNode }) {
  const { user } = useAuthStore();
  if (!user || user.role !== 'admin') return <div>Sin permisos</div>;
  return <>{children}</>;
}

{
  path: '/admin',
  component: (
    <Protected configObject={protectedConfig}>
      <AdminOnly>
        <AdminPage />
      </AdminOnly>
    </Protected>
  )
}

Errores comunes

1. isLoading inicia en false antes de verificar auth.
   Resultado: redirección prematura al login.

2. redirectionPath externa o insegura (https://..., javascript:...).
   Resultado: se bloquea y usa / como fallback seguro.

3. Usar Protected como única seguridad de datos.
   Resultado: riesgo si backend no valida permisos.

Seguridad

Protected valida redirectionPath internamente.
Si la ruta no es segura/interna, aplica fallback a /.

Protected protege navegación y renderizado de UI en cliente.
La autorización real debe validarse también en backend/API/Firestore rules.