fix: update environment variables for API base URL and authentication flag

Author: Harsh-Microsoft

src/ContentProcessorWeb/.env

@@ -1,4 +1,4 @@
-REACT_APP_API_BASE_URL=https://ca-cps-d4ecoervb6ab-api.salmonbay-e4fea35b.eastus2.azurecontainerapps.io/
+REACT_APP_API_BASE_URL = APP_API_BASE_URL
 
 REACT_APP_WEB_CLIENT_ID = APP_WEB_CLIENT_ID
 REACT_APP_WEB_AUTHORITY = APP_WEB_AUTHORITY 
@@ -12,4 +12,4 @@ REACT_APP_WEB_SCOPE = APP_WEB_SCOPE
 REACT_APP_API_SCOPE = APP_API_SCOPE
 REACT_APP_CONSOLE_LOG_ENABLED = APP_CONSOLE_LOG_ENABLED
 
-REACT_APP_AUTH_ENABLED=false
+REACT_APP_AUTH_ENABLED = APP_AUTH_ENABLED

src/ContentProcessorWeb/src/Components/Header/Header.tsx

@@ -57,6 +57,8 @@ const HeaderPage: React.FC<HeaderPageProps> = ({ toggleTheme, isDarkMode }) => {
   const { shortcutLabel } = useHeaderHooks({ toggleTheme, isDarkMode });
   const { user, logout, getToken } = useAuth();
 
+  const authEnabled = process.env.REACT_APP_AUTH_ENABLED?.toLowerCase() !== 'false'; // Defaults to true if not set
+
   const { openSwaggerUI } = useSwaggerPreview();
   const store = useSelector((state: RootState) => ({
     swaggerJSON: state.leftPanel.swaggerJSON,
@@ -126,24 +128,26 @@ const HeaderPage: React.FC<HeaderPageProps> = ({ toggleTheme, isDarkMode }) => {
       </div>
 
       {/* Tools Section */}
-      <div className="headerTools">
-        <Menu hasIcons positioning={{ autoSize: true }}>
-          <MenuTrigger disableButtonEnhancement>
-            <Avatar
-              color="colorful"
-              name={user?.name}
-              aria-label="App"
-              className="clickable-avatar"
-            />
-          </MenuTrigger>
-          <MenuPopover style={{ minWidth: "192px" }}>
-            <MenuList>
-              <MenuDivider />
-              <MenuItem icon={<ArrowExit />} onClick={logout}>Logout</MenuItem>
-            </MenuList>
-          </MenuPopover>
-        </Menu>
-      </div>
+      { authEnabled && 
+        <div className="headerTools">
+          <Menu hasIcons positioning={{ autoSize: true }}>
+            <MenuTrigger disableButtonEnhancement>
+              <Avatar
+                color="colorful"
+                name={user?.name}
+                aria-label="App"
+                className="clickable-avatar"
+              />
+            </MenuTrigger>
+            <MenuPopover style={{ minWidth: "192px" }}>
+              <MenuList>
+                <MenuDivider />
+                <MenuItem icon={<ArrowExit />} onClick={logout}>Logout</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        </div>
+      }
     </Header>
   );
 };

src/ContentProcessorWeb/src/msal-auth/AuthWrapper.tsx

@@ -10,7 +10,7 @@ import useAuth from './useAuth';
 const AuthWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
 
   const { isAuthenticated, login, inProgress,token } = useAuth();
-  const authEnabled = process.env.REACT_APP_AUTH_ENABLED !== 'false'; // Defaults to true if not set
+  const authEnabled = process.env.REACT_APP_AUTH_ENABLED?.toLowerCase() !== 'false'; // Defaults to true if not set
 
   useEffect(() => {
     if (authEnabled && !isAuthenticated && inProgress === InteractionStatus.None) {