Merge pull request #133 from microsoft/dev

fix: merging dev to main

Author: Avijit-Microsoft

src/ContentProcessorWeb/.env

@@ -1,4 +1,4 @@
-REACT_APP_API_BASE_URL=APP_API_BASE_URL
+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 
@@ -10,4 +10,6 @@ REACT_APP_POST_REDIRECT_URL = "/"
 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_CONSOLE_LOG_ENABLED = APP_CONSOLE_LOG_ENABLED
+
+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,12 +10,17 @@ 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?.toLowerCase() !== 'false'; // Defaults to true if not set
 
   useEffect(() => {
-    if (!isAuthenticated && inProgress === InteractionStatus.None) {
+    if (authEnabled && !isAuthenticated && inProgress === InteractionStatus.None) {
       login();
     }
-  }, [isAuthenticated, inProgress]);
+  }, [authEnabled, isAuthenticated, inProgress]);
+
+  if (!authEnabled) {
+    return <>{children}</>;
+  }
 
   return <>{(isAuthenticated && token) && children}</>
 };