Examkin

Question

Difficulty: MediumMicrosoft Identity Platform Authentication

You are developing a Single Page Application (SPA) using React and MSAL.js to authenticate users and obtain tokens for a downstream Web API. During the application registration in Microsoft Entra ID, you configured the redirect URI as http://localhost:3000/callback. When testing the authentication flow, the user can successfully sign in and the application receives an authorization code. However, when MSAL.js attempts to exchange the authorization code for an access token by sending a POST request to the token endpoint, the browser blocks the request with a Cross-Origin Resource Sharing (CORS) error. Which of the following describes the cause of this issue and the correct action to resolve it?

  1. A
    The React application is a public client and is missing a client secret in its token request. You must generate a client secret in the App Registration and add it to the MSAL.js configuration.
  2. The redirect URI was registered under the Web platform in the App Registration. You must change the platform type of the redirect URI to Single-page application (SPA).Answer
  3. C
    The application registration is missing a Key Vault access policy. You must create an access policy in Key Vault that grants the application's service principal permissions to sign tokens.
  4. D
    The authentication request is using an over-permissioned Shared Access Signature (SAS) token. You must generate a new SAS token with narrower scopes for the token endpoint.

Answer

The redirect URI must be registered under the Single-page application (SPA) platform in the App Registration to enable CORS support on the token endpoint.
The platform type of the redirect URI dictates how the Microsoft Identity Platform handles token requests. For SPAs, registering the redirect URI under the 'Single-page application' platform enables Cross-Origin Resource Sharing (CORS) on the token endpoint. Without this, the token endpoint does not send the required CORS headers, leading to browser-side errors during the authorization code exchange.

Step-by-Step Solution

1
Analyze the CORS error generated when MSAL.js calls the token endpoint.
The token endpoint is blocking the request from the browser because it did not return the required Access-Control-Allow-Origin headers.
The browser blocks cross-origin requests unless the target resource explicitly allows the origin through CORS headers.
2
Inspect the application registration settings in Microsoft Entra ID.
Identify that the redirect URI is configured under the 'Web' platform type instead of the 'Single-page application' platform type.
The 'Web' platform type is designed for confidential clients (web servers) and does not support browser-based CORS operations at the token endpoint.
3
Change the platform type of the redirect URI in the App Registration.
Migrating the redirect URI to the 'Single-page application' platform enables CORS on the token endpoint for the registered origin and configures Authorization Code Flow with PKCE.
This updates the Entra ID security configuration to allow public browser clients to securely acquire tokens directly.

Key Concept

Entra ID App Registration Platform Types and CORS
Estimated Time:1m 30s
Rate this question

Topics

Microsoft Identity Platform Authentication

More questions from this topic