Authentifizierung

Authentifizierung überprüft die Identität eines Benutzers, während Autorisierung steuert, auf was ein Benutzer zugreifen kann. Next.js unterstützt mehrere Authentifizierungsmuster, die jeweils für unterschiedliche Anwendungsfälle entwickelt wurden. Diese Seite führt Sie durch jeden Fall, damit Sie basierend auf Ihren Anforderungen die richtige Wahl treffen können.

Authentifizierungsmuster

Der erste Schritt zur Identifizierung des benötigten Authentifizierungsmusters ist das Verständnis der Datenabrufstrategie, die Sie verwenden möchten. Anschließend können wir bestimmen, welche Authentifizierungsanbieter diese Strategie unterstützen. Es gibt zwei Hauptmuster:

Verwenden Sie statische Generierung, um einen Ladezustand serverseitig zu rendern, gefolgt vom clientseitigen Abruf der Benutzerdaten.
Holen Sie Benutzerdaten serverseitig ab, um das kurzzeitige Anzeigen nicht authentifizierter Inhalte zu vermeiden.

Authentifizierung statisch generierter Seiten

Next.js erkennt automatisch, dass eine Seite statisch ist, wenn keine blockierenden Datenanforderungen vorhanden sind. Das bedeutet das Fehlen von getServerSideProps und getInitialProps auf der Seite. Stattdessen kann Ihre Seite einen Ladezustand vom Server rendern und anschließend den Benutzer clientseitig abrufen.

Ein Vorteil dieses Musters ist, dass Seiten von einem globalen CDN bereitgestellt und mit next/link vorab geladen werden können. In der Praxis führt dies zu einer schnelleren TTI (Time to Interactive).

Schauen wir uns ein Beispiel für eine Profilseite an. Diese rendert zunächst ein Ladeskelett. Sobald die Anfrage für einen Benutzer abgeschlossen ist, wird der Name des Benutzers angezeigt:

pages/profile.js

import useUser from '../lib/useUser'
import Layout from '../components/Layout'

const Profile = () => {
  // Benutzer clientseitig abrufen
  const { user } = useUser({ redirectTo: '/login' })

  // Ladezustand serverseitig rendern
  if (!user || user.isLoggedIn === false) {
    return <Layout>Loading...</Layout>
  }

  // Sobald die Benutzeranfrage abgeschlossen ist, den Benutzer anzeigen
  return (
    <Layout>
      <h1>Dein Profil</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

Sie können dieses Beispiel in Aktion sehen. Schauen Sie sich das with-iron-session-Beispiel an, um zu verstehen, wie es funktioniert.

Authentifizierung serverseitig gerenderter Seiten

Wenn Sie eine async-Funktion namens getServerSideProps von einer Seite exportieren, wird Next.js diese Seite bei jeder Anfrage mit den von getServerSideProps zurückgegebenen Daten vorrendern.

export async function getServerSideProps(context) {
  return {
    props: {}, // Wird als Props an die Seitenkomponente übergeben
  }
}

Lassen Sie uns das Profilbeispiel so anpassen, dass es serverseitiges Rendering verwendet. Wenn eine Sitzung vorhanden ist, wird user als Prop an die Profile-Komponente auf der Seite übergeben. Beachten Sie, dass es in diesem Beispiel kein Ladeskelett gibt.

pages/profile.js

import withSession from '../lib/session'
import Layout from '../components/Layout'

export const getServerSideProps = withSession(async function ({ req, res }) {
  const { user } = req.session

  if (!user) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    }
  }

  return {
    props: { user },
  }
})

const Profile = ({ user }) => {
  // Benutzer anzeigen. Kein Ladezustand erforderlich
  return (
    <Layout>
      <h1>Dein Profil</h1>
      <pre>{JSON.stringify(user, null, 2)}</pre>
    </Layout>
  )
}

export default Profile

Ein Vorteil dieses Musters ist die Vermeidung des kurzzeitigen Anzeigens nicht authentifizierter Inhalte vor der Weiterleitung. Es ist wichtig zu beachten, dass das Abrufen von Benutzerdaten in getServerSideProps das Rendering blockiert, bis die Anfrage an Ihren Authentifizierungsanbieter abgeschlossen ist. Um Engpässe und eine Erhöhung der TTFB (Time to First Byte) zu vermeiden, sollten Sie sicherstellen, dass Ihre Authentifizierungsabfrage schnell ist. Andernfalls sollten Sie statische Generierung in Betracht ziehen.

Authentifizierungsanbieter

Nachdem wir Authentifizierungsmuster besprochen haben, schauen wir uns spezifische Anbieter an und untersuchen, wie sie mit Next.js verwendet werden.

Eigene Datenbank verwenden

Beispiele

Wenn Sie über eine bestehende Datenbank mit Benutzerdaten verfügen, möchten Sie wahrscheinlich eine quelloffene Lösung nutzen, die anbieterunabhängig ist.

Wenn Sie ein einfaches, verschlüsseltes und zustandsloses Sitzungs-Tool benötigen, verwenden Sie iron-session.
Wenn Sie ein vollständiges Authentifizierungssystem mit integrierten Anbietern (Google, Facebook, GitHub…), JWT, JWE, E-Mail/Passwort, Magic Links und mehr benötigen, verwenden Sie next-auth.

Beide Bibliotheken unterstützen beide Authentifizierungsmuster. Wenn Sie an Passport interessiert sind, haben wir auch Beispiele dafür mit sicheren und verschlüsselten Cookies:

Andere Anbieter

Um Beispiele mit anderen Authentifizierungsanbietern zu sehen, schauen Sie sich den Beispielordner an.