Move from hard-coded strings to react supported environment variables.

4-Deployment/2-deploy-static/App/.env

@@ -0,0 +1,4 @@
+REACT_APP_AAD_APP_CLIENT_ID=
+REACT_APP_AAD_APP_TENANT_ID=
+REACT_APP_AAD_APP_REDIRECT_URI=  
+REACT_APP_AAD_APP_FUNCTION_SCOPE_URI=

4-Deployment/2-deploy-static/App/src/authConfig.js

@@ -12,10 +12,10 @@ import { LogLevel } from "@azure/msal-browser";
  */
 export const msalConfig = {
     auth: {
-        clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply.
-        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", // Defaults to "https://login.microsoftonline.com/common"
-        redirectUri: "/", // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
-        postLogoutRedirectUri: "/", // Indicates the page to navigate after logout.
+        clientId:  `${process.env["REACT_APP_AAD_APP_CLIENT_ID"]}`, // This is the ONLY mandatory field that you need to supply.
+        authority: `https://login.microsoftonline.com/${process.env["REACT_APP_AAD_APP_TENANT_ID"]}`, // Defaults to "https://login.microsoftonline.com/common"
+        redirectUri: `${process.env["REACT_APP_AAD_APP_REDIRECT_URI"]}`, // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
+        postLogoutRedirectUri: `${process.env["REACT_APP_AAD_APP_REDIRECT_URI"]}`, // Indicates the page to navigate after logout.
         navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
     },
     cache: {
@@ -68,6 +68,6 @@ export const protectedResources = {
     },
     functionApi: {
         endpoint: "/api/hello",
-        scopes: ["Enter_the_Web_Api_Scope_Here"], // e.g. api://xxxxxx/access_as_user
+        scopes: [`${process.env["REACT_APP_AAD_APP_FUNCTION_SCOPE_URI"]}/access_as_user`], // e.g. api://xxxxxx/access_as_user
     }
 }

4-Deployment/2-deploy-static/README.md

@@ -93,10 +93,10 @@ Open the project in your IDE (like Visual Studio or Visual Studio Code) to confi
 
 > In the steps below, "ClientID" is the same as "Application ID" or "AppId".
 
-1. Open the `App/src/authConfig.js` file.
-1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of `msal-react-spa` app copied from the Azure portal.
-1. Find the key `Enter_the_Tenant_Info_Here` and replace the existing value with your Azure AD tenant ID.
-1. Find the key `Enter_the_Web_Api_Scope_Here` and replace the existing value with APP ID URI that you've registered earlier, e.g. `api://****-****-********-********/access_as_user`
+1. Open the `App/src/.env` file.
+1. Find the `REACT_APP_AAD_APP_CLIENT_ID` environment variable and add the application ID (clientId) of `msal-react-spa` app copied from the Azure portal.
+1. Find the `REACT_APP_AAD_APP_TENANT_ID` environment variable and add your Azure AD tenant ID.
+1. Find the `REACT_APP_AAD_APP_REDIRECT_URI` environment variable and add the APP ID URI that you've registered earlier, e.g. `api://****-****-********-********/`
 
 ## Deployment