0Pricing
React Academy · Lektion

Sitzungsverwaltung und useSession-Hook

Greifen Sie in Server- und Client-Components auf Sitzungsdaten zu und schützen Sie Seiten abhängig vom Authentifizierungsstatus.

Sitzungsverwaltung und useSession-Hook ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Sitzungstypen in Auth.js

Auth.js unterstützt zwei Sitzungsstrategien: JWT (Standard, zustandsloses Token im Cookie) und Datenbank (Sitzungsdatensatz in der Datenbank, der serverseitig ungültig gemacht werden kann).

useSession in Client Components

useSession() ist ein Hook für Client Components, der die aktuelle Sitzung ausliest. Er gibt data (Sitzung), status ('loading' | 'authenticated' | 'unauthenticated') und eine update-Funktion zurück.

'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 ?? ''} />;
}

SessionProvider einrichten

Umschließen Sie Ihre App oder einen Teilbaum aus Client Components mit SessionProvider, damit useSession auf den Sitzungskontext zugreifen kann.

// 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() in Server Components

Verwenden Sie für Server Components direkt auth() — dafür sind weder ein Hook noch ein Provider erforderlich. Die Funktion liest die Sitzung aus dem serverseitigen Cookie aus.

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>
  );
}

Client-Routen schützen

Verwenden Sie useSession mit der Option required: true, um nicht authentifizierte Benutzer automatisch zur Anmeldeseite weiterzuleiten.

'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>;
}

Sitzung aktualisieren

Rufen Sie die von useSession zurückgegebene Funktion update() auf, um die Sitzung zu aktualisieren, beispielsweise nach einer Profiländerung, ohne sich ab- und wieder anmelden zu müssen.

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

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

JWT-Sitzungs-Callbacks

Verwenden Sie den jwt-Callback, um bei der Anmeldung benutzerdefinierte Daten zum JWT-Token hinzuzufügen, und den session-Callback, um diese im Sitzungsobjekt bereitzustellen.

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;
  },
},

Ablauf der Sitzung

Konfigurieren Sie die maximale Sitzungsdauer in der Auth.js-Konfiguration. JWT-Sitzungen werden bei jeder aktiven Anfrage automatisch aktualisiert.

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
  },
});

Datenbank-Sitzungen ungültig machen

Datenbank-Sitzungen können serverseitig widerrufen werden, was beispielsweise für eine erzwungene Abmeldung nützlich ist. Löschen Sie den Sitzungsdatensatz aus der Datenbank, um die Sitzung sofort ungültig zu machen.

// 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');
}

Rollenbasierter Zugriff in Client Components

Lesen Sie die Rolle aus der Sitzung mit useSession aus und rendern Sie die Benutzeroberfläche abhängig davon.

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

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

Kurztest

Welcher Provider muss Ihre App umschließen, damit useSession() in Client Components funktioniert?

Zusammenfassung

Verwenden Sie auth() für den Sitzungszugriff in Server Components und useSession() in Client Components, die von SessionProvider umschlossen sind. Fügen Sie über JWT- und Sitzungs-Callbacks benutzerdefinierte Daten hinzu, aktualisieren Sie Sitzungen clientseitig mit update() und konfigurieren Sie mit maxAge den Sitzungsablauf.

Häufig gestellte Fragen

Ist die Lektion „Sitzungsverwaltung und useSession-Hook“ kostenlos?

Ja — der vollständige Text von „Sitzungsverwaltung und useSession-Hook“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Sitzungsverwaltung und useSession-Hook“?

Greifen Sie in Server- und Client-Components auf Sitzungsdaten zu und schützen Sie Seiten abhängig vom Authentifizierungsstatus. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Sitzungsverwaltung und useSession-Hook“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Auth.js im Next.js App Router einrichten
  2. Sitzungsverwaltung und useSession-Hook
  3. Credentials-Provider und benutzerdefinierte Anmeldung
  4. Route-Schutz auf Middleware-Basis
← Zurück zu React Academy