Unable to read config values from static web app

Question

I have deployed a Static Web App in Azure with the following configuration settings:

I have the following authConfig.ts:

import { Configuration } from "@azure/msal-browser";

// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
    auth: {
        clientId: `${process.env["REACT_APP_AAD_UI_APP_CLIENT_ID"]}`,
        authority: `https://login.microsoftonline.com/${process.env["REACT_APP_AAD_APP_TENANT_ID"]}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

// scopes
export const loginRequest = {
    scopes: [`api://${process.env["REACT_APP_AAD_API_APP_CLIENT_ID"]}/user_impersonation`]
  };

// endpoints 
export const config = {
    endpoint: `${process.env["REACT_APP_AAD_APP_SERVICE_BASE_URI"]}/api/v1/items`
};

On running this after deployment, I see this error:

Looks like it's not reading the tenantId from the config. Request URL should be

https://login.microsoftonline.com/tenant-id/v2.0/.well-known/openid-configuration

This is running fine after I add .env file with the values:

    REACT_APP_AAD_UI_APP_CLIENT_ID= 'xxxx'
    REACT_APP_AAD_API_APP_CLIENT_ID= 'yyyy'
    REACT_APP_AAD_APP_TENANT_ID= 'abcd'
    REACT_APP_AAD_APP_SERVICE_BASE_URI= 'https://xxx.api.azurewebsites.net'

What am I missing?

Does it work locally? Are you able to console.log(process.env) and it defined? — Kostas Minaidis, Mar 20 '23 at 22:55
I can run it locally after I add .env file with the config values — user989988, Mar 20 '23 at 23:03
Have you configured the environmental variables in the Azure platform? — Kostas Minaidis, Mar 20 '23 at 23:15
Maybe this can help? https://stackoverflow.com/a/67052708/4861760 — Kostas Minaidis, Mar 20 '23 at 23:17

score -1 · Answer 1 · answered Mar 20 '23 at 23:24

The process object is available in a node.js environment. You cannot access it from the browser console. You can however log it in your code to check on the logs when the app is running within a node.js context.

It started running locally when you added the .env file because the node.js app loaded it during its bootstrap process and made the variables available. When running the built code on the Azure server, if you are not running it in a node.js context then you need to do the following.

You will need to have a source to fetch it from. During build time, you'll need to transform the values from the .env file into a something like a config.json or yaml file which is included in your deployment package. In your code, you read this file and merge the values into your configuration object. However, note that your config values will be exposed when reading from this file.

If you are running it in a node.js context on the Azure server, then you need to include the .env file. This will not expose your configuration values.

Another way is to provide the configuration values from the container that runs the application - lets say you have a web-application and your react app is running within its context, then you can hoist the configuration into the global window object and consume it. Lets say you load it into window.appname.config and read it from there.

Hope this helps.

I have added these values to the config settings of my static web app. But when I click the url deployed, I see it is unable to read the values. — user989988, Mar 21 '23 at 21:09
See if this helps. Not sure if you are using webpack. But worth taking a look: https://bobbyhadz.com/blog/react-referenceerror-process-not-defined#if-you-have-a-webpack-configuration — Phanisimha N R, Mar 21 '23 at 21:33

score -2 · Answer 2 · answered Mar 20 '23 at 22:57

import { Configuration } from "@azure/msal-browser";

// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
    auth: {
        clientId: `${process.env.REACT_APP_AAD_UI_APP_CLIENT_ID}`,
        authority: `https://login.microsoftonline.com/${process.env.REACT_APP_AAD_APP_TENANT_ID}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

// scopes
export const loginRequest = {
    scopes: [`api://${process.env.REACT_APP_AAD_API_APP_CLIENT_ID}/user_impersonation`]
  };

// endpoints 
export const config = {
    endpoint: `${process.env.REACT_APP_AAD_APP_SERVICE_BASE_URI}/api/v1/items`
};

**Comments have been [moved to chat](https://chat.stackoverflow.com/rooms/252736/discussion-on-answer-by-meghshyam-sonar-unable-to-read-config-values-from-static); please do not continue the discussion here.** Before posting a comment below this one, please review the [purposes of comments](/help/privileges/comment). Comments that do not request clarification or suggest improvements usually belong as an [answer](/help/how-to-answer), on [meta], or in [chat]. Comments continuing discussion may be removed. — Samuel Liew, Mar 24 '23 at 02:15

Unable to read config values from static web app

2 Answers2