You are developing a Single Page Application (SPA) in React. The application runs in the user's web browser, authenticates users via Microsoft Entra ID, and reads their calendar events from Microsoft Graph on their behalf. You are creating the app registration in Microsoft Entra ID. Which two configurations should you implement to support this scenario?
- Configure the Redirect URI with the platform type set to Single-page application (SPA).Answer
- Add the delegated Calendars.Read permission for Microsoft Graph to the application registration.Answer
- CConfigure a system-assigned managed identity for the application to authenticate from the browser.
- DGenerate a Shared Access Signature (SAS) token with calendar access scope to authenticate the client.
Answer
Configure the Redirect URI with the platform type set to Single-page application (SPA) and add the delegated Calendars.Read permission for Microsoft Graph to the application registration.
To configure authentication and authorization for a Single Page Application (SPA) accessing Microsoft Graph on behalf of a user, the application registration must use the 'Single-page application (SPA)' platform type for the Redirect URI. This platform type enables the Authorization Code Flow with PKCE, which is the secure authentication flow recommended for browser-based clients. Additionally, because the application needs to access the user's calendar data on their behalf, the 'Calendars.Read' delegated permission must be added to the application registration so that the user (or administrator) can consent to the access.
Step-by-Step Solution
Key Concept
Configuring App Registrations in Microsoft Entra ID for Single-Page Applications (SPAs) accessing protected APIs.