Skip to content


Switch branches/tags
page_type languages products description urlFragment
A simple JavaScript Single-Page Application using the Auth Code flow w/ PKCE

Vanilla JavaScript Single-page Application secured with MSAL.js

A simple vanilla JavaScript single-page application which demonstrates how to configure MSAL.JS 2.x to login, logout, and acquire an access token for a protected resource such as the Microsoft Graph API. This version of the MSAL.js library uses the authorization code flow with PKCE.

Note: A quickstart guide covering this sample can be found here.

Note: A more detailed tutorial covering this sample can be found here.


File/folder Description
app Contains sample source files
authPopup.js Main authentication logic resides here (using Popup flow).
authRedirect.js Use this instead of authPopup.js for authentication with redirect flow.
authConfig.js Contains configuration parameters for the sample.
graph.js Provides a helper function for calling MS Graph API.
graphConfig.js Contains API endpoints for MS Graph.
ui.js Contains UI logic.
index.html Contains the UI of the sample.
.gitignore Define what to ignore at commit time.
package.json Package manifest for npm.
server.js Implements a simple Node server to serve index.html.


Node must be installed to run this sample.


  1. Register a new application in the Azure Portal. Ensure that the application is enabled for the authorization code flow with PKCE. This will require that you redirect URI configured in the portal is of type SPA.
  2. Open the /app/authConfig.js file and provide the required configuration values.
  3. On the command line, navigate to the root of the repository, and run npm install to install the project dependencies via npm.

Running the sample

  1. Configure authentication and authorization parameters:
    1. Open authConfig.js
    2. Replace the string "Enter_the_Application_Id_Here" with your app/client ID on AAD Portal.
    3. Replace the string "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here" with "" (note: This is for multi-tenant applications located on the global Azure cloud. For more information, see the documentation).
    4. Replace the string "Enter_the_Redirect_Uri_Here" with the redirect uri you setup on AAD Portal.
  2. Configure the parameters for calling MS Graph API:
    1. Open graphConfig.js.
    2. Replace the string "Enter_the_Graph_Endpoint_Herev1.0/me" with "".
    3. Replace the string "Enter_the_Graph_Endpoint_Herev1.0/me/messages" with "".
  3. To start the sample application, run npm start.
  4. Finally, open a browser and navigate to http://localhost:3000.

How did we do? Consider sharing your experience with us.

Key concepts

This sample demonstrates the following MSAL workflows:

  • How to configure application parameters.
  • How to sign-in with popup and redirect methods.
  • How to sign-out.
  • How to get user consent incrementally.
  • How to acquire an access token.
  • How to make an API call with the access token.


This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact with any additional questions or comments.


VanillaJS sample using MSAL.js v2.x and OAuth 2.0 Authorization Code Flow with PKCE on Microsoft identity platform




Code of conduct