Guida Rapida - Protezione Route

Questa guida spiega come proteggere le route della tua applicazione usando i factory loader.

Factory Functions Disponibili

createProtectedLoader(options?)

Per route che richiedono autenticazione.

Opzione	Descrizione
Senza opzioni	Verifica solo l'autenticazione
requireSettings: true	Verifica autenticazione E presenza settings. Se mancano, reindirizza a /welcome
loadSettings: true	Carica i settings prima del render. Usare solo in /welcome

createGuestLoader()

Per route accessibili solo agli utenti non autenticati (login, registrazione). Gli utenti già autenticati vengono reindirizzati a /welcome.

---

Proteggere una Pagina

Step 1: Registra la Route

Aggiungi la route in app/routes.ts:

export default [
    route("settings", "routes/settings.tsx"),
] satisfies RouteConfig;

Step 2: Crea il File con Protezione

// app/routes/settings.tsx
import { AuthenticatedLayout } from "@/components/layout/authenticated";
import { createProtectedLoader } from "@/lib/auth/loaders";

// Protezione base (solo autenticazione)
export const clientLoader = createProtectedLoader();

export default function Settings() {
    return (
        <AuthenticatedLayout>
            <h1>Impostazioni</h1>
        </AuthenticatedLayout>
    );
}

La pagina è protetta senza flash di contenuto!

---

Protezione con Settings

Se la pagina necessita dei dati utente (azienda, moduli, preferenze), usa requireSettings:

// app/routes/modules.tsx
import { AuthenticatedLayout } from "@/components/layout/authenticated";
import { createProtectedLoader } from "@/lib/auth/loaders";

// Verifica autenticazione E presenza settings
export const clientLoader = createProtectedLoader({ requireSettings: true });

export default function Modules() {
    // I settings sono garantiti presenti
    return (
        <AuthenticatedLayout>
            <h1>Moduli</h1>
        </AuthenticatedLayout>
    );
}

Come funziona requireSettings

1. Se l'utente non è autenticato → reindirizza al login
2. Se i settings non sono presenti → reindirizza a /welcome dove vengono caricati
3. Se tutto OK → carica la pagina

---

Creare una Pagina Guest-Only

Per login o registrazione che devono reindirizzare utenti già autenticati:

// app/routes/register.tsx
import { createGuestLoader } from "@/lib/auth/loaders";

// Reindirizza utenti autenticati PRIMA del render
export const clientLoader = createGuestLoader();

export default function Register() {
    return (
        <div>
            <h1>Registrazione</h1>
            {/* Form di registrazione */}
        </div>
    );
}

Gli utenti autenticati vengono automaticamente reindirizzati a /welcome!

---

Route Pubbliche

Per pagine accessibili a tutti (autenticati e non), non aggiungere il clientLoader:

// app/routes/about.tsx
export default function About() {
    return (
        <div>
            <h1>Chi Siamo</h1>
            <p>Questa pagina è accessibile a tutti.</p>
        </div>
    );
}

Nessun clientLoader = accessibile a tutti!

---

Perché usare clientLoader?

Il clientLoader è l'unico modo per evitare il flash di contenuto non autorizzato in SPA mode:

• Viene eseguito PRIMA del render del componente
• Se l'utente non è autenticato → reindirizza al login prima del render
• Se servono i settings e non ci sono → reindirizza a /welcome prima del render
• Se loadSettings: true → carica i settings prima del render (blocca finché non arrivano)

---

Best Practices

1. Usa sempre createProtectedLoader() per route che richiedono autenticazione
2. Usa createGuestLoader() per login/register
3. Non usare clientLoader per pagine pubbliche accessibili a tutti
4. Usa AuthenticatedLayout per pagine protette - include menu di navigazione e logout
5. Usa requireSettings: true quando la pagina necessita dei dati utente

---

Riferimenti

• Esempi Pratici - Codice completo di implementazione
• Architettura - Come funziona il sistema
• API Reference - Funzioni API disponibili