Vanilla JavaScript single-page application (SPA) using MSAL.js to authenticate users against Azure Active Directory

Overview
Scenario
Contents
Prerequisites
Setup
Registration
Running the sample
Explore the sample
About the code
More information
Community Help and Support

Overview

This sample demonstrates a Vanilla JavaScript single-page application (SPA) that lets users sign-in to Azure Active Directory (Azure AD) using the Microsoft Authentication Library for JavaScript (MSAL.js). In doing so, it also illustrates various authentication concepts, such as ID Tokens, OIDC scopes, single-sign on, account selection, silent requests and more.

Scenario

The client application uses MSAL.js to sign-in a user and obtain an ID Token from Azure AD.
The ID Token proves that the user has successfully signed-in with their organization's tenant.

File/folder	Description
`AppCreationScripts/`	Contains Powershell scripts to automate app registration.
`App/authPopup.js`	Main authentication logic resides here (using popup flow).
`App/authRedirect.js`	Use this instead of `authPopup.js` for authentication with redirect flow.
`App/authConfig.js`	Contains configuration parameters for the sample.
`App/ui.js`	Contains UI logic.
`server.js`	Simple Node server for `index.html`.

Prerequisites

An Azure Active Directory (Azure AD) tenant. For more information, see: How to get an Azure AD tenant
A user account in your Azure AD tenant

Setup

Locate the sample folder, then type:

    npm install

Registration

Register the sample application(s) with your Azure Active Directory tenant

There is one project in this sample. To register it, you can:

either follow the steps below for manually register your apps
or use PowerShell scripts that:
- automatically creates the Azure AD applications and related objects (passwords, permissions, dependencies) for you.
- modify the projects' configuration files.

Expand this section if you want to use this automation:

⚠️ If you have never used Azure AD Powershell before, we recommend you go through the App Creation Scripts once to ensure that your environment is prepared correctly for this step.

On Windows, run PowerShell and navigate to the root of the cloned directory.

In PowerShell run:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -Force

Run the script to create your Azure AD application and configure the code of the sample application accordingly.
In PowerShell run:
```
cd .\AppCreationScripts\
.\Configure.ps1
```
Other ways of running the scripts are described in App Creation Scripts The scripts also provide a guide to automated application registration, configuration and removal which can help in your CI/CD scenarios.

Choose the Azure AD tenant where you want to create your applications

As a first step you'll need to:

Sign in to the Azure portal.
If your account is present in more than one Azure AD tenant, select your profile at the top right corner in the menu on top of the page, and then switch directory to change your portal session to the desired Azure AD tenant.

Register the client app

Navigate to the Microsoft identity platform for developers App registrations page.
Select New registration.
In the Register an application page that appears, enter your application's registration information:
- In the Name section, enter a meaningful application name that will be displayed to users of the app, for example ms-identity-javascript-c1s1-spa.
- Under Supported account types, select Accounts in your organizational directory only.
- In the Redirect URI (optional) section, select Single-Page Application in the combo-box and enter the following redirect URI: http://localhost:3000/.
Select Register to create the application.
In the app's registration screen, find and note the Application (client) ID. You use this value in your app's configuration file(s) later in your code.
Select Save to save your changes.

Configure the client app to use your app registration

Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code.

In the steps below, "ClientID" is the same as "Application ID" or "AppId".

Open the App\authConfig.js file
Find the key Enter_the_Application_Id_Here and replace the existing value with the application ID (clientId) of the ms-identity-javascript-c1s1 application copied from the Azure portal.
Find the key Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here and replace the existing value with https://login.microsoftonline.com/<your-tenant-id>.
Find the key Enter_the_Redirect_Uri_Here and replace the existing value with the base address of the ms-identity-javascript-signin project (by default http://localhost:3000).

Running the sample

Locate the sample folder, then type:

    npm start

Explore the sample

Open your browser and navigate to http://localhost:3000.
Click the sign-in button on the top right corner.

We'd love your feedback!

Were we successful in addressing your learning objective? Consider taking a moment to share your experience with us.

About the code

Sign-in

MSAL.js provides 3 login APIs: loginPopup(), loginRedirect() and ssoSilent():

    myMSALObj.loginPopup(loginRequest)
        .then((response) => {
            // your logic
        })
        .catch(error => {
            console.error(error);
        });

To use the redirect flow, you must register a handler for redirect promise. MSAL.js provideshandleRedirectPromise() API:

    myMSALObj.handleRedirectPromise()
        .then((response) => {
            // your logic
        })
        .catch(err => {
            console.error(err);
        });

    myMSALObj.loginRedirect(loginRequest);

The recommended pattern is that you fallback to an interactive method should the silent SSO fails.

    const silentRequest = {
      scopes: ["openid", "profile"],
      loginHint: "example@domain.net"
    };

    myMSALObj.ssoSilent(silentRequest)
        .then((response) => {
            // your logic
        }).catch(error => {
            console.error("Silent Error: " + error);
            if (error instanceof msal.InteractionRequiredAuthError) {
                myMSALObj.loginRedirect(loginRequest);
            }
        });

You can get all the active accounts of a user with the get getAllAccounts() API. If you know the username or home ID of an account, you can select it by:

    myMSALObj.getAccountByUsername(username);
    // or
    myMSALObj.getAccountByHomeId(homeId);

Sign-out

The Application redirects the user to the Microsoft identity platform logout endpoint to sign out. This endpoint clears the user's session from the browser. If your app did not go to the logout endpoint, the user may re-authenticate to your app without entering their credentials again, because they would have a valid single sign-in session with the Microsoft identity platform endpoint. For more, see: Send a sign-out request

ID Token Validation

A single-page application does not benefit from validating ID tokens, since the application runs without a back-end and as such, attackers can intercept and edit the keys used for validation of the token.

Sign-in Audience and Account Types

This sample is meant to work with accounts in your organization (aka single-tenant). If you would like to allow sign-ins with other type accounts, you have to configure your authority string in authConfig.js accordingly. For example:

const msalConfig = {
    auth: {
      clientId: "<YOUR_CLIENT_ID>",
      authority: "https://login.microsoftonline.com/consumers", // allows sign-ins with personal Microsoft accounts.
      redirectUri: "<YOUR_REDIRECT_URI>",
    },

For more information about audiences and account types, please see: Validation differences by supported account types (signInAudience)

⚠️ Be aware that making an application multi-tenant entails more than just modifying the authority string. For more information, please see How to: Sign in any Azure Active Directory user using the multi-tenant application pattern.

Authentication in National Clouds

National clouds (aka Sovereign clouds) are physically isolated instances of Azure. These regions of Azure are designed to make sure that data residency, sovereignty, and compliance requirements are honored within geographical boundaries. Enabling your application for sovereign clouds requires you to:

register your application in a specific portal, depending on the cloud.
use a specific authority, depending on the cloud in the configuration file for your application.
in case you want to call the MS Graph, this requires a specific Graph endpoint URL, depending on the cloud.

For instance, to configure this sample for Azure AD Germany national cloud:

Open the App\authConfig.js file.
Find the key Enter_the_Application_Id_Here and replace the existing value with the application ID (clientId) of the ms-identity-javascript-c1s1 application copied from the Azure portal.
Find the key Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here and replace the existing value with https://portal.microsoftazure.de/<your-tenant-id>.
Find the key Enter_the_Redirect_Uri_Here and replace the existing value with the base address of the ms-identity-javascript-c1s1-spa application (by default http://localhost:3000).

See National Clouds for more information.

Next Tutorial

Continue with the next tutorial: Get an Access Token and call Microsoft Graph.

More information

Configure your application:

For more information about how OAuth 2.0 protocols work in this scenario and other scenarios, see Authentication Scenarios for Azure AD.

Community Help and Support

Use Stack Overflow to get support from the community. Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before. Make sure that your questions or comments are tagged with [azure-ad azure-ad-b2c ms-identity msal].

If you find a bug in the sample, please raise the issue on GitHub Issues.

To provide a recommendation, visit the following User Voice page.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vanilla JavaScript single-page application (SPA) using MSAL.js to authenticate users against Azure Active Directory

Overview

Scenario

Contents

Prerequisites

Setup

Registration

Register the sample application(s) with your Azure Active Directory tenant

Choose the Azure AD tenant where you want to create your applications

Register the client app

Configure the client app to use your app registration

Running the sample

Explore the sample

We'd love your feedback!

About the code

Sign-in

Sign-out

ID Token Validation

Sign-in Audience and Account Types

Authentication in National Clouds

Next Tutorial

More information

Community Help and Support

FilesExpand file tree

README-incremental.md

Latest commit

History

README-incremental.md

File metadata and controls

Vanilla JavaScript single-page application (SPA) using MSAL.js to authenticate users against Azure Active Directory

Overview

Scenario

Contents

Prerequisites

Setup

Registration

Register the sample application(s) with your Azure Active Directory tenant

Choose the Azure AD tenant where you want to create your applications

Register the client app

Configure the client app to use your app registration

Running the sample

Explore the sample

We'd love your feedback!

About the code

Sign-in

Sign-out

ID Token Validation

Sign-in Audience and Account Types

Authentication in National Clouds

Next Tutorial

More information

Community Help and Support