Authentifizierung

Um Authentifizierung in Next.js zu implementieren, sollten Sie sich mit drei grundlegenden Konzepten vertraut machen:

Authentifizierung bestätigt, ob der Benutzer derjenige ist, für den er sich ausgibt. Der Benutzer muss seine Identität mit etwas nachweisen, das er besitzt, wie z.B. einem Benutzernamen und Passwort.
Session-Management verfolgt den Zustand des Benutzers (z.B. eingeloggt) über mehrere Anfragen hinweg.
Autorisierung entscheidet, auf welche Teile der Anwendung der Benutzer zugreifen darf.

Diese Seite zeigt, wie Sie Next.js-Funktionen nutzen können, um gängige Authentifizierungs-, Autorisierungs- und Session-Management-Muster zu implementieren, damit Sie die besten Lösungen basierend auf den Anforderungen Ihrer Anwendung auswählen können.

Authentifizierung bestätigt die Identität eines Benutzers. Dies geschieht, wenn sich ein Benutzer anmeldet, entweder mit einem Benutzernamen und Passwort oder über einen Dienst wie Google. Es geht darum zu bestätigen, dass Benutzer wirklich diejenigen sind, für die sie sich ausgeben, um sowohl die Daten des Benutzers als auch die Anwendung vor unbefugtem Zugriff oder betrügerischen Aktivitäten zu schützen.

Authentifizierungsstrategien

Moderne Webanwendungen verwenden häufig mehrere Authentifizierungsstrategien:

OAuth/OpenID Connect (OIDC): Ermöglichen Zugriff durch Dritte ohne Weitergabe von Benutzeranmeldedaten. Ideal für Social-Media-Logins und Single Sign-On (SSO)-Lösungen. Sie fügen eine Identitätsschicht mit OpenID Connect hinzu.
Anmeldedaten-basierte Anmeldung (E-Mail + Passwort): Eine Standardwahl für Webanwendungen, bei der sich Benutzer mit einer E-Mail und einem Passwort anmelden. Vertraut und einfach zu implementieren, erfordert es robuste Sicherheitsmaßnahmen gegen Bedrohungen wie Phishing.
Passwortlose/Token-basierte Authentifizierung: Verwendet E-Mail-Magic-Links oder SMS-Einmalcodes für sicheren, passwortfreien Zugriff. Beliebt wegen seiner Bequemlichkeit und verbesserten Sicherheit, hilft diese Methode, Passwortmüdigkeit zu reduzieren. Ihre Einschränkung ist die Abhängigkeit von der Verfügbarkeit der E-Mail oder des Telefons des Benutzers.
Passkeys/WebAuthn: Verwendet kryptografische Anmeldedaten, die für jede Website einzigartig sind, und bietet hohe Sicherheit gegen Phishing. Sicher aber neu, diese Strategie kann schwierig zu implementieren sein.

Die Auswahl einer Authentifizierungsstrategie sollte den spezifischen Anforderungen Ihrer Anwendung, Benutzeroberflächenüberlegungen und Sicherheitszielen entsprechen.

Implementierung der Authentifizierung

In diesem Abschnitt werden wir den Prozess der Hinzufügung einer grundlegenden E-Mail-Passwort-Authentifizierung zu einer Webanwendung untersuchen. Während diese Methode ein grundlegendes Sicherheitsniveau bietet, lohnt es sich, fortgeschrittenere Optionen wie OAuth oder passwortlose Logins für einen verbesserten Schutz gegen gängige Sicherheitsbedrohungen in Betracht zu ziehen. Der Authentifizierungsablauf, den wir diskutieren, ist wie folgt:

Der Benutzer übermittelt seine Anmeldedaten über ein Anmeldeformular.
Das Formular sendet eine Anfrage, die von einer API-Route verarbeitet wird.
Bei erfolgreicher Überprüfung wird der Prozess abgeschlossen, was die erfolgreiche Authentifizierung des Benutzers anzeigt.
Wenn die Überprüfung fehlschlägt, wird eine Fehlermeldung angezeigt.

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

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="Email" required />
      <input type="password" name="password" placeholder="Passwort" required />
      <button type="submit">Anmelden</button>
    </form>
  )
}

import { FormEvent } from 'react'
import { useRouter } from 'next/router'

export default function LoginPage() {
  const router = useRouter()

  async function handleSubmit(event) {
    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="Email" required />
      <input type="password" name="password" placeholder="Passwort" required />
      <button type="submit">Anmelden</button>
    </form>
  )
}

Das obige Formular hat zwei Eingabefelder für die Erfassung der E-Mail 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.

Sie können dann die API Ihres Authentifizierungsanbieters in der API-Route aufrufen, um die Authentifizierung zu behandeln:

import { 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.' })
    }
  }
}

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.' })
    }
  }
}

In diesem Code überprüft die Methode signIn die Anmeldedaten gegen gespeicherte Benutzerdaten. Nachdem der Authentifizierungsanbieter die Anmeldedaten verarbeitet hat, gibt es zwei mögliche Ergebnisse:

Erfolgreiche Authentifizierung: Dies bedeutet, dass die Anmeldung erfolgreich war. Weitere Aktionen, wie der Zugriff auf geschützte Routen und das Abrufen von Benutzerinformationen, können dann eingeleitet werden.
Fehlgeschlagene Authentifizierung: Falls die Anmeldedaten falsch sind oder ein Fehler auftritt, gibt die Funktion eine entsprechende Fehlermeldung zurück, um das Authentifizierungsversagen anzuzeigen.

Für eine effizientere Authentifizierungseinrichtung in Next.js-Projekten, insbesondere bei der Bereitstellung mehrerer Anmeldemethoden, sollten Sie eine umfassende Authentifizierungslösung in Betracht ziehen.

Autorisierung

Sobald ein Benutzer authentifiziert ist, müssen Sie sicherstellen, dass der Benutzer bestimmte Routen besuchen darf und Operationen wie das Ändern von Daten mit Server-Aktionen und das Aufrufen von Route Handlern durchführen darf.

Absicherung von Routen mit Middleware

Middleware in Next.js hilft Ihnen zu kontrollieren, wer auf verschiedene Teile Ihrer Website zugreifen kann. Dies ist wichtig, um Bereiche wie das Benutzerdashboard geschützt zu halten, während andere Seiten wie Marketingseiten öffentlich bleiben. Es wird empfohlen, Middleware über alle Routen anzuwenden und Ausnahmen für den öffentlichen Zugriff festzulegen.

Hier ist, wie Sie Middleware für die Authentifizierung in Next.js implementieren können:

Einrichtung der Middleware:

Erstellen Sie eine middleware.ts oder .js-Datei im Stammverzeichnis Ihres Projekts.
Fügen Sie Logik zur Autorisierung des Benutzerzugriffs hinzu, wie z.B. die Überprüfung von Authentifizierungstokens.

Definition geschützter Routen:

Nicht alle Routen erfordern eine Autorisierung. Verwenden Sie die Option matcher in Ihrer Middleware, um Routen anzugeben, die keine Autorisierungsprüfungen erfordern.

Middleware-Logik:

Schreiben Sie Logik, um zu überprüfen, ob ein Benutzer authentifiziert ist. Überprüfen Sie Benutzerrollen oder Berechtigungen für die Routenautorisierung.

Behandlung nicht autorisierter Zugriffe:

Leiten Sie nicht autorisierte Benutzer je nach Bedarf zu einer Anmelde- oder Fehlerseite weiter.

Beispiel-Middleware-Datei:

import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const currentUser = request.cookies.get('currentUser')?.value

  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
    return Response.redirect(new URL('/dashboard', request.url))
  }

  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
    return Response.redirect(new URL('/login', request.url))
  }
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

export function middleware(request) {
  const currentUser = request.cookies.get('currentUser')?.value

  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
    return Response.redirect(new URL('/dashboard', request.url))
  }

  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
    return Response.redirect(new URL('/login', request.url))
  }
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

Dieses Beispiel verwendet Response.redirect für die Behandlung von Weiterleitungen früh in der Anfragepipeline, was effizient ist und die Zugriffskontrolle zentralisiert.

Nach erfolgreicher Authentifizierung ist es wichtig, die Benutzerführung basierend auf ihren Rollen zu verwalten. Beispielsweise könnte ein Admin-Benutzer zu einem Admin-Dashboard weitergeleitet werden, während ein normaler Benutzer zu einer anderen Seite geschickt wird. Dies ist wichtig für rollenspezifische Erfahrungen und bedingte Navigation, wie z.B. das Auffordern von Benutzern, ihr Profil zu vervollständigen, falls erforderlich.

Bei der Einrichtung der Autorisierung ist es wichtig sicherzustellen, dass die Hauptsicherheitsprüfungen dort stattfinden, wo Ihre App auf Daten zugreift oder sie ändert. Während Middleware für die anfängliche Validierung nützlich sein kann, sollte sie nicht die einzige Verteidigungslinie zum Schutz Ihrer Daten sein. Der Großteil der Sicherheitsprüfungen sollte in der Data Access Layer (DAL) durchgeführt werden.

Schutz von API-Routen

API-Routen in Next.js sind entscheidend für die Handhabung serverseitiger Logik und Datenverwaltung. Es ist wichtig, diese Routen zu sichern, um sicherzustellen, dass 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 Sicherung einer API-Route:

import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const session = await getSession(req)

  // Überprüfen, ob der Benutzer authentifiziert ist
  if (!session) {
    res.status(401).json({
      error: 'User is not authenticated',
    })
    return
  }

  // Überprüfen, 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
  }

  // Fortfahren mit der Route für autorisierte Benutzer
  // ... Implementierung der API-Route
}

export default async function handler(req, res) {
  const session = await getSession(req)

  // Überprüfen, ob der Benutzer authentifiziert ist
  if (!session) {
    res.status(401).json({
      error: 'User is not authenticated',
    })
    return
  }

  // Überprüfen, 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
  }

  // Fortfahren mit der Route für autorisierte Benutzer
  // ... Implementierung der API-Route
}

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

Best Practices

Sichere Sitzungsverwaltung: Priorisieren Sie die Sicherheit von Sitzungsdaten, um unbefugten Zugriff und Datenlecks zu verhindern. Verwenden Sie Verschlüsselung und sichere Speicherpraktiken.
Dynamische Rollenverwaltung: Verwenden Sie ein flexibles System für Benutzerrollen, um Änderungen in Berechtigungen und Rollen leicht anpassen zu können, und vermeiden Sie hartkodierte Rollen.
Sicherheitsorientierter Ansatz: Priorisieren Sie in allen Aspekten der Autorisierungslogik die Sicherheit, um Benutzerdaten zu schützen und die Integrität Ihrer Anwendung zu erhalten. Dies beinhaltet gründliches Testen und die Berücksichtigung potenzieller Sicherheitslücken.

Sitzungsverwaltung

Die Sitzungsverwaltung umfasst die Nachverfolgung und Verwaltung der Interaktion eines Benutzers mit der Anwendung über die Zeit, wodurch sichergestellt wird, dass sein authentifizierter Zustand über verschiedene Teile der Anwendung hinweg erhalten bleibt.

Dies vermeidet die Notwendigkeit wiederholter Anmeldungen und verbessert sowohl die Sicherheit als auch die Benutzerfreundlichkeit. Es gibt zwei primäre Methoden für die Sitzungsverwaltung: cookie-basierte Sitzungen und Datenbank-Sitzungen.

🎥 Ansehen: Erfahren Sie mehr über cookie-basierte Sitzungen und Authentifizierung mit Next.js → YouTube (11 Minuten).

Cookie-basierte Sitzungen verwalten Benutzerdaten, indem sie verschlüsselte Sitzungsinformationen direkt in Browser-Cookies speichern. Bei der Benutzeranmeldung werden diese verschlüsselten Daten im Cookie gespeichert. Jede nachfolgende Serveranfrage enthält dieses Cookie, was die Notwendigkeit wiederholter Serverabfragen minimiert und die Client-seitige Effizienz verbessert.

Diese Methode erfordert jedoch eine sorgfältige Verschlüsselung, um sensible Daten zu schützen, da Cookies anfällig für Client-seitige Sicherheitsrisiken sind. Die Verschlüsselung von Sitzungsdaten in Cookies ist entscheidend, um Benutzerinformationen vor unbefugtem Zugriff zu schützen. Sie stellt sicher, dass die Daten im Cookie selbst bei Diebstahl unlesbar bleiben.

Darüber hinaus sind einzelne Cookies zwar in der Größe begrenzt (typischerweise etwa 4KB), aber Techniken wie Cookie-Chunking können diese Einschränkung überwinden, indem große Sitzungsdaten in mehrere Cookies aufgeteilt werden.

Das Setzen eines Cookies in einem Next.js-Projekt könnte etwa so aussehen:

Setzen eines Cookies auf dem Server:

import { serialize } from 'cookie'
import type { NextApiRequest, NextApiResponse } from 'next'

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: 'Successfully set cookie!' })
}

import { serialize } from 'cookie'

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: 'Successfully set cookie!' })
}

Datenbank-Sitzungen

Die Datenbank-Sitzungsverwaltung beinhaltet die Speicherung von Sitzungsdaten auf dem Server, wobei der Browser des Benutzers nur eine Sitzungs-ID erhält. Diese ID verweist auf die serverseitig gespeicherten Sitzungsdaten, ohne die Daten selbst zu enthalten. Diese Methode verbessert die Sicherheit, da sie sensible Sitzungsdaten von der Client-seitigen Umgebung fernhält und das Risiko von Client-seitigen Angriffen reduziert. Datenbank-Sitzungen sind auch skalierbarer und können größere Datenspeicheranforderungen bewältigen.

Dieser Ansatz hat jedoch auch seine Nachteile. Er kann die Leistung beeinträchtigen, da bei jeder Benutzerinteraktion Datenbankabfragen erforderlich sind. Strategien wie das Caching von Sitzungsdaten können dies mildern. Darüber hinaus bedeutet die Abhängigkeit von der Datenbank, dass die Sitzungsverwaltung so zuverlässig ist wie die Leistung und Verfügbarkeit der Datenbank.

Hier ist ein vereinfachtes Beispiel für die Implementierung von Datenbank-Sitzungen in einer Next.js-Anwendung:

Erstellen einer Sitzung auf dem Server:

import db from '../../lib/db'
import { 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: 'Internal Server Error' })
  }
}

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: 'Internal Server Error' })
  }
}

Auswahl der Session-Verwaltung in Next.js

Die Entscheidung zwischen Cookie-basierten und Datenbank-Sessions in Next.js hängt von den Anforderungen Ihrer Anwendung ab. Cookie-basierte Sessions sind einfacher und eignen sich für kleinere Anwendungen mit geringerer Serverlast, bieten jedoch möglicherweise weniger Sicherheit. Datenbank-Sessions sind zwar komplexer, bieten aber bessere Sicherheit und Skalierbarkeit, was sie ideal für größere, datensensible Anwendungen macht.

Mit Authentifizierungslösungen wie NextAuth.js wird die Session-Verwaltung effizienter, indem entweder Cookies oder Datenbankspeicher verwendet werden. Diese Automatisierung vereinfacht den Entwicklungsprozess, aber es ist wichtig, die von Ihrer gewählten Lösung verwendete Session-Verwaltungsmethode zu verstehen. Stellen Sie sicher, dass sie mit den Sicherheits- und Leistungsanforderungen Ihrer Anwendung übereinstimmt.

Unabhängig von Ihrer Wahl sollten Sie Sicherheit in Ihrer Session-Verwaltungsstrategie priorisieren. Bei Cookie-basierten Sessions ist die Verwendung sicherer und HTTP-only Cookies entscheidend, um Session-Daten zu schützen. Bei Datenbank-Sessions sind regelmäßige Backups und die sichere Handhabung von Session-Daten unerlässlich. Die Implementierung von Session-Ablauf- und Bereinigungsmechanismen ist bei beiden Ansätzen wichtig, um unbefugten Zugriff zu verhindern und die Anwendungsleistung sowie Zuverlässigkeit zu gewährleisten.

Beispiele

Hier sind Authentifizierungslösungen, die mit Next.js kompatibel sind. Bitte lesen Sie die folgenden Quickstart-Anleitungen, um zu erfahren, wie Sie sie in Ihrer Next.js-Anwendung konfigurieren:

Weiterführende Literatur

Um mehr über Authentifizierung und Sicherheit zu lernen, lesen Sie die folgenden Ressourcen:

Authentifizierung

On this page