Melaksanakan Pengesahan Berasaskan Kredensial dengan NextAuth.js di Next.js

mengurus akses pengguna dengan selamat dengan nextauth.js dan next.js: Panduan pengesahan berasaskan kredensial

Pengesahan yang teguh adalah yang paling penting untuk mengawal akses ke aplikasi web anda. Walaupun penyedia OAuth (seperti Google atau GitHub) adalah popular, pengesahan e -mel/kata laluan tetap menjadi pilihan yang lazim dan selamat. Butiran panduan ini melaksanakan pengesahan berasaskan kelayakan dalam aplikasi Next.js menggunakan perpustakaan NextAuth.js yang kuat. Kami akan memecahkan proses langkah demi langkah untuk pelaksanaan mudah dalam projek anda sendiri.

Memahami NextAuth.js dan penyedia kelayakannya

NextAuth.js adalah penyelesaian pengesahan yang diselaraskan untuk Next.js, menyokong kedua -dua penyedia OAuth dan, yang penting untuk tutorial ini, penyedia kelayakan adat. Yang terakhir membolehkan pengesahan e -mel/kata laluan, menawarkan kawalan berbutir ke atas proses log masuk.

Pembekal kelayakan NextAuth.js menyediakan:

• Penyesuaian Lengkap: Tentukan logik logik anda sendiri, pengendalian ralat, dan peraturan pengesahan (mis., Pemeriksaan pengesahan akaun).
• kesederhanaan dan keselamatan: memanfaatkan keselamatan e -mel/kata laluan yang ditubuhkan.

mari kita menyelidiki pelaksanaan kod.

---

Langkah 1: Mengkonfigurasi NextAuth.js dengan pembekal kelayakan

Objek konfigurasi

menentukan tingkah laku pengesahan NextAuth.js. Inilah kod konfigurasi yang lengkap: NextAuthOptions

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,
};

Langkah 2: Mewujudkan Laluan API Pengesahan

Laluan API diperlukan untuk berinteraksi dengan mekanisme pengesahan NextAuth.js.

// 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 };

ini secara ringkas mengimport konfigurasi dan mendedahkan pengendali untuk kedua -dua permintaan mendapatkan dan pos.

---

Langkah 3: Struktur Fail Projek (Contoh)

Mengekalkan struktur projek yang teratur:

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

---

Langkah 4: Laluan pengendalian di Next.js 13 (App Router)

Coretan kod yang disediakan untuk laluan API sudah dikonfigurasi dengan betul untuk seterusnya.js 13 menggunakan penghala aplikasi.

---

Kesimpulan

Panduan Komprehensif ini memberi anda kuasa untuk melaksanakan pengesahan berasaskan kelayakan yang selamat dalam projek-projek Next.js anda menggunakan NextAuth.js. Fleksibiliti penyedia kelayakan membolehkan kawalan sepenuhnya ke atas aliran pengesahan, memastikan pengalaman pengguna yang mantap dan selamat. Ingatlah untuk menyesuaikan sambungan pangkalan data (

dan dbConnect) ke persediaan khusus anda. UserModel

Atas ialah kandungan terperinci Melaksanakan Pengesahan Berasaskan Kredensial dengan NextAuth.js di Next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!