@axa-fr/react-oidc 7.29.3 → 7.29.5

package/src/ReactOidc.tsx

@@ -9,15 +9,19 @@ type GetOidcFn = {
   (configurationName?: string): any;
 };
 
-const defaultIsAuthenticated = (getOidc: GetOidcFn, configurationName: string) => {
-  let isAuthenticated = false;
+const defaultIsAuthenticated = (getOidc: GetOidcFn, configurationName: string): boolean => {
   const oidc = getOidc(configurationName);
-  if (oidc) {
-    isAuthenticated = oidc.tokens != null;
-  }
-  return isAuthenticated;
+  return oidc ? oidc.tokens != null : false;
 };
 
+const isTokenStateEvent = (name: string): boolean =>
+  name === OidcClient.eventNames.token_renewed ||
+  name === OidcClient.eventNames.token_acquired ||
+  name === OidcClient.eventNames.logout_from_another_tab ||
+  name === OidcClient.eventNames.logout_from_same_tab ||
+  name === OidcClient.eventNames.refreshTokensAsync_error ||
+  name === OidcClient.eventNames.syncTokensAsync_error;
+
 export const useOidc = (configurationName = defaultConfigurationName) => {
   const getOidc = OidcClient.get;
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(() =>
@@ -149,14 +153,7 @@ export const useOidcAccessToken = (configurationName = defaultConfigurationName)
     }
 
     const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
-      if (
-        name === OidcClient.eventNames.token_renewed ||
-        name === OidcClient.eventNames.token_acquired ||
-        name === OidcClient.eventNames.logout_from_another_tab ||
-        name === OidcClient.eventNames.logout_from_same_tab ||
-        name === OidcClient.eventNames.refreshTokensAsync_error ||
-        name === OidcClient.eventNames.syncTokensAsync_error
-      ) {
+      if (isTokenStateEvent(name)) {
         if (isMounted) {
           const tokens = oidc.tokens;
           setAccessToken(
@@ -215,14 +212,7 @@ export const useOidcIdToken = (configurationName = defaultConfigurationName) =>
     }
 
     const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
-      if (
-        name === OidcClient.eventNames.token_renewed ||
-        name === OidcClient.eventNames.token_acquired ||
-        name === OidcClient.eventNames.logout_from_another_tab ||
-        name === OidcClient.eventNames.logout_from_same_tab ||
-        name === OidcClient.eventNames.refreshTokensAsync_error ||
-        name === OidcClient.eventNames.syncTokensAsync_error
-      ) {
+      if (isTokenStateEvent(name)) {
         if (isMounted) {
           const tokens = oidc.tokens;
           setIDToken(

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

@@ -0,0 +1,71 @@
+import { render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import SilentLogin from './SilentLogin.component';
+
+const { getOrThrow, getParseQueryStringFromLocation, loginAsync } = vi.hoisted(() => ({
+  getOrThrow: vi.fn(),
+  getParseQueryStringFromLocation: vi.fn(),
+  loginAsync: vi.fn(),
+}));
+
+vi.mock('@axa-fr/oidc-client', () => ({
+  OidcClient: { getOrThrow },
+  getParseQueryStringFromLocation,
+}));
+
+describe('silent login', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+    getOrThrow.mockReturnValue({ tokens: null, loginAsync });
+  });
+
+  it.each([{}, { state: 'state' }, { state: 'state', scope: 'openid' }])(
+    'passes null extras when the query contains only reserved parameters: %s',
+    query => {
+      getParseQueryStringFromLocation.mockReturnValue(query);
+
+      render(<SilentLogin configurationName="custom" />);
+
+      expect(getOrThrow).toHaveBeenCalledWith('custom');
+      expect(loginAsync).toHaveBeenCalledExactlyOnceWith(null, null, true, query.scope);
+    },
+  );
+
+  it('forwards non-reserved parameters without changing the query data', () => {
+    const query = Object.freeze({
+      state: 'state',
+      scope: 'openid profile',
+      prompt: 'none',
+      login_hint: 'example',
+    });
+    getParseQueryStringFromLocation.mockReturnValue(query);
+
+    render(<SilentLogin configurationName="custom" />);
+
+    expect(loginAsync).toHaveBeenCalledExactlyOnceWith(
+      null,
+      { prompt: 'none', login_hint: 'example' },
+      true,
+      'openid profile',
+    );
+  });
+
+  it('does not start login when already authenticated', () => {
+    getParseQueryStringFromLocation.mockReturnValue({});
+    getOrThrow.mockReturnValue({ tokens: {}, loginAsync });
+
+    render(<SilentLogin configurationName="custom" />);
+
+    expect(loginAsync).not.toHaveBeenCalled();
+  });
+
+  it('only starts silent login on the initial mount', () => {
+    getParseQueryStringFromLocation.mockReturnValue({ prompt: 'none' });
+    const { rerender } = render(<SilentLogin configurationName="custom" />);
+
+    rerender(<SilentLogin configurationName="custom" />);
+
+    expect(loginAsync).toHaveBeenCalledOnce();
+  });
+});

package/src/core/default-component/SilentLogin.component.tsx

@@ -13,9 +13,7 @@ const SilentLogin: ComponentType<any> = ({ configurationName }) => {
     if (key === 'state' || key === 'scope') {
       continue;
     }
-    if (extras === null) {
-      extras = {};
-    }
+    extras ??= {};
     extras[key] = value;
   }
 

package/src/core/routes/OidcRoutes.behavior.spec.tsx

@@ -0,0 +1,123 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import Callback from '../default-component/Callback.component';
+import SilentCallback from '../default-component/SilentCallback.component';
+import SilentLogin from '../default-component/SilentLogin.component';
+import OidcRoutes from './OidcRoutes';
+
+vi.mock('../default-component/Callback.component', () => ({
+  default: vi.fn(() => <span>Callback</span>),
+}));
+vi.mock('../default-component/SilentCallback.component', () => ({
+  default: vi.fn(() => <span>Silent callback</span>),
+}));
+vi.mock('../default-component/SilentLogin.component', () => ({
+  default: vi.fn(() => <span>Silent login</span>),
+}));
+
+const props = {
+  configurationName: 'custom',
+  redirect_uri: new URL('/callback', window.location.href).href,
+  silent_redirect_uri: new URL('/silent-callback', window.location.href).href,
+  silent_login_uri: new URL('/silent-login', window.location.href).href,
+  location: {
+    getCurrentHref: () => window.location.href,
+    getPath: () => window.location.pathname,
+    getOrigin: () => window.location.origin,
+    open: vi.fn(),
+    reload: vi.fn(),
+  },
+};
+
+describe('OIDC route selection', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    window.history.replaceState(null, '', '/');
+  });
+
+  afterEach(() => {
+    window.history.replaceState(null, '', '/');
+    vi.restoreAllMocks();
+  });
+
+  it('renders application content on a non-OIDC route', () => {
+    render(<OidcRoutes {...props}>Application</OidcRoutes>);
+
+    expect(screen.getByText('Application')).toBeDefined();
+    expect(Callback).not.toHaveBeenCalled();
+    expect(SilentCallback).not.toHaveBeenCalled();
+    expect(SilentLogin).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ['/callback?code=example#', 'Callback', Callback],
+    ['/silent-callback', 'Silent callback', SilentCallback],
+    ['/silent-login', 'Silent login', SilentLogin],
+  ])('renders the matching handler for %s', (path, text, handler) => {
+    window.history.replaceState(null, '', path);
+
+    render(<OidcRoutes {...props}>Application</OidcRoutes>);
+
+    expect(screen.getByText(text)).toBeDefined();
+    expect(screen.queryByText('Application')).toBeNull();
+    expect(vi.mocked(handler).mock.calls[0][0]).toMatchObject({ configurationName: 'custom' });
+  });
+
+  it('gives the silent callback priority when configured paths overlap', () => {
+    window.history.replaceState(null, '', '/callback');
+
+    render(
+      <OidcRoutes
+        {...props}
+        silent_redirect_uri={props.redirect_uri}
+        silent_login_uri={props.redirect_uri}
+      />,
+    );
+
+    expect(screen.getByText('Silent callback')).toBeDefined();
+    expect(Callback).not.toHaveBeenCalled();
+    expect(SilentLogin).not.toHaveBeenCalled();
+  });
+
+  it('forwards custom callback components and navigation callbacks unchanged', () => {
+    window.history.replaceState(null, '', '/callback');
+    const success = (): null => null;
+    const error = (): null => null;
+    const history = vi.fn();
+    const navigate = vi.fn();
+
+    render(
+      <OidcRoutes
+        {...props}
+        callbackSuccessComponent={success}
+        callbackErrorComponent={error}
+        withCustomHistory={history}
+        navigateAfterCallback={navigate}
+      />,
+    );
+
+    expect(vi.mocked(Callback).mock.calls[0][0]).toMatchObject({
+      callBackSuccess: success,
+      callBackError: error,
+      withCustomHistory: history,
+      navigateAfterCallback: navigate,
+    });
+  });
+
+  it('updates the route on popstate and removes its listener on unmount', () => {
+    const addEventListener = vi.spyOn(window, 'addEventListener');
+    const removeEventListener = vi.spyOn(window, 'removeEventListener');
+    const { unmount } = render(<OidcRoutes {...props}>Application</OidcRoutes>);
+    const listener = addEventListener.mock.calls.find(([name]) => name === 'popstate')[1];
+
+    act(() => {
+      window.history.replaceState(null, '', '/silent-login');
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+    expect(screen.getByText('Silent login')).toBeDefined();
+
+    unmount();
+    expect(removeEventListener).toHaveBeenCalledWith('popstate', listener, false);
+  });
+});

package/src/core/routes/OidcRoutes.tsx

@@ -44,32 +44,26 @@ const OidcRoutes: FC<PropsWithChildren<OidcRoutesProps>> = ({
 
   const callbackPath = getPath(redirect_uri);
 
-  if (silent_redirect_uri) {
-    if (path === getPath(silent_redirect_uri)) {
-      return <SilentCallbackComponent configurationName={configurationName} />;
-    }
+  if (silent_redirect_uri && path === getPath(silent_redirect_uri)) {
+    return <SilentCallbackComponent configurationName={configurationName} />;
   }
 
-  if (silent_login_uri) {
-    if (path === getPath(silent_login_uri)) {
-      return <SilentLoginComponent configurationName={configurationName} />;
-    }
+  if (silent_login_uri && path === getPath(silent_login_uri)) {
+    return <SilentLoginComponent configurationName={configurationName} />;
   }
 
-  switch (path) {
-    case callbackPath:
-      return (
-        <CallbackComponent
-          callBackError={callbackErrorComponent}
-          callBackSuccess={callbackSuccessComponent}
-          configurationName={configurationName}
-          withCustomHistory={withCustomHistory}
-          navigateAfterCallback={navigateAfterCallback}
-        />
-      );
-    default:
-      return <>{children}</>;
+  if (path === callbackPath) {
+    return (
+      <CallbackComponent
+        callBackError={callbackErrorComponent}
+        callBackSuccess={callbackSuccessComponent}
+        configurationName={configurationName}
+        withCustomHistory={withCustomHistory}
+        navigateAfterCallback={navigateAfterCallback}
+      />
+    );
   }
+  return <>{children}</>;
 };
 
 export default React.memo(OidcRoutes);