Manage role's resources in Entra ID - Azure Portal

To manage roles, resources, and permissions in Entra IDfor your React web app, you need to define app roles and permissions within your Azure AD app registration, and then assign those roles to users or groups.

Create App Registration

Define App Roles

Repeat the process for any additional roles you want to create

Assign Roles

Enterprise applications -> Users and groups

Add user/group Choose the role you want to assign , in my case admin and assign.

and accordingly configure your react app to use the roles

ensure you have installed the required libraries for Azure AD authentication

npm install @azure/msal-react @azure/msal-browser jwt-decode

Configure MSAL in Your React App:

// src/authConfig.js
import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
  auth: {
    clientId: "45b931fc-3b3a-4e0a-a7ec-119143ea23da",
    authority: "https://login.microsoftonline.com/9329c02a-4050-4798-93ae-b6e37b19af6d",
    redirectUri: "http://localhost:3000",
  },
};

export const msalInstance = new PublicClientApplication(msalConfig);

Provide the MSAL instance to your React app

// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { MsalProvider } from "@azure/msal-react";
import { msalInstance } from "./authConfig";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <MsalProvider instance={msalInstance}>
      <App />
    </MsalProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Use the msal-react and jwt-decode libraries to handle authentication and extract roles from the JWT token:

// src/App.js
import React, { useState, useEffect } from "react";
import { useMsal } from "@azure/msal-react";
import jwtDecode from "jwt-decode";

function App() {
  const { instance, accounts } = useMsal();
  const [roles, setRoles] = useState([]);

  useEffect(() => {
    if (accounts.length > 0) {
      instance.acquireTokenSilent({
        scopes: ["api://45b931fc-3b3a-4e0a-a7ec-119143ea23da/.default"],
        account: accounts[0],
      }).then((response) => {
        const decodedToken = jwtDecode(response.accessToken);
        setRoles(decodedToken.roles || []);
      });
    }
  }, [accounts, instance]);

  return (
    <div>
      <h1>Welcome to My App</h1>
      {roles.includes("admin") && <AdminComponent />}
      {roles.includes("user") && <UserComponent />}
    </div>
  );
}

function AdminComponent() {
  return <div>Admin Content</div>;
}

function UserComponent() {
  return <div>User Content</div>;
}

export default App;

This allows you to manage role-based access control (RBAC) effectively in your web application.

Here are some references that may be helpful:

• Add app roles to your application and receive them in the token
• Create custom roles to manage enterprise apps in Microsoft Entra ID
• Overview of role-based access control in Microsoft Entra ID