Use Azure Front Door as a reverse proxy in production environment for a single-page app that uses native authentication (preview)

Applies to: Workforce tenants External tenants (learn more)

In this article, you learn how to Use Azure Front Door as a reverse proxy for a single-page app (SPA) that uses native authentication API.

The native authentication API doesn't support Cross-Origin Resource Sharing (CORS). Therefore, a single-page app (SPA) that uses this API for user authentication can't make successful requests from front-end JavaScript code. To resolve this, you need to add a proxy server between the SPA and the native authentication API. This proxy server injects the appropriate CORS headers into the response.

In a production environment, we recommended using Azure Front Door with a Standard/Premium subscription as a reverse proxy.

Prerequisites

• An Azure subscription. Create an account for free.
• A sample SPA that you can access via a URL such as http://www.contoso.com:
  • You can use the React app described in Quickstart: Sign in users into a sample React SPA by using native authentication API. However, don't configure or run the proxy server, as this guide covers that setup.
  • Once you run the app, record the app URL for later use in this guide. In production, this URL contains the domain that you want to use as a custom domain URL, such as http://www.contoso.com

Set up Azure Front Door as a reverse proxy

1. Familiarize yourself how to use Azure Front Door with CORS by reading through the article at Using Azure Front Door Standard/Premium with CORS.
2. Use the instructions in Enable custom URL domains for apps in external tenants to add a custom domain name to your external tenant and create an Azure Front Door.
3. In your sample SPA, open the API\React\ReactAuthSimple\src\config.ts file, then replace the value of BASE_API_URL, http://localhost:3001/api, with https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Here. Replace the placeholder:
   1. Enter_Custom_Domain_URL with your custom domain url, such as contoso.com.
   2. Enter_the_Tenant_ID_Here with your Directory (tenant) ID. If you don't have your tenant ID, learn how to read your tenant details.
4. If necessary, rerun your sample SPA.

Guidelines for using Azure Front Door as a reverse proxy

We recommend the following guidelines when you set up Azure Front Door as a reverse proxy to manage the CORS headers in a production environment:

Restrict origins

When you configure Azure Front Door, only allow your SPA domain url, such as https://www.contoso.com, as origin. Avoid configurations that permit all origins, such as * which could lead to security vulnerabilities.

Use simple requests

Native authentication requests already meet all conditions of simple requests:

• Uses Http Method: POST.
• Uses Content-Type: application/x-www-form-urlencoded.
• Request doesn't require custom headers.
• Request doesn't involve ReadableStream object in the request.
• Request doesn’t require usage of XMLHttpRequest.

Related content

• Read more about Cross-Origin Resource Sharing (CORS).
• Native authentication API reference.