Authentification basée sur les rôles à l'aide de Nextauth et next.js

Bonjour, donc si vous aussi vous vous êtes interrogé sur le sombre allié d'Internet à la recherche de vos propres solutions basées sur l'authentification et les rôles, mais que vous n'en avez pas trouvé ou peut-être que vous l'avez fait, ce n'est tout simplement pas le cas ne travaillez plus, alors vous êtes au bon endroit avec le code fonctionnel, je vais également donner la version des packages pour que ce soit plus facile pour vous les gars.

Maintenant, installons d'abord tous les packages dont vous aurez besoin

  npm install next-auth@beta
  npm install drizzle-orm zod react-hook-form

configurons maintenant les fournisseurs d'authentification pour nextAuth et créerons un fichier dans notre

lib/auth/index.ts

dans ce fichier, nous allons utiliser le fournisseur d'informations d'identification car par défaut OAuth ne nous rend aucun rôle mais nous allons aussi voir comment utiliser oAuth pour attribuer des rôles

  export const { handlers, signIn, signOut, auth } = NextAuth({
 adapter: DrizzleAdapter(db),
  providers: [
    Credentials({
      name: "credentials",
      credentials: {
        email: {
          type: "email",
          label: "Email Address",
          placeholder: "Email Address",
        },
        password: {
          type: "password",
          label: "Password",
        },
      },
      async authorize(credentials) {
        const { email, password } = await signInSchema.parseAsync(credentials);

        const user = await db
          .select()
          .from(users)
          .where(eq(users.email, email))
          .execute()
          .then((res) => res[0]);

        if (!user || !user.password) return null;

         const isValidPassword = await bcryptjs.compare(password, user.password);

         if (!isValidPassword) return null;

        return {
          id: user.id,
          name: user.name,
          email: user.email,
        };
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,

      profile(profile: GoogleProfile) {
        return { ...profile, role: "user" };
      },
    })
  ],
});

C'est peut-être le bon moment pour mentionner que j'utilise postgres et drizzle ORM pour enregistrer et récupérer ces informations à partir de DB.

nous utilisons un adaptateur bruine pour cela, vous pouvez l'installer en utilisant

npm install drizzle-orm @auth/drizzle-adapter
npm install drizzle-kit --save-dev

vous pouvez trouver le schéma adapté à la bruine ici lien pour que l'authentification fonctionne. il ne nous reste plus qu'à utiliser ce gestionnaire dans les routes API pour que cela fonctionne.

import { handlers } from "@/lib/auth";

export const { GET, POST } = handlers;

maintenant, l'authentification fonctionne mais il n'y a pas encore de rôles. nous allons d'abord modifier le schéma Drizzle, puis nos options nextAuth.

N'oubliez pas qu'il peut s'agir d'un simple champ en tant que rôles dans la table des utilisateurs qui contient une valeur de chaîne. mais je l'ai fait de cette façon pour pouvoir créer autant de rôles que je veux et y ajouter une autorisation

export const roles = pgTable("roles", {
  id: text("id")
    .primaryKey()
    .$defaultFn(() => createId()),
  name: text("name").notNull(),
  description: text("description"),
});

export const permissions = pgTable("permissions", {
  id: text("id")
    .primaryKey()
    .$defaultFn(() => createId()),
  name: text("name").notNull(),
  description: text("description"),
});

export const rolePermissions = pgTable("role_permissions", {
  roleId: text("roleId").references(() => roles.id, { onDelete: "cascade" }),
  permissionId: text("permissionId").references(() => permissions.id, {
    onDelete: "cascade",
  }),
});

export const userRoles = pgTable("user_roles", {
  userId: text("userId").references(() => users.id, { onDelete: "cascade" }),
  roleId: text("roleId").references(() => roles.id, { onDelete: "cascade" }),
});

nous devons maintenant modifier NextAuthOption pour que les rôles et les autorisations soient inclus dans la session utilisateur.

Nous allons d'abord définir les fonctions de rappel pour obtenir les rôles nous-mêmes.

 callbacks: {
    async jwt({ token, user }) {
      if (user && user.id) {
        const { role, permissions } = await getUserRoleAndPermissions(user.id);
        token.role = role;
        token.permissions = permissions;
      }
      return token;
    },
    async session({ session, token }) {
      if (token && session.user) {
        session.user.id = token.id;
        session.user.role = token.role;
        session.user.permissions = token.permissions;
      }
      return session;
    },
  },

La fonction getRolesandPermission fait exactement ce qu'elle semble, elle utilise Drizzle pour interroger les rôles et les autorisations de db . Par défaut, cela ne fonctionnera pas à lui seul, nous devons également apporter quelques modifications aux types.

declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      role: string;
      permissions: string[];
    } & DefaultSession["user"];
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string;
    role: string;
    permissions: string[];
  }
}

maintenant, en accédant à la session, nous pouvons obtenir des rôles et des autorisations. et en utilisant cela, vous pouvez bloquer l'utilisateur au niveau de la page ou en utilisant un middleware, tout un groupe de routes que vous pouvez protéger.

cette méthode peut être très utile dans un environnement multi-locataires, peut-être que vous ne voulez pas enregistrer votre utilisateur ailleurs, c'est une solution parfaite. Merci d'avoir lu ceci

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!