Edit

Share via


Single-page application: Code configuration

Applies to: Green circle with a white check mark symbol. Workforce tenants White circle with a gray X symbol. 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/.

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 Library can request ID tokens for user sign-in. Library can request access tokens for protected web APIs.
JavaScript MSAL.js2 msal-browser Quickstart Library can request ID tokens for user sign-in. Library can request access tokens for protected web APIs.
Angular MSAL Angular2 msal-angular Quickstart Library can request ID tokens for user sign-in. Library can request access tokens for protected web APIs.

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.

Next step