Set up a reverse proxy for a single-page app that calls native authentication API by using Azure Function App (preview)

In this article, you learn how to set up a reverse proxy by using Azure Functions App to manage CORS headers in a test environment 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.

This solution is for testing purposes and should NOT be used in a production environment. If you're looking for a solution to use in a production environment, we recommended you use an Azure Front Door solution, see the instructions in Use Azure Front Door as a reverse proxy to manage CORS headers for SPA in production.

Prerequisites

• An Azure subscription. Create an account for free.
• Azure Developer CLI. After you install it, sign into it for the first time. For more information, see Sign into the Azure CLI.
• 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.

Create reverse proxy in an Azure function app by using Azure Resource Manager template

1. Create a Resource Group using az group create

   az group create --name Enter_Resource_Group_Name_Here --location Enter_Location_Name_Here
   

   Replace the placeholder:

   • Enter_Resource_Group_Name_Here with the name of the new resource group.
   • Enter_Location_Name_Here with the geographical region where the resource group is created.

   Wait for this process to complete before creating the function app.

2. To get the Azure Resource Manager (ARM) template:

   1. Clone a sample SPA that contains the ARM template:

      git clone https://github.com/Azure-Samples/ms-identity-ciam-native-javascript-samples.git
      

   2. Navigate to the ARM template directory by using the following command:

      cd API/CORSTestEnviroment
      

3. Create the function app by running the following command:

   az deployment group create \
       --resource-group Enter_Resource_Group_Name_Here \
       --template-file ReverseProxyARMTemplate.json \
       --parameters functionAppName=Enter_App_Function_Name_Here \
       --parameters location=Enter_Location_Name_Here \
       --parameters SPAurl=Enter_The_SPA_URL_Here
   

   Replace:

   • Enter_Resource_Group_Name_Here with the name of the new resource group.
   • Enter_App_Function_Name_Here with the name of your function app.
   • Enter_Location_Name_Here with the geographical region where the resource group is created.
   • Enter_The_SPA_URL_Here with the SPA app URL you recorded earlier.

4. Open /API/CORSTestEnviroment/ReverseProxy/index.js file, then replace the placeholder Enter_the_Tenant_Subdomain_Here with the Directory (tenant) subdomain. For example, if your tenant primary domain is contoso.onmicrosoft.com, use contoso. If you don't have your tenant name, learn how to read your tenant details.

   The name of the directory, such as ReverseProxy, need to match the value, such as ReverseProxy/{*path}, of the route key in the function.json file. If you change the name of the directory to TriggerFunc, then the value of the route key needs to be TriggerFunc/{*path}.

5. To deploy the project files to an Azure Function App:

   1. Make sure you're in the /API/CORSTestEnviroment/ directory, then zip the project files by using the following command:

      zip -r ReverseProxy.zip ReverseProxy
      

   2. Deploy app files by using the following command:

      az functionapp deployment source config-zip \
          --resource-group "Enter_Resource_Group_Name_Here" \
          --name "Enter_App_Function_Name_Here" \
          --src ReverseProxy.zip  
      

Test your sample SPA with the reverse proxy

1. 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_App_Function_Name_Here.azurewebsites.net/api/ReverseProxy. Replace the placeholder Enter_App_Function_Name_Here with the name of your function app. If necessary, rerun your sample SPA.

2. Browse to the sample SPA URL, then test sign-up, sign-in and password reset flows. Your SPA app should work correctly as the reverse proxy manages CORS headers correctly.

Related content

• Use Azure Front Door as a reverse proxy in production environment for a SPA that uses native authentication.