{"id":16880,"library":"ra-auth-msal","title":"React Admin MSAL Authentication Provider","description":"ra-auth-msal provides an authentication provider for React-Admin applications, integrating seamlessly with the Microsoft Authentication Library (MSAL) to handle user authentication via Azure Active Directory. The current stable version is 3.1.0, with minor and patch releases occurring as needed to address bugs and introduce small enhancements. Major version updates tend to align with breaking changes in its core dependencies, `@azure/msal-browser` or `react-admin`. Key differentiators include built-in support for various MSAL authentication flows (Authorization Code, Implicit Grant), automatic token refresh, capabilities to fetch access tokens for Microsoft Graph API calls, and the ability to leverage user roles and groups for permission management within React-Admin. It simplifies the setup of MSAL within a React-Admin context, providing a custom login page and an HTTP client helper for authorized requests.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/marmelab/ra-auth-msal","tags":["javascript","typescript"],"install":[{"cmd":"npm install ra-auth-msal","lang":"bash","label":"npm"},{"cmd":"yarn add ra-auth-msal","lang":"bash","label":"yarn"},{"cmd":"pnpm add ra-auth-msal","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core framework for which this is an authentication provider.","package":"react-admin","optional":false},{"reason":"Underlying Microsoft Authentication Library for browser applications.","package":"@azure/msal-browser","optional":false},{"reason":"Requires BrowserRouter for compatibility with MSAL's redirect handling.","package":"react-router-dom","optional":false}],"imports":[{"note":"Primarily designed for ES Modules. CJS require syntax is generally not recommended for modern React/TypeScript projects.","wrong":"const { msalAuthProvider } = require('ra-auth-msal');","symbol":"msalAuthProvider","correct":"import { msalAuthProvider } from 'ra-auth-msal';"},{"note":"LoginPage is a named export, not a default export. Ensure you destructure it correctly.","wrong":"import LoginPage from 'ra-auth-msal/LoginPage';","symbol":"LoginPage","correct":"import { LoginPage } from 'ra-auth-msal';"},{"note":"This helper function assists in making authenticated fetch requests. It's a named export.","wrong":"const msalHttpClient = require('ra-auth-msal').msalHttpClient;","symbol":"msalHttpClient","correct":"import { msalHttpClient } from 'ra-auth-msal';"},{"note":"This is a named export from the underlying MSAL library, crucial for initializing the MSAL instance.","wrong":"import PublicClientApplication from '@azure/msal-browser';","symbol":"PublicClientApplication","correct":"import { PublicClientApplication } from '@azure/msal-browser';"}],"quickstart":{"code":"import React, { useEffect } from \"react\";\nimport { Admin, Resource } from 'react-admin';\nimport { BrowserRouter } from \"react-router-dom\";\nimport { PublicClientApplication } from \"@azure/msal-browser\";\nimport { LoginPage, msalAuthProvider } from \"ra-auth-msal\";\n\nconst msalConfig = {\n  auth: {\n    clientId: \"12345678-1234-1234-1234-123456789012\", // Replace with your Azure AD App (client) ID\n    authority: \"https://login.microsoftonline.com/common\",\n    redirectUri: \"http://localhost:8080/auth-callback\", // Ensure this matches your Azure AD redirect URI\n    navigateToLoginRequestUrl: false,\n  },\n  cache: {\n    cacheLocation: \"sessionStorage\",\n    storeAuthStateInCookie: false,\n  },\n};\n\nconst dataProvider = {\n  getList: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }], total: 1 }),\n  getOne: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),\n  getMany: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }] }),\n  getManyReference: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }], total: 1 }),\n  update: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),\n  updateMany: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }] }),\n  create: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),\n  delete: () => Promise.resolve({ data: { id: 1, title: 'Post 1' } }),\n  deleteMany: () => Promise.resolve({ data: [{ id: 1, title: 'Post 1' }] })\n}; // Placeholder dataProvider\n\nconst myMSALObj = new PublicClientApplication(msalConfig);\n\nconst App = () => {\n  useEffect(() => {\n    myMSALObj.initialize();\n  }, []);\n\n  const authProvider = msalAuthProvider({\n    msalInstance: myMSALObj,\n    loginRequest: {\n      scopes: [\"User.Read\"]\n    },\n    // permissions: getPermissionsFromAccount\n  });\n\n  return (\n    <BrowserRouter>\n      <Admin\n        authProvider={authProvider}\n        dataProvider={dataProvider}\n        title=\"Example Admin\"\n        loginPage={LoginPage}\n      >\n        <Resource name=\"posts\" />\n      </Admin>\n    </BrowserRouter>\n  );\n};\nexport default App;\n","lang":"typescript","description":"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`."},"warnings":[{"fix":"Ensure `myMSALObj.initialize()` is called, typically within a `useEffect` hook in your main application component, before rendering the `Admin` component.","message":"Upgraded `@azure/msal-browser` to v3.x, which requires the `PublicClientApplication` instance to be initialized asynchronously by calling `msalInstance.initialize()`.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"Upgraded `react-admin` to v5.x. This may introduce breaking changes from `react-admin` itself that need to be addressed in your application.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always wrap your `<Admin>` component within a `<BrowserRouter>` from `react-router-dom`.","message":"The `Admin` component must be wrapped in a `BrowserRouter`. MSAL's hash-based routing strategy for redirects is incompatible with `HashRouter`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Set `navigateToLoginRequestUrl: false` within the `auth` object of your `msalConfig`.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Call `myMSALObj.initialize()` within a `useEffect` hook or similar asynchronous context before using the MSAL instance.","cause":"The `initialize()` method of `PublicClientApplication` was not called after instantiation, which is a new requirement in MSAL v3.","error":"Msal-browser@3.0.0-beta.0: Uninitialized_public_client_application: PublicClientApplication must be initialized by calling initialize() asynchronously."},{"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.","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.","error":"Msal-browser@3.0.0-beta.0: Interaction_in_progress: Interaction is currently in progress. Please complete the current interaction before attempting another."},{"fix":"Ensure `msalAuthProvider` is called with a valid `msalInstance` and any necessary configuration. Verify that `react-admin` and `ra-auth-msal` versions are compatible.","cause":"The `authProvider` returned by `msalAuthProvider` might not be correctly configured or is missing required methods expected by `react-admin`.","error":"Error: `authProvider` did not return a `redirectToLogin` method."}],"ecosystem":"npm","meta_description":null}