Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Applies to: Workforce tenants
External tenants (learn more)
Learn how to configure the code for your single-page application (SPA).
Prerequisites
- Register a new app in the Microsoft Entra admin center, configured for Accounts in this organizational directory only. Refer to Register an application for more details. Record the following values from the application Overview page for later use:
- Application (client) ID
- Directory (tenant) ID
- Add the following redirect URIs using the Single-page application platform configuration. Refer to How to add a redirect URI in your application for more details.
- Redirect URI:
http://localhost:3000/
.
- Redirect URI:
Microsoft libraries supporting single-page apps
The following Microsoft libraries support single-page apps:
Language / framework | Project on GitHub |
Package | Getting started |
Sign in users | Access web APIs |
---|---|---|---|---|---|
React | MSAL React2 | msal-react | Quickstart | ![]() |
![]() |
JavaScript | MSAL.js2 | msal-browser | Quickstart | ![]() |
![]() |
Angular | MSAL Angular2 | msal-angular | Quickstart | ![]() |
![]() |
Application code configuration
In an MSAL library, the application registration information is passed as configuration during the library initialization.
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";
// Configuration object constructed.
const config = {
auth: {
clientId: 'your_client_id'
}
};
// create PublicClientApplication instance
const publicClientApplication = new PublicClientApplication(config);
// Wrap your app component tree in the MsalProvider component
ReactDOM.render(
<React.StrictMode>
<MsalProvider instance={publicClientApplication}>
<App />
</ MsalProvider>
</React.StrictMode>,
document.getElementById('root')
);
For more information on the configurable options, see Initializing application with MSAL.js.