WPADM

app/components/responsive-iframe.tsx

@@ -42,7 +42,7 @@ export function ResponsiveIframe({
   style,
 }: ResponsiveIframeProps) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const { data: session } = useSession();
+  const { data: session, status: sessionStatus } = useSession();
   const [isRefreshing, setIsRefreshing] = useState(false);
   const [iframeSrc, setIframeSrc] = useState<string>('');
   const [hasTriedRefresh, setHasTriedRefresh] = useState(false);
@@ -50,10 +50,32 @@ export function ResponsiveIframe({
   // Detect service name from URL for postMessage auth
   const serviceName = detectServiceFromUrl(src);
 
+  // Debug logging on mount and state changes
+  useEffect(() => {
+    console.log('[ResponsiveIframe] State:', {
+      src: src || '(empty)',
+      iframeSrc: iframeSrc || '(empty)',
+      sessionStatus,
+      hasSession: !!session,
+      hasAccessToken: !!session?.accessToken,
+      hasRefreshToken: !!session?.refreshToken,
+      hasTriedRefresh,
+      isRefreshing,
+      serviceName: serviceName || '(unknown)',
+    });
+  }, [src, iframeSrc, session, sessionStatus, hasTriedRefresh, isRefreshing, serviceName]);
+
   // Refresh NextAuth session before loading iframe
   useEffect(() => {
+    console.log('[ResponsiveIframe] Effect triggered:', {
+      src: src || '(empty)',
+      sessionStatus,
+      hasTriedRefresh,
+    });
+
     // If no src, nothing to do
     if (!src) {
+      console.warn('[ResponsiveIframe] No src provided, cannot load iframe');
       return;
     }
 
@@ -62,19 +84,27 @@ export function ResponsiveIframe({
     const logoutCookie = document.cookie.split(';').some(c => c.trim().startsWith('logout_in_progress=true'));
     
     if (justLoggedOut || logoutCookie) {
-      console.warn('Logout in progress, redirecting to sign-in instead of refreshing session');
+      console.warn('[ResponsiveIframe] Logout in progress, redirecting to sign-in');
       window.location.href = '/signin';
       return;
     }
 
+    // If session is loading, wait
+    if (sessionStatus === 'loading') {
+      console.log('[ResponsiveIframe] Session still loading, waiting...');
+      return;
+    }
+
     // If no session yet, wait for it (don't set src yet)
     if (!session) {
+      console.log('[ResponsiveIframe] No session yet, waiting...');
       return;
     }
 
     // If already tried refresh for this src, just set it
     if (hasTriedRefresh) {
       if (!iframeSrc) {
+        console.log('[ResponsiveIframe] Already tried refresh, setting src directly:', src);
         setIframeSrc(src);
       }
       return;
@@ -82,12 +112,17 @@ export function ResponsiveIframe({
 
     // Ensure session has required tokens before proceeding
     if (!session.accessToken || !session.refreshToken) {
-      console.warn('Session missing required tokens, redirecting to sign-in');
+      console.warn('[ResponsiveIframe] Session missing tokens:', {
+        hasAccessToken: !!session.accessToken,
+        hasRefreshToken: !!session.refreshToken,
+      });
+      console.warn('[ResponsiveIframe] Redirecting to sign-in');
       window.location.href = '/signin';
       return;
     }
 
     const refreshSession = async () => {
+      console.log('[ResponsiveIframe] Starting session refresh...');
       setIsRefreshing(true);
       setHasTriedRefresh(true);
       
@@ -98,45 +133,53 @@ export function ResponsiveIframe({
         // Double-check logout flag before making the request
         const stillLoggedOut = sessionStorage.getItem('just_logged_out') === 'true';
         if (stillLoggedOut) {
-          console.warn('Logout detected during refresh, aborting');
+          console.warn('[ResponsiveIframe] Logout detected during refresh, aborting');
           window.location.href = '/signin';
           return;
         }
         
         // Call our API to refresh the Keycloak session
-        // This ensures tokens are fresh and may help refresh Keycloak session cookies
+        console.log('[ResponsiveIframe] Calling refresh-keycloak-session API...');
         const response = await fetch('/api/auth/refresh-keycloak-session', {
           method: 'GET',
-          credentials: 'include', // Include cookies
+          credentials: 'include',
+        });
+        
+        console.log('[ResponsiveIframe] Refresh API response:', {
+          ok: response.ok,
+          status: response.status,
         });
         
         if (response.ok) {
-          console.log('Session refreshed before loading iframe');
+          console.log('[ResponsiveIframe] Session refreshed, setting iframe src:', src);
           setIframeSrc(src);
         } else {
           const errorData = await response.json().catch(() => ({}));
+          console.warn('[ResponsiveIframe] Refresh failed:', errorData);
           
           // If session was invalidated, redirect to sign-in
           if (response.status === 401 && errorData.error === 'SessionInvalidated') {
-            console.warn('Keycloak session invalidated, redirecting to sign-in');
+            console.warn('[ResponsiveIframe] Session invalidated, redirecting to sign-in');
             window.location.href = '/signin';
             return;
           }
           
-          console.warn('Failed to refresh session, loading iframe anyway (may require login)');
+          console.warn('[ResponsiveIframe] Loading iframe anyway (may require login)');
           setIframeSrc(src);
         }
       } catch (error) {
-        console.error('Error refreshing session:', error);
+        console.error('[ResponsiveIframe] Error during refresh:', error);
         // On error, still try to load iframe with original URL
+        console.log('[ResponsiveIframe] Setting src despite error:', src);
         setIframeSrc(src);
       } finally {
         setIsRefreshing(false);
+        console.log('[ResponsiveIframe] Refresh complete, isRefreshing:', false);
       }
     };
 
     refreshSession();
-  }, [session, src, hasTriedRefresh, iframeSrc]);
+  }, [session, sessionStatus, src, hasTriedRefresh, iframeSrc]);
 
   // Listen for messages from iframe applications (logout, auth requests)
   useEffect(() => {
@@ -291,21 +334,24 @@ export function ResponsiveIframe({
         </div>
       )}
       
-      <iframe
-        ref={iframeRef}
-        id="myFrame"
-        src={iframeSrc || ''}
-        className={`w-full border-none ${className}`}
-        style={{
-          display: iframeSrc ? 'block' : 'none',
-          width: '100%',
-          height: '100%',
-          ...style
-        }}
-        allow={allow}
-        allowFullScreen
-        onLoad={handleIframeLoad}
-      />
+      {/* Only render iframe when we have a src to avoid browser warning */}
+      {iframeSrc && (
+        <iframe
+          ref={iframeRef}
+          id="myFrame"
+          src={iframeSrc}
+          className={`w-full border-none ${className}`}
+          style={{
+            display: 'block',
+            width: '100%',
+            height: '100%',
+            ...style
+          }}
+          allow={allow}
+          allowFullScreen
+          onLoad={handleIframeLoad}
+        />
+      )}
       
       {/* Show placeholder while waiting for session */}
       {!iframeSrc && !isRefreshing && (