Rollenbasierte Authentifizierung mit Nextauth und next.js-js-Tutorial-php.cn

Rollenbasierte Authentifizierung mit Nextauth und next.js

WBOY

Freigeben： 2024-07-22 10:15:31

Original

756 Leute haben es durchsucht

Roles based authentication using Nextauth and next.js

Hallo, wenn Sie sich auch im dunklen Verbündeten des Internets umgesehen haben und nach Ihren eigenen Auth- und rollenbasierten Lösungen gesucht haben, aber keine gefunden haben oder vielleicht doch gefunden haben, dann ist es einfach nicht so Wenn Sie nicht mehr funktionieren, sind Sie mit dem Funktionscode am richtigen Ort. Ich werde auch die Paketversion angeben, damit es für Sie einfacher ist.

Jetzt installieren wir zunächst alle Pakete, die Sie benötigen

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

Nach dem Login kopieren

Lassen Sie uns nun die Authentifizierungsanbieter für nextAuth einrichten. Wir erstellen eine Datei in unserem

lib/auth/index.ts

In dieser Datei werden wir den Credentails-Anbieter verwenden, da OAuth uns standardmäßig keine Rollen zurückgibt, aber wir werden auch sehen, wie man oAuth zum Zuweisen von Rollen verwendet

  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" };
      },
    })
  ],
});

Nach dem Login kopieren

Vielleicht ist es ein guter Zeitpunkt zu erwähnen, dass ich Postgres und Drizzle ORM verwende, um diese Informationen zu speichern und aus der Datenbank abzurufen.

Wir verwenden einen Drizzle-Adapter, mit dem Sie ihn installieren können

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

Nach dem Login kopieren

Hier finden Sie das für Drizzle geeignete Schema, damit die Authentifizierung funktioniert. Jetzt müssen wir nur noch diesen Handler in den API-Routen verwenden, damit es funktioniert.

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

export const { GET, POST } = handlers;

Nach dem Login kopieren

Jetzt funktioniert die Authentifizierung, aber es gibt noch keine Rollen. Zuerst ändern wir das Drizzle-Schema und dann unsere nextAuth-Optionen.

Denken Sie daran, dass dies ein einfaches Feld wie „Rollen“ in der Benutzertabelle sein kann, das einen Zeichenfolgenwert enthält. Aber ich habe es so gemacht, damit ich so viele Rollen erstellen kann, wie ich möchte, und Berechtigungen hinzufügen kann

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

Nach dem Login kopieren

Jetzt müssen wir die NextAuthOption ändern, damit Rollen und Berechtigungen in die Benutzersitzung einbezogen werden.

Zuerst definieren wir die Callback-Funktionen, um die Rollen selbst zu erhalten.

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

Nach dem Login kopieren

Die Funktion getRolesandPermission macht genau das, was sich anhört: Sie verwendet Drizzle, um Rollen und Berechtigungen von db abzufragen. Standardmäßig funktioniert dies allein nicht. Wir müssen auch einige Änderungen an den Typen vornehmen.

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[];
  }
}

Nach dem Login kopieren

Jetzt können wir durch den Zugriff auf die Sitzung Rollen und Berechtigungen erhalten. und damit können Sie den Benutzer auf Seitenebene blockieren oder durch den Einsatz von Middleware eine ganze Routengruppe schützen.

Diese Methode kann in einem Multi-Tenant-Sass wirklich nützlich sein, wenn Sie Ihren Benutzer nicht woanders speichern möchten, ist dies eine perfekte Lösung. Vielen Dank, dass Sie dies gelesen haben

Das obige ist der detaillierte Inhalt vonRollenbasierte Authentifizierung mit Nextauth und next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!