title | description | author | manager | ms.author | ms.custom | ms.date | ms.service | ms.topic |
---|---|---|---|---|---|---|---|---|
Configure single-page app |
Learn how to build a single-page application (app's code configuration) |
OwenRichards1 |
CelesteDG |
owenrichards |
02/11/2020 |
identity-platform |
concept-article |
Learn how to configure the code for your single-page application (SPA).
The following Microsoft libraries support single-page apps:
[!INCLUDE active-directory-develop-libraries-spa]
In an MSAL library, the application registration information is passed as configuration during the library initialization.
import * as Msal from "@azure/msal-browser"; // if using CDN, 'Msal' will be available in global scope
// Configuration object constructed.
const config = {
auth: {
clientId: 'your_client_id'
}
};
// create PublicClientApplication instance
const publicClientApplication = new Msal.PublicClientApplication(config);
For more information on the configurable options, see Initializing application with MSAL.js.
import * as Msal from "msal"; // if using CDN, 'Msal' will be available in global scope
// Configuration object constructed.
const config = {
auth: {
clientId: 'your_client_id'
}
};
// create UserAgentApplication instance
const userAgentApplication = new Msal.UserAgentApplication(config);
For more information on the configurable options, see Initializing application with MSAL.js.
// In app.module.ts
import { MsalModule } from '@azure/msal-angular';
import { PublicClientApplication } from '@azure/msal-browser';
@NgModule({
imports: [
MsalModule.forRoot( new PublicClientApplication({
auth: {
clientId: 'Enter_the_Application_Id_Here',
}
}), null, null)
]
})
export class AppModule { }
// App.module.ts
import { MsalModule } from '@azure/msal-angular';
@NgModule({
imports: [
MsalModule.forRoot({
auth: {
clientId: 'your_app_id'
}
})
]
})
export class AppModule { }
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')
);
Move on to the next article in this scenario, Sign-in and sign-out.