Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
msalAuthProvider
✓ import { msalAuthProvider } from 'ra-auth-msal';
✗ const { msalAuthProvider } = require('ra-auth-msal');
Primarily designed for ES Modules. CJS require syntax is generally not recommended for modern React/TypeScript projects.
LoginPage
✓ import { LoginPage } from 'ra-auth-msal';
✗ import LoginPage from 'ra-auth-msal/LoginPage';
LoginPage is a named export, not a default export. Ensure you destructure it correctly.
msalHttpClient
✓ import { msalHttpClient } from 'ra-auth-msal';
✗ const msalHttpClient = require('ra-auth-msal').msalHttpClient;
This helper function assists in making authenticated fetch requests. It's a named export.
PublicClientApplication
✓ import { PublicClientApplication } from '@azure/msal-browser';
✗ import PublicClientApplication from '@azure/msal-browser';
This is a named export from the underlying MSAL library, crucial for initializing the MSAL instance.
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;
Errors
Common errors & fixes
Msal-browser@3.0.0-beta.0: Uninitialized_public_client_application: PublicClientApplication must be initialized by calling initialize() asynchronously.
The `initialize()` method of `PublicClientApplication` was not called after instantiation, which is a new requirement in MSAL v3.
fixCall `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.
An MSAL interactive authentication flow (e.g., login, acquire token) was initiated while another was still active, leading to a race condition or conflict.
fixImplement 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.
The `authProvider` returned by `msalAuthProvider` might not be correctly configured or is missing required methods expected by `react-admin`.
fixEnsure `msalAuthProvider` is called with a valid `msalInstance` and any necessary configuration. Verify that `react-admin` and `ra-auth-msal` versions are compatible.
Audit
Dependencies
react-adminrequiredCore framework for which this is an authentication provider.
@azure/msal-browserrequiredUnderlying Microsoft Authentication Library for browser applications.
react-router-domrequiredRequires BrowserRouter for compatibility with MSAL's redirect handling.