Edit

Scenario: Single-page application

  • Article

Learn all you need to build a single-page application (SPA). For instructions regarding Azure Static Web Apps, see Authentication and Authorization for Static Web Apps instead.

Getting started

If you haven't already, create your first app by completing the JavaScript SPA quickstart:

Quickstart: Sign in users in single-page apps (SPA) via the authorization code flow with Proof Key for Code Exchange (PKCE) using JavaScript

Overview

Many modern web applications are built as client-side single-page applications. Developers write them by using JavaScript or a SPA framework such as Angular, Vue, and React. These applications run on a web browser and have different authentication characteristics than traditional server-side web applications.

The Microsoft identity platform provides two options to enable single-page applications to sign in users and get tokens to access back-end services or web APIs:

  • OAuth 2.0 Authorization code flow (with PKCE). The authorization code flow allows the application to exchange an authorization code for ID tokens to represent the authenticated user and Access tokens needed to call protected APIs.

    Proof Key for Code Exchange (PKCE), is an extension to the authorization code flow to prevent authorization code injection attacks. In addition, it returns refresh tokens that provide long-term access to resources on behalf of users without requiring additional interaction from them.

    Using the authorization code flow with PKCE is the more secure and recommended authorization approach, not only in native and browser-based JavaScript apps, but for every other type of OAuth client.

Single-page applications-auth

  • OAuth 2.0 implicit flow. The implicit grant flow allows the application to get ID and Access tokens. Unlike the authorization code flow, implicit grant flow does not return a Refresh token. It is also less secure, so it's recommended to use the authorization code flow for new applications. This authentication flow does not include application scenarios that use cross-platform JavaScript frameworks such as Electron and React-Native. They require further capabilities for interaction with the native platforms.

Single-page applications-implicit

Specifics

To enable this scenario for your application, you need:

  • Application registration with Microsoft Entra ID. The registration steps differ between the implicit grant flow and authorization code flow.
  • Application configuration with the registered application properties, such as the application ID.
  • Using Microsoft Authentication Library for JavaScript (MSAL.js) to do the authentication flow to sign in and acquire tokens.

If you're new to identity and access management (IAM) with OAuth 2.0 and OpenID Connect, or even just new to IAM on the Microsoft identity platform, the following set of articles should be high on your reading list.

Although not required reading before completing your first quickstart or tutorial, they cover topics integral to the platform, and familiarity with them will help you on your path as you build more complex scenarios.

Authentication and authorization

Microsoft identity platform

Next steps

Move on to the next article in this scenario, App registration.