Quickstart: Sign in users and get an access token in a JavaScript SPA

In this quickstart, you download and run a code sample that demonstrates how a JavaScript single-page application (SPA) can sign in users and call Microsoft Graph. The code sample also demonstrates how to get an access token to call the Microsoft Graph API or any web API.

See How the sample works for an illustration.

Prerequisites

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.
  5. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  6. Select Register.
  7. 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. Select Register. On the app Overview page, note the Application (client) ID value for later use.

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

  9. Under Platform Configurations, select Add a platform. A panel opens on the left. There, select the Web Applications region.

  10. Still on the left, set the Redirect URI value to http://localhost:3000/. Then, select Access Token and ID Token.

  11. Select Configure.

Step 1: Configure your application in the Azure portal

To make the code sample in this quickstart work, you need to add a redirectUri as http://localhost:3000/ and enable Implicit grant.

Already configured Your application is configured with these attributes.

Step 2: Download the project

To run the project with a web server by using Node.js, download the core project files.

Run the project with a web server by using Node.js

Step 3: Configure your JavaScript app

In the JavaScriptSPA folder, edit authConfig.js, and set the clientID, authority and redirectUri values under msalConfig.


 // Config object to be passed to Msal on creation
 const msalConfig = {
   auth: {
     clientId: "Enter_the_Application_Id_Here",
     authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
     redirectUri: "Enter_the_Redirect_Uri_Here",
   },
   cache: {
     cacheLocation: "sessionStorage", // This configures where your cache will be stored
     storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
   }
 };

Note

Enter_the_Supported_Account_Info_Here

Where:

  • <Enter_the_Application_Id_Here> is the Application (client) ID for the application you registered.
  • <Enter_the_Cloud_Instance_Id_Here> is the instance of the Azure cloud. For the main or global Azure cloud, simply enter https://login.microsoftonline.com. For national clouds (for example, China), see National clouds.
  • <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 3: Your app is configured and ready to run

We have configured your project with values of your app's properties.

Then, still in the same folder, edit graphConfig.js file to set the graphMeEndpoint and graphMeEndpoint for the apiConfig object.

  // Add here the endpoints for MS Graph API services you would like to use.
  const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me/messages"
  };

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

Where:

  • <Enter_the_Graph_Endpoint_Here> is the endpoint that API calls will be made against. For the main or global Microsoft Graph API service, simply enter https://graph.microsoft.com. For more information, see National cloud deployment

Step 4: Run the project

Run the project with a web server by using Node.js:

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

    npm install
    npm start
    
  2. Open a web browser and go to http://localhost:3000/.

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

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

How the sample works

How the sample JavaScript SPA works: 1. The SPA initiates sign in. 2. The SPA acquires an ID token from the Microsoft identity platform. 3. The SPA calls acquire token. 4. The Microsoft identity platform returns an Access token to the SPA. 5. The SPA makes and HTTP GET request with the Acess Token to the Microsoft Graph API. 6. The Graph API returns an HTTP response to the SPA.

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 type="text/javascript" src="https://alcdn.msftauth.net/lib/1.2.1/js/msal.js" integrity="sha384-9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></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:

  // Config object to be passed to Msal on creation
  const msalConfig = {
    auth: {
      clientId: "75d84e7a-40bx-f0a2-91b9-0c82d4c556aa", // this is a fake id
      authority: "https://login.microsoftonline.com/common",
      redirectUri: "http://localhost:3000/",
    },
    cache: {
      cacheLocation: "sessionStorage", // This configures where your cache will be stored
      storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    }
  };

const myMSALObj = new Msal.UserAgentApplication(msalConfig);
Where Description
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.
redirectUri The application registration's configured reply/redirectUri. In this case, http://localhost:3000/.
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:

// Add scopes for the id token to be used at Microsoft identity platform endpoints.
const loginRequest = {
    scopes: ["openid", "profile", "User.Read"],
};

myMSALObj.loginPopup(loginRequest)
    .then((loginResponse) => {
    //Login Success callback code here
}).catch(function (error) {
    console.log(error);
});
Where Description
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.


const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenSilent(tokenRequest)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });
Where Description
scopes Contains scopes being requested to be returned in the access token for API. For example, [ "mail.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.

// Add here scopes for access token to be used at MS Graph API endpoints.
const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenPopup(requestObj)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((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: