Implementierung von Anmeldeinformationen basierender Authentifizierung mit NextAuth.js in Next.js

Verwalten Sie den Benutzerzugriff sicher mit NextAuth.js und Next.js: Ein Anmeldeinformationsbasis-Authentifizierungshandbuch

robuste Authentifizierung ist für die Steuerung des Zugriffs auf Ihre Webanwendungen von größter Bedeutung. Während OAuth -Anbieter (wie Google oder Github) beliebt sind, bleibt die E -Mail/Passwort -Authentifizierung eine weit verbreitete und sichere Wahl. In diesem Handbuch werden die Anmeldeinformationen implementiert, die die Authentifizierung in einer nächsten.js-Anwendung mit der leistungsstarken Nextaututh.js-Bibliothek implementieren. Wir werden den Prozess Schritt für Schritt für eine einfache Implementierung in Ihren eigenen Projekten aufschlüsseln.

NextAuth.js und seinen Anmeldeinformationsanbieter

verstehen

NextAuth.js ist eine optimierte Authentifizierungslösung für Next.js, die sowohl OAuth -Anbieter als auch für dieses Tutorial für dieses Tutorial unterstützt. Letzteres ermöglicht eine E -Mail-/Passwort -Authentifizierung und bietet eine granulare Steuerung über den Anmeldungsprozess.

Der Anmeldeinformationsanbieter von NextAuth.js bietet:

• Vollständige Anpassung:
Definieren Sie Ihre eigene Anmeldelogik, Fehlerbehebung und Validierungsregeln (z. B. Kontoüberprüfungsüberprüfungen).
• Einfachheit und Sicherheit:
Nutzen Sie die festgelegte Sicherheit der E -Mail/Passwort -Authentifizierung.

Lassen Sie uns mit der Code -Implementierung eintauchen.

---

Schritt 1: Konfigurieren von NextAuth.js mit dem Anmeldeinformationsanbieter

NextAuthOptions Das Authentifizierungsverhalten von NextAuth.js diktiert das Verhalten von NextAuth.js. Hier ist der vollständige Konfigurationscode:

<code class="language-javascript">import { NextAuthOptions } from "next-auth";
import CredentialProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import { dbConnect } from "@/lib/dbConnect";
import UserModel from "@/model/User";

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialProvider({
      id: "credentials",
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any): Promise<any> {
        await dbConnect();

        try {
          const user = await UserModel.findOne({
            $or: [
              { email: credentials.identifier },
              { username: credentials.identifier },
            ],
          });

          if (!user) {
            throw new Error("Invalid email or username");
          }

          if (!user.isVerified) {
            throw new Error("Please verify your account.");
          }

          const isPasswordCorrect = await bcrypt.compare(credentials.password, user.password);
          if (isPasswordCorrect) {
            return user;
          } else {
            throw new Error("Incorrect password.");
          }
        } catch (err: any) {
          throw new Error(err.message); //Improved error handling
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token._id = user._id?.toString();
        token.isVerified = user?.isVerified;
        token.username = user?.username;
        token.isAcceptingMessages = user?.isAcceptingMessages;
      }
      return token;
    },
    async session({ session, token }) {
      if (token) {
        session.user._id = token._id?.toString();
        session.user.isVerified = token?.isVerified;
        session.user.username = token?.username;
        session.user.isAcceptingMessages = token?.isAcceptingMessages;
      }
      return session;
    },
  },
  pages: {
    signIn: "/sign-in",
    error: "/sign-in",
  },
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
};</code>

Schritt 2: Erstellen der Authentifizierungs -API -Route

Eine API -Route ist erforderlich, um die Authentifizierungsmechanismen von NextAuth.js zu verbinden.

<code class="language-javascript">// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import { authOptions } from "@/lib/authOptions";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };</code>

Dies importiert die Konfiguration und enthält den Handler sowohl für Get- als auch nach Postanforderungen.

---

Schritt 3: Projektdateistruktur (Beispiel)

eine gut organisierte Projektstruktur unterhalten:

<code>/lib
  /authOptions.ts
/model
  /User.ts
/app
  /api
    /auth
      /[...nextauth]/route.ts</code>

---

Schritt 4: Umgang mit Routen in Next.js 13 (App -Router)

Der bereitgestellte Code -Snippet für die API -Route ist bereits korrekt für Next konfiguriert.js 13 mit dem App -Router.

---

Schlussfolgerung

Dieser umfassende Leitfaden ermöglicht es Ihnen, in Ihren nächsten Projekten mit NextAuth.js eine sichere Anmeldeinformationsbasis-Authentifizierung zu implementieren. Die Flexibilität des Anmeldeinformationsanbieters ermöglicht die vollständige Kontrolle über den Authentifizierungsfluss und gewährleistet eine robuste und sichere Benutzererfahrung. Denken Sie daran, die Datenbankverbindung (dbConnect und UserModel) an Ihr spezifisches Setup anzupassen.

Das obige ist der detaillierte Inhalt vonImplementierung von Anmeldeinformationen basierender Authentifizierung mit NextAuth.js in Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!