Implement Role Based Access Control with Microsoft Entra

[IT21305900]

Hi, I am currently developing an NextJS14 application with Microsoft Entra ID. I have used this https://authjs.dev/getting-started/providers/microsoft-entra-id#configuration guidelines to configure the NextAuthV5 with Microsoft Entra.

However, after configuration, I can't access app roles permissions or group details which I configured in the Entra dashboard.

How can I access the app roles from Entra, and implement Role Based Access Control with NextJS with NextAuth.

import NextAuth from "next-auth";
import MicrosoftEntraID from "next-auth/providers/microsoft-entra-id";

export const { handlers, auth, signIn, signOut } = NextAuth({
  providers: [
    MicrosoftEntraID({
      clientId: process.env.AUTH_MICROSOFT_ENTRA_ID_ID,
      clientSecret: process.env.AUTH_MICROSOFT_ENTRA_ID_SECRET,
      tenantId: process.env.AUTH_MICROSOFT_ENTRA_ID_TENANT_ID,
    }),
  ],
  callbacks: {},
});

import { fetchDrugs } from "@/app/action";
import { auth, handlers } from "@/auth";
import DrugMathch from "@/components/drug/DrugMathch";
import DrugResults from "@/components/drug/DrugResults";
import DrugSearch from "@/components/drug/DrugSearch";
import React from "react";

const page = async ({
  searchParams,
}: {
  searchParams?: {
    search?: string;
    // page?: string;
  };
}) => {
  const search = searchParams?.search || "";
  console.log(search);
  const results = await fetchDrugs(search);

  const session = await auth();
  console.log(session);

  return (
    <div>
      <DrugSearch />
      {results.length > 0 && search && <DrugMathch drug={results[0]} />}
      <DrugResults drugsData={results} />
    </div>
  );
};

export default page;

[LucasBonafe]

Same question here, and how to change Microsoft Entra ID remotely, from application?