@axa-fr/react-oidc 7.22.18 → 7.22.19

package/src/ReactOidc.tsx

@@ -1,179 +1,218 @@
-import { StringMap, OidcClient, Tokens } from '@axa-fr/oidc-client';
+import { OidcClient, StringMap, Tokens } from '@axa-fr/oidc-client';
 import { useEffect, useState } from 'react';
 
 const defaultConfigurationName = 'default';
 
 type GetOidcFn = {
-    (configurationName?: string): any;
-}
+  (configurationName?: string): any;
+};
 
 const defaultIsAuthenticated = (getOidc: GetOidcFn, configurationName: string) => {
-    let isAuthenticated = false;
-    const oidc = getOidc(configurationName);
-    if (oidc) {
-        isAuthenticated = getOidc(configurationName).tokens != null;
-    }
-    return isAuthenticated;
+  let isAuthenticated = false;
+  const oidc = getOidc(configurationName);
+  if (oidc) {
+    isAuthenticated = getOidc(configurationName).tokens != null;
+  }
+  return isAuthenticated;
 };
 
 export const useOidc = (configurationName = defaultConfigurationName) => {
-    const getOidc = OidcClient.get;
-    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(defaultIsAuthenticated(getOidc, configurationName));
-
-    useEffect(() => {
-        let isMounted = true;
-        const oidc = getOidc(configurationName);
-        setIsAuthenticated(defaultIsAuthenticated(getOidc, configurationName));
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
-            if (name === OidcClient.eventNames.logout_from_another_tab || name === OidcClient.eventNames.logout_from_same_tab || name === OidcClient.eventNames.token_aquired) {
-                if (isMounted) {
-                    setIsAuthenticated(defaultIsAuthenticated(getOidc, configurationName));
-                }
-            }
-        });
-        return () => {
-            isMounted = false;
-            oidc.removeEventSubscription(newSubscriptionId);
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [configurationName]);
-
-    const login = (callbackPath:string | undefined = undefined, extras:StringMap = null, silentLoginOnly = false) => {
-        return getOidc(configurationName).loginAsync(callbackPath, extras, false, undefined, silentLoginOnly);
-    };
-    const logout = (callbackPath: string | null | undefined = undefined, extras:StringMap = null) => {
-        return getOidc(configurationName).logoutAsync(callbackPath, extras);
+  const getOidc = OidcClient.get;
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(
+    defaultIsAuthenticated(getOidc, configurationName),
+  );
+
+  useEffect(() => {
+    let isMounted = true;
+    const oidc = getOidc(configurationName);
+    setIsAuthenticated(defaultIsAuthenticated(getOidc, configurationName));
+
+    const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
+      if (
+        name === OidcClient.eventNames.logout_from_another_tab ||
+        name === OidcClient.eventNames.logout_from_same_tab ||
+        name === OidcClient.eventNames.token_aquired
+      ) {
+        if (isMounted) {
+          setIsAuthenticated(defaultIsAuthenticated(getOidc, configurationName));
+        }
+      }
+    });
+    return () => {
+      isMounted = false;
+      oidc.removeEventSubscription(newSubscriptionId);
     };
-    const renewTokens = async (extras: StringMap = null) : Promise<OidcAccessToken | OidcIdToken> => {
-        const tokens = await getOidc(configurationName).renewTokensAsync(extras);
-
-        return {
-            // @ts-ignore
-            accessToken: tokens.accessToken,
-            // @ts-ignore
-            accessTokenPayload: tokens.accessTokenPayload,
-            // @ts-ignore
-            idToken: tokens.idToken,
-            // @ts-ignore
-            idTokenPayload: tokens.idTokenPayload,
-        };
+  }, [configurationName]);
+
+  const login = (
+    callbackPath: string | undefined = undefined,
+    extras: StringMap = null,
+    silentLoginOnly = false,
+  ) => {
+    return getOidc(configurationName).loginAsync(
+      callbackPath,
+      extras,
+      false,
+      undefined,
+      silentLoginOnly,
+    );
+  };
+  const logout = (
+    callbackPath: string | null | undefined = undefined,
+    extras: StringMap = null,
+  ) => {
+    return getOidc(configurationName).logoutAsync(callbackPath, extras);
+  };
+  const renewTokens = async (extras: StringMap = null): Promise<OidcAccessToken | OidcIdToken> => {
+    const tokens = await getOidc(configurationName).renewTokensAsync(extras);
+
+    return {
+      // @ts-ignore
+      accessToken: tokens.accessToken,
+      // @ts-ignore
+      accessTokenPayload: tokens.accessTokenPayload,
+      // @ts-ignore
+      idToken: tokens.idToken,
+      // @ts-ignore
+      idTokenPayload: tokens.idTokenPayload,
     };
-    return { login, logout, renewTokens, isAuthenticated };
+  };
+  return { login, logout, renewTokens, isAuthenticated };
 };
 
 const accessTokenInitialState = { accessToken: null, accessTokenPayload: null };
 
 const initTokens = (configurationName: string) => {
-    const getOidc = OidcClient.get;
-    const oidc = getOidc(configurationName);
-    if (oidc.tokens) {
-        const tokens = oidc.tokens;
-        return {
-            accessToken: tokens.accessToken,
-            accessTokenPayload: tokens.accessTokenPayload,
-            generateDemonstrationOfProofOfPossessionAsync: oidc.configuration.demonstrating_proof_of_possession ? (url:string, method:string) => oidc.generateDemonstrationOfProofOfPossessionAsync(tokens.accessToken, url, method) : null,
-        };
-    }
-    return accessTokenInitialState;
+  const getOidc = OidcClient.get;
+  const oidc = getOidc(configurationName);
+  if (oidc.tokens) {
+    const tokens = oidc.tokens;
+    return {
+      accessToken: tokens.accessToken,
+      accessTokenPayload: tokens.accessTokenPayload,
+      generateDemonstrationOfProofOfPossessionAsync: oidc.configuration
+        .demonstrating_proof_of_possession
+        ? (url: string, method: string) =>
+            oidc.generateDemonstrationOfProofOfPossessionAsync(tokens.accessToken, url, method)
+        : null,
+    };
+  }
+  return accessTokenInitialState;
 };
 
 export type OidcAccessToken = {
-    accessToken?: any;
-    accessTokenPayload?: any;
-    generateDemonstrationOfProofOfPossessionAsync?: any;
-}
+  accessToken?: any;
+  accessTokenPayload?: any;
+  generateDemonstrationOfProofOfPossessionAsync?: any;
+};
 
 function getGenerateDemonstrationOfProofOfPossessionAsync(oidc: OidcClient, tokens: Tokens) {
-    return oidc.configuration.demonstrating_proof_of_possession ? (url: string, method: string, extras:StringMap={}) => oidc.generateDemonstrationOfProofOfPossessionAsync(tokens.accessToken, url, method, extras) : null;
+  return oidc.configuration.demonstrating_proof_of_possession
+    ? (url: string, method: string, extras: StringMap = {}) =>
+        oidc.generateDemonstrationOfProofOfPossessionAsync(tokens.accessToken, url, method, extras)
+    : null;
 }
 
 export const useOidcAccessToken = (configurationName = defaultConfigurationName) => {
-    const getOidc = OidcClient.get;
-    const [state, setAccessToken] = useState<OidcAccessToken>(initTokens(configurationName));
-
-    useEffect(() => {
-        let isMounted = true;
-        const oidc = getOidc(configurationName);
-        if (oidc.tokens) {
-            const tokens = oidc.tokens;
-            setAccessToken({ accessToken: tokens.accessToken, accessTokenPayload: tokens.accessTokenPayload });
-        }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
-            if (name === OidcClient.eventNames.token_renewed ||
-                name === OidcClient.eventNames.token_aquired ||
-                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 (isMounted) {
-                    const tokens = oidc.tokens;
-                    setAccessToken(tokens != null ? { 
-                        accessToken: tokens.accessToken, 
-                        accessTokenPayload: tokens.accessTokenPayload ,
-                        generateDemonstrationOfProofOfPossessionAsync: getGenerateDemonstrationOfProofOfPossessionAsync(oidc, tokens),
-                    } : accessTokenInitialState);
+  const getOidc = OidcClient.get;
+  const [state, setAccessToken] = useState<OidcAccessToken>(initTokens(configurationName));
+
+  useEffect(() => {
+    let isMounted = true;
+    const oidc = getOidc(configurationName);
+    if (oidc.tokens) {
+      const tokens = oidc.tokens;
+      setAccessToken({
+        accessToken: tokens.accessToken,
+        accessTokenPayload: tokens.accessTokenPayload,
+      });
+    }
+
+    const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
+      if (
+        name === OidcClient.eventNames.token_renewed ||
+        name === OidcClient.eventNames.token_aquired ||
+        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 (isMounted) {
+          const tokens = oidc.tokens;
+          setAccessToken(
+            tokens != null
+              ? {
+                  accessToken: tokens.accessToken,
+                  accessTokenPayload: tokens.accessTokenPayload,
+                  generateDemonstrationOfProofOfPossessionAsync:
+                    getGenerateDemonstrationOfProofOfPossessionAsync(oidc, tokens),
                 }
-            }
-        });
-        return () => {
-            isMounted = false;
-            oidc.removeEventSubscription(newSubscriptionId);
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [configurationName]);
-    return state;
+              : accessTokenInitialState,
+          );
+        }
+      }
+    });
+    return () => {
+      isMounted = false;
+      oidc.removeEventSubscription(newSubscriptionId);
+    };
+  }, [configurationName]);
+  return state;
 };
 
-const idTokenInitialState = { idToken: null, idTokenPayload: null};
+const idTokenInitialState = { idToken: null, idTokenPayload: null };
 
 const initIdToken = (configurationName: string) => {
-    const getOidc = OidcClient.get;
-    const oidc = getOidc(configurationName);
-    
-    if (oidc.tokens) {
-        const tokens = oidc.tokens;
-        return { idToken: tokens.idToken, idTokenPayload: tokens.idTokenPayload };
-    }
-    return idTokenInitialState;
+  const getOidc = OidcClient.get;
+  const oidc = getOidc(configurationName);
+
+  if (oidc.tokens) {
+    const tokens = oidc.tokens;
+    return { idToken: tokens.idToken, idTokenPayload: tokens.idTokenPayload };
+  }
+  return idTokenInitialState;
 };
 
 export type OidcIdToken = {
-    idToken?: any;
-    idTokenPayload?: any;
-}
+  idToken?: any;
+  idTokenPayload?: any;
+};
 
 export const useOidcIdToken = (configurationName = defaultConfigurationName) => {
-    const getOidc = OidcClient.get;
-    const [state, setIDToken] = useState<OidcIdToken>(initIdToken(configurationName));
-
-    useEffect(() => {
-        let isMounted = true;
-        const oidc = getOidc(configurationName);
-        if (oidc.tokens) {
-            const tokens = oidc.tokens;
-            setIDToken({ idToken: tokens.idToken, idTokenPayload: tokens.idTokenPayload });
+  const getOidc = OidcClient.get;
+  const [state, setIDToken] = useState<OidcIdToken>(initIdToken(configurationName));
+
+  useEffect(() => {
+    let isMounted = true;
+    const oidc = getOidc(configurationName);
+    if (oidc.tokens) {
+      const tokens = oidc.tokens;
+      setIDToken({ idToken: tokens.idToken, idTokenPayload: tokens.idTokenPayload });
+    }
+
+    const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
+      if (
+        name === OidcClient.eventNames.token_renewed ||
+        name === OidcClient.eventNames.token_aquired ||
+        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 (isMounted) {
+          const tokens = oidc.tokens;
+          setIDToken(
+            tokens != null
+              ? { idToken: tokens.idToken, idTokenPayload: tokens.idTokenPayload }
+              : idTokenInitialState,
+          );
         }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const newSubscriptionId = oidc.subscribeEvents((name: string, data: any) => {
-            if (name === OidcClient.eventNames.token_renewed ||
-                name === OidcClient.eventNames.token_aquired ||
-                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 (isMounted) {
-                    const tokens = oidc.tokens;
-                    setIDToken(tokens != null ? { idToken: tokens.idToken, idTokenPayload: tokens.idTokenPayload } : idTokenInitialState);
-                }
-            }
-        });
-        return () => {
-            isMounted = false;
-            oidc.removeEventSubscription(newSubscriptionId);
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [configurationName]);
-    return state;
+      }
+    });
+    return () => {
+      isMounted = false;
+      oidc.removeEventSubscription(newSubscriptionId);
+    };
+  }, [configurationName]);
+  return state;
 };

package/src/User.ts

@@ -1,62 +1,72 @@
-import { type OidcUserInfo, OidcClient } from '@axa-fr/oidc-client';
+import { OidcClient, type OidcUserInfo } from '@axa-fr/oidc-client';
 import { useEffect, useState } from 'react';
 
 export enum OidcUserStatus {
-    Unauthenticated= 'Unauthenticated',
-    Loading = 'Loading user',
-    Loaded = 'User loaded',
-    LoadingError = 'Error loading user'
+  Unauthenticated = 'Unauthenticated',
+  Loading = 'Loading user',
+  Loaded = 'User loaded',
+  LoadingError = 'Error loading user',
 }
 
 export type OidcUser<T extends OidcUserInfo = OidcUserInfo> = {
-    user: T | null;
-    status: OidcUserStatus;
-}
+  user: T | null;
+  status: OidcUserStatus;
+};
+
+export const useOidcUser = <T extends OidcUserInfo = OidcUserInfo>(
+  configurationName = 'default',
+  demonstrating_proof_of_possession = false,
+) => {
+  const oidc = OidcClient.get(configurationName);
+  const user = oidc.userInfo<T>();
+  const [oidcUser, setOidcUser] = useState<OidcUser<T>>({
+    user: user,
+    status: user ? OidcUserStatus.Loaded : OidcUserStatus.Unauthenticated,
+  });
+  const [oidcUserId, setOidcUserId] = useState<number>(user ? 1 : 0);
+  const [oidcPreviousUserId, setPreviousOidcUserId] = useState<number>(user ? 1 : 0);
 
-export const useOidcUser = <T extends OidcUserInfo = OidcUserInfo>(configurationName = 'default', demonstrating_proof_of_possession=false) => {
+  useEffect(() => {
     const oidc = OidcClient.get(configurationName);
-    const user = oidc.userInfo<T>();
-    const [oidcUser, setOidcUser] = useState<OidcUser<T>>({ user: user, status: user ? OidcUserStatus.Loaded :  OidcUserStatus.Unauthenticated });
-    const [oidcUserId, setOidcUserId] = useState<number>(user ? 1 : 0);
-    const [oidcPreviousUserId, setPreviousOidcUserId] = useState<number>(user ? 1 : 0);
-    
-    useEffect(() => {
-        const oidc = OidcClient.get(configurationName);
-        let isMounted = true;
-        if (oidc && oidc.tokens) {
-            const isCache = oidcUserId === oidcPreviousUserId;
-            if(isCache && oidc.userInfo<T>()) {
-                return;
-            }
-            setOidcUser({ ...oidcUser, status: OidcUserStatus.Loading });
-            oidc.userInfoAsync(!isCache, demonstrating_proof_of_possession)
-                .then((info) => {
-                    if (isMounted) {
-                        // @ts-ignore
-                        setOidcUser({ user: info, status: OidcUserStatus.Loaded });
-                    }
-                })
-                .catch(() => setOidcUser({ ...oidcUser, status: OidcUserStatus.LoadingError }));
-            setPreviousOidcUserId(oidcUserId);
-        } else {
-            setOidcUser({ user: null, status: OidcUserStatus.Unauthenticated });
+    let isMounted = true;
+    if (oidc && oidc.tokens) {
+      const isCache = oidcUserId === oidcPreviousUserId;
+      if (isCache && oidc.userInfo<T>()) {
+        return;
+      }
+      setOidcUser({ ...oidcUser, status: OidcUserStatus.Loading });
+      oidc
+        .userInfoAsync(!isCache, demonstrating_proof_of_possession)
+        .then(info => {
+          if (isMounted) {
+            // @ts-ignore
+            setOidcUser({ user: info, status: OidcUserStatus.Loaded });
+          }
+        })
+        .catch(() => setOidcUser({ ...oidcUser, status: OidcUserStatus.LoadingError }));
+      setPreviousOidcUserId(oidcUserId);
+    } else {
+      setOidcUser({ user: null, status: OidcUserStatus.Unauthenticated });
+    }
+    const newSubscriptionId = oidc.subscribeEvents((name: string) => {
+      if (
+        name === OidcClient.eventNames.logout_from_another_tab ||
+        name === OidcClient.eventNames.logout_from_same_tab
+      ) {
+        if (isMounted) {
+          setOidcUser({ user: null, status: OidcUserStatus.Unauthenticated });
         }
-        const newSubscriptionId = oidc.subscribeEvents((name: string) => {
-            if (name === OidcClient.eventNames.logout_from_another_tab || name === OidcClient.eventNames.logout_from_same_tab) {
-                if (isMounted) {
-                    setOidcUser({ user: null, status: OidcUserStatus.Unauthenticated });
-                }
-            }
-        });
-        return () => {
-            isMounted = false;
-            oidc.removeEventSubscription(newSubscriptionId);
-        };
-    }, [oidcUserId]);
-
-    const reloadOidcUser = () => {
-        setOidcUserId(oidcUserId+1);
+      }
+    });
+    return () => {
+      isMounted = false;
+      oidc.removeEventSubscription(newSubscriptionId);
     };
+  }, [oidcUserId]);
+
+  const reloadOidcUser = () => {
+    setOidcUserId(oidcUserId + 1);
+  };
 
-    return { oidcUser: oidcUser.user, oidcUserLoadingState: oidcUser.status, reloadOidcUser };
+  return { oidcUser: oidcUser.user, oidcUserLoadingState: oidcUser.status, reloadOidcUser };
 };

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

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 
-const Authenticating : ComponentType<any> = () => (
+const Authenticating: ComponentType<any> = () => (
   <div className="oidc-authenticating">
     <div className="oidc-authenticating__container">
       <h1 className="oidc-authenticating__title">Authentication in progress</h1>

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

@@ -4,14 +4,21 @@ import { ComponentType, useEffect, useState } from 'react';
 import { getCustomHistory } from '../routes/withRouter.js';
 import AuthenticatingError from './AuthenticateError.component.js';
 
-export const CallBackSuccess: ComponentType<any> = () => (<div className="oidc-callback">
-  <div className="oidc-callback__container">
-    <h1 className="oidc-callback__title">Authentication complete</h1>
-    <p className="oidc-callback__content">You will be redirected to your application.</p>
+export const CallBackSuccess: ComponentType<any> = () => (
+  <div className="oidc-callback">
+    <div className="oidc-callback__container">
+      <h1 className="oidc-callback__title">Authentication complete</h1>
+      <p className="oidc-callback__content">You will be redirected to your application.</p>
+    </div>
   </div>
-</div>);
+);
 
-const CallbackManager: ComponentType<any> = ({ callBackError, callBackSuccess, configurationName, withCustomHistory }) => {
+const CallbackManager: ComponentType<any> = ({
+  callBackError,
+  callBackSuccess,
+  configurationName,
+  withCustomHistory,
+}) => {
   const [isError, setIsError] = useState(false);
   useEffect(() => {
     let isMounted = true;
@@ -19,13 +26,13 @@ const CallbackManager: ComponentType<any> = ({ callBackError, callBackSuccess, c
       const getOidc = OidcClient.get;
       try {
         const { callbackPath } = await getOidc(configurationName).loginCallbackAsync();
-        const history = (withCustomHistory) ? withCustomHistory() : getCustomHistory();
+        const history = withCustomHistory ? withCustomHistory() : getCustomHistory();
         history.replaceState(callbackPath || '/');
       } catch (error) {
-          if (isMounted) {
-            console.warn(error);
-            setIsError(true);
-          }
+        if (isMounted) {
+          console.warn(error);
+          setIsError(true);
+        }
       }
     };
     playCallbackAsync();

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

@@ -1,9 +1,5 @@
 import { ComponentType } from 'react';
 
-const Loading : ComponentType<any> = () => (
-  <span className="oidc-loading">
-    Loading
-  </span>
-);
+const Loading: ComponentType<any> = () => <span className="oidc-loading">Loading</span>;
 
 export default Loading;

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

@@ -1,10 +1,13 @@
 import { ComponentType } from 'react';
 
-const ServiceWorkerNotSupported : ComponentType<any> = () => (
+const ServiceWorkerNotSupported: ComponentType<any> = () => (
   <div className="oidc-serviceworker">
     <div className="oidc-serviceworker__container">
       <h1 className="oidc-serviceworker__title">Unable to authenticate on this browser</h1>
-      <p className="oidc-serviceworker__content">Your browser is not secure enough to make authentication work. Try updating your browser or use a newer browser.</p>
+      <p className="oidc-serviceworker__content">
+        Your browser is not secure enough to make authentication work. Try updating your browser or
+        use a newer browser.
+      </p>
     </div>
   </div>
 );

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

@@ -5,7 +5,7 @@ export const SessionLost: ComponentType<any> = () => (
     <div className="oidc-session-lost__container">
       <h1 className="oidc-session-lost__title">Session timed out</h1>
       <p className="oidc-session-lost__content">
-          Your session has expired. Please re-authenticate.
+        Your session has expired. Please re-authenticate.
       </p>
     </div>
   </div>

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

@@ -1,17 +1,23 @@
 import { OidcClient } from '@axa-fr/oidc-client';
-import { ComponentType, useEffect } from 'react';
+import { FC, useEffect } from 'react';
 
-const SilentCallbackManager: ComponentType<any> = ({ configurationName }) => {
-    useEffect(() => {
-        const playCallbackAsync = async () => {
-            const getOidc = OidcClient.get;
-            const oidc = getOidc(configurationName);
-            oidc.silentLoginCallbackAsync();
-        };
-        playCallbackAsync();
-    }, []);
+export interface SilentCallbackProps {
+  configurationName: string;
+}
 
-    return <></>;
+const SilentCallbackManager: FC<SilentCallbackProps> = ({ configurationName }) => {
+  useEffect(() => {
+    const playCallbackAsync = async () => {
+      const oidc = OidcClient.get(configurationName);
+      oidc.silentLoginCallbackAsync();
+    };
+
+    playCallbackAsync().catch(error => {
+      console.error('Error during silent login callback:', error);
+    });
+  }, [configurationName]);
+
+  return null;
 };
 
 export default SilentCallbackManager;