fix(ui): prevent duplicate nav sidebar when security iframe navigates away from auth pages

airflow-core/src/airflow/ui/src/pages/Security.tsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { Box } from "@chakra-ui/react";
+import { useRef } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 
 import { useAuthLinksServiceGetAuthMenus } from "openapi/queries";
@@ -38,14 +39,25 @@ export const Security = () => {
   const link = authLinks?.extra_menu_items.find((mi) => mi.text.toLowerCase().replace(" ", "-") === page);
 
   const navigate = useNavigate();
+  // Track when we are already redirecting so that setting iframe.src = "about:blank"
+  // (which fires another onLoad event) does not trigger a second navigate call.
+  const isRedirecting = useRef(false);
 
   const onLoad = () => {
+    if (isRedirecting.current) {
+      return;
+    }
+
     const iframe: HTMLIFrameElement | null = document.querySelector("#security-iframe");
 
     if (iframe?.contentWindow) {
       const base = new URL(document.baseURI).pathname.replace(/\/$/u, ""); // Remove trailing slash if exists
 
       if (!iframe.contentWindow.location.pathname.startsWith(`${base}/auth/`)) {
+        // Clear the iframe immediately so that the React app does not render its own
+        // navigation sidebar inside the iframe, which would produce a duplicate nav bar.
+        isRedirecting.current = true;
+        iframe.src = "about:blank";
         void navigate("/");
       }
     }