MSAL Provider

The MSAL Provider uses msal.js to sign in users and acquire tokens to use with Microsoft Graph.

To learn more, see providers.

Difference between MSAL2 Provider and MSAL Provider

Although the usage is similar, MSAL Provider and MSAL2 Provider are built on different OAuth flows. MSAL Provider is built on msal.js, which implements the OAuth2.0 Implicit Grant Flow. MSAL2 Provider is built on msal-browser, which implements the OAuth 2.0 Authorization Code Flow with PKCE. Because Authorization Code Flow is deemed more secure than Implicit Grant Flow for web applications, we recommend using MSAL2 Provider over MSAL Provider. For details about security issues related to implicit grant flow, see Disadvantages of the implicit flow.

All new applications should use MSAL2 Provider whenever possible. For migration information, see MSAL2 Provider.

Get started

You can initialize the MSAL provider in HTML or JavaScript.

Initialize in your HTML page

Initializing the MSAL provider in HTML is the simplest way to create a new provider. Use the mgt-msal-provider component to set the client-id and other properties. This will create a new UserAgentApplication instance that will be used for all authentication and acquiring tokens.

<mgt-msal-provider client-id="<YOUR_CLIENT_ID>"
                   login-type="redirect/popup"
                   scopes="user.read,people.read"
                   redirect-uri="https://my.redirect/uri"
                   authority=""
                   domainHint="mydomain.com"
                   prompt="consent"></mgt-msal-provider>

Attribute	Description
client-id	String client ID (see Creating an app/client ID). Required.
login-type	Enumeration between redirect and popup - default value is redirect. Optional.
scopes	Comma separated strings for scopes the user must consent to on sign in. Optional.
authority	Authority string - default is the common authority. For single-tenant apps, use your tenant ID or tenant name. For example, https://login.microsoftonline.com/[your-tenant-name].onmicrosoft.com or https://login.microsoftonline.com/[your-tenant-id]. Optional.
redirect-uri	Redirect URI string - by default the current window URI is used. Optional.
depends-on	Element selector string of another higher priority provider component. Optional.
domain-hint	Query string of domain location for forwarding sign in experience. Optional.
prompt	Selection for type of user interaction required to login. Valid options include: login forces the user to enter credentials on request none for no interactive prompt select_account to send the user to an account picker consent to send the user to a OAuth consent dialog For more prompt information, see the prompt behavior in MSAL.js article. Optional.

Initialize in JavaScript

You can provide more options by initializing the provider in JavaScript.

import {Providers, MsalProvider} from '@microsoft/mgt'
import {UserAgentApplication} from "msal";

Providers.globalProvider = new MsalProvider(config: MsalConfig);

You can configure the MsalProvider constructor parameter in two ways, as described in the following sections.

Provide a clientId to create a new UserAgentApplication

This option makes sense when Graph Toolkit is responsible for all authentication in your application.

interface MsalConfig {
  clientId: string;
  scopes?: string[];
  authority?: string;
  redirectUri?: string;
  loginType?: LoginType; // LoginType.Popup or LoginType.Redirect (redirect is default)
  loginHint?: string
  options?: Configuration; // msal js Configuration object
  domainHint?: string;
  prompt?: string; // "login", "none", "select_account", "consent"
}

Pass an existing UserAgentApplication in the userAgentApplication property.

Use this when your app uses MSAL functionality beyond what's exposed by the MsalProvider and other Microsoft Graph Toolkit features. This is particularly appropriate if a framework automatically instantiates and exposes a UserAgentApplication for you; for example, when using msal-angular.

Be sure to understand opportunities for collisions when using this option. By its very nature, there is a risk that the MsalProvider can change the state of a session, for example by having the user sign in or consent to additional scopes. Make sure that your app and other frameworks respond gracefully to these changes in state, or consider using a custom provider instead.

interface MsalConfig {
  userAgentApplication: UserAgentApplication;
  scopes?: string[];
  loginType?: LoginType; // LoginType.Popup or LoginType.Redirect (redirect is default)
  loginHint?: string;
}

To learn more about MSAL.js and for additional options you can use when initializing the MSAL library, see the MSAL documentation.

Creating an app/client ID

For details about how to register an app and get a client ID, see Create an Azure Active Directory app.