@axa-fr/react-oidc 7.27.12 → 7.27.14

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

@@ -13,11 +13,22 @@ export const CallBackSuccess: ComponentType<any> = () => (
   </div>
 );
 
+const NAVIGATION_VERIFICATION_DELAY_MS = 200;
+
+export const verifyNavigationCommitted = (
+  targetPath: string,
+  windowInternal: Window = window,
+): boolean => {
+  const currentPath = windowInternal.location.pathname;
+  return currentPath === targetPath || targetPath === '/';
+};
+
 const CallbackManager: ComponentType<any> = ({
   callBackError,
   callBackSuccess,
   configurationName,
   withCustomHistory,
+  navigateAfterCallback,
 }) => {
   const [isError, setIsError] = useState(false);
   useEffect(() => {
@@ -25,9 +36,57 @@ const CallbackManager: ComponentType<any> = ({
     const playCallbackAsync = async () => {
       const getOidc = OidcClient.get;
       try {
-        const { callbackPath } = await getOidc(configurationName).loginCallbackAsync();
-        const history = withCustomHistory ? withCustomHistory() : getCustomHistory();
-        history.replaceState(callbackPath || '/');
+        const oidcClient = getOidc(configurationName);
+        const { callbackPath } = await oidcClient.loginCallbackAsync();
+        const targetPath = callbackPath || '/';
+
+        if (navigateAfterCallback) {
+          try {
+            await navigateAfterCallback(targetPath);
+            oidcClient.publishEvent(OidcClient.eventNames.loginCallbackAsync_navigated, {
+              configurationName,
+              callbackPath: targetPath,
+            });
+          } catch (navigationError) {
+            oidcClient.publishEvent(OidcClient.eventNames.loginCallbackAsync_navigation_error, {
+              configurationName,
+              callbackPath: targetPath,
+              error: navigationError,
+            });
+            if (isMounted) {
+              console.warn(navigationError);
+              setIsError(true);
+            }
+          }
+        } else {
+          const history = withCustomHistory ? withCustomHistory() : getCustomHistory();
+          history.replaceState(targetPath);
+
+          await new Promise<void>(resolve => {
+            setTimeout(() => {
+              resolve();
+            }, NAVIGATION_VERIFICATION_DELAY_MS);
+          });
+
+          if (isMounted) {
+            const committed = verifyNavigationCommitted(targetPath);
+            if (committed) {
+              oidcClient.publishEvent(OidcClient.eventNames.loginCallbackAsync_navigated, {
+                configurationName,
+                callbackPath: targetPath,
+              });
+            } else {
+              oidcClient.publishEvent(OidcClient.eventNames.loginCallbackAsync_navigation_error, {
+                configurationName,
+                callbackPath: targetPath,
+                error: new Error(
+                  `Navigation did not commit: expected "${targetPath}" but found "${window.location.pathname}"`,
+                ),
+              });
+              setIsError(true);
+            }
+          }
+        }
       } catch (error) {
         if (isMounted) {
           console.warn(error);

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

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+
+const LoadingTimeout: ComponentType<any> = () => (
+  <div className="oidc-loading-timeout">
+    <div className="oidc-loading-timeout__container">
+      <h1 className="oidc-loading-timeout__title">Loading timeout</h1>
+      <p className="oidc-loading-timeout__content">
+        Authentication is taking longer than expected. Please try refreshing the page.
+      </p>
+    </div>
+  </div>
+);
+
+export default LoadingTimeout;

package/src/core/default-component/index.ts

@@ -2,5 +2,6 @@ export { default as AuthenticateError } from './AuthenticateError.component.js';
 export { default as Authenticating } from './Authenticating.component.js';
 export { default as Callback, CallBackSuccess } from './Callback.component.js';
 export { default as Loading } from './Loading.component.js';
+export { default as LoadingTimeout } from './LoadingTimeout.component.js';
 export { default as ServiceWorkerNotSupported } from './ServiceWorkerNotSupported.component.js';
 export { default as SessionLost } from './SessionLost.component.js';

package/src/core/routes/OidcRoutes.tsx

@@ -15,6 +15,7 @@ type OidcRoutesProps = {
   silent_redirect_uri?: string;
   silent_login_uri?: string;
   withCustomHistory?: () => CustomHistory;
+  navigateAfterCallback?: (callbackPath: string) => Promise<void>;
   location: ILOidcLocation;
 };
 
@@ -27,6 +28,7 @@ const OidcRoutes: FC<PropsWithChildren<OidcRoutesProps>> = ({
   children,
   configurationName,
   withCustomHistory = null,
+  navigateAfterCallback = null,
 }) => {
   // This exist because in next.js window outside useEffect is null
   const pathname = window ? getPath(window.location.href) : '';
@@ -62,6 +64,7 @@ const OidcRoutes: FC<PropsWithChildren<OidcRoutesProps>> = ({
           callBackSuccess={callbackSuccessComponent}
           configurationName={configurationName}
           withCustomHistory={withCustomHistory}
+          navigateAfterCallback={navigateAfterCallback}
         />
       );
     default:

package/src/index.ts

@@ -1,4 +1,5 @@
 export { useOidcFetch, withOidcFetch } from './FetchToken.js';
+export type { OidcProviderProps } from './OidcProvider.js';
 export { OidcProvider } from './OidcProvider.js';
 export { OidcSecure, withOidcSecure } from './OidcSecure.js';
 export { useOidc, useOidcAccessToken, useOidcIdToken } from './ReactOidc.js';