Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Die Authentifizierung ist eine Schlüsselkomponente der Anwendungsentwicklung. Es hilft, Benutzerdaten zu schützen und böswillige Aktivitäten zu verhindern. Einfach ausgedrückt bestimmt es die Glaubwürdigkeit der Identität eines Benutzers und stellt sicher, dass nur autorisierte Benutzer auf eine Anwendung und ihre Ressourcen zugreifen können.

Das Erstellen eines benutzerdefinierten Authentifizierungssystems kann eine zeitaufwändige Aufgabe sein, und hier kommt NextAuth.js ins Spiel. Es bietet sichere Authentifizierungsunterstützung für Anwendungen, die mit dem Next.js-Framework erstellt wurden.

Was ist NextAuth.js?

WeiterAuth.js ist eine leichtgewichtige Open-Source-Bibliothek, die bietet Authentifizierung und Autorisierung Unterstützung für Next.js-Anwendungen. Damit können Entwickler schnell und einfach Authentifizierung und Autorisierung für ihre Next.js-Apps einrichten. Es bietet Funktionen wie Authentifizierung bei mehreren Anbietern, E-Mail und passwortlose Authentifizierung.

instagram viewer

Wie funktioniert NextAuth.js bei der Authentifizierung?

Die Authentifizierungslösung von NextAuth.js bietet eine clientseitige API, die Sie verwenden können in Ihre Next.js-Anwendung integrieren. Sie können damit Benutzer bei verschiedenen Anmeldeanbietern authentifizieren, bei denen sie Konten erstellt haben.

Im Hintergrund werden Benutzer auf die Anmeldeseite eines Anbieters umgeleitet. Bei erfolgreicher Authentifizierung gibt der Anbieter Sitzungsdaten zurück, die die Nutzdaten des Benutzers enthalten. Diese Payload kann dann den Zugriff auf die Anwendung und ihre Ressourcen autorisieren.

Neue Feature-Updates in NextAuth.js (v4)

Im Dezember 2022 veröffentlichte NextAuth.js seine vierte Version. Diese Version wurde gegenüber der früheren Version, v3, mit neuen Updates und Modifikationen verbessert. Die Änderungen konzentrieren sich hauptsächlich auf die Verbesserung der Verwendung der Bibliothek im Authentifizierungsprozess.

1. Aktualisierungen des useSession-Hooks

Sie können den Hook useSession verwenden, um zu überprüfen, ob ein Benutzer angemeldet ist oder nicht. In dieser neuen Version gibt der useSession-Hook ein Objekt zurück, das dank der hinzugefügten Statusoption eine einfachere Möglichkeit zum Testen von Zuständen bietet. Siehe den folgenden Code:

importieren { useSession } aus"nächstes authentifizieren/reagieren"
ExportStandardFunktionKomponente() {
konst { Daten: Sitzung, Status } = useSession()


Wenn (Status "authentifiziert") { 
zurückkehren<P>Angemeldet als {session.user.email}P>
 }
zurückkehren<P> Nicht eingeloggt P>
}

2. SessionProvider-Kontext wird obligatorisch

Die neue Version 4 schreibt die Verwendung des SessionProvider-Kontexts vor. Das bedeutet, dass Sie Ihre App mit dem useSession-Provider umschließen müssen. NextAuth.js empfiehlt, Ihre App in die einzuschließen _app.jsx Datei.

Außerdem wurde die clientMaxAge-Methode durch refetchInterval ersetzt. Dadurch wird es einfacher, die Sitzung regelmäßig im Hintergrund abzurufen.

importieren { Sitzungsanbieter } aus"nächstes authentifizieren/reagieren"
ExportStandardFunktionApp({
 Komponente, pageProps: { Sitzung, ...pageProps }, 
}) {
zurückkehren ( 
<SitzungsanbieterSitzung={Sitzung}NeuabrufIntervall={5 * 60}>
<Komponente {...SeiteRequisiten} />Sitzungsanbieter>
 )
}

3. Anbieter einzeln importieren

NextAuth.js stellt mehrere Anbieterdienste bereit, mit denen Sie einen Benutzer anmelden können. Sie beinhalten:

  • Verwendung von integrierten OAuth-Anbietern (z. B. GitHub, Google).
  • E-Mail-Anbieter verwenden.

In dieser neuen Version müssen Sie jeden Anbieter einzeln importieren.

importieren GoogleProvider aus"next-auth/provider/google"
importieren Auth0Provider aus"nächste-auth/anbieter/auth0";

4. Weitere geringfügige Änderungen

  • Der clientseitige Import wurde von next-auth/client in next-auth/react umbenannt.
  • Änderungen an den Argumenten der Callback-Methoden: 
    signIn({ Benutzer, Konto, Profil, E-Mail, Anmeldeinformationen })
    Sitzung ({ Sitzung, Token, Benutzer })
    jwt({Token, Benutzer, Konto, Profil, istNeuerBenutzer})

Erste Schritte mit NextAuth.js in der Authentifizierung

Um NextAuth.js in Ihre Next.js-Anwendungen zu integrieren, gehen Sie wie folgt vor:

  1. Erstellen Sie eine Next.js-Anwendung, indem Sie diesen Befehl ausführen: npx create-next-app
  2. Laufen npm installiere next-auth in Ihrem Terminal, um NextAuth.js in Ihrer Next.js-Anwendung zu installieren.
  3. Besuche den WeiterAuth.js offizielle Dokumentation und wählen Sie Ihren/Ihre bevorzugte(n) Anbieter aus der Liste der unterstützten Anbieter aus. Erstellen Sie als Nächstes ein Konto in der Entwicklerkonsole Ihres/Ihrer ausgewählten Anbieter/s und registrieren Sie Ihre Next.js-Anwendung.
  4. Geben Sie in der Entwicklerkonsole Ihres/Ihrer ausgewählten Anbieter/s die URL der Heimatroute und das Callback-Umleitungs-URL, speichern Sie die Änderungen und kopieren Sie die Kunden ID Und Client-Geheimnis.
  5. Erstellen Sie im Stammverzeichnis Ihrer Next.js-Anwendung eine .env-Datei zum Speichern der Kunden ID Und Client-Geheimnis.
  6. Erstellen Sie zuletzt im Verzeichnis /pages/api einen neuen Ordner mit dem Namen Authentifizierung. Erstellen Sie im Ordner auth eine neue Datei und nennen Sie sie [...nextauth].js. Fügen Sie in der erstellten Datei den folgenden Code hinzu. Der Code zeigt die clientseitige API von NextAuth.js mit einem Google-Anbieter: 
importieren GoogleProvider aus"next-auth/provider/google";
Anbieter: [
 GoogleProvider({
Kunden ID: Verfahren.env.GOOGLE_CLIENT_ID,
clientSecret: Verfahren.env.GOOGLE_CLIENT_SECRET
 })
]

Sie können jetzt fortfahren und eine Anmeldeauthentifizierungsseite erstellen. Hier ist ein DOM-Rendering für eine Login-Komponente:

importieren Reagieren aus'reagieren';
importieren { useSession, signIn, signOut } aus"nächstes authentifizieren/reagieren"
ExportStandardFunktionKomponente() {
konst { Daten: Sitzung } = useSession()


 wenn (Sitzung) {
zurückkehren (
<>
<P> Angemeldet als {session.user.email} P>
<TasteonClick={() => signOut()}>AbmeldenTaste>

 )
 }
zurückkehren (
<>
<P> Nicht eingeloggt P>
<TasteonClick={() => signIn()}>AnmeldenTaste>

 )
}

Der useSession Hook greift auf das aktuelle Benutzersitzungsobjekt zu. Sobald sich ein Nutzer anmeldet und von Google authentifiziert wird, wird ein Sitzungsobjekt mit der Nutzlast des Nutzers zurückgegeben. Dadurch kann Next.js die Benutzerdetails auf der Clientseite der App rendern, in diesem Fall die E-Mail.

Benutzerdefinierte Authentifizierungssysteme vs. Gebrauchsfertige Lösungen wie NextAuth.js

Wählen Sie zwischen dem Aufbau eines benutzerdefinierten Authentifizierungssystems und der Integration einer gebrauchsfertigen Authentifizierung Lösung wie NextAuth.js, ist es wichtig, die Kosten, Komplexität und Sicherheit jeder einzelnen zu berücksichtigen Lösung.

Wenn Sie über die Ressourcen und das Fachwissen verfügen, um ein benutzerdefiniertes Authentifizierungssystem zu entwickeln, ist dies möglicherweise der beste Ansatz für Sie. Wenn Sie jedoch nach einer sofort einsatzbereiten Lösung suchen, die einfach zu implementieren, sicher und kostengünstig ist, ist NextAuth.js möglicherweise eine gute Wahl. Letztendlich hängt die Wahl von Ihren Bedürfnissen und Vorlieben ab.