Refresh credentials before each handshake so reconnects don't expire

Signed configs are short-lived (the terminal server rejects configs older
than a few minutes). A resume-on-return — or any auto-reconnect more than a
few minutes into a session — reused the original signed config and was
rejected with "Config expired", forcing a noisy retry.

Add an optional async refreshCredentials() prop that the component awaits in
the open handler, just before sending the auth payload, for both the primary
and secondary (split-screen) terminals. Embedders return a fresh signed
config; when absent or on error we fall back to the signedConfig/signature
props, so behaviour is unchanged for consumers that don't supply it.

DX-1379

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: matt423

packages/react-web-cli/src/AblyCliTerminal.inactivity.test.tsx

@@ -126,6 +126,17 @@ export interface AblyCliTerminalProperties {
    * dev) to exercise the pause/resume cycle without waiting.
    */
   inactivityTimeoutMs?: number;
+  /**
+   * Called right before each (re)connection handshake to obtain fresh auth.
+   * Short-lived signed configs expire (the terminal server rejects configs
+   * older than a few minutes), so a resume or reconnect after the tab has been
+   * idle would otherwise fail with "Config expired". Return fresh credentials to
+   * use for the handshake, or null/undefined to keep the current
+   * signedConfig/signature props. Errors are swallowed and fall back to props.
+   */
+  refreshCredentials?: () => Promise<
+    { signedConfig: string; signature: string } | null | undefined
+  >;
   /**
    * When true, enables split-screen mode with a second independent terminal.
    * A split icon will be displayed in the top-right corner when in single-pane mode.
@@ -184,6 +195,7 @@ const AblyCliTerminalInner = (
     resumeOnReload,
     maxReconnectAttempts,
     inactivityTimeoutMs,
+    refreshCredentials,
     enableSplitScreen = false,
     showSplitControl = true,
   }: AblyCliTerminalProperties,
@@ -560,6 +572,41 @@ const AblyCliTerminalInner = (
   // Set while an inactivity-resume attempt is in flight, so a failed resume can
   // fall back to a fresh session instead of dead-ending on the manual prompt.
   const resumeAttemptReference = useRef<boolean>(false);
+
+  // Effective auth used for handshakes. Starts from the props and is replaced by
+  // refreshCredentials() output (when provided) so resumes/reconnects after the
+  // tab has been idle use a fresh, non-expired signed config.
+  const refreshCredentialsReference = useRef(refreshCredentials);
+  const effectiveSignedConfigReference = useRef(signedConfig);
+  const effectiveSignatureReference = useRef(signature);
+  useEffect(() => {
+    refreshCredentialsReference.current = refreshCredentials;
+  }, [refreshCredentials]);
+  useEffect(() => {
+    effectiveSignedConfigReference.current = signedConfig;
+  }, [signedConfig]);
+  useEffect(() => {
+    effectiveSignatureReference.current = signature;
+  }, [signature]);
+
+  // Pull fresh credentials before a handshake; falls back to current props.
+  const refreshAuth = useCallback(async () => {
+    const fn = refreshCredentialsReference.current;
+    if (!fn) return;
+    try {
+      const fresh = await fn();
+      if (fresh?.signedConfig && fresh?.signature) {
+        effectiveSignedConfigReference.current = fresh.signedConfig;
+        effectiveSignatureReference.current = fresh.signature;
+      }
+    } catch (error) {
+      debugLog(
+        "[AblyCLITerminal] refreshCredentials failed; using existing auth",
+        error,
+      );
+    }
+  }, []);
+
   // Guard to ensure we do NOT double-count a failed attempt when both the
   // `error` and the subsequent `close` events fire for the *same* socket.
   const reconnectScheduledThisCycleReference = useRef<boolean>(false);
@@ -1435,7 +1482,7 @@ const AblyCliTerminalInner = (
 
   const socketReference = useRef<WebSocket | null>(null); // Ref to hold the current socket for cleanup
 
-  const handleWebSocketOpen = useCallback(() => {
+  const handleWebSocketOpen = useCallback(async () => {
     // console.log('[AblyCLITerminal] WebSocket opened');
     // Clear connection timeout since we successfully connected
     clearConnectionTimeout();
@@ -1473,8 +1520,16 @@ const AblyCliTerminalInner = (
       // Don't send the initial command yet - wait for prompt detection
     }
 
+    // Refresh credentials before authenticating so a resume/reconnect after the
+    // tab has been idle doesn't hand the server an expired signed config.
+    await refreshAuth();
+
     // Send auth payload with signed config
-    const payload = createAuthPayload(sessionId, signedConfig, signature);
+    const payload = createAuthPayload(
+      sessionId,
+      effectiveSignedConfigReference.current,
+      effectiveSignatureReference.current,
+    );
 
     debugLog(
       `⚠️ DIAGNOSTIC: Preparing to send auth payload with env vars: ${JSON.stringify(payload.environmentVariables)}`,
@@ -1513,8 +1568,7 @@ const AblyCliTerminalInner = (
     clearPtyBuffer,
     sessionId,
     clearConnectionTimeout,
-    signedConfig,
-    signature,
+    refreshAuth,
   ]);
 
   const handleWebSocketMessage = useCallback(
@@ -2520,7 +2574,10 @@ const AblyCliTerminalInner = (
       const messageListener = (event: MessageEvent) => {
         void handleWebSocketMessage(event);
       };
-      socket.addEventListener("open", handleWebSocketOpen);
+      const openListener = () => {
+        void handleWebSocketOpen();
+      };
+      socket.addEventListener("open", openListener);
       socket.addEventListener("message", messageListener);
       socket.addEventListener("close", handleWebSocketClose);
       socket.addEventListener("error", handleWebSocketError);
@@ -2530,7 +2587,7 @@ const AblyCliTerminalInner = (
         debugLog(
           "[AblyCLITerminal] Cleaning up WebSocket event listeners for old socket.",
         );
-        socket.removeEventListener("open", handleWebSocketOpen);
+        socket.removeEventListener("open", openListener);
         socket.removeEventListener("message", messageListener);
         socket.removeEventListener("close", handleWebSocketClose);
         socket.removeEventListener("error", handleWebSocketError);
@@ -3001,39 +3058,44 @@ const AblyCliTerminalInner = (
 
     // WebSocket open handler
     newSocket.addEventListener("open", () => {
-      debugLog("[AblyCLITerminal] Secondary WebSocket opened");
-
-      // Clear any reconnect prompt
-      setSecondaryShowManualReconnectPrompt(false);
-      secondaryShowManualReconnectPromptReference.current = false;
+      void (async () => {
+        debugLog("[AblyCLITerminal] Secondary WebSocket opened");
 
-      if (secondaryTerm.current) {
-        secondaryTerm.current.focus();
-      }
+        // Clear any reconnect prompt
+        setSecondaryShowManualReconnectPrompt(false);
+        secondaryShowManualReconnectPromptReference.current = false;
 
-      // Send auth payload with signed config
-      const payload = createAuthPayload(
-        secondarySessionId,
-        signedConfig,
-        signature,
-      );
+        if (secondaryTerm.current) {
+          secondaryTerm.current.focus();
+        }
 
-      if (newSocket.readyState === WebSocket.OPEN) {
-        newSocket.send(JSON.stringify(payload));
-      }
+        // Refresh credentials before authenticating (see primary handler).
+        await refreshAuth();
 
-      // Set up initial command to be sent when prompt is detected
-      // Skip initial command if we're resuming an existing session
-      if (initialCommand && !secondarySessionId) {
-        debugLog(
-          `[AblyCLITerminal] [Secondary] Initial command present: "${initialCommand}" - will be sent when prompt is detected`,
+        // Send auth payload with signed config
+        const payload = createAuthPayload(
+          secondarySessionId,
+          effectiveSignedConfigReference.current,
+          effectiveSignatureReference.current,
         );
-        pendingSecondaryInitialCommandReference.current = initialCommand;
-      } else if (initialCommand && secondarySessionId) {
-        debugLog(
-          `[AblyCLITerminal] [Secondary] Skipping initial command for resumed session ${secondarySessionId}`,
-        );
-      }
+
+        if (newSocket.readyState === WebSocket.OPEN) {
+          newSocket.send(JSON.stringify(payload));
+        }
+
+        // Set up initial command to be sent when prompt is detected
+        // Skip initial command if we're resuming an existing session
+        if (initialCommand && !secondarySessionId) {
+          debugLog(
+            `[AblyCLITerminal] [Secondary] Initial command present: "${initialCommand}" - will be sent when prompt is detected`,
+          );
+          pendingSecondaryInitialCommandReference.current = initialCommand;
+        } else if (initialCommand && secondarySessionId) {
+          debugLog(
+            `[AblyCLITerminal] [Secondary] Skipping initial command for resumed session ${secondarySessionId}`,
+          );
+        }
+      })();
     });
 
     // WebSocket message handler with binary framing support
@@ -3322,13 +3384,7 @@ const AblyCliTerminalInner = (
 
     return newSocket;
     // eslint-disable-next-line react-hooks/exhaustive-deps -- callback is accessed via connectSecondaryWebSocketReference ref; missing deps include hoisted callbacks and state that would cause cascading recreations
-  }, [
-    websocketUrl,
-    signedConfig,
-    signature,
-    resumeOnReload,
-    secondarySessionId,
-  ]);
+  }, [websocketUrl, refreshAuth, resumeOnReload, secondarySessionId]);
 
   // Keep the ref updated with the latest callback
   connectSecondaryWebSocketReference.current = connectSecondaryWebSocket;