@databiosphere/findable-ui 18.0.0 → 20.0.0

package/lib/components/common/Menu/hooks/useMenu.d.ts

@@ -1,16 +1,15 @@
-import { PopperProps as MPopperProps } from "@mui/material";
 import { MouseEvent } from "react";
-export interface UseMenu {
-    anchorEl: MPopperProps["anchorEl"];
+export interface UseMenu<E extends HTMLElement> {
+    anchorEl: E | null;
     onClose: () => void;
     onDisableScrollLock: () => void;
     onEnableScrollLock: () => void;
-    onOpen: (event: MouseEvent<HTMLElement>) => void;
-    onToggleOpen: (event: MouseEvent<HTMLElement>) => void;
+    onOpen: (event: MouseEvent<E>) => void;
+    onToggleOpen: (event: MouseEvent<E>) => void;
     open: boolean;
 }
 /**
  * Menu functionality for menu dropdown, with menu position.
  * @returns menu functionality.
  */
-export declare const useMenu: () => UseMenu;
+export declare const useMenu: <E extends HTMLElement>() => UseMenu<E>;

package/lib/config/entities.d.ts

@@ -1,12 +1,14 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { CellContext, ColumnMeta, ColumnSort, RowData, Table, TableOptions } from "@tanstack/react-table";
+import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
 import { ExploreMode } from "../hooks/useExploreMode";
-import { AuthContextProps } from "../providers/authentication";
+import { AuthState } from "../providers/authentication/auth/types";
+import { UserProfile } from "../providers/authentication/authentication/types";
+import { ProviderId } from "../providers/authentication/common/types";
 import { ExploreState } from "../providers/exploreState";
 import { FileManifestState } from "../providers/fileManifestState";
 import { SystemStatus, SystemStatusResponse } from "../providers/systemStatus";
@@ -22,13 +24,17 @@ export interface AnalyticsConfig {
  * Interface to define the authentication configuration for a given site.
  */
 export interface AuthenticationConfig {
-    googleGISAuthConfig?: GoogleGISAuthConfig;
+    providers?: OAuthProvider[];
+    services?: AuthService[];
     termsOfService?: ReactNode;
-    terraAuthConfig?: TerraAuthConfig;
     text?: ReactNode;
     title: string;
     warning?: ReactNode;
 }
+export interface AuthService {
+    endpoint: Record<string, string>;
+    id: string;
+}
 /**
  * Interface to define the set of components that will be used for the back page.
  */
@@ -70,19 +76,19 @@ export interface CategoryConfig {
 }
 /**
  * Column configuration.
+ * TanStack ColumnDef properties not currently supported include:
+ * - `enableMultiSort` - Note, table multi-sort is managed via table options.
  */
-export interface ColumnConfig<T = any, C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any> {
+export type ColumnConfig<T extends RowData, TValue = unknown, C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any> = Omit<ColumnDef<T, TValue>, "enableMultiSort"> & {
     columnPinned?: boolean;
     columnVisible?: boolean;
     componentConfig: ComponentConfig<C, T>;
     disableHiding?: boolean;
-    disableSorting?: boolean;
     header: string;
     id: string;
     meta?: ColumnMeta<T, unknown>;
-    tooltip?: string;
     width: GridTrackSize;
-}
+};
 /**
  * Interface used to define the configuration of a component.
  * This will be used by @see ComponentCreator to create a React component with the given props and
@@ -169,14 +175,6 @@ export type GetIdFunction<T> = (detail: T) => string;
  * Get title function.
  */
 export type GetTitleFunction<T> = (detail?: T) => string | undefined;
-/**
- * Google GIS authentication configuration.
- */
-export interface GoogleGISAuthConfig {
-    clientId: string;
-    googleProfileEndpoint: string;
-    scope: string;
-}
 /**
  * Grid track configuration.
  */
@@ -213,19 +211,24 @@ export interface ListViewConfig {
     disablePagination?: boolean;
     enableDownload?: boolean;
     enableRowPreview?: boolean;
-    enableRowSelection?: boolean;
     enableTab?: boolean;
     listHero?: ComponentsConfig;
     rowPreviewView?: ComponentsConfig;
     rowSelectionView?: ComponentsConfig;
     subTitleHero?: ComponentsConfig;
 }
-/**
- * Interface to define the authentication login notice component.
- */
-export interface LoginNotice {
-    conditionsUrl: string;
-    privacyUrl: string;
+export interface OAuthProvider<P = any> {
+    authorization: {
+        params: {
+            scope: string;
+        };
+    };
+    clientId: string;
+    icon: ReactNode;
+    id: ProviderId;
+    name: string;
+    profile: (profile: P) => UserProfile;
+    userinfo: string;
 }
 /**
  * Option Method.
@@ -250,6 +253,7 @@ export interface Override {
 }
 export interface SavedFilter {
     filters: SelectedFilter[];
+    grouping?: GroupingState;
     sorting?: ColumnSort[];
     title: string;
 }
@@ -345,11 +349,6 @@ export interface TabConfig {
     tabIconPosition?: MTabProps["iconPosition"];
     tabName?: string;
 }
-export interface TerraAuthConfig {
-    termsOfServiceEndpoint: string;
-    terraNIHProfileEndpoint?: string;
-    terraProfileEndpoint: string;
-}
 /**
  * Theme options function.
  * Defines theme options, and provides a reference to the specified theme.
@@ -359,7 +358,7 @@ export type ThemeOptionsFn = (theme: Theme) => ThemeOptions;
  * View context.
  */
 export interface ViewContext<T extends RowData, TData = unknown> {
-    authState: Pick<AuthContextProps, "authenticationStatus" | "isAuthenticated">;
+    authState: Pick<AuthState, "isAuthenticated">;
     cellContext?: CellContext<T, TData>;
     entityConfig: EntityConfig;
     exploreState: ExploreState;

package/lib/config/utils.d.ts

@@ -1,4 +1,3 @@
-import { ColumnSort } from "@tanstack/react-table";
 import { EntityConfig, SiteConfig } from "./entities";
 /**
  * Returns context default config for config provider.
@@ -10,12 +9,6 @@ export declare function getDefaultConfig(): SiteConfig;
  * @returns context default entity config for config provider.
  */
 export declare function getDefaultEntityConfig(): EntityConfig;
-/**
- * Returns the initial table sorting state for the specified entity list configuration.
- * @param entityConfig - Entity configuration.
- * @returns initial sorting state.
- */
-export declare function getDefaultSorting(entityConfig: EntityConfig): ColumnSort[];
 /**
  * Returns the entity config for the given entity list type.
  * @param entities - Entities config.

package/lib/config/utils.js

@@ -46,18 +46,6 @@ export function getDefaultEntityConfig() {
         route: "",
     };
 }
-/**
- * Returns the initial table sorting state for the specified entity list configuration.
- * @param entityConfig - Entity configuration.
- * @returns initial sorting state.
- */
-export function getDefaultSorting(entityConfig) {
-    const columnSort = entityConfig.list.defaultSort;
-    if (!columnSort) {
-        return [];
-    }
-    return [columnSort];
-}
 /**
  * Returns the entity config for the given entity list type.
  * @param entities - Entities config.

package/lib/hooks/authentication/auth/useAuthReducer.d.ts

@@ -0,0 +1,2 @@
+import { AuthContextProps } from "../../../providers/authentication/auth/types";
+export declare const useAuthReducer: (initialState?: import("../../../providers/authentication/auth/types").AuthState) => Omit<AuthContextProps, "service">;

package/lib/hooks/authentication/auth/useAuthReducer.js

@@ -0,0 +1,8 @@
+import { useReducer } from "react";
+import { DEFAULT_AUTH_STATE } from "../../../providers/authentication/auth/constants";
+import { authReducer } from "../../../providers/authentication/auth/reducer";
+import { initializer } from "../../../providers/authentication/common/utils";
+export const useAuthReducer = (initialState = DEFAULT_AUTH_STATE) => {
+    const [authState, authDispatch] = useReducer(authReducer, initialState, initializer);
+    return { authDispatch, authState };
+};

package/lib/hooks/authentication/authentication/useAuthenticationReducer.d.ts

@@ -0,0 +1,2 @@
+import { AuthenticationContextProps } from "../../../providers/authentication/authentication/types";
+export declare const useAuthenticationReducer: (initialState?: import("../../../providers/authentication/authentication/types").AuthenticationState) => AuthenticationContextProps;

package/lib/hooks/authentication/authentication/useAuthenticationReducer.js

@@ -0,0 +1,8 @@
+import { useReducer } from "react";
+import { DEFAULT_AUTHENTICATION_STATE } from "../../../providers/authentication/authentication/constants";
+import { authenticationReducer } from "../../../providers/authentication/authentication/reducer";
+import { initializer } from "../../../providers/authentication/common/utils";
+export const useAuthenticationReducer = (initialState = DEFAULT_AUTHENTICATION_STATE) => {
+    const [authenticationState, authenticationDispatch] = useReducer(authenticationReducer, initialState, initializer);
+    return { authenticationDispatch, authenticationState };
+};

package/lib/hooks/authentication/config/useAuthenticationConfig.d.ts

@@ -0,0 +1,6 @@
+import { AuthenticationConfig } from "../../../config/entities";
+/**
+ * Returns the authentication configuration.
+ * @returns authentication configuration.
+ */
+export declare const useAuthenticationConfig: () => AuthenticationConfig | undefined;

package/lib/hooks/authentication/config/useAuthenticationConfig.js

@@ -0,0 +1,9 @@
+import { useConfig } from "../../useConfig";
+/**
+ * Returns the authentication configuration.
+ * @returns authentication configuration.
+ */
+export const useAuthenticationConfig = () => {
+    const { config: { authentication }, } = useConfig();
+    return authentication;
+};

package/lib/hooks/authentication/credentials/useCredentialsReducer.d.ts

@@ -0,0 +1,2 @@
+import { CredentialsContextProps } from "../../../providers/authentication/credentials/types";
+export declare const useCredentialsReducer: () => CredentialsContextProps;

package/lib/hooks/authentication/credentials/useCredentialsReducer.js

@@ -0,0 +1,7 @@
+import { useReducer } from "react";
+import { DEFAULT_CREDENTIALS_STATE } from "../../../providers/authentication/credentials/constants";
+import { credentialsReducer } from "../../../providers/authentication/credentials/reducer";
+export const useCredentialsReducer = () => {
+    const [credentialsState, credentialsDispatch] = useReducer(credentialsReducer, undefined, () => DEFAULT_CREDENTIALS_STATE);
+    return { credentialsDispatch, credentialsState };
+};

package/lib/hooks/authentication/profile/types.d.ts

@@ -0,0 +1,5 @@
+import { Profile, UserProfile } from "../../../providers/authentication/authentication/types";
+export interface UseProfile {
+    isLoading: boolean;
+    profile: Profile<UserProfile>;
+}

package/lib/hooks/authentication/profile/types.js

@@ -0,0 +1 @@
+export {};

package/lib/hooks/authentication/profile/useProfile.d.ts

@@ -0,0 +1,6 @@
+import { UseProfile } from "./types";
+/**
+ * Profile hook - returns user profile.
+ * @returns user profile.
+ */
+export declare const useProfile: () => UseProfile;

package/lib/hooks/authentication/profile/useProfile.js

@@ -0,0 +1,15 @@
+import { useAuth } from "../../../providers/authentication/auth/hook";
+import { AUTH_STATUS } from "../../../providers/authentication/auth/types";
+import { useAuthentication } from "../../../providers/authentication/authentication/hook";
+/**
+ * Profile hook - returns user profile.
+ * @returns user profile.
+ */
+export const useProfile = () => {
+    const { authState: { status }, } = useAuth();
+    const { authenticationState: { profile }, } = useAuthentication();
+    return {
+        isLoading: status === AUTH_STATUS.PENDING,
+        profile: profile,
+    };
+};

package/lib/hooks/authentication/providers/types.d.ts

@@ -0,0 +1,6 @@
+import { OAuthProvider } from "../../../config/entities";
+import { ProviderId } from "../../../providers/authentication/common/types";
+export interface UseProviders {
+    findProvider: (providerId: ProviderId) => OAuthProvider | undefined;
+    providers: OAuthProvider[] | undefined;
+}

package/lib/hooks/authentication/providers/types.js

@@ -0,0 +1 @@
+export {};

package/lib/hooks/authentication/providers/useProviders.d.ts

@@ -0,0 +1,6 @@
+import { UseProviders } from "./types";
+/**
+ * Hook to facilitate the retrieval of authentication providers.
+ * @returns authentication providers and a function to find a provider by id.
+ */
+export declare const useProviders: () => UseProviders;

package/lib/hooks/authentication/providers/useProviders.js

@@ -0,0 +1,14 @@
+import { useCallback } from "react";
+import { useConfig } from "../../useConfig";
+/**
+ * Hook to facilitate the retrieval of authentication providers.
+ * @returns authentication providers and a function to find a provider by id.
+ */
+export const useProviders = () => {
+    const { config } = useConfig();
+    const providers = config.authentication?.providers;
+    const findProvider = useCallback((providerId) => {
+        return providers?.find(({ id }) => id === providerId);
+    }, [providers]);
+    return { findProvider, providers };
+};

package/lib/hooks/authentication/session/useSessionActive.d.ts

@@ -0,0 +1,12 @@
+import { AuthState } from "../../../providers/authentication/auth/types";
+import { AuthenticationState } from "../../../providers/authentication/authentication/types";
+export declare const useSessionActive: (authState: AuthState, authenticationState: AuthenticationState) => void;
+/**
+ * Finds the most recent route in the history that is not the login route and removes the inactivity timeout query parameter.
+ * The inactivity timeout query parameter is appended to a URL to indicate that a session has expired. This function iterates
+ * through the history of routes in reverse order, skipping any routes that lead to the login page, and returns the first route
+ * that isn't the login route with the inactivity timeout parameter removed.
+ * @param routes - An array of routes representing the navigation history, in order of navigation.
+ * @returns The most recent valid route without the inactivity timeout parameter, or `undefined` if no such route is found.
+ */
+export declare function transformRoute(routes: string[]): string | undefined;

package/lib/hooks/authentication/session/useSessionActive.js

@@ -0,0 +1,36 @@
+import Router from "next/router";
+import { useEffect } from "react";
+import { escapeRegExp } from "../../../common/utils";
+import { AUTH_STATUS, } from "../../../providers/authentication/auth/types";
+import { AUTHENTICATION_STATUS, } from "../../../providers/authentication/authentication/types";
+import { ROUTE } from "../../../routes/constants";
+import { useRouteHistory } from "../../useRouteHistory";
+import { INACTIVITY_PARAM } from "./useSessionTimeout";
+export const useSessionActive = (authState, authenticationState) => {
+    const { status: authStatus } = authState;
+    const { status: authenticationStatus } = authenticationState;
+    const { callbackUrl } = useRouteHistory(2);
+    const isReady = authenticationStatus === AUTHENTICATION_STATUS.SETTLED &&
+        authStatus === AUTH_STATUS.SETTLED;
+    useEffect(() => {
+        if (!isReady)
+            return;
+        Router.push(callbackUrl(transformRoute));
+    }, [callbackUrl, isReady]);
+};
+/**
+ * Finds the most recent route in the history that is not the login route and removes the inactivity timeout query parameter.
+ * The inactivity timeout query parameter is appended to a URL to indicate that a session has expired. This function iterates
+ * through the history of routes in reverse order, skipping any routes that lead to the login page, and returns the first route
+ * that isn't the login route with the inactivity timeout parameter removed.
+ * @param routes - An array of routes representing the navigation history, in order of navigation.
+ * @returns The most recent valid route without the inactivity timeout parameter, or `undefined` if no such route is found.
+ */
+export function transformRoute(routes) {
+    for (const route of routes) {
+        if (route === ROUTE.LOGIN) {
+            continue;
+        }
+        return route?.replace(new RegExp(`\\?${escapeRegExp(INACTIVITY_PARAM)}(?:$|[=&].*)`), "");
+    }
+}

package/lib/hooks/authentication/session/useSessionCallbackUrl.d.ts

@@ -0,0 +1,4 @@
+export interface UseSessionCallbackUrl {
+    callbackUrl: string | undefined;
+}
+export declare const useSessionCallbackUrl: () => UseSessionCallbackUrl;

package/lib/hooks/authentication/session/useSessionCallbackUrl.js

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { useRouteRoot } from "../../useRouteRoot";
+import { INACTIVITY_PARAM } from "./useSessionTimeout";
+export const useSessionCallbackUrl = () => {
+    const route = useRouteRoot();
+    const callbackUrl = useMemo(() => getUrl(route), [route]);
+    return { callbackUrl };
+};
+/**
+ * Returns the URL with the inactivity query parameter set to true.
+ * @param url - URL.
+ * @returns URL.
+ */
+function getUrl(url) {
+    if (typeof window === "undefined")
+        return;
+    const urlObj = new URL(url, window.location.origin);
+    urlObj.searchParams.set(INACTIVITY_PARAM, "true");
+    return urlObj.href;
+}

package/lib/hooks/authentication/session/useSessionIdleTimer.d.ts

@@ -0,0 +1,6 @@
+import { IIdleTimerProps } from "react-idle-timer/dist/types/IIdleTimerProps";
+/**
+ * Sets a session timeout that triggers when the user has been idle for the specified duration.
+ * @param idleTimerProps - The parameters for the session timeout.
+ */
+export declare const useSessionIdleTimer: (idleTimerProps: IIdleTimerProps) => void;

package/lib/hooks/authentication/session/useSessionIdleTimer.js

@@ -0,0 +1,8 @@
+import { useIdleTimer } from "react-idle-timer";
+/**
+ * Sets a session timeout that triggers when the user has been idle for the specified duration.
+ * @param idleTimerProps - The parameters for the session timeout.
+ */
+export const useSessionIdleTimer = (idleTimerProps) => {
+    useIdleTimer(idleTimerProps);
+};

package/lib/hooks/{useSessionTimeout.js → authentication/session/useSessionTimeout.js}

@@ -1,7 +1,7 @@
 import Router from "next/router";
 import { useCallback, useEffect, useState } from "react";
-import { useConfig } from "./useConfig";
-import { useLocation } from "./useLocation";
+import { useConfig } from "../../useConfig";
+import { useLocation } from "../../useLocation";
 export const INACTIVITY_PARAM = "inactivityTimeout";
 /**
  * Session timeout hook.

package/lib/hooks/{useAuthentication → authentication/terra}/useAuthenticationForm.d.ts

@@ -9,7 +9,6 @@ export declare enum ONBOARDING_STEP {
 }
 interface UseAuthenticationForm {
     isComplete: boolean;
-    isReady: boolean;
     onboardingStatusByStep: Map<ONBOARDING_STEP, OnboardingStatus>;
 }
 /**

package/lib/hooks/{useAuthentication → authentication/terra}/useAuthenticationForm.js

@@ -1,5 +1,4 @@
-import { AUTHENTICATION_STATUS, } from "./common/entities";
-import { useAuthentication } from "./useAuthentication";
+import { useTerraProfile } from "../../../providers/authentication/terra/hook";
 export var ONBOARDING_STEP;
 (function (ONBOARDING_STEP) {
     ONBOARDING_STEP[ONBOARDING_STEP["NIH_ACCOUNT"] = 3] = "NIH_ACCOUNT";
@@ -11,14 +10,12 @@ export var ONBOARDING_STEP;
  * @returns onboarding steps and corresponding status.
  */
 export const useAuthenticationForm = () => {
-    const authentication = useAuthentication();
-    const isReady = authentication.authenticationStatus === AUTHENTICATION_STATUS.COMPLETED;
-    const loginStatuses = concatLoginStatuses(authentication).filter(filterLoginStatus);
+    const terraProfile = useTerraProfile();
+    const loginStatuses = concatLoginStatuses(terraProfile).filter(filterLoginStatus);
     const onboardingStatusByStep = getOnboardingStatusByStep(loginStatuses);
     const isComplete = isAuthenticationComplete(onboardingStatusByStep);
     return {
         isComplete,
-        isReady,
         onboardingStatusByStep,
     };
 };
@@ -37,11 +34,11 @@ function isAuthenticationComplete(onboardingStatusByStep) {
 }
 /**
  * Returns all login statuses, ordered by onboarding step.
- * @param authentication - Authentication.
+ * @param terraProfile - Terra profile.
  * @returns login statuses.
  */
-function concatLoginStatuses(authentication) {
-    const { terraNIHProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus, } = authentication;
+function concatLoginStatuses(terraProfile) {
+    const { terraNIHProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus, } = terraProfile;
     return [
         terraProfileLoginStatus,
         terraTOSLoginStatus,

package/lib/hooks/{useAuthentication → authentication/terra}/useAuthenticationNIHExpiry.js

@@ -1,13 +1,12 @@
-import { REQUEST_STATUS } from "./common/entities";
-import { useAuthentication } from "./useAuthentication";
+import { useTerraProfile } from "../../../providers/authentication/terra/hook";
+import { REQUEST_STATUS } from "../../../providers/authentication/terra/hooks/common/entities";
 const WARNING_WINDOW_SECONDS = 60 * 60 * 24 * 5; // 5 days.
 /**
  * Handles authentication NIH expiry.
  * @returns NIH expiry status.
  */
 export const useAuthenticationNIHExpiry = () => {
-    const authentication = useAuthentication();
-    const { terraNIHProfileLoginStatus } = authentication;
+    const { terraNIHProfileLoginStatus } = useTerraProfile();
     const { requestStatus, response } = terraNIHProfileLoginStatus;
     const { linkExpireTime } = response || {};
     const isReady = requestStatus === REQUEST_STATUS.COMPLETED;

package/lib/hooks/authentication/token/types.d.ts

@@ -0,0 +1,4 @@
+import { Credentials } from "../../../providers/authentication/credentials/types";
+export interface UseToken {
+    token: Credentials;
+}

package/lib/hooks/authentication/token/types.js

@@ -0,0 +1 @@
+export {};

package/lib/hooks/authentication/token/useToken.d.ts

@@ -0,0 +1,2 @@
+import { UseToken } from "./types";
+export declare const useToken: () => UseToken;

package/lib/hooks/authentication/token/useToken.js

@@ -0,0 +1,5 @@
+import { useCredentials } from "../../../providers/authentication/credentials/hook";
+export const useToken = () => {
+    const { credentialsState: { credentials: token }, } = useCredentials();
+    return { token };
+};

package/lib/hooks/authentication/token/useTokenReducer.d.ts

@@ -0,0 +1,7 @@
+import { TokenContextProps } from "../../../providers/authentication/token/types";
+/**
+ * Token reducer: Manages the internal state of the token within the OAuth provider.
+ * This reducer handles the token locally until certain conditions are met.
+ * For releasing the token to the rest of the app, use the credentials reducer.
+ */
+export declare const useTokenReducer: () => TokenContextProps;

package/lib/hooks/authentication/token/useTokenReducer.js

@@ -0,0 +1,12 @@
+import { useReducer } from "react";
+import { DEFAULT_TOKEN_STATE } from "../../../providers/authentication/token/constants";
+import { tokenReducer } from "../../../providers/authentication/token/reducer";
+/**
+ * Token reducer: Manages the internal state of the token within the OAuth provider.
+ * This reducer handles the token locally until certain conditions are met.
+ * For releasing the token to the rest of the app, use the credentials reducer.
+ */
+export const useTokenReducer = () => {
+    const [tokenState, tokenDispatch] = useReducer(tokenReducer, undefined, () => DEFAULT_TOKEN_STATE);
+    return { tokenDispatch, tokenState };
+};

package/lib/hooks/useEntityList.js

@@ -3,8 +3,8 @@ import { transformAzulPagination, transformFilters, transformTermFacets, } from
 import { getEntityConfig } from "../config/utils";
 import { ExploreActionKind } from "../providers/exploreState";
 import { DEFAULT_PAGINATION_STATE } from "../providers/exploreState/initializer/constants";
+import { useToken } from "./authentication/token/useToken";
 import { useAsync } from "./useAsync";
-import { useAuthentication } from "./useAuthentication/useAuthentication";
 import { useConfig } from "./useConfig";
 import { useEntityService } from "./useEntityService";
 import { EXPLORE_MODE, useExploreMode } from "./useExploreMode";
@@ -18,7 +18,7 @@ import { useURLFilterParams } from "./useURLFilterParams";
  */
 export const useEntityList = (staticResponse) => {
     const { data: staticData, entityListType } = staticResponse;
-    const { token } = useAuthentication();
+    const { token } = useToken();
     const { config } = useConfig();
     const { apiPath } = getEntityConfig(config.entities, entityListType);
     const exploreMode = useExploreMode();

package/lib/hooks/useFetchEntity.js

@@ -1,8 +1,8 @@
 import { useRouter } from "next/router";
 import { useEffect, useMemo } from "react";
 import { PARAMS_INDEX_UUID } from "../common/constants";
+import { useToken } from "./authentication/token/useToken";
 import { useAsync } from "./useAsync";
-import { useAuthentication } from "./useAuthentication/useAuthentication";
 import { useEntityService } from "./useEntityService";
 import { EXPLORE_MODE, useExploreMode } from "./useExploreMode";
 import { useExploreState } from "./useExploreState";
@@ -14,7 +14,7 @@ import { useExploreState } from "./useExploreState";
  */
 export const useFetchEntity = (detailViewProps) => {
     const { data: staticData, entityListType } = detailViewProps || {};
-    const { token } = useAuthentication();
+    const { token } = useToken();
     const exploreMode = useExploreMode();
     const { exploreState } = useExploreState();
     const { catalogState } = exploreState;
@@ -24,7 +24,8 @@ export const useFetchEntity = (detailViewProps) => {
     const uuid = params?.[PARAMS_INDEX_UUID];
     const { data: response, isIdle, isLoading, run } = useAsync();
     const entityResponse = response || staticData;
-    const shouldFetchEntity = useMemo(() => isFetchRequired(exploreMode !== EXPLORE_MODE.CS_FETCH_CS_FILTERING, Boolean(token), Boolean(catalogState), Boolean(entityResponse)), [catalogState, entityResponse, exploreMode, token]);
+    const shouldFetchEntity = useMemo(() => isFetchRequired(exploreMode !== EXPLORE_MODE.CS_FETCH_CS_FILTERING, Boolean(token), // TODO(cc), note a fetch is required if the token is true, but is unable to re-fetch on logout when token is undefined! Page is required to reload!
+    Boolean(catalogState), Boolean(entityResponse)), [catalogState, entityResponse, exploreMode, token]);
     const isResponseLoading = shouldFetchEntity ? isIdle || isLoading : false;
     useEffect(() => {
         // Fetch entity if entity data originates from a request, and has not yet been requested.

package/lib/hooks/useFileManifest/useFetchFilesFacets.js

@@ -2,8 +2,8 @@ import { useEffect, useMemo } from "react";
 import { APIEndpoints, } from "../../apis/azul/common/entities";
 import { fetchEntitiesFromURL } from "../../entity/common/service";
 import { fetchQueryParams } from "../../utils/fetchQueryParams";
+import { useToken } from "../authentication/token/useToken";
 import { useAsync } from "../useAsync";
-import { useAuthentication } from "../useAuthentication/useAuthentication";
 import { useFetchRequestURL } from "../useFetchRequestURL";
 import { bindEntitySearchResultsResponse } from "./common/utils";
 /**
@@ -15,8 +15,7 @@ import { bindEntitySearchResultsResponse } from "./common/utils";
  * @returns files facets.
  */
 export const useFetchFilesFacets = (filters, catalog, searchParams, isEnabled) => {
-    // Grab token from authentication.
-    const { token } = useAuthentication();
+    const { token } = useToken();
     // Build request params.
     const requestParams = fetchQueryParams(filters, catalog, searchParams);
     // Build request URL.

package/lib/hooks/useFileManifest/useFetchSummary.js

@@ -2,8 +2,8 @@ import { useEffect } from "react";
 import { APIEndpoints, } from "../../apis/azul/common/entities";
 import { fetchSummaryFromURL } from "../../entity/api/service";
 import { fetchQueryParams } from "../../utils/fetchQueryParams";
+import { useToken } from "../authentication/token/useToken";
 import { useAsync } from "../useAsync";
-import { useAuthentication } from "../useAuthentication/useAuthentication";
 import { useFetchRequestURL } from "../useFetchRequestURL";
 /**
  * Fetch file summary from summary endpoint, to populate summary in download flows.
@@ -13,8 +13,7 @@ import { useFetchRequestURL } from "../useFetchRequestURL";
  * @returns file summaries.
  */
 export const useFetchSummary = (filters, catalog, isEnabled) => {
-    // Grab token from authentication.
-    const { token } = useAuthentication();
+    const { token } = useToken();
     // Build request params.
     const requestParams = fetchQueryParams(filters, catalog, undefined);
     // Build request URL.