@axa-fr/react-oidc 7.27.12 → 7.27.14

package/src/OidcProvider.spec.tsx

@@ -0,0 +1,279 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+let mockEventSubscribers: Array<{ id: string; func: (name: string, data: any) => void }> = [];
+const mockPublishEvent = vi.fn((eventName, data) => {
+  mockEventSubscribers.forEach(sub => sub.func(eventName, data));
+});
+const mockSubscribeEvents = vi.fn(func => {
+  const id = Math.random().toString();
+  mockEventSubscribers.push({ id, func });
+  return id;
+});
+const mockRemoveEventSubscription = vi.fn(id => {
+  mockEventSubscribers = mockEventSubscribers.filter(e => e.id !== id);
+});
+
+vi.mock('@axa-fr/oidc-client', () => ({
+  OidcClient: {
+    getOrCreate: vi.fn(() => () => ({
+      subscribeEvents: mockSubscribeEvents,
+      removeEventSubscription: mockRemoveEventSubscription,
+      publishEvent: mockPublishEvent,
+      configuration: {
+        redirect_uri: 'http://localhost/callback',
+        silent_redirect_uri: 'http://localhost/silent-callback',
+        silent_login_uri: 'http://localhost/silent-login',
+      },
+      tryKeepExistingSessionAsync: vi.fn().mockResolvedValue(true),
+    })),
+    get: vi.fn(() => ({
+      subscribeEvents: mockSubscribeEvents,
+      removeEventSubscription: mockRemoveEventSubscription,
+      publishEvent: mockPublishEvent,
+      configuration: {
+        redirect_uri: 'http://localhost/callback',
+        silent_redirect_uri: 'http://localhost/silent-callback',
+        silent_login_uri: 'http://localhost/silent-login',
+      },
+      tryKeepExistingSessionAsync: vi.fn().mockResolvedValue(true),
+    })),
+    eventNames: {
+      service_worker_not_supported_by_browser: 'service_worker_not_supported_by_browser',
+      token_acquired: 'token_acquired',
+      logout_from_another_tab: 'logout_from_another_tab',
+      logout_from_same_tab: 'logout_from_same_tab',
+      token_renewed: 'token_renewed',
+      token_timer: 'token_timer',
+      loginAsync_begin: 'loginAsync_begin',
+      loginAsync_error: 'loginAsync_error',
+      loginCallbackAsync_begin: 'loginCallbackAsync_begin',
+      loginCallbackAsync_end: 'loginCallbackAsync_end',
+      loginCallbackAsync_error: 'loginCallbackAsync_error',
+      refreshTokensAsync_begin: 'refreshTokensAsync_begin',
+      refreshTokensAsync: 'refreshTokensAsync',
+      refreshTokensAsync_end: 'refreshTokensAsync_end',
+      refreshTokensAsync_error: 'refreshTokensAsync_error',
+      refreshTokensAsync_silent_error: 'refreshTokensAsync_silent_error',
+      tryKeepExistingSessionAsync_begin: 'tryKeepExistingSessionAsync_begin',
+      tryKeepExistingSessionAsync_end: 'tryKeepExistingSessionAsync_end',
+      tryKeepExistingSessionAsync_error: 'tryKeepExistingSessionAsync_error',
+      silentLoginAsync_begin: 'silentLoginAsync_begin',
+      silentLoginAsync: 'silentLoginAsync',
+      silentLoginAsync_end: 'silentLoginAsync_end',
+      silentLoginAsync_error: 'silentLoginAsync_error',
+      syncTokensAsync_begin: 'syncTokensAsync_begin',
+      syncTokensAsync_lock_not_available: 'syncTokensAsync_lock_not_available',
+      syncTokensAsync_end: 'syncTokensAsync_end',
+      syncTokensAsync_error: 'syncTokensAsync_error',
+      tokensInvalidAndWaitingActionsToRefresh: 'tokensInvalidAndWaitingActionsToRefresh',
+      loadingTimeout_error: 'loadingTimeout_error',
+    },
+  },
+  OidcLocation: class {
+    getCurrentHref() {
+      return 'http://localhost/';
+    }
+    getPath() {
+      return '/';
+    }
+    open() {}
+    reload() {}
+    getOrigin() {
+      return 'http://localhost';
+    }
+  },
+  getFetchDefault: vi.fn(() => fetch),
+}));
+
+vi.mock('./core/routes/OidcRoutes.js', () => ({
+  default: ({ children }: any) => <div data-testid="oidc-routes">{children}</div>,
+}));
+
+import { OidcProvider } from './OidcProvider';
+
+describe('OidcProvider loading timeout', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.clearAllMocks();
+    mockEventSubscribers = [];
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  const baseConfiguration = {
+    client_id: 'test-client',
+    redirect_uri: 'http://localhost/callback',
+    silent_redirect_uri: 'http://localhost/silent-callback',
+    scope: 'openid',
+    authority: 'http://localhost/authority',
+  };
+
+  it('should fire loadingTimeout_error when stuck in initial loading state', async () => {
+    render(
+      <OidcProvider
+        configuration={{ ...baseConfiguration, loading_timeout_ms: 100 }}
+        configurationName="default"
+      >
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(mockPublishEvent).toHaveBeenCalledWith('loadingTimeout_error', { timeoutMs: 100 });
+  });
+
+  it('should fire loadingTimeout_error when stuck in loginAsync_begin state', async () => {
+    render(
+      <OidcProvider
+        configuration={{ ...baseConfiguration, loading_timeout_ms: 200 }}
+        configurationName="default"
+      >
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    // Simulate loginAsync_begin event
+    act(() => {
+      mockEventSubscribers.forEach(sub => sub.func('loginAsync_begin', {}));
+    });
+
+    // Reset to track timeout event specifically
+    mockPublishEvent.mockClear();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(mockPublishEvent).toHaveBeenCalledWith('loadingTimeout_error', { timeoutMs: 200 });
+  });
+
+  it('should render loadingTimeoutComponent when loadingTimeout_error is triggered', async () => {
+    const CustomTimeoutComponent = () => <div data-testid="custom-timeout">Timeout!</div>;
+
+    render(
+      <OidcProvider
+        configuration={{ ...baseConfiguration, loading_timeout_ms: 50 }}
+        configurationName="default"
+        loadingTimeoutComponent={CustomTimeoutComponent}
+      >
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    await act(async () => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(screen.getByTestId('custom-timeout')).toBeTruthy();
+  });
+
+  it('should NOT fire loadingTimeout_error when loading_timeout_ms is 0 (disabled)', async () => {
+    render(
+      <OidcProvider
+        configuration={{ ...baseConfiguration, loading_timeout_ms: 0 }}
+        configurationName="default"
+      >
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(60_000);
+    });
+
+    expect(mockPublishEvent).not.toHaveBeenCalledWith('loadingTimeout_error', expect.anything());
+  });
+
+  it('should NOT fire loadingTimeout_error when loading_timeout_ms is negative (disabled)', async () => {
+    render(
+      <OidcProvider
+        configuration={{ ...baseConfiguration, loading_timeout_ms: -1 }}
+        configurationName="default"
+      >
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(60_000);
+    });
+
+    expect(mockPublishEvent).not.toHaveBeenCalledWith('loadingTimeout_error', expect.anything());
+  });
+
+  it('should NOT fire loadingTimeout_error if provider leaves loading state before deadline', async () => {
+    render(
+      <OidcProvider
+        configuration={{ ...baseConfiguration, loading_timeout_ms: 500 }}
+        configurationName="default"
+      >
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    // Advance partway
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    // Simulate successful callback (leaving loading state)
+    act(() => {
+      mockEventSubscribers.forEach(sub => sub.func('loginCallbackAsync_end', {}));
+    });
+
+    mockPublishEvent.mockClear();
+
+    // Advance past original timeout
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(mockPublishEvent).not.toHaveBeenCalledWith('loadingTimeout_error', expect.anything());
+  });
+
+  it('should use default timeout of 30000ms when loading_timeout_ms is not configured', async () => {
+    render(
+      <OidcProvider configuration={baseConfiguration} configurationName="default">
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(29_999);
+    });
+
+    expect(mockPublishEvent).not.toHaveBeenCalledWith('loadingTimeout_error', expect.anything());
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+
+    expect(mockPublishEvent).toHaveBeenCalledWith('loadingTimeout_error', { timeoutMs: 30_000 });
+  });
+
+  it('should propagate loadingTimeout_error through onEvent callback', async () => {
+    const onEvent = vi.fn();
+
+    render(
+      <OidcProvider
+        configuration={{ ...baseConfiguration, loading_timeout_ms: 100 }}
+        configurationName="default"
+        onEvent={onEvent}
+      >
+        <div>App</div>
+      </OidcProvider>,
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(onEvent).toHaveBeenCalledWith('default', 'loadingTimeout_error', { timeoutMs: 100 });
+  });
+});

package/src/OidcProvider.tsx

@@ -13,6 +13,7 @@ import {
   Authenticating,
   CallBackSuccess,
   Loading,
+  LoadingTimeout,
   SessionLost,
 } from './core/default-component/index.js';
 import ServiceWorkerNotSupported from './core/default-component/ServiceWorkerNotSupported.component.js';
@@ -31,6 +32,7 @@ export type OidcProviderProps = {
   authenticatingComponent?: ComponentType<any>;
   authenticatingErrorComponent?: ComponentType<any>;
   loadingComponent?: ComponentType<any>;
+  loadingTimeoutComponent?: ComponentType<any>;
   serviceWorkerNotSupportedComponent?: ComponentType<any>;
   configurationName?: string;
   configuration?: OidcConfiguration;
@@ -39,6 +41,7 @@ export type OidcProviderProps = {
   onLogoutFromAnotherTab?: () => void;
   onLogoutFromSameTab?: () => void;
   withCustomHistory?: () => CustomHistory;
+  navigateAfterCallback?: (callbackPath: string) => Promise<void>;
   onEvent?: (configuration: string, name: string, data: any) => void;
   getFetch?: () => Fetch;
   location?: ILOidcLocation;
@@ -84,6 +87,8 @@ const Switch = ({ isLoading, loadingComponent, children, configurationName }) =>
   return <>{children}</>;
 };
 
+const DEFAULT_LOADING_TIMEOUT_MS = 30_000;
+
 export const OidcProvider: FC<PropsWithChildren<OidcProviderProps>> = ({
   children,
   configuration,
@@ -91,6 +96,7 @@ export const OidcProvider: FC<PropsWithChildren<OidcProviderProps>> = ({
   callbackSuccessComponent = CallBackSuccess,
   authenticatingComponent = Authenticating,
   loadingComponent = Loading,
+  loadingTimeoutComponent = LoadingTimeout,
   serviceWorkerNotSupportedComponent = ServiceWorkerNotSupported,
   authenticatingErrorComponent = AuthenticatingError,
   sessionLostComponent = SessionLost,
@@ -98,6 +104,7 @@ export const OidcProvider: FC<PropsWithChildren<OidcProviderProps>> = ({
   onLogoutFromAnotherTab = null,
   onLogoutFromSameTab = null,
   withCustomHistory = null,
+  navigateAfterCallback = null,
   onEvent = null,
   getFetch = null,
   location = null,
@@ -155,6 +162,8 @@ export const OidcProvider: FC<PropsWithChildren<OidcProviderProps>> = ({
           onLogoutFromSameTab();
         }
         // setEvent({name, data});
+      } else if (name === OidcClient.eventNames.loadingTimeout_error) {
+        setEvent({ name, data });
       } else if (
         name === OidcClient.eventNames.loginAsync_begin ||
         name === OidcClient.eventNames.loginCallbackAsync_end ||
@@ -181,9 +190,26 @@ export const OidcProvider: FC<PropsWithChildren<OidcProviderProps>> = ({
     };
   }, [configuration, configurationName]);
 
+  useEffect(() => {
+    const timeoutMs = configuration?.loading_timeout_ms ?? DEFAULT_LOADING_TIMEOUT_MS;
+    if (timeoutMs <= 0) {
+      return;
+    }
+    const isStuck = event.name === '' || event.name === OidcClient.eventNames.loginAsync_begin;
+    if (!isStuck) {
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      const oidcInstance = getOidc(configurationName);
+      oidcInstance.publishEvent(OidcClient.eventNames.loadingTimeout_error, { timeoutMs });
+    }, timeoutMs);
+    return () => clearTimeout(timeoutId);
+  }, [event.name, configurationName, configuration]);
+
   const SessionLostComponent = sessionLostComponent;
   const AuthenticatingComponent = authenticatingComponent;
   const LoadingComponent = loadingComponent;
+  const LoadingTimeoutComponent = loadingTimeoutComponent;
   const ServiceWorkerNotSupportedComponent = serviceWorkerNotSupportedComponent;
   const AuthenticatingErrorComponent = authenticatingErrorComponent;
 
@@ -211,6 +237,16 @@ export const OidcProvider: FC<PropsWithChildren<OidcProviderProps>> = ({
           <AuthenticatingComponent configurationName={configurationName} />
         </Switch>
       );
+    case OidcClient.eventNames.loadingTimeout_error:
+      return (
+        <Switch
+          loadingComponent={LoadingComponent}
+          isLoading={isLoading}
+          configurationName={configurationName}
+        >
+          <LoadingTimeoutComponent configurationName={configurationName} />
+        </Switch>
+      );
     case OidcClient.eventNames.loginAsync_error:
     case OidcClient.eventNames.loginCallbackAsync_error:
       return (
@@ -250,6 +286,7 @@ export const OidcProvider: FC<PropsWithChildren<OidcProviderProps>> = ({
             authenticatingComponent={authenticatingComponent}
             configurationName={configurationName}
             withCustomHistory={withCustomHistory}
+            navigateAfterCallback={navigateAfterCallback}
             location={location ?? new OidcLocation()}
           >
             <OidcSession loadingComponent={LoadingComponent} configurationName={configurationName}>

package/src/core/default-component/Callback.component.spec.tsx

@@ -0,0 +1,248 @@
+import { act, render, waitFor } from '@testing-library/react';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import CallbackManager, { CallBackSuccess, verifyNavigationCommitted } from './Callback.component';
+
+vi.mock('@axa-fr/oidc-client', () => ({
+  OidcClient: {
+    get: vi.fn(),
+    eventNames: {
+      loginCallbackAsync_navigated: 'loginCallbackAsync_navigated',
+      loginCallbackAsync_navigation_error: 'loginCallbackAsync_navigation_error',
+    },
+  },
+}));
+
+vi.mock('../routes/withRouter.js', () => ({
+  getCustomHistory: vi.fn(),
+}));
+
+import { OidcClient } from '@axa-fr/oidc-client';
+
+import { getCustomHistory } from '../routes/withRouter.js';
+
+describe('verifyNavigationCommitted', () => {
+  it('should return true when current path matches target path', () => {
+    const windowMock = { location: { pathname: '/dashboard' } } as Window;
+    expect(verifyNavigationCommitted('/dashboard', windowMock)).toBe(true);
+  });
+
+  it('should return false when current path does not match target path', () => {
+    const windowMock = { location: { pathname: '/callback' } } as Window;
+    expect(verifyNavigationCommitted('/dashboard', windowMock)).toBe(false);
+  });
+
+  it('should return true when target path is root', () => {
+    const windowMock = { location: { pathname: '/anything' } } as Window;
+    expect(verifyNavigationCommitted('/', windowMock)).toBe(true);
+  });
+});
+
+describe('CallBackSuccess', () => {
+  it('renders the success message', () => {
+    const { getByText } = render(<CallBackSuccess />);
+    expect(getByText('Authentication complete')).toBeTruthy();
+    expect(getByText('You will be redirected to your application.')).toBeTruthy();
+  });
+});
+
+describe('CallbackManager', () => {
+  let mockPublishEvent: ReturnType<typeof vi.fn>;
+  let mockLoginCallbackAsync: ReturnType<typeof vi.fn>;
+  let mockReplaceState: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockPublishEvent = vi.fn();
+    mockLoginCallbackAsync = vi.fn();
+    mockReplaceState = vi.fn();
+
+    (OidcClient.get as ReturnType<typeof vi.fn>).mockReturnValue({
+      loginCallbackAsync: mockLoginCallbackAsync,
+      publishEvent: mockPublishEvent,
+    });
+
+    (getCustomHistory as ReturnType<typeof vi.fn>).mockReturnValue({
+      replaceState: mockReplaceState,
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.clearAllMocks();
+  });
+
+  it('should use navigateAfterCallback when provided and emit navigated event on success', async () => {
+    mockLoginCallbackAsync.mockResolvedValue({ callbackPath: '/dashboard' });
+    const navigateAfterCallback = vi.fn().mockResolvedValue(undefined);
+
+    await act(async () => {
+      render(
+        <CallbackManager
+          configurationName="default"
+          navigateAfterCallback={navigateAfterCallback}
+        />,
+      );
+    });
+
+    expect(navigateAfterCallback).toHaveBeenCalledWith('/dashboard');
+    expect(mockPublishEvent).toHaveBeenCalledWith('loginCallbackAsync_navigated', {
+      configurationName: 'default',
+      callbackPath: '/dashboard',
+    });
+  });
+
+  it('should emit navigation_error event when navigateAfterCallback rejects', async () => {
+    mockLoginCallbackAsync.mockResolvedValue({ callbackPath: '/dashboard' });
+    const navError = new Error('Navigation failed');
+    const navigateAfterCallback = vi.fn().mockRejectedValue(navError);
+
+    await act(async () => {
+      render(
+        <CallbackManager
+          configurationName="default"
+          navigateAfterCallback={navigateAfterCallback}
+        />,
+      );
+    });
+
+    expect(mockPublishEvent).toHaveBeenCalledWith('loginCallbackAsync_navigation_error', {
+      configurationName: 'default',
+      callbackPath: '/dashboard',
+      error: navError,
+    });
+  });
+
+  it('should render error component when navigateAfterCallback fails', async () => {
+    mockLoginCallbackAsync.mockResolvedValue({ callbackPath: '/dashboard' });
+    const navigateAfterCallback = vi.fn().mockRejectedValue(new Error('fail'));
+
+    const ErrorComponent = () => <div>Error occurred</div>;
+
+    let container;
+    await act(async () => {
+      const result = render(
+        <CallbackManager
+          configurationName="default"
+          navigateAfterCallback={navigateAfterCallback}
+          callBackError={ErrorComponent}
+        />,
+      );
+      container = result.container;
+    });
+
+    expect(container.textContent).toContain('Error occurred');
+  });
+
+  it('should use default history navigation when navigateAfterCallback is not provided', async () => {
+    vi.useRealTimers();
+    mockLoginCallbackAsync.mockResolvedValue({ callbackPath: '/dashboard' });
+
+    // Mock window.location to simulate successful navigation
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/dashboard' },
+      writable: true,
+    });
+
+    await act(async () => {
+      render(<CallbackManager configurationName="default" />);
+      // Wait for the verification delay to pass
+      await new Promise(resolve => setTimeout(resolve, 300));
+    });
+
+    expect(mockReplaceState).toHaveBeenCalledWith('/dashboard');
+
+    await waitFor(() => {
+      expect(mockPublishEvent).toHaveBeenCalledWith('loginCallbackAsync_navigated', {
+        configurationName: 'default',
+        callbackPath: '/dashboard',
+      });
+    });
+  });
+
+  it('should emit navigation_error when default navigation does not commit', async () => {
+    vi.useRealTimers();
+    mockLoginCallbackAsync.mockResolvedValue({ callbackPath: '/dashboard' });
+
+    // Mock window.location to simulate failed navigation
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/callback' },
+      writable: true,
+    });
+
+    await act(async () => {
+      render(<CallbackManager configurationName="default" />);
+      // Wait for the verification delay to pass
+      await new Promise(resolve => setTimeout(resolve, 300));
+    });
+
+    await waitFor(() => {
+      expect(mockPublishEvent).toHaveBeenCalledWith(
+        'loginCallbackAsync_navigation_error',
+        expect.objectContaining({
+          configurationName: 'default',
+          callbackPath: '/dashboard',
+        }),
+      );
+    });
+  });
+
+  it('should use "/" as fallback when callbackPath is empty', async () => {
+    mockLoginCallbackAsync.mockResolvedValue({ callbackPath: '' });
+    const navigateAfterCallback = vi.fn().mockResolvedValue(undefined);
+
+    await act(async () => {
+      render(
+        <CallbackManager
+          configurationName="default"
+          navigateAfterCallback={navigateAfterCallback}
+        />,
+      );
+    });
+
+    expect(navigateAfterCallback).toHaveBeenCalledWith('/');
+  });
+
+  it('should use withCustomHistory when provided and no navigateAfterCallback', async () => {
+    mockLoginCallbackAsync.mockResolvedValue({ callbackPath: '/profile' });
+    const customReplaceState = vi.fn();
+    const withCustomHistory = vi.fn().mockReturnValue({ replaceState: customReplaceState });
+
+    Object.defineProperty(window, 'location', {
+      value: { pathname: '/' },
+      writable: true,
+    });
+
+    await act(async () => {
+      render(<CallbackManager configurationName="default" withCustomHistory={withCustomHistory} />);
+    });
+
+    expect(withCustomHistory).toHaveBeenCalled();
+    expect(customReplaceState).toHaveBeenCalledWith('/profile');
+  });
+
+  it('should set error state when loginCallbackAsync throws', async () => {
+    mockLoginCallbackAsync.mockRejectedValue(new Error('login error'));
+
+    const ErrorComponent = () => <div>Login Error</div>;
+
+    let container;
+    await act(async () => {
+      const result = render(
+        <CallbackManager configurationName="default" callBackError={ErrorComponent} />,
+      );
+      container = result.container;
+    });
+
+    expect(container.textContent).toContain('Login Error');
+  });
+
+  it('should render success component by default', () => {
+    mockLoginCallbackAsync.mockReturnValue(new Promise(() => {})); // never resolves
+
+    const { getByText } = render(<CallbackManager configurationName="default" />);
+
+    expect(getByText('Authentication complete')).toBeTruthy();
+  });
+});