Implémentation d'authentification basée sur les informations d'identification avec nextAuth.js dans Next.js

Gérer en toute sécurité l'accès des utilisateurs avec nextauth.js et next.js: un guide d'authentification basé sur les informations d'identification

L'authentification robuste est primordiale pour contrôler l'accès à vos applications Web. Bien que les fournisseurs d'Oauth (comme Google ou GitHub) soient populaires, l'authentification par e-mail / mot de passe reste un choix répandu et sécurisé. Ce guide détaille la mise en œuvre d'authentification basée sur les informations d'identification dans une application Next.js à l'aide de la bibliothèque puissante NextAuth.js puissante. Nous décomposons le processus étape par étape pour une implémentation facile dans vos propres projets.

Comprendre NextAuth.js et son fournisseur d'identification

NextAuth.js est une solution d'authentification rationalisée pour next.js, prenant en charge les deux fournisseurs OAuth et, surtout pour ce didacticiel, les fournisseurs d'identification personnalisés. Ce dernier permet une authentification par e-mail / mot de passe, offrant un contrôle granulaire sur le processus de connexion.

Le fournisseur d'identification NextAuth.js fournit:

• Personnalisation complète: Définissez votre propre logique de connexion, la gestion des erreurs et les règles de validation (par exemple, chèques de vérification du compte).
• Simplicité et sécurité: Tirez parti de la sécurité établie de l'authentification par e-mail / mot de passe.

Plongeons l'implémentation du code.

---

Étape 1: Configuration de nextAuth.js avec le fournisseur d'identification

L'objet de configuration NextAuthOptions dicte le comportement d'authentification de NextAuth.js. Voici le code de configuration complet:

<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>

Étape 2: Création de l'authentification API Route

Une route API est nécessaire pour s'interfacer avec les mécanismes d'authentification de NextAuth.js.

<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>

Cela importe de manière concise la configuration et expose le gestionnaire pour les demandes Get et Post.

---

Étape 3: Structure du fichier de projet (exemple)

Maintenir une structure de projet bien organisée:

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

---

Étape 4: Gestion des routes dans Next.js 13 (Router de l'application)

l'extrait de code fourni pour l'itinéraire de l'API est déjà correctement configuré pour next.js 13 en utilisant le routeur de l'application.

---

Conclusion

Ce guide complet vous permet de mettre en œuvre une authentification sécurisée basée sur les informations d'identification dans vos projets Next.js à l'aide de nextAuth.js. La flexibilité du fournisseur d'identification permet un contrôle complet sur le flux d'authentification, garantissant une expérience utilisateur robuste et sécurisée. N'oubliez pas d'adapter la connexion de la base de données (dbConnect et UserModel) à votre configuration spécifique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!