{"id":26463763,"url":"https://github.com/syncweek-react-aad/react-aad","last_synced_at":"2025-10-06T06:28:05.853Z","repository":{"id":32430224,"uuid":"131211020","full_name":"syncweek-react-aad/react-aad","owner":"syncweek-react-aad","description":"A React wrapper for Azure AD using the Microsoft Authentication Library (MSAL). The easiest way to integrate AzureAD with your React for authentication.","archived":false,"fork":false,"pushed_at":"2023-01-05T13:52:14.000Z","size":7777,"stargazers_count":345,"open_issues_count":102,"forks_count":94,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-05-13T14:21:59.492Z","etag":null,"topics":["aad","authentication","azure","azure-active-directory","azuread","azuread-component","microsoft-authentication-library","msal","msal-library","msal-react","oauth","oauth2","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syncweek-react-aad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-26T21:10:14.000Z","updated_at":"2025-04-22T04:34:54.000Z","dependencies_parsed_at":"2023-01-14T21:15:25.195Z","dependency_job_id":null,"html_url":"https://github.com/syncweek-react-aad/react-aad","commit_stats":null,"previous_names":["azure-samples/react-aad-msal"],"tags_count":175,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncweek-react-aad%2Freact-aad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncweek-react-aad%2Freact-aad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncweek-react-aad%2Freact-aad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syncweek-react-aad%2Freact-aad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syncweek-react-aad","download_url":"https://codeload.github.com/syncweek-react-aad/react-aad/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485053,"owners_count":22078767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aad","authentication","azure","azure-active-directory","azuread","azuread-component","microsoft-authentication-library","msal","msal-library","msal-react","oauth","oauth2","react"],"created_at":"2025-03-19T07:16:16.467Z","updated_at":"2025-10-06T06:28:05.760Z","avatar_url":"https://github.com/syncweek-react-aad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**DEPRECATION NOTICE: Microsoft has released the official [`@azure/msal-react`](https://www.npmjs.com/package/@azure/msal-react) library which replaces `react-aad-msal`. It is recommended that applications migrate to the officially supported library in order to utilize the better Auth Code Flow process. `react-aad-msal` uses older MSAL dependencies which have known drawbacks for some clients. New applications should not consider using this library, as it will not be maintained. Please review the `@azure/msal-react` official [documentation](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react), [samples](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react#samples), and [migration guide](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/migration-guide.md) for more information.**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1908292/64083094-6321ce80-ccce-11e9-8c09-4101444bc4f8.png\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eThe easiest way to integrate the \u003ca href=\"https://github.com/AzureAD/microsoft-authentication-library-for-js\" target=\"_blank\"\u003eMicrosoft Authentication Library\u003c/a\u003e (MSAL) with \u003ca href=\"https://reactjs.org/\" target=\"_blank\"\u003eReact\u003c/a\u003e applications. Secure your apps with \u003ca href=\"https://azure.microsoft.com/en-us/services/active-directory/\" target=\"_blank\"\u003eAzure Active Directory\u003c/a\u003e (AAD)\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/react-aad-msal\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-aad-msal.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e \u003ca href=\"https://reactaad.visualstudio.com/react-aad-msal/_build/latest?definitionId=4\u0026branchName=master\"\u003e\u003cimg src=\"https://reactaad.visualstudio.com/react-aad-msal/_apis/build/status/React%20AAD%20CI%20Master?branchName=master\" alt=\"build status\" height=\"18\"\u003e\u003c/a\u003e \u003ca href=\"https://david-dm.org/syncweek-react-aad/react-aad-msal\"\u003e\u003cimg src=\"https://img.shields.io/david/syncweek-react-aad/react-aad.svg\" alt=\"dependencies\" height=\"18\"\u003e\u003c/a\u003e \u003ca href=\"https://npmcharts.com/compare/react-aad-msal?minimal=true\" target=\"_blank\"\u003e\u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dm/react-aad-msal\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e:monkey_face: Our code monkeys live on a solid diet of :star:'s. If you like what they're doing, please feed them!\u003c/p\u003e\n\n# React AAD MSAL\n\nA library of components to easily integrate the Microsoft Authentication Library with Azure Active Directory in your React app quickly and reliably. The library focuses on flexibility, providing functionality to login, logout, and fetch the user details while maintaining access to the underlying MSAL library for advanced use.\n\n**:exclamation: This library is not affiliated with the Identity team at Microsoft. It was developed as a tool for the Open Source community to use and contribute to as they see fit.**\n\n## :memo: Table of contents\n\n- [React AAD MSAL](#react-aad-msal)\n  - [:memo: Table of contents](#memo-table-of-contents)\n  - [:tada: Features](#tada-features)\n  - [:checkered_flag: Getting Started](#checkeredflag-getting-started)\n    - [Prerequisites](#prerequisites)\n    - [Installation](#installation)\n    - [Creating the Provider](#creating-the-provider)\n      - [Msal Configuration](#msal-configuration)\n      - [Authentication Parameters](#authentication-parameters)\n      - [Options](#options)\n  - [:package: Authentication Components](#package-authentication-components)\n    - [AzureAD Component](#azuread-component)\n    - [Higher Order Component](#higher-order-component)\n  - [:mortar_board: Advanced Topics](#mortarboard-advanced-topics)\n    - [Getting Tokens for API Requests](#getting-tokens-for-api-requests)\n      - [Refreshing Access Tokens](#refreshing-access-tokens)\n      - [Renewing IdTokens](#renewing-idtokens)\n    - [Integrating with a Redux Store](#integrating-with-a-redux-store)\n    - [Accessing the MSAL API](#accessing-the-msal-api)\n  - [:cd: Sample applications](#cd-sample-applications)\n  - [:calendar: Roadmap](#calendar-roadmap)\n  - [:books: Resources](#books-resources)\n  - [:trophy: Contributors](#trophy-contributors)\n\n## :tada: Features\n\n:white_check_mark: Login/logout with `AzureAD` component  \n:white_check_mark: Callback functions for login success, logout success, and user info changed  \n:white_check_mark: `withAuthentication` higher order component for protecting components, routes, or the whole app  \n:white_check_mark: Function as Child Component pattern ([FaCC](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9)) to pass authentication data and login/logout functions to children components  \n:white_check_mark: Redux integration for storing authentication status, user info, tokens, etc  \n:white_check_mark: Automatic renewal of IdTokens, and optional function to get a fresh token at any point  \n:white_check_mark: Easily fetch a fresh Access Token from cache (or refresh it) before calling API endpoints  \n:white_check_mark: Various build types including ES6, CommonJS, and UMD\n\n## :checkered_flag: Getting Started\n\n### Prerequisites\n\n- [node.js](https://nodejs.org/en/)\n- [Register an app](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) in AzureAD to get a `clientId`. You will need to [follow additional steps](https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-app-registration) to enable the app for your SPA site.\n\n### Installation\n\nVia NPM:\n\n```\nnpm install react-aad-msal msal --save\n```\n\n### Creating the Provider\n\nBefore beginning it is required to configure an instance of the `MsalAuthProvider` and give it three parameters:\n\n| Parameters   | Description                                                                                                                                                                                                                                                                                                   |\n| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `config`     | Instance of a `Msal.Configuration` object to configure the underlying provider. The documentation for all the options can be found in the [configuration options](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications#configuration-options) doc         |\n| `parameters` | Instance of the `Msal.AuthenticationParameters` configuration to identify how the authentication process should function. This object includes the `scopes` values. You can see possible [values for scopes here](https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-scopes) |\n| `options`    | **[Optional]** The `options` are defined by the [IMsalAuthProviderConfig](/packages/react-aad-msal/src/interfaces/IMsalAuthProviderConfig.ts) interface. This contains settings that describe how the authentication provider should handle certain authentication processes.                                                                                  |\n\nThe `MsalAuthProvider` is meant to be a singleton. There are known implications when multiple instances of MSAL are running at the same time. The recommended approach is to instantiate the `MsalAuthProvider` in a separate file and `import` it when needed.\n\n```TypeScript\n// authProvider.js\nimport { MsalAuthProvider, LoginType } from 'react-aad-msal';\n\n// Msal Configurations\nconst config = {\n  auth: {\n    authority: 'https://login.microsoftonline.com/common',\n    clientId: '\u003cYOUR APPLICATION ID\u003e',\n    redirectUri: '\u003cOPTIONAL REDIRECT URI\u003e'\n  },\n  cache: {\n    cacheLocation: \"localStorage\",\n    storeAuthStateInCookie: true\n  }\n};\n\n// Authentication Parameters\nconst authenticationParameters = {\n  scopes: [\n    '\u003cproperty (i.e. user.read)\u003e',\n    'https://\u003cyour-tenant-name\u003e.onmicrosoft.com/\u003cyour-application-name\u003e/\u003cscope (i.e. demo.read)\u003e'\n  ]\n}\n\n// Options\nconst options = {\n  loginType: LoginType.Popup,\n  tokenRefreshUri: window.location.origin + '/auth.html'\n}\n\nexport const authProvider = new MsalAuthProvider(config, authenticationParameters, options)\n```\n\nNow you can `import` the `authProvider` and use it in combination with one of the authentication components.\n\n```tsx\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { AzureAD } from 'react-aad-msal';\n\nimport App from './App';\nimport { authProvider } from './authProvider';\n\nReactDOM.render(\n  \u003cAzureAD provider={authProvider} forceLogin={true}\u003e\n    \u003cApp /\u003e\n  \u003c/AzureAD\u003e,\n  document.getElementById('root'),\n);\n```\n\n#### `Msal` Configuration\n\nThe options that get passed to the `MsalAuthProvider` are defined by the MSAL library, and are described in more detail in the [configuration options](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications#configuration-options) documentation.\n\nBelow is the total set of configurable options that are supported currently in the `config`.\n\n```TypeScript\n  // Configuration Object\n  export type Configuration = {\n    auth: AuthOptions,\n    cache?: CacheOptions,\n    system?: SystemOptions\n  };\n\n  // Protocol Support\n  export type AuthOptions = {\n    clientId: string;\n    authority?: string;\n    validateAuthority?: boolean;\n    redirectUri?: string | (() =\u003e string);\n    postLogoutRedirectUri?: string | (() =\u003e string);\n    navigateToLoginRequestUrl?: boolean;\n  };\n\n  // Cache Support\n  export type CacheOptions = {\n    cacheLocation?: CacheLocation;\n    storeAuthStateInCookie?: boolean;\n  };\n\n  // Library support\n  export type SystemOptions = {\n    logger?: Logger;\n    loadFrameTimeout?: number;\n    tokenRenewalOffsetSeconds?: number;\n    navigateFrameWait?: number;\n  };\n```\n\nFor more information on MSAL config options refer to the MSAL [configuration options](https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-initializing-client-applications) documentation.\n\n#### Authentication Parameters\n\nWhen instantiating an instance of the `MsalAuthProvider` the authentication parameters passed will become the default parameters used when authenticating and fetching or refreshing tokens. It is possible to change the default parameters later by executing the `setAuthenticationParameters()` method on the `MsalAuthProvider`.\n\nThe set of options that are supported for the `Msal.AuthenticationParameters` class can be found below as they are defined in the MSAL library.\n\n```TypeScript\n  export type AuthenticationParameters = {\n    scopes?: Array\u003cstring\u003e;\n    extraScopesToConsent?: Array\u003cstring\u003e;\n    prompt?: string;\n    extraQueryParameters?: {[key: string]: string};\n    claimsRequest?: string;\n    authority?: string;\n    state?: string;\n    correlationId?: string;\n    account?: Account;\n    sid?: string;\n    loginHint?: string;\n  };\n```\n\n#### Options\n\nThe `options` parameter defines settings related to how the authentication provider processes authentication operations provided by the `MSAL` library.\n\n```typescript\nconst options = {\n  // The default login type is Popup\n  loginType: LoginType.Popup,\n  // A blank html page that MSAL can load in an iframe to refresh the token\n  // The default setting for this parameter is `window.location.origin`\n  tokenRefreshUri: window.location.origin + '/auth.html',\n};\n```\n\n`LoginType` is an enum with two options for `Popup` or `Redirect` authentication. This parameter is optional and will default to `Popup` if not provided. The `tokenRefreshUri` allows you to set a separate page to load only when tokens are being refreshed. When `MSAL` attempts to refresh a token, it will reload the page in an iframe. This option allows you to inform `MSAL` of a specific page it can load in the iframe. It is best practice to use a blank HTML file so as to prevent all your site scripts and contents from loading multiple times.\n\nAt any time after instantiating the `MsalAuthProvider` the login type can be changed using the `setProviderOptions()` method. You may also retrieve the current options using the `getProviderOptions()` method.\n\n## :package: Authentication Components\n\nThe library provides multiple components to integrate Azure AD authentication into your application and each component has various use cases. The are also plans for additional components, documented in the project [Roadmap](#calendar-roadmap).\n\n### AzureAD Component\n\nThe `AzureAD` component is the primary method to add authentication to your application. When the component is loaded it internally uses MSAL to check the cache and determine the current authentication state. The users authentication status determines how the component will render the `children`.\n\n1. If the `children` is an element, it will only be rendered when the `AzureAD` detects an authenticated user.\n2. If the `children` is a function, then it will always be executed with the following argument:\n   ```tsx\n   {\n     login, // login function\n     logout, // logout function\n     authenticationState, // the current authentication state\n     error, // any error that occurred during the login process\n     accountInfo, // account info of the authenticated user\n   }\n   ```\n\nThe `AzureAD` component will check that the IdToken is not expired before determining that the user is authenticated. If the token has expired, it will attempt to renew it silently. If a valid token is maintained it will be sure there is an active Access Token available, otherwise it will refresh silently. If either of the tokens cannot be refreshed without user interaction, the user will be prompted to signin again.\n\n```tsx\nimport { AzureAD, AuthenticationState, AuthenticationState } from 'react-aad-msal';\n\n// Import the provider created in a different file\nimport { authProvider } from './authProvider';\n\n// Only authenticated users can see the span, unauthenticated users will see nothing\n\u003cAzureAD provider={authProvider}\u003e\n  \u003cspan\u003eOnly authenticated users can see me.\u003c/span\u003e\n\u003c/AzureAD\u003e\n\n// If the user is not authenticated, login will be initiated and they will see the span when done\n\u003cAzureAD provider={authProvider} forceLogin={true}\u003e\n  \u003cspan\u003eOnly authenticated users can see me.\u003c/span\u003e\n\u003c/AzureAD\u003e\n\n// Using a function inside the component will give you control of what to show for each state\n\u003cAzureAD provider={authProvider} forceLogin={true}\u003e\n  {\n    ({login, logout, authenticationState, error, accountInfo}) =\u003e {\n      switch (authenticationState) {\n        case AuthenticationState.Authenticated:\n          return (\n            \u003cp\u003e\n              \u003cspan\u003eWelcome, {accountInfo.account.name}!\u003c/span\u003e\n              \u003cbutton onClick={logout}\u003eLogout\u003c/button\u003e\n            \u003c/p\u003e\n          );\n        case AuthenticationState.Unauthenticated:\n          return (\n            \u003cdiv\u003e\n              {error \u0026\u0026 \u003cp\u003e\u003cspan\u003eAn error occurred during authentication, please try again!\u003c/span\u003e\u003c/p\u003e}\n              \u003cp\u003e\n                \u003cspan\u003eHey stranger, you look new!\u003c/span\u003e\n                \u003cbutton onClick={login}\u003eLogin\u003c/button\u003e\n              \u003c/p\u003e\n            \u003c/div\u003e\n          );\n        case AuthenticationState.InProgress:\n          return (\u003cp\u003eAuthenticating...\u003c/p\u003e);\n      }\n    }\n  }\n\u003c/AzureAD\u003e\n```\n\nThe following props are available to the `AzureAD` component.\n\n| AzureAD Props             | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `provider`                | An `MsalAuthProvider` instance containing configuration values for your Azure AD instance. See [Creating the Provider](#Creating the Provider) for details.                                                                                                                                                                                                                                                                                                  |\n| `authenticatedFunction`   | :warning: **[Deprecated]** **[Optional]** A user defined callback function for the AzureAD component to consume. This function receives the AzureAD components `logout function` which you can use to trigger a logout. The return value will be rendered by the AzureAD component. If no return value is provided, the `children` of the AzureAD component will be rendered instead.                                                                        |\n| `unauthenticatedFunction` | :warning: **[Deprecated]** **[Optional]** A user defined callback function for the AzureAD component to consume. This function receives the AzureAD components `login function` which you can then use to trigger a login. The return value will be rendered by the AzureAD component.                                                                                                                                                                       |\n| `accountInfoCallback`     | :warning: **[Deprecated]** **[Optional]** A user defined callback function for the AzureAD component to consume. The AzureAD component will call this function when login is complete to pass back the user info as an instance of [`IAccountInfo`](/packages/react-aad-msal/src/interfaces/IAccountInfo.ts). In addition to the tokens, the account info includes the [`Msal.Account`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/src/Account.ts) |\n| `reduxStore`              | **[Optional]** You can provide a redux store which the component will dispatch actions to when changes occur. You can find the list of all actions defined in the [AuthenticationActions](src/actions.ts) enum.                                                                                                                                                                                                                                              |\n| `forceLogin`              | **[Optional]** A boolean that identifies whether the login process should be invoked immediately if the current user is unauthenticated. Defaults to `false`.                                                                                                                                                                                                                                                                                                |\n\n### Higher Order Component\n\nSometimes it's easier to utilize a Higher Order Component (HoC) to lock down an app or page component with authentication. This can be accomplished using the `withAuthentication` component which acts as a wrapper for the `AzureAD` component.\n\n```Typescript\nimport { withAuthentication } from 'react-aad-msal';\n\n// The instance of MsalAuthProvider defined in a separate file\nimport { authProvider } from './authProvider.js';\n\n// The App component wrapped in the withAuthentication() HoC\nexport default withAuthentication(App, {\n provider: authProvider,\n reduxStore: store\n});\n```\n\nThe first parameter is the component that requires authentication before being mounted. The second parameter is an object containing the props to be passed into the `AzureAD` component. With this approach the `forceLogin` prop will default to true. This is a good way to protect routes or quickly require authentication for your entire `App` in several lines.\n\n## :mortar_board: Advanced Topics\n\n### Getting Tokens for API Requests\n\nThe library components will manage authenticating the user without you needing to think about tokens. But there are scenarios where a fresh token will be needed to communicate with a service or to decode the token to examine the claims. The library exposes methods for retrieving active IdTokens and Access Tokens.\n\nFor more advanced scenarios where you need specific control over error handling when a token fails to renew you can always [access the MSAL API](#accessing-the-msal-api) methods and renew a token manually as described in the MSAL [token renewal pattern](https://github.com/AzureAD/microsoft-authentication-library-for-js/wiki/FAQs#q3-how-to-renew-tokens-with-msaljs) documentation.\n\n#### Refreshing Access Tokens\n\nTo get a fresh and valid Access Token to pass to an API you can call the `getAccessToken()` on the `MsalAuthProvider` instance. This function will asynchronously attempt to retrieve the token from the cache. If the cached token has expired it will automatically attempt to refresh it. In some scenarios the token refresh will fail and the user will be required to authenticate again before a fresh token is provided. The method will handle these scenarios automatically.\n\nThe `getAccessToken()` returns an instance of the [`AccessTokenResponse`](/packages/react-aad-msal/src/AccessTokenResponse.ts) class. The following snippet is an example of how you might use the function before calling an API endpoint.\n\n```typescript\n// authProvider.js\nimport { MsalAuthProvider, LoginType } from 'react-aad-msal';\nexport const authProvider = new MsalAuthProvider(\n  {\n    /* Msal configurations */\n  },\n  {\n    /* Authentication parameters */\n  },\n  {\n    /* Options */\n  },\n);\n\n// api.js\nimport { authProvider } from './authProvider';\n\nconst request = async url =\u003e {\n  const token = await authProvider.getAccessToken();\n\n  return fetch(url, {\n    method: 'GET',\n    headers: {\n      Authorization: 'Bearer ' + token.accessToken,\n      'Content-Type': 'application/json',\n    },\n  });\n};\n```\n\n#### Renewing IdTokens\n\nTo get a fresh and valid IdToken you can call the `getIdToken()` on the `MsalAuthProvider` instance. This function will asynchronously attempt to retrieve the token from the cache. If the cached token has expired it will automatically attempt to renew it. In some scenarios the token renewal will fail and the user will be required to authenticate again before a new token is provided. The method will handle these scenarios automatically.\n\nThe `getIdToken()` returns an instance of the [`IdTokenResponse`](/packages/react-aad-msal/src/IdTokenResponse.ts) class. The following snippet is an example of how you might use the function to retrieve a valid IdToken.\n\n```typescript\n// authProvider.js\nimport { MsalAuthProvider, LoginType } from 'react-aad-msal';\nexport const authProvider = new MsalAuthProvider(\n  {\n    /* Msal configurations */\n  },\n  {\n    /* Authentication parameters */\n  },\n  {\n    /* Options */\n  },\n);\n\n// consumer.js\nimport { authProvider } from './authProvider';\nconst token = await authProvider.getIdToken();\nconst idToken = token.idToken.rawIdToken;\n```\n\n### Integrating with a Redux Store\n\nThe `AzureAD` component optionally accepts a `reduxStore` prop. On successful login and after an Access Token has been acquired, an action of type `AAD_LOGIN_SUCCESS` will be dispatch to the provided store containing the token and user information returned from Active Directory. It does the same for logout events, but the action will not contain a payload.\n\nImport your store into the file rendering the `AzureAD` component and pass it as a prop:\n\n```jsx\n// authProvider.js\nimport { MsalAuthProvider, LoginType } from 'react-aad-msal';\nexport const authProvider = new MsalAuthProvider(\n  {\n    /* Msal configurations */\n  },\n  {\n    /* Authentication parameters */\n  },\n  {\n    /* Options */\n  },\n);\n\n// index.js\nimport { authProvider } from './authProvider';\nimport { store } from './reduxStore.js';\n\n// ...\n\nReactDOM.render(\n  \u003cAzureAD provider={authProvider} reduxStore={store}\u003e\n    \u003cApp /\u003e\n  \u003c/AzureAD\u003e,\n  document.getElementById('root'),\n);\n```\n\nAdd a case to handle `AAD_LOGIN_SUCCESS` and `AAD_LOGOUT_SUCCESS` actions in a reducer file:\n\n```javascript\nconst initialState = {\n  aadResponse: null,\n};\n\nconst sampleReducer = (state = initialState, action) =\u003e {\n  switch (action.type) {\n    case 'AAD_LOGIN_SUCCESS':\n      return { ...state, aadResponse: action.payload };\n    case 'AAD_LOGOUT_SUCCESS':\n      return { ...state, aadResponse: null };\n    default:\n      return state;\n  }\n};\n```\n\nIn addition to login and logout actions, the `MsalAuthProvider` will dispatch other actions for various state changes. The full list can be found in the [AuthenticationActions.ts](/packages/react-aad-msal/src/enums/AuthenticationActions.ts) file and in the table below. An example of a fully implemented [sample reducer](/samples/react-javascript/src/reduxStore.js) can be found in the [sample project](/sample/).\n\n| Action Type                       | Payload                                                                                                                              | Description                                                                                                                                                                                            |\n| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| AAD_INITIALIZING                  | None                                                                                                                                 | Dispatched when the `MsalAuthProvider` is instantiated and begins checking the cache to determine if the user is authenticated                                                                         |\n| AAD_INITIALIZED                   | None                                                                                                                                 | Signifies that the `MsalAuthProvider` has successfully determined the authentication status of the user after being instantiated. It is safest not to use any state until initialization has completed |\n| AAD_AUTHENTICATED_STATE_CHANGED   | [`AuthenticationState`](/packages/react-aad-msal/src/enums/AuthenticationState.ts)                                                                                          | Dispatched whenever the user's authentication status changes                                                                                                                                           |\n| AAD_ACQUIRED_ID_TOKEN_SUCCESS     | [`IdTokenResponse`](/packages/react-aad-msal/src/IdTokenResponse.ts)                                                                                         | Identifies that the IdToken has been retrieved or renewed successfully                                                                                                                                 |\n| AAD_ACQUIRED_ID_TOKEN_ERROR       | [`Msal.AuthError`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/src/error/AuthError.ts) | Dispatched when an error occurred while attempting to retrieve or renew the IdToken                                                                                                                    |\n| AAD_ACQUIRED_ACCESS_TOKEN_SUCCESS | [`AccessTokenResponse`](/packages/react-aad-msal/src/AccessTokenResponse.ts)                                                                                 | Identifies that the Access Token has been retrieved or refreshed successfully                                                                                                                          |\n| AAD_ACQUIRED_ACCESS_TOKEN_ERROR   | [`Msal.AuthError`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/src/error/AuthError.ts) | Dispatched when an error occurred while attempting to retrieve or refresh the Access Token                                                                                                             |\n| AAD_LOGIN_SUCCESS                 | [`IAccountInfo`](/packages/react-aad-msal/src/interfaces/IAccountInfo.ts)                                                                                                 | Dispatched when the user has been authenticated and a valid Access Token has been acquired                                                                                                             |\n| AAD_LOGIN_FAILED                  | None                                                                                                                                 | Dispatched when the authentication process fails                                                                                                                                                       |\n| AAD_LOGIN_ERROR                   | [`Msal.AuthError`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/src/error/AuthError.ts) | Identifies that an error occurred while login was in process                                                                                                                                           |\n| AAD_LOGOUT_SUCCESS                | None                                                                                                                                 | Dispatched when the user has successfully logged out on the client side                                                                                                                                |\n\n### Accessing the MSAL API\n\nWhile this wrapper attempts to provide a full-featured means of authenticating with AzureAD, for advanced cases you may want to access the underlying MSAL API. The `MsalAuthProvider` extends the MSAL `UserAgentApplication` class and will give you access to all the functions available, in addition to implementing new methods used by the library components.\n\n```jsx\nconst authProvider = new MsalAuthProvider(config, authenticationParameters);\n// authProvider provides access to MSAL features\n```\n\nIt is not recommended to use this method if it can be avoided, since operations executed via MSAL may not reflect in the wrapper.\n\n## :cd: Sample applications\n\nIf you'd like to see a sample application running please see the [samples](samples/) applications, built with Create React App.\n\nThe project can be built with the following steps:\n\n1. `git clone https://github.com/syncweek-react-aad/react-aad.git`\n2. `cd ./react-aad`\n3. Install the dependencies:\n   - `yarn install`\n4. Build the `react-aad` library:\n   - `yarn build`\n5. Run the default sample project from the project root using `yarn start`, or navigate to the sample folder you want and use `yarn start` directly.\n\nBe sure to modify the [authProvider.js](/samples/react-javascript/src/authProvider.js) configuration to specify your own `ClientID` and `Authority`.\n\n## :calendar: Roadmap\n\nWhile the library is ready for use there is still plenty of ongoing work. The following is a list of a few of the improvements under consideration.\n\n:white_medium_small_square: Rewrite the sample app to use hooks and simplify the logic.\n:white_medium_small_square: Add a typescript sample application.\n:white_medium_small_square: Add a `useAuthentication()` hook to the library.\n:white_medium_small_square: Replace the `AzureAD` render props with event handlers.\n:white_medium_small_square: Add Context API provider.\n:white_medium_small_square: Add samples for consuming a Web API.\n:white_medium_small_square: Improve unit test coverage across the library.\n:white_medium_small_square: Maintain feature parity between the official MSAL [Angular library](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-angular) after it undergoes its planned upgrade.\n\n## :books: Resources\n\nThe following resources may be helpful and provide further insight. If you've written a blog post, tutorial, or article feel free to create an issue so we can include it.\n\n- [Get Started with Azure Active Directory](https://docs.microsoft.com/en-us/azure/active-directory/get-started-azure-ad)\n- [MSAL Documentation](https://htmlpreview.github.io/?https://raw.githubusercontent.com/AzureAD/microsoft-authentication-library-for-js/dev/docs/index.html)\n- [AAD v2 Scopes](https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-scopes)\n- [AAD B2C Setup MSA App](https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-setup-msa-app)\n\n## :trophy: Contributors\n\nThis library is built with :heart: by members of the open source community. To become a contributor, please see the [contribution guidelines](CONTRIBUTING.md).\n\n[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/0)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/0)[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/1)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/1)[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/2)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/2)[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/3)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/3)[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/4)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/4)[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/5)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/5)[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/6)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/6)[![](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/images/7)](https://sourcerer.io/fame/AndrewCraswell/syncweek-react-aad/react-aad/links/7)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncweek-react-aad%2Freact-aad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncweek-react-aad%2Freact-aad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncweek-react-aad%2Freact-aad/lists"}