Integración con Firebase Auth

Esta guía muestra un patrón simple y sólido para usar Protected con Firebase Auth.

1. Instalar dependencias

pnpm add @arielgonzaguer/michi-router firebase

2. Store de autenticación (shape mínimo)

Protected necesita un objeto con:

{
  user: User | null;
  isLoading: boolean;
}

3. Router principal

import React, { useEffect } from 'react';
import { RouterProvider } from '@arielgonzaguer/michi-router/core';
import { Protected } from '@arielgonzaguer/michi-router/protected';
import useAuthStore from './store/useAuthStore';

import Home from './Home';
import Login from './Login';
import Dashboard from './Dashboard';
import NotFound from './NotFound';

export default function AppRouter() {
  const auth = useAuthStore();

  useEffect(() => {
    auth.initializeAuth();
  }, [auth]);

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

  const routes = [
    { path: '/', component: <Home /> },
    { path: '/login', component: <Login /> },
    {
      path: '/dashboard',
      component: (
        <Protected configObject={protectedConfig}>
          <Dashboard />
        </Protected>
      )
    }
  ];

  return <RouterProvider routes={routes} notFound={<NotFound />} />;
}

4. Buenas prácticas

• Inicialice isLoading en true hasta que termine onAuthStateChanged.
• Mantenga redirectionPath interna (/login, /).
• Aplique autorización real en backend/Firestore rules.

5. Recordatorio de seguridad

Protected protege la UI en cliente.
Para datos sensibles, valide permisos en backend o reglas de Firestore.