@databiosphere/findable-ui 19.0.0 → 21.0.0

package/src/components/TableCreator/options/initialState/columnVisibility.ts

@@ -0,0 +1,22 @@
+import { RowData, TableOptions, VisibilityState } from "@tanstack/react-table";
+import { COLUMN_IDENTIFIER } from "../../../Table/common/columnIdentifier";
+
+/**
+ * Returns initial column visibility state.
+ * @param tableOptions - Table options.
+ * @returns column visibility state.
+ */
+export function getInitialColumnVisibilityState<T extends RowData>(
+  tableOptions?:
+    | Partial<TableOptions<T>>
+    | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>
+): VisibilityState {
+  const { initialState } = tableOptions || {};
+  const enableRowPosition = Boolean(tableOptions?.enableRowPosition);
+  const enableRowSelection = Boolean(tableOptions?.enableRowSelection);
+  return {
+    [COLUMN_IDENTIFIER.ROW_POSITION]: enableRowPosition,
+    [COLUMN_IDENTIFIER.ROW_SELECTION]: enableRowSelection,
+    ...initialState?.columnVisibility,
+  };
+}

package/src/components/TableCreator/options/initialState/hook.ts

@@ -0,0 +1,24 @@
+import {
+  InitialTableState,
+  RowData,
+  TableOptions,
+} from "@tanstack/react-table";
+import { useMemo } from "react";
+import { getInitialColumnVisibilityState } from "./columnVisibility";
+
+export function useInitialState<T extends RowData>(
+  tableOptions?:
+    | Partial<TableOptions<T>>
+    | Partial<Omit<TableOptions<T>, "data" | "columns" | "getCoreRowModel">>
+): InitialTableState {
+  const { initialState } = tableOptions || {};
+  const columnVisibility = getInitialColumnVisibilityState(tableOptions);
+
+  return useMemo(
+    () => ({
+      ...initialState,
+      columnVisibility,
+    }),
+    [initialState, columnVisibility]
+  );
+}

package/src/components/TableCreator/options/visibility/constants.ts

@@ -0,0 +1,5 @@
+import { VisibilityOptions } from "@tanstack/react-table";
+
+export const VISIBILITY_OPTIONS: VisibilityOptions = {
+  enableHiding: true,
+};

package/src/components/TableCreator/options/visibility/hook.ts

@@ -0,0 +1,22 @@
+import {
+  Updater,
+  VisibilityOptions,
+  VisibilityState,
+} from "@tanstack/react-table";
+import { useCallback } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { updateVisibility } from "../../../../providers/exploreState/actions/updateVisibility/dispatch";
+import { VISIBILITY_OPTIONS } from "./constants";
+
+export function useVisibilityOptions(): VisibilityOptions {
+  const { exploreDispatch } = useExploreState();
+
+  const onColumnVisibilityChange = useCallback(
+    (updaterOrValue: Updater<VisibilityState>): void => {
+      exploreDispatch(updateVisibility({ updaterOrValue }));
+    },
+    [exploreDispatch]
+  );
+
+  return { ...VISIBILITY_OPTIONS, onColumnVisibilityChange };
+}

package/src/components/TableCreator/tableCreator.tsx

@@ -2,7 +2,6 @@ import {
   CellContext,
   ColumnDef,
   CoreOptions,
-  HeaderContext,
   RowData,
 } from "@tanstack/react-table";
 import React, { useMemo } from "react";
@@ -11,15 +10,8 @@ import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
 import { COLUMN_DEF } from "../Table/common/columnDef";
-import {
-  arrIncludesSome,
-  getInitialState,
-  sortingFn,
-} from "../Table/common/utils";
-import { RowSelectionCell } from "../Table/components/TableCell/components/RowSelectionCell/rowSelectionCell";
-import { HeadSelectionCell } from "../Table/components/TableHead/components/HeadSelectionCell/headSelectionCell";
+import { arrIncludesSome, sortingFn } from "../Table/common/utils";
 import { Table } from "../Table/table";
-import { COLUMN_CONFIGS } from "./common/constants";
 import { buildBaseColumnDef } from "./common/utils";
 import { useTableOptions } from "./options/hook";
 import { TableCreator as TableCreatorContainer } from "./tableCreator.styles";
@@ -45,16 +37,6 @@ const createCell = <T extends RowData = RowData, TData = unknown>(
     );
   };
 
-const createHeaderSelectionCell = <T extends RowData>() =>
-  function CellCreator({ table }: HeaderContext<T, unknown>): JSX.Element {
-    return <HeadSelectionCell tableInstance={table} />;
-  };
-
-const createRowSelectionCell = <T extends RowData>() =>
-  function CellCreator({ row }: CellContext<T, unknown>): JSX.Element {
-    return <RowSelectionCell row={row} />;
-  };
-
 export const TableCreator = <T extends RowData>({
   columns,
   getRowId,
@@ -78,17 +60,12 @@ export const TableCreator = <T extends RowData>({
         [
           /* Initialize column definitions with the "row position" column */
           COLUMN_DEF.ROW_POSITION,
-          /* Initialize column definitions with the "select" column */
-          {
-            ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),
-            cell: createRowSelectionCell(),
-            header: createHeaderSelectionCell(),
-          },
+          /* Initialize column definitions with the "row selection" column */
+          COLUMN_DEF.ROW_SELECTION,
         ] as ColumnDef<T>[]
       ),
     [columns]
   );
-  const initialState = getInitialState(columns);
   return (
     <TableCreatorContainer>
       <Loading
@@ -99,7 +76,6 @@ export const TableCreator = <T extends RowData>({
       <Table<T>
         columns={columnDefs}
         getRowId={getRowId}
-        initialState={initialState}
         items={items}
         listView={listView}
         loading={loading}

package/src/components/common/Banner/components/SessionTimeout/sessionTimeout.tsx

@@ -1,6 +1,6 @@
 import { AlertProps, Fade } from "@mui/material";
 import React from "react";
-import { useSessionTimeout } from "../../../../../hooks/useSessionTimeout";
+import { useSessionTimeout } from "../../../../../hooks/authentication/session/useSessionTimeout";
 import { BaseComponentProps, ContentProps } from "../../../../types";
 import { Banner } from "../../banner";
 

package/src/components/common/CustomIcon/common/entities.ts

@@ -1,6 +1,3 @@
 import { SvgIconProps } from "@mui/material";
 
-export interface CustomSVGIconProps extends SvgIconProps {
-  fontSize?: SvgIconProps["fontSize"];
-  viewBox?: string;
-}
+export type CustomSVGIconProps = SvgIconProps;

package/src/components/common/CustomIcon/components/GoogleIcon/googleIcon.tsx

@@ -1,6 +1,5 @@
-import { SvgIcon } from "@mui/material";
+import { SvgIcon, SvgIconProps } from "@mui/material";
 import React from "react";
-import { CustomSVGIconProps } from "../../common/entities";
 
 /**
  * Custom Google logo icon.
@@ -9,8 +8,8 @@ import { CustomSVGIconProps } from "../../common/entities";
 export const GoogleIcon = ({
   fontSize = "xsmall",
   viewBox = "0 0 20 20",
-  ...props /* Spread props to allow for Mui SvgIconProps specific prop overrides e.g. "htmlColor". */
-}: CustomSVGIconProps): JSX.Element => {
+  ...props
+}: SvgIconProps): JSX.Element => {
   return (
     <SvgIcon fontSize={fontSize} viewBox={viewBox} {...props}>
       <path

package/src/config/entities.ts

@@ -15,7 +15,9 @@ 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";
@@ -33,14 +35,19 @@ 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.
  */
@@ -98,13 +105,13 @@ export type ColumnConfig<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This config model is part of a generic array
   C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = any
 > = Omit<ColumnDef<T, TValue>, "enableMultiSort"> & {
+  // @deprecated - Use `meta.columnPinned` instead.
   columnPinned?: boolean; // Column is pinned to the top when table rows are collapsable.
-  columnVisible?: boolean; // Column is visible. Default is "true".
   componentConfig: ComponentConfig<C, T>;
-  disableHiding?: boolean; // Disables hiding of column. Column is unavailable for "Edit Columns" functionality when "true".
   header: string;
   id: string; // The unique identifier for the column.
   meta?: ColumnMeta<T, unknown>;
+  // @deprecated - Use `meta.width` instead.
   width: GridTrackSize;
 };
 
@@ -216,15 +223,6 @@ export type GetIdFunction<T> = (detail: T) => string;
  */
 export type GetTitleFunction<T> = (detail?: T) => string | undefined;
 
-/**
- * Google GIS authentication configuration.
- */
-export interface GoogleGISAuthConfig {
-  clientId: string;
-  googleProfileEndpoint: string;
-  scope: string;
-}
-
 /**
  * Grid track configuration.
  */
@@ -260,7 +258,6 @@ export type GridTrackSize =
  */
 export interface ListConfig<T extends RowData> {
   columns: ColumnConfig<T>[];
-  defaultSort?: ColumnSort; // Establishes initial table state "sorting" state.
   tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">; // Additional TanStack Table's options.
 }
 
@@ -270,7 +267,6 @@ export interface ListConfig<T extends RowData> {
 export interface ListViewConfig {
   disablePagination?: boolean;
   enableDownload?: boolean;
-  enableRowPreview?: boolean;
   enableTab?: boolean;
   listHero?: ComponentsConfig;
   rowPreviewView?: ComponentsConfig; // Row preview view is expected to be a modal or drawer or similar.
@@ -278,12 +274,15 @@ export interface ListViewConfig {
   subTitleHero?: ComponentsConfig;
 }
 
-/**
- * Interface to define the authentication login notice component.
- */
-export interface LoginNotice {
-  conditionsUrl: string;
-  privacyUrl: string;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Use of `any` is intentional to allow for flexibility in the model.
+export interface OAuthProvider<P = any> {
+  authorization: { params: { scope: string } };
+  clientId: string;
+  icon: ReactNode;
+  id: ProviderId;
+  name: string;
+  profile: (profile: P) => UserProfile;
+  userinfo: string;
 }
 
 /**
@@ -425,12 +424,6 @@ export interface TabConfig {
   tabName?: string; // Used by the entity view to generate a title for the <Head> component; when label is not typed string.
 }
 
-export interface TerraAuthConfig {
-  termsOfServiceEndpoint: string;
-  terraNIHProfileEndpoint?: string;
-  terraProfileEndpoint: string;
-}
-
 /**
  * Theme options function.
  * Defines theme options, and provides a reference to the specified theme.
@@ -441,7 +434,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/src/hooks/authentication/auth/useAuthReducer.ts

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

package/src/hooks/authentication/authentication/useAuthenticationReducer.ts

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

package/src/hooks/authentication/config/useAuthenticationConfig.ts

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

package/src/hooks/authentication/credentials/useCredentialsReducer.ts

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

package/src/hooks/authentication/profile/types.ts

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

package/src/hooks/authentication/profile/useProfile.ts

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

package/src/hooks/authentication/providers/types.ts

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

package/src/hooks/authentication/providers/useProviders.ts

@@ -0,0 +1,23 @@
+import { useCallback } from "react";
+import { ProviderId } from "../../../providers/authentication/common/types";
+import { useConfig } from "../../useConfig";
+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 const useProviders = (): UseProviders => {
+  const { config } = useConfig();
+  const providers = config.authentication?.providers;
+
+  const findProvider = useCallback(
+    (providerId: ProviderId) => {
+      return providers?.find(({ id }) => id === providerId);
+    },
+    [providers]
+  );
+
+  return { findProvider, providers };
+};

package/src/hooks/authentication/session/useSessionActive.ts

@@ -0,0 +1,51 @@
+import Router from "next/router";
+import { useEffect } from "react";
+import { escapeRegExp } from "../../../common/utils";
+import {
+  AUTH_STATUS,
+  AuthState,
+} from "../../../providers/authentication/auth/types";
+import {
+  AUTHENTICATION_STATUS,
+  AuthenticationState,
+} from "../../../providers/authentication/authentication/types";
+import { ROUTE } from "../../../routes/constants";
+import { useRouteHistory } from "../../useRouteHistory";
+import { INACTIVITY_PARAM } from "./useSessionTimeout";
+
+export const useSessionActive = (
+  authState: AuthState,
+  authenticationState: AuthenticationState
+): void => {
+  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: string[]): string | undefined {
+  for (const route of routes) {
+    if (route === ROUTE.LOGIN) {
+      continue;
+    }
+    return route?.replace(
+      new RegExp(`\\?${escapeRegExp(INACTIVITY_PARAM)}(?:$|[=&].*)`),
+      ""
+    );
+  }
+}

package/src/hooks/authentication/session/useSessionCallbackUrl.ts

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+import { useRouteRoot } from "../../useRouteRoot";
+import { INACTIVITY_PARAM } from "./useSessionTimeout";
+
+export interface UseSessionCallbackUrl {
+  callbackUrl: string | undefined;
+}
+
+export const useSessionCallbackUrl = (): 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: string): string | undefined {
+  if (typeof window === "undefined") return;
+  const urlObj = new URL(url, window.location.origin);
+  urlObj.searchParams.set(INACTIVITY_PARAM, "true");
+  return urlObj.href;
+}

package/src/hooks/authentication/session/useSessionIdleTimer.ts

@@ -0,0 +1,10 @@
+import { useIdleTimer } from "react-idle-timer";
+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 const useSessionIdleTimer = (idleTimerProps: IIdleTimerProps): void => {
+  useIdleTimer(idleTimerProps);
+};

package/src/hooks/{useSessionTimeout.ts → authentication/session/useSessionTimeout.ts}

@@ -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";
 

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

@@ -1,10 +1,9 @@
-import { AuthContextProps } from "../../providers/authentication";
+import { useTerraProfile } from "../../../providers/authentication/terra/hook";
 import {
-  AUTHENTICATION_STATUS,
   LoginResponse,
   LoginStatus,
-} from "./common/entities";
-import { useAuthentication } from "./useAuthentication";
+} from "../../../providers/authentication/terra/hooks/common/entities";
+import { TerraProfileContextProps } from "../../../providers/authentication/terra/types";
 
 export interface OnboardingStatus {
   active: boolean;
@@ -19,7 +18,6 @@ export enum ONBOARDING_STEP {
 
 interface UseAuthenticationForm {
   isComplete: boolean;
-  isReady: boolean;
   onboardingStatusByStep: Map<ONBOARDING_STEP, OnboardingStatus>;
 }
 
@@ -28,16 +26,13 @@ interface UseAuthenticationForm {
  * @returns onboarding steps and corresponding status.
  */
 export const useAuthenticationForm = (): UseAuthenticationForm => {
-  const authentication = useAuthentication();
-  const isReady =
-    authentication.authenticationStatus === AUTHENTICATION_STATUS.COMPLETED;
+  const terraProfile = useTerraProfile();
   const loginStatuses =
-    concatLoginStatuses(authentication).filter(filterLoginStatus);
+    concatLoginStatuses(terraProfile).filter(filterLoginStatus);
   const onboardingStatusByStep = getOnboardingStatusByStep(loginStatuses);
   const isComplete = isAuthenticationComplete(onboardingStatusByStep);
   return {
     isComplete,
-    isReady,
     onboardingStatusByStep,
   };
 };
@@ -60,17 +55,17 @@ function isAuthenticationComplete(
 
 /**
  * Returns all login statuses, ordered by onboarding step.
- * @param authentication - Authentication.
+ * @param terraProfile - Terra profile.
  * @returns login statuses.
  */
 function concatLoginStatuses(
-  authentication: AuthContextProps
+  terraProfile: TerraProfileContextProps
 ): LoginStatus<LoginResponse>[] {
   const {
     terraNIHProfileLoginStatus,
     terraProfileLoginStatus,
     terraTOSLoginStatus,
-  } = authentication;
+  } = terraProfile;
   return [
     terraProfileLoginStatus,
     terraTOSLoginStatus,

package/src/hooks/{useAuthentication → authentication/terra}/useAuthenticationNIHExpiry.ts

@@ -1,5 +1,5 @@
-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.
 
@@ -15,8 +15,7 @@ interface UseAuthenticationNIHExpiry {
  * @returns NIH expiry status.
  */
 export const useAuthenticationNIHExpiry = (): UseAuthenticationNIHExpiry => {
-  const authentication = useAuthentication();
-  const { terraNIHProfileLoginStatus } = authentication;
+  const { terraNIHProfileLoginStatus } = useTerraProfile();
   const { requestStatus, response } = terraNIHProfileLoginStatus;
   const { linkExpireTime } = response || {};
   const isReady = requestStatus === REQUEST_STATUS.COMPLETED;

package/src/hooks/authentication/token/types.ts

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

package/src/hooks/authentication/token/useToken.ts

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

package/src/hooks/authentication/token/useTokenReducer.ts

@@ -0,0 +1,19 @@
+import { useReducer } from "react";
+import { DEFAULT_TOKEN_STATE } from "../../../providers/authentication/token/constants";
+import { tokenReducer } from "../../../providers/authentication/token/reducer";
+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 const useTokenReducer = (): TokenContextProps => {
+  const [tokenState, tokenDispatch] = useReducer(
+    tokenReducer,
+    undefined,
+    () => DEFAULT_TOKEN_STATE
+  );
+  return { tokenDispatch, tokenState };
+};