fix(frontend): refresh auth on stale tabs

Author: malinskibeniamin

frontend/src/config.ts

@@ -44,6 +44,7 @@ import { api, useApiStore } from './state/backend-api';
 import { useUIStateStore } from './state/ui-state';
 import { AppFeatures, getBasePath } from './utils/env';
 import { getEmbeddedAvailableRoutes } from './utils/route-utils';
+import { getRegisteredTokenRefreshInterceptor } from './utils/token-refresh-interceptor';
 
 declare const __webpack_public_path__: string;
 
@@ -206,19 +207,27 @@ const setConfig = ({
 }: SetConfigArguments) => {
   const assetsUrl =
     urlOverride?.assets === 'WEBPACK' ? String(__webpack_public_path__).removeSuffix('/') : urlOverride?.assets;
+  const configuredFetch = fetch ?? window.fetch.bind(window);
+  const tokenRefreshInterceptor = getRegisteredTokenRefreshInterceptor();
 
   // instantiate the client once, if we need to add more clients you can add them in here, ideally only one transport is necessary
   const dataplaneTransport = createConnectTransport({
     baseUrl: getGrpcBasePath(urlOverride?.grpc),
-    interceptors: [addBearerTokenInterceptor, checkExpiredLicenseInterceptor],
+    fetch: configuredFetch,
+    interceptors: [
+      addBearerTokenInterceptor,
+      ...(tokenRefreshInterceptor ? [tokenRefreshInterceptor] : []),
+      checkExpiredLicenseInterceptor,
+    ],
     jsonOptions: {
       registry: protobufRegistry,
     },
   });
 
   const controlplaneTransport = createConnectTransport({
     baseUrl: config.controlplaneUrl,
-    interceptors: [addBearerTokenInterceptor],
+    fetch: configuredFetch,
+    interceptors: [addBearerTokenInterceptor, ...(tokenRefreshInterceptor ? [tokenRefreshInterceptor] : [])],
     jsonOptions: {
       registry: protobufRegistry,
     },
@@ -250,7 +259,7 @@ const setConfig = ({
     restBasePath: getRestBasePath(urlOverride?.rest),
     grpcBasePath: getGrpcBasePath(urlOverride?.grpc),
     controlplaneUrl: config.controlplaneUrl,
-    fetch: fetch ?? window.fetch.bind(window),
+    fetch: configuredFetch,
     assetsPath: assetsUrl ?? getBasePath(),
     authenticationClient: authenticationGrpcClient,
     licenseClient: licenseGrpcClient,
@@ -352,7 +361,7 @@ setTimeout(() => {
         updateSidebarItems();
       }
     });
-  } catch (error) {
+  } catch (_error) {
     // Ignore errors in test environments where stores might not be properly initialized
     // This setTimeout runs globally when config.ts is imported
   }

frontend/src/embedded-app.test.tsx

@@ -0,0 +1,94 @@
+import { render } from '@testing-library/react';
+import type { ReactNode } from 'react';
+
+const { mockCreateConnectTransport, mockCreateRouter, mockFetch, mockSetup } = vi.hoisted(() => ({
+  mockCreateConnectTransport: vi.fn((options) => options),
+  mockCreateRouter: vi.fn(() => ({
+    invalidate: vi.fn().mockResolvedValue(undefined),
+  })),
+  mockFetch: vi.fn(),
+  mockSetup: vi.fn(),
+}));
+
+vi.mock('@connectrpc/connect-query', () => ({
+  TransportProvider: ({ children }: { children?: ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('@connectrpc/connect-web', () => ({
+  createConnectTransport: mockCreateConnectTransport,
+}));
+
+vi.mock('@redpanda-data/ui', () => ({
+  ChakraProvider: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  redpandaTheme: {},
+  redpandaToastOptions: {},
+}));
+
+vi.mock('@tanstack/react-query', async () => {
+  const actual = await vi.importActual('@tanstack/react-query');
+  return {
+    ...actual,
+    QueryClientProvider: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  };
+});
+
+vi.mock('@tanstack/react-router', () => ({
+  createRouter: mockCreateRouter,
+  RouterProvider: () => <div data-testid="router-provider" />,
+}));
+
+vi.mock('custom-feature-flag-provider', () => ({
+  CustomFeatureFlagProvider: ({ children }: { children?: ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('protobuf-registry', () => ({
+  protobufRegistry: {},
+}));
+
+vi.mock('./components/misc/not-found-page', () => ({
+  NotFoundPage: () => <div>Not Found</div>,
+}));
+
+vi.mock('./config', () => ({
+  addBearerTokenInterceptor: vi.fn((next) => next),
+  checkExpiredLicenseInterceptor: vi.fn((next) => next),
+  getGrpcBasePath: vi.fn(() => 'http://localhost:9090'),
+  setup: mockSetup,
+}));
+
+vi.mock('./routeTree.gen', () => ({
+  routeTree: {},
+}));
+
+vi.mock('./state/app-global', () => ({
+  appGlobal: {
+    historyLocation: vi.fn(() => ({ pathname: '/topics' })),
+    historyPush: vi.fn(),
+  },
+}));
+
+vi.mock('./state/backend-api', () => ({
+  api: {
+    refreshUserData: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+
+import EmbeddedApp from './embedded-app';
+
+describe('EmbeddedApp', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('uses the host-provided fetch for the root dataplane transport', () => {
+    render(<EmbeddedApp fetch={mockFetch} isConsoleReadyToMount={true} />);
+
+    expect(mockSetup).toHaveBeenCalled();
+    expect(mockCreateConnectTransport).toHaveBeenCalledWith(
+      expect.objectContaining({
+        baseUrl: 'http://localhost:9090',
+        fetch: mockFetch,
+      })
+    );
+  });
+});

frontend/src/embedded-app.tsx

@@ -52,6 +52,12 @@ import {
 } from './config';
 import { routeTree } from './routeTree.gen';
 import { appGlobal } from './state/app-global';
+import { api } from './state/backend-api';
+import {
+  getRegisteredTokenRefreshInterceptor,
+  TokenRefreshInterceptorProvider,
+} from './utils/token-refresh-interceptor';
+import { useEmbeddedAuthPrewarm } from './utils/use-embedded-auth-prewarm';
 
 // Regex for normalizing paths by removing trailing slashes
 const TRAILING_SLASH_REGEX = /\/+$/;
@@ -86,6 +92,10 @@ export interface EmbeddedProps extends SetConfigArguments {
 }
 
 function EmbeddedApp({ basePath = '', ...p }: EmbeddedProps) {
+  const tokenRefreshInterceptor = getRegisteredTokenRefreshInterceptor();
+  const defaultFetch = useMemo(() => window.fetch.bind(window), []);
+  const configuredFetch = p.fetch ?? defaultFetch;
+
   useEffect(() => {
     const shellNavigationHandler = (event: Event) => {
       const pathname = (event as CustomEvent<string>).detail;
@@ -115,12 +125,17 @@ function EmbeddedApp({ basePath = '', ...p }: EmbeddedProps) {
     () =>
       createConnectTransport({
         baseUrl: getGrpcBasePath(p.urlOverride?.grpc),
-        interceptors: [addBearerTokenInterceptor, checkExpiredLicenseInterceptor],
+        fetch: configuredFetch,
+        interceptors: [
+          addBearerTokenInterceptor,
+          ...(tokenRefreshInterceptor ? [tokenRefreshInterceptor] : []),
+          checkExpiredLicenseInterceptor,
+        ],
         jsonOptions: {
           registry: protobufRegistry,
         },
       }),
-    [p.urlOverride?.grpc]
+    [configuredFetch, p.urlOverride?.grpc, tokenRefreshInterceptor]
   );
 
   // Create router with dynamic basePath
@@ -139,20 +154,33 @@ function EmbeddedApp({ basePath = '', ...p }: EmbeddedProps) {
     [basePath, dataplaneTransport]
   );
 
+  useEmbeddedAuthPrewarm({
+    enabled: Boolean(p.isConsoleReadyToMount),
+    prewarm: async () => {
+      await api.refreshUserData().catch(() => {
+        // Best-effort prewarm only; embedded hosts handle any hard auth failures.
+      });
+
+      await Promise.allSettled([queryClient.invalidateQueries(), router.invalidate()]);
+    },
+  });
+
   if (!p.isConsoleReadyToMount) {
     return null;
   }
 
   return (
-    <CustomFeatureFlagProvider initialFlags={p.featureFlags}>
-      <ChakraProvider resetCSS={false} theme={redpandaTheme} toastOptions={redpandaToastOptions}>
-        <TransportProvider transport={dataplaneTransport}>
-          <QueryClientProvider client={queryClient}>
-            <RouterProvider router={router} />
-          </QueryClientProvider>
-        </TransportProvider>
-      </ChakraProvider>
-    </CustomFeatureFlagProvider>
+    <TokenRefreshInterceptorProvider value={tokenRefreshInterceptor}>
+      <CustomFeatureFlagProvider initialFlags={p.featureFlags}>
+        <ChakraProvider resetCSS={false} theme={redpandaTheme} toastOptions={redpandaToastOptions}>
+          <TransportProvider transport={dataplaneTransport}>
+            <QueryClientProvider client={queryClient}>
+              <RouterProvider router={router} />
+            </QueryClientProvider>
+          </TransportProvider>
+        </ChakraProvider>
+      </CustomFeatureFlagProvider>
+    </TokenRefreshInterceptorProvider>
   );
 }
 

frontend/src/federation/console-app.test.tsx

@@ -9,7 +9,10 @@
  * by the Apache License, Version 2.0
  */
 
-import { render, waitFor } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+
+const tokenManagerInstances: Array<{ refresh: ReturnType<typeof vi.fn> }> = [];
 
 // Mock TanStack Router before any imports
 vi.mock('@tanstack/react-router', async () => {
@@ -19,6 +22,7 @@ vi.mock('@tanstack/react-router', async () => {
     createRouter: vi.fn(() => ({
       subscribe: vi.fn(() => vi.fn()), // Returns unsubscribe function
       load: vi.fn().mockResolvedValue(undefined),
+      invalidate: vi.fn().mockResolvedValue(undefined),
       state: { location: { pathname: '/topics' } },
       navigate: vi.fn(),
     })),
@@ -28,12 +32,22 @@ vi.mock('@tanstack/react-router', async () => {
       push: vi.fn(),
       replace: vi.fn(),
     })),
-    RouterProvider: ({ children }: { children?: React.ReactNode }) => (
-      <div data-testid="router-provider">{children}</div>
-    ),
+    RouterProvider: ({ children }: { children?: ReactNode }) => <div data-testid="router-provider">{children}</div>,
   };
 });
 
+vi.mock('@redpanda-data/ui', () => ({
+  ChakraProvider: ({ children }: { children?: ReactNode }) => <>{children}</>,
+  createStandaloneToast: vi.fn(() => ({
+    ToastContainer: () => null,
+    toast: {
+      closeAll: vi.fn(),
+    },
+  })),
+  redpandaTheme: {},
+  redpandaToastOptions: {},
+}));
+
 vi.mock('config', () => ({
   config: {
     jwt: undefined as string | undefined,
@@ -56,6 +70,16 @@ vi.mock('../components/misc/not-found-page', () => ({
   NotFoundPage: () => <div>Not Found</div>,
 }));
 
+vi.mock('../state/backend-api', () => ({
+  api: {
+    refreshUserData: vi.fn().mockResolvedValue(undefined),
+  },
+}));
+
+vi.mock('./federated-providers', () => ({
+  FederatedProviders: ({ children }: { children?: ReactNode }) => <>{children}</>,
+}));
+
 vi.mock('./token-manager', () => ({
   TokenManager: class MockTokenManager {
     private getToken: () => Promise<string>;
@@ -70,6 +94,7 @@ vi.mock('./token-manager', () => ({
       this.setGetAccessToken.mockImplementation((fn: () => Promise<string>) => {
         this.getToken = fn;
       });
+      tokenManagerInstances.push(this);
     }
   },
 }));
@@ -99,16 +124,27 @@ describe('ConsoleApp', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
+    tokenManagerInstances.length = 0;
     mockGetAccessToken.mockResolvedValue('test-token-123');
     // Reset config.jwt
     config.jwt = undefined;
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   test('shows nothing while loading', () => {
-    const { container } = render(<ConsoleApp {...defaultProps} />);
+    const tokenPromise = new Promise<string>(() => {
+      // Intentionally unresolved to keep the component in its loading state.
+    });
+    mockGetAccessToken.mockReturnValueOnce(tokenPromise);
+
+    const { container, unmount } = render(<ConsoleApp {...defaultProps} />);
 
     // Component returns null while initializing
     expect(container.firstChild).toBeNull();
+    unmount();
   });
 
   test('calls getAccessToken on mount', async () => {
@@ -154,7 +190,9 @@ describe('ConsoleApp', () => {
 
   test('stays in loading state while token refresh is pending', async () => {
     // Create a deferred promise that never resolves during this test
-    const tokenPromise = new Promise<string>(() => {});
+    const tokenPromise = new Promise<string>(() => {
+      // Intentionally unresolved to keep the component in its loading state.
+    });
     mockGetAccessToken.mockReturnValueOnce(tokenPromise);
 
     const { container } = render(<ConsoleApp {...defaultProps} />);
@@ -224,6 +262,25 @@ describe('ConsoleApp', () => {
     unmount();
   });
 
+  test('prewarms auth once when focus and visibility events arrive in a burst', async () => {
+    render(<ConsoleApp {...defaultProps} />);
+
+    await waitFor(() => {
+      expect(mockGetAccessToken).toHaveBeenCalledTimes(1);
+    });
+
+    expect(tokenManagerInstances).toHaveLength(1);
+    vi.useFakeTimers();
+
+    await act(async () => {
+      document.dispatchEvent(new Event('visibilitychange'));
+      window.dispatchEvent(new Event('focus'));
+      await vi.advanceTimersByTimeAsync(200);
+    });
+
+    expect(tokenManagerInstances[0]?.refresh).toHaveBeenCalledTimes(2);
+  });
+
   describe('Feature Flags', () => {
     test('passes feature flags to setup()', async () => {
       const flags = { schemaRegistry: true, enableKnowledgeBaseInConsoleUi: false };