Azure API Management Authenticate to Azure-AD Protected API — Example with Single Page Apps (SPA)

Modern authentication such as OAuth2.0 and OpenID Connect is commonly used in modern web applications and APIs. A common Simple Page Application (SPA) with modern authentication enabled has a similar flow as below (simplified):

Typical application flow

To further safeguard the backend API, it is common that we place an API gateway to front the traffic towards the backend API, for several reasons such as:

1. Enhanced Security → API Gateway can enforce policies such as throttling calls to prevent brute force attack
2. Request modification → API Gateway can inspect the headers and make changes accordingly such as injecting additional header for the backend
3. Usage control → Subscription key is often used to allow the user to call the API, and we can control the usage based on the issued key
4. Better experience & ease of management → API Gateway can help to streamline the endpoints, standardizing all endpoints to the same FQDN.
5. Greater developer experience → Some API Gateway uses Open API standards, and it’s easy for developer to update the API documentations, and uses tools like swagger for ease of reference