Edit

Quickstart: Sign in users in single-page apps (SPA) via the authorization code flow

  • Article
  • 13 minutes to read

In this quickstart, you download and run a code sample that demonstrates how a JavaScript Angular 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 Angular v2 with the authorization code flow.

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. Go to the Azure portal - App registrations quickstart experience.
  2. Enter a name for your application.
  3. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  4. Select Register.
  5. 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 you have access to multiple tenants, use the Directories + subscriptions filter in the top menu to switch to the tenant in which you want to register the application.
  3. Search for and select Azure Active Directory.
  4. Under Manage, select App registrations > New registration.
  5. Enter a Name for your application. Users of your app might see this name, and you can change it later.
  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. Under Manage, select Authentication.
  9. Under Platform configurations, select Add a platform. In the pane that opens select Single-page application.
  10. Set the Redirect URIs value to http://localhost:4200/. This is the default port NodeJS will listen on your local machine. We’ll return the authentication response to this URI after successfully authenticating the user.
  11. Select Configure to apply the changes.
  12. Under Platform Configurations expand Single-page application.
  13. Confirm that under Grant types Already configured Your Redirect URI is eligible for the Authorization Code Flow with PKCE.

Step 2: Download the project

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

Step 3: Configure your JavaScript app

In the src folder, open the app folder then open the app.module.ts file and update the clientID, authority, and redirectUri values in the auth object.

// MSAL instance to be passed to msal-angular
export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    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: BrowserCacheLocation.LocalStorage,
      storeAuthStateInCookie: isIE, // set to true for IE 11     },
  });
}

Modify the values in the auth section as described here:

  • Enter_the_Application_Id_Here is the Application (client) ID for the application you registered.

    To find the value of Application (client) ID, go to the app registration's Overview page in the Azure portal.

  • 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.

    To find the value of the Directory (tenant) ID, go to the app registration's Overview page in the Azure portal.

    • 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.

    To find the value of Supported account types, go to the app registration's Overview page in the Azure portal.

  • Enter_the_Redirect_Uri_Here is http://localhost:4200/.

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

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

Scroll down in the same file and update the graphMeEndpoint.

  • Replace the string Enter_the_Graph_Endpoint_Herev1.0/me with https://graph.microsoft.com/v1.0/me
  • Enter_the_Graph_Endpoint_Herev1.0/me 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, see the documentation.
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set('Enter_the_Graph_Endpoint_Herev1.0/me', ['user.read']);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap
  };
}

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:4200/.

  3. Select Login 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, click the Profile button to display your user information 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 the Microsoft identity platform.

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 @azure/msal-angular@2

Next steps

For a detailed step-by-step guide on building the auth code flow application using vanilla JavaScript, see the following tutorial:

Tutorial to sign in users and call Microsoft Graph

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 with Proof Key for Code Exchange (PKCE). 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.

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. Go to the Azure portal - App registrations.
  2. Enter a name for your application.
  3. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  4. Select Register.
  5. 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 you have access to multiple tenants, use the Directories + subscriptions filter in the top menu to switch to the tenant in which you want to register the application.
  3. Search for and select Azure Active Directory.
  4. Under Manage, select App registrations > New registration.
  5. Enter a Name for your application. Users of your app might see this name, and you can change it later.
  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. Under Manage, 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 2: Download the project

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

Step 3: Configure your JavaScript app

In the app folder, open the authConfig.js file, and then 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_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
  }
};

Modify the values in the msalConfig section:

  • Enter_the_Application_Id_Here is the Application (client) ID for the application you registered.

    To find the value of Application (client) ID, go to the app registration's Overview page in the Azure portal.

  • Enter_the_Cloud_Instance_Id_Here is the Azure cloud instance. 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 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.

    To find the value of the Directory (tenant) ID, go to the app registration's Overview page in the Azure portal.

    • 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.

    To find the value of Supported account types, go to the app registration's Overview page in the Azure portal.

  • 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",

Next, open the graphConfig.js file to 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 are 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.

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

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. Go 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 is 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:

Tutorial to sign in users and call Microsoft Graph

In this quickstart, you download and run a code sample that demonstrates how a JavaScript React 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.

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. Go to the Azure portal - App registrations quickstart experience.
  2. Enter a name for your application.
  3. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  4. Select Register.
  5. 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 you have access to multiple tenants, use the Directories + subscriptions filter in the top menu to switch to the tenant in which you want to register the application.
  3. Search for and select Azure Active Directory. Under Manage, select App registrations > New registration.
  4. When the Register an application page appears, enter a name for your application.
  5. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  6. Select Register. On the app Overview page, note the Application (client) ID value for later use.
  7. Under Manage, select Authentication.
  8. Under Platform configurations, select Add a platform. In the pane that opens select Single-page application.
  9. Set the Redirect URIs value to http://localhost:3000/. This is the default port NodeJS will listen on your local machine. We’ll return the authentication response to this URI after successfully authenticating the user.
  10. Select Configure to apply the changes.
  11. Under Platform Configurations expand Single-page application.
  12. Confirm that under Grant types Already configured Your Redirect URI is eligible for the Authorization Code Flow with PKCE.

Step 2: Download the project

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

Step 3: Configure your JavaScript app

In the src folder, open the authConfig.js file and update the clientID, authority, and redirectUri values in the msalConfig object.

/**
* Configuration object to be passed to MSAL instance on creation.
* For a full list of MSAL.js configuration parameters, visit:
* https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
*/
export 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
   },

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.

    To find the value of Application (client) ID, go to the app registration's Overview page in the Azure portal.

  • 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.

    To find the value of the Directory (tenant) ID, go to the app registration's Overview page in the Azure portal.

    • 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.

    To find the value of Supported account types, go to the app registration's Overview page in the Azure portal.

  • 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",

Scroll down in the same file and update the graphMeEndpoint.

  • Replace the string Enter_the_Graph_Endpoint_Herev1.0/me with https://graph.microsoft.com/v1.0/me
  • Enter_the_Graph_Endpoint_Herev1.0/me 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, see the documentation.
  // Add here the endpoints for MS Graph API services you would like to use.
   export const graphConfig = {
       graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me"
   };

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, click on the Request Profile Information to display your profile information 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 the Microsoft identity platform.

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 @azure/msal-react

Next steps

Next, try a step-by-step tutorial to learn how to build a React SPA from scratch that signs in users and calls the Microsoft Graph API to get user profile data:

Tutorial: Sign in users and call Microsoft Graph