React Admin MSAL Authentication Provider

Common errors

• Msal-browser@3.0.0-beta.0: Uninitialized_public_client_application: PublicClientApplication must be initialized by calling initialize() asynchronously.

  cause The `initialize()` method of `PublicClientApplication` was not called after instantiation, which is a new requirement in MSAL v3.
  fix Call `myMSALObj.initialize()` within a `useEffect` hook or similar asynchronous context before using the MSAL instance.

• Msal-browser@3.0.0-beta.0: Interaction_in_progress: Interaction is currently in progress. Please complete the current interaction before attempting another.

  cause An MSAL interactive authentication flow (e.g., login, acquire token) was initiated while another was still active, leading to a race condition or conflict.
  fix Implement logic to check `msalInstance.getAccount()` or similar before initiating a new interactive call, or ensure only one interaction can occur at a time. The package's `msalAuthProvider` should handle this generally, but ensure no conflicting manual MSAL calls are made.

• Error: `authProvider` did not return a `redirectToLogin` method.

  cause The `authProvider` returned by `msalAuthProvider` might not be correctly configured or is missing required methods expected by `react-admin`.
  fix Ensure `msalAuthProvider` is called with a valid `msalInstance` and any necessary configuration. Verify that `react-admin` and `ra-auth-msal` versions are compatible.

Warnings

• breaking Upgraded `@azure/msal-browser` to v3.x, which requires the `PublicClientApplication` instance to be initialized asynchronously by calling `msalInstance.initialize()`.
  Fix: Ensure `myMSALObj.initialize()` is called, typically within a `useEffect` hook in your main application component, before rendering the `Admin` component.
• breaking Upgraded `react-admin` to v5.x. This may introduce breaking changes from `react-admin` itself that need to be addressed in your application.
  Fix: Consult the `react-admin` v5 upgrade guide for specific migration steps. `ra-auth-msal` will adapt to the new `react-admin` API, but your application code may need updates.
• gotcha The `Admin` component must be wrapped in a `BrowserRouter`. MSAL's hash-based routing strategy for redirects is incompatible with `HashRouter`.
  Fix: Always wrap your `<Admin>` component within a `<BrowserRouter>` from `react-router-dom`.
• gotcha The `navigateToLoginRequestUrl` property in your MSAL configuration (`msalConfig.auth`) should be set to `false`. React-Admin handles this redirection logic, and enabling it in MSAL can lead to conflicts.
  Fix: Set `navigateToLoginRequestUrl: false` within the `auth` object of your `msalConfig`.

Install

• npm install ra-auth-msal npm
• yarn add ra-auth-msal yarn
• pnpm add ra-auth-msal pnpm

Imports

• msalAuthProvider
  wrong:

  const { msalAuthProvider } = require('ra-auth-msal');

  correct:

  import { msalAuthProvider } from 'ra-auth-msal';

  Primarily designed for ES Modules. CJS require syntax is generally not recommended for modern React/TypeScript projects.
• LoginPage
  wrong:

  import LoginPage from 'ra-auth-msal/LoginPage';

  correct:

  import { LoginPage } from 'ra-auth-msal';

  LoginPage is a named export, not a default export. Ensure you destructure it correctly.
• msalHttpClient
  wrong:

  const msalHttpClient = require('ra-auth-msal').msalHttpClient;

  correct:

  import { msalHttpClient } from 'ra-auth-msal';

  This helper function assists in making authenticated fetch requests. It's a named export.
• PublicClientApplication
  wrong:

  import PublicClientApplication from '@azure/msal-browser';

  correct:

  import { PublicClientApplication } from '@azure/msal-browser';

  This is a named export from the underlying MSAL library, crucial for initializing the MSAL instance.

Quickstart

This quickstart demonstrates the basic setup of `ra-auth-msal` with a React-Admin application. It shows how to configure MSAL, initialize the `PublicClientApplication` asynchronously (required since MSAL v3), create the `msalAuthProvider`, and integrate it into the `Admin` component along with the provided `LoginPage`.

import React, { useEffect } from "react";
import { Admin, Resource } from 'react-admin';
import { BrowserRouter } from "react-router-dom";
import { PublicClientApplication } from "@azure/msal-browser";
import { LoginPage, msalAuthProvider } from "ra-auth-msal";

const msalConfig = {
  auth: {
    clientId: "12345678-1234-1234-1234-123456789012", // Replace with your Azure AD App (client) ID
    authority: "https://login.microsoftonline.com/common",
    redirectUri: "http://localhost:8080/auth-callback", // Ensure this matches your Azure AD redirect URI
    navigateToLoginRequestUrl: false,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
};

const dataProvider = {
  getList: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }], total: 1 }),
  getOne: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),
  getMany: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }] }),
  getManyReference: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }], total: 1 }),
  update: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),
  updateMany: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }] }),
  create: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),
  delete: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),
  deleteMany: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }] })
}; // Placeholder dataProvider

const myMSALObj = new PublicClientApplication(msalConfig);

const App = () => {
  useEffect(() => {
    myMSALObj.initialize();
  }, []);

  const authProvider = msalAuthProvider({
    msalInstance: myMSALObj,
    loginRequest: {
      scopes: ["User.Read"]
    },
    // permissions: getPermissionsFromAccount
  });

  return (
    <BrowserRouter>
      <Admin
        authProvider={authProvider}
        dataProvider={dataProvider}
        title="Example Admin"
        loginPage={LoginPage}
      >
        <Resource name="posts" />
      </Admin>
    </BrowserRouter>
  );
};
export default App;