Autenticazione
Sistema completo per gestire autenticazione, protezione route e sincronizzazione multi-tab.
Quick Start - Proteggi una Pagina in 3 Step
Step 1: Registra la Route
typescript
// app/routes.ts
export default [
route("dashboard", "routes/dashboard.tsx"),
] satisfies RouteConfig;Step 2: Aggiungi il Loader
typescript
// app/routes/dashboard.tsx
import { AuthenticatedLayout } from "@/components/layout/authenticated";
import { createProtectedLoader } from "@/lib/auth/loaders";
// Una riga per proteggere la route
export const clientLoader = createProtectedLoader();
export default function Dashboard() {
return (
<AuthenticatedLayout>
<h1>Dashboard</h1>
</AuthenticatedLayout>
);
}Step 3: Fatto!
La pagina è protetta. Utenti non autenticati vengono reindirizzati al login prima del render.
Navigazione Guide
| Cosa vuoi fare? | Guida |
|---|---|
| Proteggere una route | Guida Rapida |
| Vedere esempi pratici | Esempi |
| Capire il flusso di login | Flusso Login |
| Capire l'architettura | Architettura |
| Usare le API | API Reference |
Factory Functions
| Funzione | Uso |
|---|---|
createProtectedLoader() | Route che richiedono autenticazione |
createProtectedLoader({ requireSettings: true }) | Route che necessitano dei settings utente |
createProtectedLoader({ loadSettings: true }) | Solo per /welcome - carica settings prima del render |
createGuestLoader() | Route solo per utenti non autenticati (login, register) |
Caratteristiche Principali
- Zero flash - Il loader blocca prima del render
- Multi-tab sync - Logout/login sincronizzato tra tutte le tab
- TanStack Query - Cache e de-duplicazione automatica
- TypeScript - Type safety completa