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.

React application has no access to any environment variable at runtime, because it is just a static assets, html, css, js, etc, without any server code. All those env configurations are applied during build stage only. — Sergey Sosunov
– Sergey Sosunov, Commented Aug 13, 2024 at 11:55
EikkaPine Can you provide the log stream for your Azure App Service? — Sirra Sneha
– Sirra Sneha, Commented Aug 13, 2024 at 12:07
How are you deploying your app to Azure App Service via GitHub or the VS Code extension? — Sirra Sneha
– Sirra Sneha, Commented Aug 13, 2024 at 12:08
@SirraSneha Im deploying via github with the App Service Build Service and my log stream is not providing any information related to the problem. And as I said im able to fix this problem locally by adding .env to the client folder but that doesn't work in azure. — EikkaPine
– EikkaPine, Commented Aug 13, 2024 at 12:22
Also the server.js which handles my database connections is able to get the azure enviroment variables but not the index.js in the client folder! Am I doing something wrong here? — EikkaPine
– EikkaPine, Commented Aug 13, 2024 at 12:25

Sirra Sneha · Accepted Answer · 2024-08-14 06:44:40Z

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: .

enter image description here

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

enter image description here

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

enter image description here

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

Output after deployment:

enter image description here

Thank you so much for your clear explanation and example! Changing the virtual path in the Azure App Service configuration solved my problem. I really appreciate your help!

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related