React App on Azure (Windows) Web App Not Reading Environment Variables for Auth0

Question

I'm deploying a React application to an Azure Web App. The project structure is as follows: root

│
├── server.js
├── package.json
├── package-lock.json
│
└── client
    ├── build
    ├── public
    ├── package.json
    ├── package-lock.json
    └── src
        └── index.js

In the index.js file located in the src directory of my React application, I'm trying to configure Auth0 for authentication. Here's the relevant code snippet:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';

const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

if (!domain || !clientId) {
  console.error('Missing Auth0 configuration');
}

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        redirect_uri: window.location.origin, // Automatically use the current origin
      }}
    >
      <App />
    </Auth0Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

I've set up the environment variables REACT_APP_AUTH0_DOMAIN and REACT_APP_AUTH0_CLIENT_ID in my Azure Web App settings, but my React application is unable to read these variables at runtime. The error Missing Auth0 configuration is logged in the console, indicating that the environment variables are not being found.

Environment Variable Configuration: Verified that the environment variables are correctly configured in the Azure portal under the "Configuration" section of the App Service.

Build and Deployment: Ensured that the React application is being built and deployed correctly by running npm run build and then deploying the contents of the build folder.

I expect that after correctly setting the environment variables, my React application should be able to read these variables at runtime and configure Auth0 properly.

Interestingly, the same problem exists when running the application locally with the given file structure. However, locally, it is resolved by adding an extra .env file to the client folder. Unfortunately, this approach cannot be applied in Azure as the environment variables configured in the Azure portal should be automatically available to the application at runtime.

Answer 1

I created a sample react application which prints environment variables as output.

Thanks to @medium.com for the clear explanation. I referred to this document and created a React application using a .env file.

.env file:

REACT_APP_NAME=Sneha
REACT_APP_JOB_TITLE=Engineer
REACT_APP_BRANCH=CSE

app.js:

import  React  from  'react';
function  App() {
const  name  =  process.env.REACT_APP_NAME;
const  jobTitle  =  process.env.REACT_APP_JOB_TITLE;
const  branch  =  process.env.REACT_APP_BRANCH;
return (
<div>
<h1>Display Environment Variables</h1>
<p>Name: {name}</p>
<p>Job Title: {jobTitle}</p>
<p> Branch: {branch}</p>
</div>
);
}
export  default  App;

I've deployed the app to Azure App Service (Windows) via GitHub actions.

workflow file:

name: Build and deploy Node.js app to Azure Web App - Reactenv18
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest  

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: Install dependencies
        run: npm install

      - name: Build the React app
        run: npm run build --if-present

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: .
          retention-days: 1
          max-concurrency: 10  

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write  

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app

      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID_<client-id> }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID_<tenant-id> }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID_<subscription-id> }}

      - name: 'Deploy to Azure Web App'
        uses: azure/webapps-deploy@v3
        id: deploy-to-webapp
        with:
          app-name: 'Reactenv18'
          slot-name: 'Production'
          package: .

• After deploying the app to Azure App Service, add environment variables in the configuration section the App.

• In the Configuration section of Azure App Service, go to Path Mappings and ensure that the physical path is correctly set to match the deployment directories for your application.

site\wwwroot\build

This way react application uses and loads environment variables both in development and production.

Output after deployment: