1. Setup und verwenden
In diesem Tutorial werde ich Sie durch die Einrichtung der Authentifizierung in Ihrem Next.js 13 App -Verzeichnis mit NextAuth.js führen. Es ist erwähnenswert, dass Sie zwar das NextAuth -Paket in diesem Tutorial verwenden, Sie jedoch möglicherweise das Auth.js -Paket verwenden, wenn Sie dies lesen, da die Bibliotheken jetzt austauschbar sind.
Themen behandelt
- Richten Sie das nächste.js 13 -Projekt ein
- Setup Next Auth API -Route einrichten
- Erstellen Sie wiederverwendbare Tasten
- Drei Möglichkeiten, die NextAuth -Sitzungsdaten zu erhalten
- Holen Sie sich die Sitzung in einer Serverkomponente
- Holen Sie sich die Sitzung in einer API -Route
- Holen Sie sich die Sitzung in einer Client -Komponente
- Integrieren Sie eine Datenbank
- Setup PostgreSQL
- Setup Prisma Orm
- Implementieren Sie den NextAuth -Authentifizierungscode
- Speichern Sie benutzerdefinierte Schlüssel im JWT
- Verschiedene Möglichkeiten zum Schutz von Routen
- Client-Side-Routenschutz
- Serverseitiger Routenschutz
- Schützen Sie eine API -Route
- Middleware Routenschutz
- Implementieren Sie die Kontoregistrierungslogik
- Erstellen Sie die API -Route, um Benutzer zu registrieren
- Erstellen Sie die Formularkomponente
- Erstellen Sie die Seite der Kontoregistrierung
Lesen Sie den gesamten Artikel hier: https://codevoweb.com/setup-nuse-nextAuth-in-nextjs-13-app-directory/
2. Next.js - Verwenden Sie benutzerdefinierte Login- und Anmeldeseiten für NextAuth.js
In diesem Artikel erfahren Sie, wie Sie benutzerdefinierte Login- und Anmeldungsseiten mit NextAuth.js in das neue Next.js 13 App -Verzeichnis integrieren. Ich werde davon ausgehen, dass Sie bereits NextAuth in Ihrem Projekt eingerichtet haben und dass Sie nur nach einer Möglichkeit suchen, Ihre benutzerdefinierten Anmeldungs- und Anmeldeseiten zu integrieren.
Themen behandelt
- Führen Sie das NextAuth -Projekt auf Ihrem Computer aus
- Testen Sie das NextAuth -Projekt
- Registrieren Sie ein Konto
- Melden Sie sich in Ihrem Konto an
- Greifen Sie auf eine geschützte Seite zu
- Konfigurieren Sie den NextAuth -API -Endpunkt
- Erstellen Sie die benutzerdefinierte Anmeldeseite
- Erstellen Sie das Anmeldeformular
- Erstellen Sie die Anmeldeseite
- Erstellen Sie die Seite "benutzerdefinierte Anmeldung"
- Erstellen Sie das Anmeldeformular
- Erstellen Sie die Seite der Kontoregistrierung
- Erstellen Sie den API -Handler für die Kontoregistrierung
- Abschluss
Lesen Sie hier den gesamten Artikel
3. Next.js - Mit NextAuth.js Google und Github OAuth2 hinzufügen
In diesem Artikel erfahren Sie, wie Sie Google und Github OAuth -Anbieter in NextAuth.js in das neue Next.js 13 App -Verzeichnis integrieren. Es ist erwähnenswert, dass ich eine bestimmte Pull -Anforderung verwende, die vom NextAuth -Team empfohlen wird, das mit dem neuen App -Verzeichnis von Next.js 13 kompatibel ist.
Themen behandelt
- Führen Sie das NextAuth -Projekt lokal aus
- Entdecken Sie den GitHub und den Google OAuth Flow
- Melden Sie sich bei Google OAuth2 an
- Melden Sie sich mit Github OAuth an
- Konfigurieren Sie NextAuth mit Google und Github OAuth
- Implementieren Sie die Google und Github OAuth2
- Erstellen Sie das clientseitige Formular
- Erstellen Sie die serverseitige Seitenkomponente
- So generieren Sie die Google OAuth2 -Anmeldeinformationen
- So generieren Sie die Github -OAuth -Anmeldeinformationen
- Abschluss
Lesen Sie hier den gesamten Artikel
