Menu

Authentifizierung

Das Verständnis von Authentifizierung ist entscheidend für den Schutz der Daten deiner Anwendung. Diese Seite führt dich durch die React- und Next.js-Funktionen, die für die Implementierung der Authentifizierung verwendet werden.

Bevor du beginnst, hilft es, den Prozess in drei Konzepte zu unterteilen:

  1. Authentifizierung: Überprüft, ob der Benutzer tatsächlich derjenige ist, der er vorgibt zu sein. Der Benutzer muss seine Identität mit etwas nachweisen, das er besitzt, wie zum Beispiel Benutzername und Passwort.
  2. Session-Management: Verfolgt den Authentifizierungsstatus des Benutzers über mehrere Anfragen hinweg.
  3. Autorisierung: Entscheidet, auf welche Routen und Daten der Benutzer zugreifen darf.

Dieses Diagramm zeigt den Authentifizierungsablauf mit React- und Next.js-Funktionen:

Diagramm zeigt den Authentifizierungsablauf mit React- und Next.js-Funktionen

Die Beispiele auf dieser Seite behandeln eine grundlegende Authentifizierung mit Benutzername und Passwort zu Bildungszwecken. Während du eine eigene Authentifizierungslösung implementieren kannst, empfehlen wir für mehr Sicherheit und Einfachheit die Verwendung einer Authentifizierungsbibliothek. Diese bieten integrierte Lösungen für Authentifizierung, Session-Management und Autorisierung sowie zusätzliche Funktionen wie Social Logins, Multi-Faktor-Authentifizierung und rollenbasierte Zugangskontrolle. Eine Liste findest du im Abschnitt Auth-Bibliotheken.

Authentifizierung

Hier sind die Schritte zur Implementierung eines Registrierungs- und/oder Anmeldeformulars:

  1. Der Benutzer übermittelt seine Anmeldedaten über ein Formular.
  2. Das Formular sendet eine Anfrage, die von einer API-Route verarbeitet wird.
  3. Nach erfolgreicher Überprüfung wird der Prozess abgeschlossen, was die erfolgreiche Authentifizierung des Benutzers anzeigt.
  4. Bei fehlgeschlagener Überprüfung wird eine Fehlermeldung angezeigt.

Betrachte ein Anmeldeformular, in dem Benutzer ihre Anmeldedaten eingeben können:

pages/login.tsx
TypeScript
import { FormEvent } from 'react'
import { useRouter } from 'next/router'
 
export default function LoginPage() {
  const router = useRouter()
 
  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
 
    const formData = new FormData(event.currentTarget)
    const email = formData.get('email')
    const password = formData.get('password')
 
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })
 
    if (response.ok) {
      router.push('/profile')
    } else {
      // Fehler behandeln
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="E-Mail" required />
      <input type="password" name="password" placeholder="Passwort" required />
      <button type="submit">Anmelden</button>
    </form>
  )
}

Das obige Formular hat zwei Eingabefelder zum Erfassen der E-Mail-Adresse und des Passworts des Benutzers. Bei der Übermittlung wird eine Funktion ausgelöst, die eine POST-Anfrage an eine API-Route (/api/auth/login) sendet.

Dann kannst du die API deines Authentifizierungsanbieters in der API-Route aufrufen, um die Authentifizierung zu behandeln:

pages/api/auth/login.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { signIn } from '@/auth'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { email, password } = req.body
    await signIn('credentials', { email, password })
 
    res.status(200).json({ success: true })
  } catch (error) {
    if (error.type === 'CredentialsSignin') {
      res.status(401).json({ error: 'Ungültige Anmeldedaten.' })
    } else {
      res.status(500).json({ error: 'Etwas ist schiefgelaufen.' })
    }
  }
}
pages/api/auth/login.js
import { signIn } from '@/auth'
 
export default async function handler(req, res) {
  try {
    const { email, password } = req.body
    await signIn('credentials', { email, password })
 
    res.status(200).json({ success: true })
  } catch (error) {
    if (error.type === 'CredentialsSignin') {
      res.status(401).json({ error: 'Ungültige Anmeldedaten.' })
    } else {
      res.status(500).json({ error: 'Etwas ist schiefgelaufen.' })
    }
  }
}

Session-Management

Session-Management stellt sicher, dass der authentifizierte Status des Benutzers über Anfragen hinweg erhalten bleibt. Es umfasst das Erstellen, Speichern, Aktualisieren und Löschen von Sitzungen oder Tokens.

Es gibt zwei Arten von Sitzungen:

  1. Zustandslos: Sitzungsdaten (oder ein Token) werden in den Cookies des Browsers gespeichert. Das Cookie wird mit jeder Anfrage gesendet, sodass die Sitzung auf dem Server überprüft werden kann. Diese Methode ist einfacher, kann aber weniger sicher sein, wenn sie nicht korrekt implementiert wird.
  2. Datenbank: Sitzungsdaten werden in einer Datenbank gespeichert, wobei der Browser des Benutzers nur die verschlüsselte Sitzungs-ID erhält. Diese Methode ist sicherer, kann aber komplex sein und mehr Serverressourcen verbrauchen.

Hinweis: Während du entweder die eine oder die andere Methode oder beide verwenden kannst, empfehlen wir die Verwendung einer Session-Management-Bibliothek wie iron-session oder Jose.

Zustandslose Sitzungen

Cookies setzen und löschen

Du kannst API Routes verwenden, um die Sitzung als Cookie auf dem Server zu setzen:

pages/api/login.ts
import { serialize } from 'cookie'
import type { NextApiRequest, NextApiResponse } from 'next'
import { encrypt } from '@/app/lib/session'
 
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const sessionData = req.body
  const encryptedSessionData = encrypt(sessionData)
 
  const cookie = serialize('session', encryptedSessionData, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7, // Eine Woche
    path: '/',
  })
  res.setHeader('Set-Cookie', cookie)
  res.status(200).json({ message: 'Cookie erfolgreich gesetzt!' })
}
pages/api/login.js
import { serialize } from 'cookie'
import { encrypt } from '@/app/lib/session'
 
export default function handler(req, res) {
  const sessionData = req.body
  const encryptedSessionData = encrypt(sessionData)
 
  const cookie = serialize('session', encryptedSessionData, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7, // Eine Woche
    path: '/',
  })
  res.setHeader('Set-Cookie', cookie)
  res.status(200).json({ message: 'Cookie erfolgreich gesetzt!' })
}

Datenbank-Sitzungen

Um Datenbank-Sitzungen zu erstellen und zu verwalten, musst du folgende Schritte ausführen:

  1. Erstelle eine Tabelle in deiner Datenbank zur Speicherung von Sitzungen und Daten (oder prüfe, ob deine Auth-Bibliothek dies übernimmt).
  2. Implementiere Funktionalität zum Einfügen, Aktualisieren und Löschen von Sitzungen
  3. Verschlüssele die Sitzungs-ID, bevor du sie im Browser des Benutzers speicherst, und stelle sicher, dass die Datenbank und das Cookie synchron bleiben (dies ist optional, aber empfohlen für optimistische Auth-Prüfungen in Middleware).

Eine Sitzung auf dem Server erstellen:

pages/api/create-session.ts
import db from '../../lib/db'
import type { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const user = req.body
    const sessionId = generateSessionId()
    await db.insertSession({
      sessionId,
      userId: user.id,
      createdAt: new Date(),
    })
 
    res.status(200).json({ sessionId })
  } catch (error) {
    res.status(500).json({ error: 'Interner Serverfehler' })
  }
}
pages/api/create-session.js
import db from '../../lib/db'
 
export default async function handler(req, res) {
  try {
    const user = req.body
    const sessionId = generateSessionId()
    await db.insertSession({
      sessionId,
      userId: user.id,
      createdAt: new Date(),
    })
 
    res.status(200).json({ sessionId })
  } catch (error) {
    res.status(500).json({ error: 'Interner Serverfehler' })
  }
}

Autorisierung

Sobald ein Benutzer authentifiziert ist und eine Sitzung erstellt wurde, kannst du Autorisierung implementieren, um zu steuern, worauf der Benutzer in deiner Anwendung zugreifen und was er tun kann.

Es gibt zwei Hauptarten von Autorisierungsprüfungen:

  1. Optimistisch: Prüft, ob der Benutzer berechtigt ist, auf eine Route zuzugreifen oder eine Aktion auszuführen, anhand der im Cookie gespeicherten Sitzungsdaten. Diese Prüfungen sind nützlich für schnelle Operationen wie das Ein-/Ausblenden von UI-Elementen oder das Umleiten von Benutzern basierend auf Berechtigungen oder Rollen.
  2. Sicher: Prüft, ob der Benutzer berechtigt ist, auf eine Route zuzugreifen oder eine Aktion auszuführen, anhand der in der Datenbank gespeicherten Sitzungsdaten. Diese Prüfungen sind sicherer und werden für Operationen verwendet, die Zugriff auf sensible Daten oder Aktionen erfordern.

Für beide Fälle empfehlen wir:

Optimistische Prüfungen mit Middleware (Optional)

Es gibt einige Fälle, in denen du Middleware verwenden und Benutzer basierend auf Berechtigungen umleiten möchtest:

  • Für optimistische Prüfungen. Da Middleware auf jeder Route ausgeführt wird, ist sie gut geeignet, um Umleitungslogik zu zentralisieren und nicht autorisierte Benutzer vorzufiltern.
  • Zum Schutz statischer Routen, die Daten zwischen Benutzern teilen (z.B. Inhalte hinter einer Bezahlschranke).

Da Middleware jedoch auf jeder Route ausgeführt wird, einschließlich vorgeholter Routen, ist es wichtig, nur die Sitzung aus dem Cookie zu lesen (optimistische Prüfungen) und Datenbankprüfungen zu vermeiden, um Leistungsprobleme zu verhindern.

Zum Beispiel:

middleware.ts
TypeScript
import { NextRequest, NextResponse } from 'next/server'
import { decrypt } from '@/app/lib/session'
import { cookies } from 'next/headers'
 
// 1. Geschützte und öffentliche Routen festlegen
const protectedRoutes = ['/dashboard']
const publicRoutes = ['/login', '/signup', '/']
 
export default async function middleware(req: NextRequest) {
  // 2. Prüfen, ob die aktuelle Route geschützt oder öffentlich ist
  const path = req.nextUrl.pathname
  const isProtectedRoute = protectedRoutes.includes(path)
  const isPublicRoute = publicRoutes.includes(path)
 
  // 3. Sitzung aus dem Cookie entschlüsseln
  const cookie = (await cookies()).get('session')?.value
  const session = await decrypt(cookie)
 
  // 4. Zu /login umleiten, wenn der Benutzer nicht authentifiziert ist
  if (isProtectedRoute && !session?.userId) {
    return NextResponse.redirect(new URL('/login', req.nextUrl))
  }
 
  // 5. Zu /dashboard umleiten, wenn der Benutzer authentifiziert ist
  if (
    isPublicRoute &&
    session?.userId &&
    !req.nextUrl.pathname.startsWith('/dashboard')
  ) {
    return NextResponse.redirect(new URL('/dashboard', req.nextUrl))
  }
 
  return NextResponse.next()
}
 
// Routen, auf denen Middleware nicht ausgeführt werden soll
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}
middleware.js
import { NextResponse } from 'next/server'
import { decrypt } from '@/app/lib/session'
import { cookies } from 'next/headers'
 
// 1. Geschützte und öffentliche Routen festlegen
const protectedRoutes = ['/dashboard']
const publicRoutes = ['/login', '/signup', '/']
 
export default async function middleware(req) {
  // 2. Prüfen, ob die aktuelle Route geschützt oder öffentlich ist
  const path = req.nextUrl.pathname
  const isProtectedRoute = protectedRoutes.includes(path)
  const isPublicRoute = publicRoutes.includes(path)
 
  // 3. Sitzung aus dem Cookie entschlüsseln
  const cookie = (await cookies()).get('session')?.value
  const session = await decrypt(cookie)
 
  // 4. Zu /login umleiten, wenn der Benutzer nicht authentifiziert ist
  if (isProtectedRoute && !session?.userId) {
    return NextResponse.redirect(new URL('/login', req.nextUrl))
  }
 
  // 5. Zu /dashboard umleiten, wenn der Benutzer authentifiziert ist
  if (
    isPublicRoute &&
    session?.userId &&
    !req.nextUrl.pathname.startsWith('/dashboard')
  ) {
    return NextResponse.redirect(new URL('/dashboard', req.nextUrl))
  }
 
  return NextResponse.next()
}
 
// Routen, auf denen Middleware nicht ausgeführt werden soll
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

Während Middleware für erste Prüfungen nützlich sein kann, sollte sie nicht deine einzige Verteidigungslinie beim Schutz deiner Daten sein. Die Mehrheit der Sicherheitsprüfungen sollte so nah wie möglich an deiner Datenquelle durchgeführt werden, siehe Data Access Layer für weitere Informationen.

Tipps:

  • In Middleware kannst du auch Cookies mit req.cookies.get('session').value lesen.
  • Middleware verwendet die Edge Runtime, prüfe ob deine Auth-Bibliothek und Session-Management-Bibliothek kompatibel sind.
  • Du kannst die matcher-Eigenschaft in der Middleware verwenden, um festzulegen, auf welchen Routen Middleware ausgeführt werden soll. Für Auth wird jedoch empfohlen, dass Middleware auf allen Routen ausgeführt wird.

Erstellen einer Datenzugriffsschicht (DAL)

Schutz von API-Routen

API-Routen in Next.js sind essentiell für die Verarbeitung serverseitiger Logik und Datenverwaltung. Es ist entscheidend, diese Routen abzusichern, damit nur autorisierte Benutzer auf bestimmte Funktionen zugreifen können. Dies beinhaltet typischerweise die Überprüfung des Authentifizierungsstatus des Benutzers und seiner rollenbasierten Berechtigungen.

Hier ist ein Beispiel für die Absicherung einer API-Route:

pages/api/route.ts
import { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const session = await getSession(req)
 
  // Überprüfe, ob der Benutzer authentifiziert ist
  if (!session) {
    res.status(401).json({
      error: 'User is not authenticated',
    })
    return
  }
 
  // Überprüfe, ob der Benutzer die Rolle 'admin' hat
  if (session.user.role !== 'admin') {
    res.status(401).json({
      error: 'Unauthorized access: User does not have admin privileges.',
    })
    return
  }
 
  // Fahre mit der Route für autorisierte Benutzer fort
  // ... Implementierung der API-Route
}
pages/api/route.js
export default async function handler(req, res) {
  const session = await getSession(req)
 
  // Überprüfe, ob der Benutzer authentifiziert ist
  if (!session) {
    res.status(401).json({
      error: 'User is not authenticated',
    })
    return
  }
 
  // Überprüfe, ob der Benutzer die Rolle 'admin' hat
  if (session.user.role !== 'admin') {
    res.status(401).json({
      error: 'Unauthorized access: User does not have admin privileges.',
    })
    return
  }
 
  // Fahre mit der Route für autorisierte Benutzer fort
  // ... Implementierung der API-Route
}

Dieses Beispiel zeigt eine API-Route mit einer zweistufigen Sicherheitsprüfung für Authentifizierung und Autorisierung. Zunächst wird auf eine aktive Sitzung geprüft und dann verifiziert, ob der angemeldete Benutzer ein 'Admin' ist. Dieser Ansatz gewährleistet einen sicheren Zugriff, der auf authentifizierte und autorisierte Benutzer beschränkt ist, und sorgt für eine robuste Sicherheit bei der Verarbeitung von Anfragen.

Ressourcen

Nachdem du über Authentifizierung in Next.js gelernt hast, hier sind Next.js-kompatible Bibliotheken und Ressourcen, die dir bei der Implementierung sicherer Authentifizierung und Session-Management helfen:

Auth-Bibliotheken

Session-Management-Bibliotheken

Weiterführende Lektüre

Um mehr über Authentifizierung und Sicherheit zu lernen, sieh dir die folgenden Ressourcen an: