Quickstart: Sign in users and acquire an access token from a JavaScript single-page application

In this quickstart, you learn how to use a code sample that demonstrates how a JavaScript single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts. A JavaScript SPA can also get an access token to call the Microsoft Graph API or any web API.

How the sample app in this quickstart works

Prerequisites

This quickstart requires the following setup:

  • To run the project with a Node.js server, download and install Node.js.
  • To edit the project files, download and install Visual Studio Code.
  • To run the project as a Visual Studio solution, download and install Visual Studio 2019.

Register and download your quickstart application

To start your quickstart application, use either of the following options.

Option 1 (Express): Register and auto configure your app and then download your code sample

  1. Sign in to the Azure portal by using either a work or school account, or a personal Microsoft account.
  2. If your account gives you access to more than one tenant, select the account at the top right, and then set your portal session to the Azure Active Directory (Azure AD) tenant you want to use.
  3. Go to the new Azure portal - App registrations pane.
  4. Enter a name for your application, and select Register.
  5. Follow the instructions to download and automatically configure your new application.

Option 2 (Manual): Register and manually configure your application and code sample

Step 1: Register your application

  1. Sign in to the Azure portal by using either a work or school account, or a personal Microsoft account.

  2. If your account gives you access to more than one tenant, select your account at the top right, and then set your portal session to the Azure AD tenant you want to use.

  3. Go to the Microsoft identity platform for developers App registrations page.

  4. Select New registration.

  5. When the Register an application page appears, enter a name for your application.

  6. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.

  7. Under the Redirect URI section, in the drop-down list, select the Web platform, and then set the value to http://localhost:30662/.

  8. Select Register. On the app Overview page, note the Application (client) ID value for later use.

  9. This quickstart requires the Implicit grant flow to be enabled. In the left pane of the registered application, select Authentication.

  10. In the Advanced settings section, under Implicit grant, select the ID tokens and Access tokens check boxes. ID tokens and access tokens are required, because this app needs to sign in users and call an API.

  11. At the top of the pane, select Save.

Step 1: Configure your application in the Azure portal

For the code sample for this quickstart to work, you need to add a redirect URI as http://localhost:30662/ and enable Implicit grant.

Already configured Your application is configured with these attributes.

Step 2: Download the project

Select the option that's suitable to your development environment:

Step 3: Configure your JavaScript app

In the JavaScriptSPA folder, edit index.html, and set the clientID and authority values under msalConfig.

In the JavaScriptSPA folder, edit index.html, and replace msalConfig with the following code:

var msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_info_here"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    }
};

Note

This quickstart supports Enter_the_Supported_Account_Info_Here.

Where:

  • <Enter_the_Application_Id_here> is the Application (client) ID for the application you registered.
  • <Enter_the_Tenant_info_here> is set to one of the following options:
    • If your application supports accounts in this organizational directory, replace this value with the Tenant ID or Tenant name (for example, contoso.microsoft.com).
    • If your application supports accounts in any organizational directory, replace this value with organizations.
    • If your application supports accounts in any organizational directory and personal Microsoft accounts, replace this value with common. To restrict support to personal Microsoft accounts only, replace this value with consumers.

Tip

To find the values of Application (client) ID, Directory (tenant) ID, and Supported account types, go to the app's Overview page in the Azure portal.

Step 4: Run the project

  • If you're using Node.js:

    1. To start the server, run the following command from the project directory:

      npm install
      node server.js
      
    2. Open a web browser and go to http://localhost:30662/.

    3. Select Sign In to start the sign-in, and then call Microsoft Graph API.

  • If you're using Visual Studio, select the project solution, and then select F5 to run the project.

After the browser loads the application, select Sign In. The first time that you sign in, you're prompted to provide your consent to allow the application to access your profile and to sign you in. After you're signed in successfully, your user profile information should be displayed on the page.

More information

msal.js

The MSAL library signs in users and requests the tokens that are used to access an API that's protected by Microsoft identity platform. The quickstart index.html file contains a reference to the library:

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.min.js"></script>

Tip

You can replace the preceding version with the latest released version under MSAL.js releases.

Alternatively, if you have Node.js installed, you can download the latest version through Node.js Package Manager (npm):

npm install msal

MSAL initialization

The quickstart code also shows how to initialize the MSAL library:

var msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here"
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true
    }
};

var myMSALObj = new Msal.UserAgentApplication(msalConfig);
Where
ClientId The application ID of the application that's registered in the Azure portal.
authority (Optional) The authority URL that supports account types, as described previously in the configuration section. The default authority is https://login.microsoftonline.com/common.
cacheLocation (Optional) Sets the browser storage for the auth state. The default is sessionStorage.
storeAuthStateInCookie (Optional) The library that stores the authentication request state that's required for validation of the authentication flows in the browser cookies. This cookie is set for IE and Edge browsers to mitigate certain known issues.

For more information about available configurable options, see Initialize client applications.

Sign in users

The following code snippet shows how to sign in users:

var requestObj = {
    scopes: ["user.read"]
};

myMSALObj.loginPopup(requestObj).then(function (loginResponse) {
    //Login Success callback code here
}).catch(function (error) {
    console.log(error);
});
Where
scopes (Optional) Contains scopes that are being requested for user consent at sign-in time. For example, [ "user.read" ] for Microsoft Graph or [ "<Application ID URL>/scope" ] for custom Web APIs (that is, api://<Application ID>/access_as_user).

Tip

Alternatively, you might want to use the loginRedirect method to redirect the current page to the sign-in page instead of a popup window.

Request tokens

MSAL uses three methods to acquire tokens: acquireTokenRedirect, acquireTokenPopup, and acquireTokenSilent

Get a user token silently

The acquireTokenSilent method handles token acquisitions and renewal without any user interaction. After the loginRedirect or loginPopup method is executed for the first time, acquireTokenSilent is the method commonly used to obtain tokens that are used to access protected resources for subsequent calls. Calls to request or renew tokens are made silently.

var requestObj = {
    scopes: ["user.read"]
};

myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
    // Callback code here
    console.log(tokenResponse.accessToken);
}).catch(function (error) {
    console.log(error);
});
Where
scopes Contains scopes being requested to be returned in the access token for API. For example, [ "user.read" ] for Microsoft Graph or [ "<Application ID URL>/scope" ] for custom Web APIs (that is, api://<Application ID>/access_as_user).

Get a user token interactively

There are situations where you need to force users to interact with the Microsoft identity platform endpoint. For example:

  • Users might need to reenter their credentials because their password has expired.
  • Your application is requesting access to additional resource scopes that the user needs to consent to.
  • Two-factor authentication is required.

The usual recommended pattern for most applications is to call acquireTokenSilent first, then catch the exception, and then call acquireTokenPopup (or acquireTokenRedirect) to start an interactive request.

Calling the acquireTokenPopup results in a popup window for signing in. (Or acquireTokenRedirect results in redirecting users to the Microsoft identity platform endpoint.) In that window, users need to interact by confirming their credentials, giving the consent to the required resource, or completing the two-factor authentication.

var requestObj = {
    scopes: ["user.read"]
};

myMSALObj.acquireTokenPopup(requestObj).then(function (tokenResponse) {
    // Callback code here
    console.log(tokenResponse.accessToken);
}).catch(function (error) {
    console.log(error);
});

Note

This quickstart uses the loginRedirect and acquireTokenRedirect methods with Microsoft Internet Explorer, because of a known issue related to the handling of popup windows by Internet Explorer.

Next steps

For a more detailed step-by-step guide on building the application for this quickstart, see:

To browse the MSAL repo for documentation, FAQ, issues, and more, see:

Help us improve the Microsoft identity platform. Tell us what you think by completing a short two-question survey.