{"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.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install ra-auth-msal"],"cli":null},"imports":["import { msalAuthProvider } from 'ra-auth-msal';","import { LoginPage } from 'ra-auth-msal';","import { msalHttpClient } from 'ra-auth-msal';","import { PublicClientApplication } from '@azure/msal-browser';"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}