Auth with React about fastapi-azure-auth HOT 6 CLOSED

// main.tsx

import { MsalProvider } from "@azure/msal-react";
import { msalInstance } from "./features/utils/aad";

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

// features/utils/aad.tsx

import {
  Configuration,
  RedirectRequest,
  PublicClientApplication,
  EventMessage,
  EventType,
  AuthenticationResult,
} from "@azure/msal-browser";

export const msalConfig: Configuration = {
  auth: {
    clientId: import.meta.env.VITE_AAD_CLIENT_ID as string,
    authority: `https://login.microsoftonline.com/${import.meta.env.VITE_AAD_TENANT_ID}`,
    redirectUri: "http://localhost:3000/login",
  },
  cache: {
    cacheLocation: "sessionStorage", 
    storeAuthStateInCookie: false,
  },
};

export const msalInstance = new PublicClientApplication(msalConfig);

msalInstance.addEventCallback((event: EventMessage) => {
  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {
    const payload = event.payload as AuthenticationResult;
    const account = payload.account;
    msalInstance.setActiveAccount(account);
  }
});

// MSAL.js v2 exposes several account APIs, logic to determine which account to use is the responsibility of the developer
const account = msalInstance.getAllAccounts()[0];

export const accessTokenRequest = {
  scopes: [`api://${import.meta.env.VITE_AAD_APP_CLIENT_ID}/user_impersonation`],
  account: account,
};

export const accessTokenRequest = {
  scopes: [`user_impersonation`],
  account: account,
};