Question 73030 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Unable to read config values from static web app – Reactjs

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

enter image description here

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:

enter image description here

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?

Tags:

2

Answers


  1. 0 
    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`
};
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search