0Pricing
React Academy · Lezione

Gestione delle sessioni e hook useSession

Acceda ai dati della sessione nei componenti server e client e protegga le pagine in base allo stato di autenticazione.

Gestione delle sessioni e hook useSession è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Tipi di sessione in Auth.js

Auth.js supporta due strategie per le sessioni: JWT (predefinita, token senza stato in un cookie) e database (record della sessione nel database, invalidabile lato server).

useSession nei Client Components

useSession() è un hook dei Client Components che legge la sessione corrente. Restituisce data (sessione), status ('loading' | 'authenticated' | 'unauthenticated') e una funzione update.

'use client';
import { useSession } from 'next-auth/react';

export function UserAvatar() {
  const { data: session, status } = useSession();
  if (status === 'loading') return <Spinner />;
  if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
  return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}

Configurare SessionProvider

Avvolga l'app (o un sottoalbero di Client Components) in SessionProvider, così useSession può accedere al contesto della sessione.

// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
  return <html><body><Providers>{children}</Providers></body></html>;
}

auth() nei Server Components

Per i Server Components, utilizzi direttamente auth(): non servono hook né provider. La funzione legge la sessione dal cookie lato server.

import { auth } from '@/auth';

export default async function Header() {
  const session = await auth();
  return (
    <nav>
      {session ? (
        <span>Hello, {session.user?.name}</span>
      ) : (
        <Link href="/login">Sign in</Link>
      )}
    </nav>
  );
}

Proteggere le route dei Client Components

Utilizzi useSession con l'opzione required: true per reindirizzare automaticamente gli utenti non autenticati alla pagina di accesso.

'use client';
import { useSession } from 'next-auth/react';

export default function ProtectedPage() {
  const { data: session } = useSession({ required: true });
  // session is never null here — unauthenticated users are redirected
  return <div>Welcome, {session?.user?.name}</div>;
}

Aggiornare la sessione

Chiami la funzione update() restituita da useSession per aggiornare la sessione (ad esempio dopo una modifica del profilo) senza dover uscire e accedere nuovamente.

const { data: session, update } = useSession();

async function handleNameChange(newName: string) {
  await updateUserName(newName); // API call
  await update({ user: { name: newName } }); // refresh session
}

Callback JWT della sessione

Utilizzi la callback jwt per aggiungere dati personalizzati al token JWT durante l'accesso e la callback session per esporli nell'oggetto della sessione.

callbacks: {
  async jwt({ token, user }) {
    if (user) token.role = user.role; // add on first sign-in
    return token;
  },
  async session({ session, token }) {
    session.user.role = token.role as string;
    return session;
  },
},

Scadenza della sessione

Configuri la durata massima della sessione nella configurazione di Auth.js. Le sessioni JWT si aggiornano automaticamente a ogni richiesta quando sono attive.

export const { handlers, auth } = NextAuth({
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60,   // refresh if older than 1 day
  },
});

Invalidare le sessioni nel database

Le sessioni nel database possono essere revocate lato server, una funzione utile per forzare la disconnessione. Elimini il record della sessione dal database per invalidarla immediatamente.

// Server Action to log out all devices:
async function logOutAllDevices() {
  'use server';
  const session = await auth();
  if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
  redirect('/login');
}

Accesso basato sui ruoli nei Client Components

Legga il ruolo della sessione da useSession ed esegua il rendering condizionale dell'interfaccia in base a tale ruolo.

const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';

return (
  <>
    {isAdmin && <AdminPanel />}
    <UserContent />
  </>
);

Verifica rapida

Quale provider deve avvolgere l'app affinché useSession() funzioni nei Client Components?

Riepilogo

Utilizzi auth() per accedere alla sessione nei Server Components e useSession() nei Client Components avvolti da SessionProvider. Aggiunga dati personalizzati tramite le callback JWT e session, aggiorni le sessioni lato client con update() e configuri maxAge per la scadenza della sessione.

Domande Frequenti

La lezione «Gestione delle sessioni e hook useSession» è gratuita?

Sì — il testo completo di «Gestione delle sessioni e hook useSession» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Gestione delle sessioni e hook useSession»?

Acceda ai dati della sessione nei componenti server e client e protegga le pagine in base allo stato di autenticazione. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Gestione delle sessioni e hook useSession»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Configurazione di Auth.js nell'App Router di Next.js
  2. Gestione delle sessioni e hook useSession
  3. Credentials Provider e login personalizzato
  4. Protezione delle route basata sul middleware
← Torna a React Academy