Quickstart: Sign in users and get an access token in a JavaScript SPA using the auth code flow

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 using the authorization code flow. The code sample 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.

This quickstart uses MSAL.js 2.0 with the authorization code flow. For a similar quickstart that uses MSAL.js 1.0 with the implicit flow, see Quickstart: Sign in users in JavaScript single-page apps.

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.
  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. Select App registrations.
  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. Go to the quickstart pane and 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.
  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. Select App registrations.
  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. In the left pane of the registered application, select Authentication.
  9. Under Platform configurations, select Add a platform. In the pane that opens select Single-page application.
  10. Set the Redirect URI value to http://localhost:3000/.
  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/.

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 app folder, open the authConfig.js file and update the clientID, authority, and redirectUri values in the msalConfig object.

// Config object to be passed to Msal on creation
const msalConfig = {
  auth: {
    clientId: "Enter_the_Application_Id_Here",
    authority: "Enter_the_Cloud_Instance_Id_HereEnter_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

Modify the values in the msalConfig section as described here:

  • 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, 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:
    • 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. For this quickstart, use common.
    • To restrict support to personal Microsoft accounts only, replace this value with consumers.
  • Enter_the_Redirect_Uri_Here is http://localhost:3000/.

The authority value in your authConfig.js should be similar to the following if you're using the main (global) Azure cloud:

authority: "https://login.microsoftonline.com/common",

Tip

To find the values of Application (client) ID, Directory (tenant) ID, and Supported account types, go to the app registration'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 the graphConfig.js file and update the graphMeEndpoint and graphMailEndpoint values in the apiConfig object.

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

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

Enter_the_Graph_Endpoint_Here is the endpoint that API calls will be made against. For the main (global) Microsoft Graph API service, enter https://graph.microsoft.com/ (include the trailing forward-slash). For more information about Microsoft Graph on national clouds, see National cloud deployment.

The graphMeEndpoint and graphMailEndpoint values in the graphConfig.js file should be similar to the following if you're using the main (global) Microsoft Graph API service:

graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"

Step 4: Run the project

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

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

    npm install
    npm start
    
  2. Browse to http://localhost:3000/.

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

    The first time you sign in, you're prompted to provide your consent to allow the application to access your profile and 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

Diagram showing the authorization code flow for a single-page application.

msal.js

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

<script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
"sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>

If you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):

npm install @azure/msal-browser

Next steps

For a more detailed step-by-step guide on building the application used in this quickstart, see the following tutorial: