From 5f52bd03c5753a581ae149183e19b6918d0eb15c Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Mon, 8 Apr 2024 08:49:43 -0400
Subject: [PATCH 01/11] feat: [M3-7921] - Refresh Proxy User Session

---
 packages/manager/src/MainContent.tsx          | 198 +++++++++--------
 .../src/context/sessionExpirationContext.ts   |   7 +
 .../src/features/Account/AccountLanding.tsx   |  14 +-
 .../features/Account/SwitchAccountDrawer.tsx  | 179 ++++++++-------
 .../SwitchAccounts/ChildAccountList.tsx       |   6 +-
 .../SessionExpirationDialog.test.tsx          |  93 ++++++++
 .../SessionExpirationDialog.tsx               | 209 ++++++++++++++++++
 ...t.tsx => useIsParentTokenExpired.test.tsx} |  10 +-
 ...gement.tsx => useIsParentTokenExpired.tsx} |   4 +-
 .../useParentChildAuthentication.tsx          |  73 ++++++
 .../features/Account/SwitchAccounts/utils.ts  | 104 ++++++---
 .../manager/src/features/Account/utils.ts     |  90 +-------
 .../GlobalNotifications.tsx                   |  20 +-
 .../features/TopMenu/UserMenu/UserMenu.tsx    |  19 +-
 .../src/hooks/usePendingRevocationToken.ts    |   2 +-
 .../manager/src/queries/account/account.ts    |  10 +-
 16 files changed, 692 insertions(+), 346 deletions(-)
 create mode 100644 packages/manager/src/context/sessionExpirationContext.ts
 create mode 100644 packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx
 create mode 100644 packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
 rename packages/manager/src/features/Account/SwitchAccounts/{useParentTokenManagement.test.tsx => useIsParentTokenExpired.test.tsx} (82%)
 rename packages/manager/src/features/Account/SwitchAccounts/{useParentTokenManagement.tsx => useIsParentTokenExpired.tsx} (77%)
 create mode 100644 packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx

diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index 46bd8cf1a07..0e4fe5db4d2 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/packages/manager/src/MainContent.tsx
@@ -1,5 +1,5 @@
-import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
@@ -30,6 +30,7 @@ import { isFeatureEnabled } from 'src/utilities/accountCapabilities';
 
 import { ENABLE_MAINTENANCE_MODE } from './constants';
 import { complianceUpdateContext } from './context/complianceUpdateContext';
+import { sessionExpirationContext } from './context/sessionExpirationContext';
 import { switchAccountSessionContext } from './context/switchAccountSessionContext';
 import { FlagSet } from './featureFlags';
 import { useIsACLBEnabled } from './features/LoadBalancers/utils';
@@ -199,6 +200,11 @@ export const MainContent = () => {
     isOpen: false,
   });
 
+  const SessionExpirationProvider = sessionExpirationContext.Provider;
+  const sessionExpirationContextValue = useDialogContext({
+    isOpen: false,
+  });
+
   const [menuIsOpen, toggleMenu] = React.useState<boolean>(false);
   const {
     _isManagedAccount,
@@ -295,105 +301,107 @@ export const MainContent = () => {
    */
   return (
     <div className={classes.appFrame}>
-      <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
-        <ComplianceUpdateProvider value={complianceUpdateContextValue}>
-          <NotificationProvider value={contextValue}>
-            <>
-              {shouldDisplayMainContentBanner ? (
-                <MainContentBanner
-                  bannerKey={flags.mainContentBanner?.key ?? ''}
-                  bannerText={flags.mainContentBanner?.text ?? ''}
-                  linkText={flags.mainContentBanner?.link?.text ?? ''}
-                  onClose={() => setBannerDismissed(true)}
-                  url={flags.mainContentBanner?.link?.url ?? ''}
-                />
-              ) : null}
-              <SideMenu
-                closeMenu={() => toggleMenu(false)}
-                collapse={desktopMenuIsOpen || false}
-                open={menuIsOpen}
-              />
-              <div
-                className={cx(classes.content, {
-                  [classes.fullWidthContent]:
-                    desktopMenuIsOpen ||
-                    (desktopMenuIsOpen && desktopMenuIsOpen === true),
-                })}
-              >
-                <TopMenu
-                  desktopMenuToggle={desktopMenuToggle}
-                  isSideMenuOpen={!desktopMenuIsOpen}
-                  openSideMenu={() => toggleMenu(true)}
-                  username={username}
+      <SessionExpirationProvider value={sessionExpirationContextValue}>
+        <SwitchAccountSessionProvider value={switchAccountSessionContextValue}>
+          <ComplianceUpdateProvider value={complianceUpdateContextValue}>
+            <NotificationProvider value={contextValue}>
+              <>
+                {shouldDisplayMainContentBanner ? (
+                  <MainContentBanner
+                    bannerKey={flags.mainContentBanner?.key ?? ''}
+                    bannerText={flags.mainContentBanner?.text ?? ''}
+                    linkText={flags.mainContentBanner?.link?.text ?? ''}
+                    onClose={() => setBannerDismissed(true)}
+                    url={flags.mainContentBanner?.link?.url ?? ''}
+                  />
+                ) : null}
+                <SideMenu
+                  closeMenu={() => toggleMenu(false)}
+                  collapse={desktopMenuIsOpen || false}
+                  open={menuIsOpen}
                 />
-                <main
-                  className={classes.cmrWrapper}
-                  id="main-content"
-                  role="main"
+                <div
+                  className={cx(classes.content, {
+                    [classes.fullWidthContent]:
+                      desktopMenuIsOpen ||
+                      (desktopMenuIsOpen && desktopMenuIsOpen === true),
+                  })}
                 >
-                  <Grid className={classes.grid} container spacing={0}>
-                    <Grid className={cx(classes.switchWrapper, 'p0')}>
-                      <GlobalNotifications />
-                      <React.Suspense fallback={<SuspenseLoader />}>
-                        <Switch>
-                          <Route component={LinodesRoutes} path="/linodes" />
-                          <Route
-                            component={PlacementGroups}
-                            path="/placement-groups"
-                          />
-                          <Route component={Volumes} path="/volumes" />
-                          <Redirect path="/volumes*" to="/volumes" />
-                          {isACLBEnabled && (
+                  <TopMenu
+                    desktopMenuToggle={desktopMenuToggle}
+                    isSideMenuOpen={!desktopMenuIsOpen}
+                    openSideMenu={() => toggleMenu(true)}
+                    username={username}
+                  />
+                  <main
+                    className={classes.cmrWrapper}
+                    id="main-content"
+                    role="main"
+                  >
+                    <Grid className={classes.grid} container spacing={0}>
+                      <Grid className={cx(classes.switchWrapper, 'p0')}>
+                        <GlobalNotifications />
+                        <React.Suspense fallback={<SuspenseLoader />}>
+                          <Switch>
+                            <Route component={LinodesRoutes} path="/linodes" />
+                            <Route
+                              component={PlacementGroups}
+                              path="/placement-groups"
+                            />
+                            <Route component={Volumes} path="/volumes" />
+                            <Redirect path="/volumes*" to="/volumes" />
+                            {isACLBEnabled && (
+                              <Route
+                                component={LoadBalancers}
+                                path="/loadbalancer*"
+                              />
+                            )}
+                            <Route
+                              component={NodeBalancers}
+                              path="/nodebalancers"
+                            />
+                            <Route component={Domains} path="/domains" />
+                            <Route component={Managed} path="/managed" />
+                            <Route component={Longview} path="/longview" />
+                            <Route component={Images} path="/images" />
+                            <Route
+                              component={StackScripts}
+                              path="/stackscripts"
+                            />
                             <Route
-                              component={LoadBalancers}
-                              path="/loadbalancer*"
+                              component={ObjectStorage}
+                              path="/object-storage"
                             />
-                          )}
-                          <Route
-                            component={NodeBalancers}
-                            path="/nodebalancers"
-                          />
-                          <Route component={Domains} path="/domains" />
-                          <Route component={Managed} path="/managed" />
-                          <Route component={Longview} path="/longview" />
-                          <Route component={Images} path="/images" />
-                          <Route
-                            component={StackScripts}
-                            path="/stackscripts"
-                          />
-                          <Route
-                            component={ObjectStorage}
-                            path="/object-storage"
-                          />
-                          <Route component={Kubernetes} path="/kubernetes" />
-                          <Route component={Account} path="/account" />
-                          <Route component={Profile} path="/profile" />
-                          <Route component={Help} path="/support" />
-                          <Route component={SearchLanding} path="/search" />
-                          <Route component={EventsLanding} path="/events" />
-                          <Route component={Firewalls} path="/firewalls" />
-                          {showDatabases && (
-                            <Route component={Databases} path="/databases" />
-                          )}
-                          {flags.selfServeBetas && (
-                            <Route component={BetaRoutes} path="/betas" />
-                          )}
-                          <Route component={VPC} path="/vpcs" />
-                          <Redirect exact from="/" to={defaultRoot} />
-                          {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
-                          <Redirect from="/dashboard" to={defaultRoot} />
-                          <Route component={NotFound} />
-                        </Switch>
-                      </React.Suspense>
+                            <Route component={Kubernetes} path="/kubernetes" />
+                            <Route component={Account} path="/account" />
+                            <Route component={Profile} path="/profile" />
+                            <Route component={Help} path="/support" />
+                            <Route component={SearchLanding} path="/search" />
+                            <Route component={EventsLanding} path="/events" />
+                            <Route component={Firewalls} path="/firewalls" />
+                            {showDatabases && (
+                              <Route component={Databases} path="/databases" />
+                            )}
+                            {flags.selfServeBetas && (
+                              <Route component={BetaRoutes} path="/betas" />
+                            )}
+                            <Route component={VPC} path="/vpcs" />
+                            <Redirect exact from="/" to={defaultRoot} />
+                            {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
+                            <Redirect from="/dashboard" to={defaultRoot} />
+                            <Route component={NotFound} />
+                          </Switch>
+                        </React.Suspense>
+                      </Grid>
                     </Grid>
-                  </Grid>
-                </main>
-              </div>
-            </>
-          </NotificationProvider>
-          <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
-        </ComplianceUpdateProvider>
-      </SwitchAccountSessionProvider>
+                  </main>
+                </div>
+              </>
+            </NotificationProvider>
+            <Footer desktopMenuIsOpen={desktopMenuIsOpen} />
+          </ComplianceUpdateProvider>
+        </SwitchAccountSessionProvider>
+      </SessionExpirationProvider>
     </div>
   );
 };
diff --git a/packages/manager/src/context/sessionExpirationContext.ts b/packages/manager/src/context/sessionExpirationContext.ts
new file mode 100644
index 00000000000..ece4706a39d
--- /dev/null
+++ b/packages/manager/src/context/sessionExpirationContext.ts
@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import { DialogContextProps, defaultContext } from './useDialogContext';
+
+export const sessionExpirationContext = React.createContext<DialogContextProps>(
+  defaultContext
+);
diff --git a/packages/manager/src/features/Account/AccountLanding.tsx b/packages/manager/src/features/Account/AccountLanding.tsx
index 0a3e5069d20..e8c3c93e104 100644
--- a/packages/manager/src/features/Account/AccountLanding.tsx
+++ b/packages/manager/src/features/Account/AccountLanding.tsx
@@ -12,10 +12,9 @@ import { TabLinkList } from 'src/components/Tabs/TabLinkList';
 import { TabPanels } from 'src/components/Tabs/TabPanels';
 import { Tabs } from 'src/components/Tabs/Tabs';
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
-import { useParentTokenManagement } from 'src/features/Account/SwitchAccounts/useParentTokenManagement';
+import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { useFlags } from 'src/hooks/useFlags';
-import { usePendingRevocationToken } from 'src/hooks/usePendingRevocationToken';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useProfile } from 'src/queries/profile';
@@ -56,10 +55,6 @@ const AccountLanding = () => {
   const flags = useFlags();
   const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
   const sessionContext = React.useContext(switchAccountSessionContext);
-  const {
-    getPendingRevocationToken,
-    pendingRevocationToken,
-  } = usePendingRevocationToken();
 
   const isAkamaiAccount = account?.billing_source === 'akamai';
   const isProxyUser = profile?.user_type === 'proxy';
@@ -76,7 +71,7 @@ const AccountLanding = () => {
     globalGrantType: 'child_account_access',
   });
 
-  const { isParentTokenExpired } = useParentTokenManagement({ isProxyUser });
+  const { isParentTokenExpired } = useIsParentTokenExpired({ isProxyUser });
 
   const tabs = [
     {
@@ -118,10 +113,6 @@ const AccountLanding = () => {
       });
     }
 
-    if (isProxyUser) {
-      getPendingRevocationToken();
-    }
-
     setIsDrawerOpen(true);
   };
 
@@ -223,7 +214,6 @@ const AccountLanding = () => {
       <SwitchAccountDrawer
         onClose={() => setIsDrawerOpen(false)}
         open={isDrawerOpen}
-        proxyToken={pendingRevocationToken}
         userType={profile?.user_type}
       />
     </React.Fragment>
diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
index e154d169287..09ecfb2a259 100644
--- a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
+++ b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
@@ -1,73 +1,73 @@
-import { useSnackbar } from 'notistack';
 import React from 'react';
 
+import { Box } from 'src/components/Box';
 import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
+import { CircleProgress } from 'src/components/CircleProgress';
 import { Drawer } from 'src/components/Drawer';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { PARENT_USER_SESSION_EXPIRED } from 'src/features/Account/constants';
+import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication';
 import {
-  isParentTokenValid,
-  updateCurrentTokenBasedOnUserType,
-} from 'src/features/Account/utils';
+  getPersonalAccessTokenForRevocation,
+  setTokenInLocalStorage,
+} from 'src/features/Account/SwitchAccounts/utils';
 import { useCurrentToken } from 'src/hooks/useAuthentication';
-import { useRevokePersonalAccessTokenMutation } from 'src/queries/tokens';
+import { usePersonalAccessTokensQuery } from 'src/queries/tokens';
 import { sendSwitchToParentAccountEvent } from 'src/utilities/analytics';
 import { getStorage, setStorage } from 'src/utilities/storage';
 
 import { ChildAccountList } from './SwitchAccounts/ChildAccountList';
-import {
-  updateParentTokenInLocalStorage,
-  updateProxyTokenInLocalStorage,
-} from './SwitchAccounts/utils';
+import { updateParentTokenInLocalStorage } from './SwitchAccounts/utils';
 
-import type { APIError, Token, UserType } from '@linode/api-v4';
+import type { APIError, UserType } from '@linode/api-v4';
 import type { State as AuthState } from 'src/store/authentication';
 
 interface Props {
   onClose: () => void;
   open: boolean;
-  proxyToken?: Token;
   userType: UserType | undefined;
 }
 
-export const SwitchAccountDrawer = (props: Props) => {
-  const { onClose, open, proxyToken, userType } = props;
-  const proxyTokenLabel = proxyToken?.label;
-  const isProxyUser = userType === 'proxy';
+interface handleSwitchToChildAccountProps {
+  currentTokenWithBearer?: AuthState['token'];
+  euuid: string;
+  event: React.MouseEvent<HTMLElement>;
+  onClose: (e: React.SyntheticEvent<HTMLElement>) => void;
+  userType: UserType | undefined;
+}
 
+export const SwitchAccountDrawer = ({ onClose, open, userType }: Props) => {
+  const [isSubmitting, setSubmitting] = React.useState<boolean>(false);
   const [isParentTokenError, setIsParentTokenError] = React.useState<
     APIError[]
   >([]);
-  const [isProxyTokenError, setIsProxyTokenError] = React.useState<APIError[]>(
-    []
-  );
-
-  const { mutateAsync: revokeToken } = useRevokePersonalAccessTokenMutation(
-    proxyToken?.id ?? -1
-  );
-  const { enqueueSnackbar } = useSnackbar();
-  const currentTokenWithBearer = useCurrentToken() ?? '';
 
+  const isProxyUser = userType === 'proxy';
   const currentParentTokenWithBearer =
     getStorage('authentication/parent_token/token') ?? '';
 
-  const handleProxyTokenRevocation = React.useCallback(async () => {
-    try {
-      await revokeToken();
-      enqueueSnackbar(`Successfully revoked ${proxyTokenLabel}.`, {
-        variant: 'success',
-      });
-    } catch (error) {
-      enqueueSnackbar(`Failed to revoke ${proxyTokenLabel}.`, {
-        variant: 'error',
-      });
-    }
-  }, [enqueueSnackbar, proxyTokenLabel, revokeToken]);
+  const { data: personalAccessTokens } = usePersonalAccessTokensQuery();
 
-  const refreshPage = React.useCallback(() => {
-    location.reload();
-  }, []);
+  const currentTokenWithBearer = useCurrentToken() ?? '';
+
+  const pendingRevocationToken = getPersonalAccessTokenForRevocation(
+    personalAccessTokens?.data,
+    currentTokenWithBearer
+  );
+
+  const {
+    createToken,
+    createTokenError,
+    createTokenLoading,
+    revokeToken,
+    updateCurrentToken,
+    validateParentToken,
+  } = useParentChildAuthentication({
+    tokenIdToRevoke: pendingRevocationToken?.id ?? -1,
+  });
+
+  const createTokenErrorReason = createTokenError?.[0]?.reason;
 
   const handleSwitchToChildAccount = React.useCallback(
     async ({
@@ -76,44 +76,44 @@ export const SwitchAccountDrawer = (props: Props) => {
       event,
       onClose,
       userType,
-    }: {
-      currentTokenWithBearer?: AuthState['token'];
-      euuid: string;
-      event: React.MouseEvent<HTMLElement>;
-      onClose: (e: React.SyntheticEvent<HTMLElement>) => void;
-      userType: UserType | undefined;
-    }) => {
+    }: handleSwitchToChildAccountProps) => {
       const isProxyUser = userType === 'proxy';
 
-      if (isProxyUser) {
-        // Revoke proxy token before switching accounts.
-        await handleProxyTokenRevocation();
-      } else {
-        // Before switching to a child account, update the parent token in local storage.
-        updateParentTokenInLocalStorage({ currentTokenWithBearer });
-      }
-
       try {
-        await updateProxyTokenInLocalStorage({
-          euuid,
-          token: isProxyUser
-            ? getStorage('authentication/parent_token/token')
-            : currentTokenWithBearer,
-          userType: isProxyUser ? 'proxy' : 'parent',
+        if (isProxyUser) {
+          try {
+            // Revoke proxy token before switching accounts.
+            await revokeToken();
+          } catch (error) {
+            // Swallow error: Allow user account switching; tokens expire naturally.
+          }
+        } else {
+          // Before switching to a child account, update the parent token in local storage.
+          updateParentTokenInLocalStorage({ currentTokenWithBearer });
+        }
+
+        const proxyToken = await createToken(euuid);
+
+        setTokenInLocalStorage({
+          prefix: 'authentication/proxy_token',
+          token: {
+            ...proxyToken,
+            token: `Bearer ${proxyToken.token}`,
+          },
         });
+
+        updateCurrentToken({ userType: 'proxy' });
+        onClose(event);
+        location.reload();
       } catch (error) {
-        setIsProxyTokenError(error);
-        throw error;
+        // Error is handled by createTokenError.
       }
-
-      onClose(event);
-      refreshPage();
     },
-    [handleProxyTokenRevocation, refreshPage]
+    [createToken, updateCurrentToken, revokeToken]
   );
 
   const handleSwitchToParentAccount = React.useCallback(async () => {
-    if (!isParentTokenValid()) {
+    if (!validateParentToken()) {
       const expiredTokenError: APIError = {
         field: 'token',
         reason: PARENT_USER_SESSION_EXPIRED,
@@ -124,22 +124,29 @@ export const SwitchAccountDrawer = (props: Props) => {
       return;
     }
 
+    // Flag to prevent multiple clicks on the switch account link.
+    setSubmitting(true);
+
     // Revoke proxy token before switching to parent account.
-    await handleProxyTokenRevocation();
+    try {
+      await revokeToken();
+    } catch (error) {
+      // Swallow error
+    }
 
-    updateCurrentTokenBasedOnUserType({ userType: 'parent' });
+    updateCurrentToken({ userType: 'parent' });
 
     // Reset flag for proxy user to display success toast once.
-    setStorage('proxy_user', 'false');
+    setStorage('is_proxy_user', 'false');
 
     onClose();
-    refreshPage();
-  }, [onClose, handleProxyTokenRevocation, refreshPage]);
+    location.reload();
+  }, [onClose, revokeToken, validateParentToken, updateCurrentToken]);
 
   return (
     <Drawer onClose={onClose} open={open} title="Switch Account">
-      {isProxyTokenError.length > 0 && (
-        <Notice text={isProxyTokenError[0].reason} variant="error" />
+      {createTokenErrorReason && (
+        <Notice text={createTokenErrorReason} variant="error" />
       )}
       {isParentTokenError.length > 0 && (
         <Notice text={isParentTokenError[0].reason} variant="error" />
@@ -159,6 +166,7 @@ export const SwitchAccountDrawer = (props: Props) => {
                 handleSwitchToParentAccount();
               }}
               aria-label="parent-account-link"
+              disabled={isSubmitting}
             >
               switch back to your account
             </StyledLinkButton>
@@ -166,14 +174,21 @@ export const SwitchAccountDrawer = (props: Props) => {
         )}
         .
       </Typography>
-      <ChildAccountList
-        currentTokenWithBearer={
-          isProxyUser ? currentParentTokenWithBearer : currentTokenWithBearer
-        }
-        onClose={onClose}
-        onSwitchAccount={handleSwitchToChildAccount}
-        userType={userType}
-      />
+      {createTokenLoading && (
+        <Box display="flex" justifyContent="center">
+          <CircleProgress mini size={70} />
+        </Box>
+      )}
+      {!createTokenLoading && (
+        <ChildAccountList
+          currentTokenWithBearer={
+            isProxyUser ? currentParentTokenWithBearer : currentTokenWithBearer
+          }
+          onClose={onClose}
+          onSwitchAccount={handleSwitchToChildAccount}
+          userType={userType}
+        />
+      )}
     </Drawer>
   );
 };
diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
index 6bf9d822a42..5f41ed81bdd 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
@@ -39,7 +39,7 @@ export const ChildAccountList = React.memo(
       hasNextPage,
       isError,
       isFetchingNextPage,
-      isLoading,
+      isInitialLoading,
       refetch: refetchChildAccounts,
     } = useChildAccountsInfiniteQuery({
       headers:
@@ -51,7 +51,7 @@ export const ChildAccountList = React.memo(
     });
     const childAccounts = data?.pages.flatMap((page) => page.data);
 
-    if (isLoading) {
+    if (isInitialLoading) {
       return (
         <Box display="flex" justifyContent="center">
           <CircleProgress mini size={70} />
@@ -59,7 +59,7 @@ export const ChildAccountList = React.memo(
       );
     }
 
-    if (childAccounts?.length === 0) {
+    if (childAccounts?.length === 0 || !childAccounts) {
       return (
         <Notice variant="info">There are no indirect customer accounts.</Notice>
       );
diff --git a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx
new file mode 100644
index 00000000000..cc7cca4fa6b
--- /dev/null
+++ b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx
@@ -0,0 +1,93 @@
+import { act, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import { SessionExpirationDialog } from 'src/features/Account/SwitchAccounts/SessionExpirationDialog';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+const mockParentChildAuthentication = {
+  createToken: vi.fn(),
+  revokeToken: vi.fn(),
+  updateCurrentToken: vi.fn(),
+  validateParentToken: vi.fn().mockReturnValue(false),
+};
+
+// Mock useParentChildAuthentication with spies for createToken, revokeToken, and updateCurrentToken
+vi.mock(
+  'src/features/Account/SwitchAccounts/useParentChildAuthentication',
+  () => ({
+    useParentChildAuthentication: vi.fn(() => mockParentChildAuthentication),
+  })
+);
+
+const mockHistory = {
+  push: vi.fn(),
+  replace: vi.fn(),
+};
+
+const realLocation = window.location;
+
+afterAll(() => {
+  // eslint-disable-next-line
+  window.location = realLocation;
+});
+
+// Mock useHistory
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<any>('react-router-dom');
+  return {
+    ...actual,
+    useHistory: vi.fn(() => mockHistory),
+  };
+});
+
+describe('SessionExpirationDialog', () => {
+  it('renders correctly when isOpen is true', () => {
+    const onCloseMock = vi.fn();
+    const { getByText } = renderWithTheme(
+      <MemoryRouter>
+        <SessionExpirationDialog isOpen={true} onClose={onCloseMock} />
+      </MemoryRouter>
+    );
+
+    expect(getByText('Your session is about to expire')).toBeInTheDocument();
+  });
+
+  it('tests the Continue Working button when is clicked', async () => {
+    const onCloseMock = vi.fn();
+    const { getByText } = renderWithTheme(
+      <MemoryRouter>
+        <SessionExpirationDialog isOpen={true} onClose={onCloseMock} />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(getByText('Continue Working'));
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(mockParentChildAuthentication.createToken).toHaveBeenCalled();
+  });
+
+  it('calls history.push("/logout") if parent token is invalid when Log Out button is clicked', async () => {
+    // See this blog post: https://remarkablemark.org/blog/2018/11/17/mock-window-location/
+    const mockReload = vi.fn();
+    delete (window as Partial<Window>).location;
+    // eslint-disable-next-line
+    window.location = { ...realLocation, reload: mockReload };
+
+    const { getByText } = renderWithTheme(
+      <MemoryRouter>
+        <SessionExpirationDialog isOpen={true} onClose={vi.fn()} />
+      </MemoryRouter>
+    );
+
+    await act(async () => {
+      fireEvent.click(getByText('Log Out'));
+    });
+
+    expect(mockHistory.push).toHaveBeenCalledWith('/logout');
+    expect(mockReload).toHaveBeenCalled();
+  });
+});
diff --git a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
new file mode 100644
index 00000000000..680b9de3fef
--- /dev/null
+++ b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
@@ -0,0 +1,209 @@
+import React, { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
+import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
+import { Typography } from 'src/components/Typography';
+import { sessionExpirationContext as _sessionExpirationContext } from 'src/context/sessionExpirationContext';
+import { useParentChildAuthentication } from 'src/features/Account/SwitchAccounts/useParentChildAuthentication';
+import {
+  getPersonalAccessTokenForRevocation,
+  setTokenInLocalStorage,
+} from 'src/features/Account/SwitchAccounts/utils';
+import { useCurrentToken } from 'src/hooks/useAuthentication';
+import { useAccount } from 'src/queries/account/account';
+import { usePersonalAccessTokensQuery } from 'src/queries/tokens';
+import { parseAPIDate } from 'src/utilities/date';
+import { pluralize } from 'src/utilities/pluralize';
+import { getStorage, setStorage } from 'src/utilities/storage';
+
+interface SessionExpirationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const SessionExpirationDialog = React.memo(
+  ({ isOpen, onClose }: SessionExpirationDialogProps) => {
+    const sessionExpirationContext = React.useContext(
+      _sessionExpirationContext
+    );
+
+    const [timeRemaining, setTimeRemaining] = React.useState<{
+      minutes: number;
+      seconds: number;
+    }>({
+      minutes: 15,
+      seconds: 0,
+    });
+    const [logoutLoading, setLogoutLoading] = React.useState(false);
+
+    const { data: personalAccessTokens } = usePersonalAccessTokensQuery();
+    const history = useHistory();
+    const { data: account } = useAccount();
+    const currentTokenWithBearer = useCurrentToken() ?? '';
+
+    const euuid = account?.euuid ?? '';
+    const pendingRevocationToken = getPersonalAccessTokenForRevocation(
+      personalAccessTokens?.data,
+      currentTokenWithBearer
+    );
+
+    const {
+      createToken,
+      createTokenError,
+      createTokenLoading,
+      revokeToken,
+      updateCurrentToken,
+      validateParentToken,
+    } = useParentChildAuthentication({
+      tokenIdToRevoke: pendingRevocationToken?.id ?? -1,
+    });
+
+    const createTokenErrorReason = createTokenError?.[0]?.reason;
+
+    const formattedTimeRemaining = `${timeRemaining.minutes}:${
+      timeRemaining.seconds < 10 ? '0' : ''
+    }${timeRemaining.seconds}`;
+
+    /**
+     * Redirect to the logout page if the parent token is invalid.
+     * Otherwise, switch back to the parent account.
+     */
+    const handleLogout = async () => {
+      setLogoutLoading(true);
+
+      if (!validateParentToken()) {
+        history.push('/logout');
+      }
+
+      try {
+        await revokeToken();
+      } catch (error) {
+        // Swallow error: Allow user account switching; tokens expire naturally.
+      }
+
+      updateCurrentToken({ userType: 'parent' });
+
+      // Reset flag for proxy user to display success toast once.
+      setStorage('is_proxy_user', 'false');
+      setLogoutLoading(false);
+
+      onClose();
+      location.reload();
+    };
+
+    const handleRefreshToken = async ({ euuid }: { euuid: string }) => {
+      try {
+        try {
+          await revokeToken();
+        } catch (error) {
+          // Swallow error: Allow user account switching; tokens expire naturally.
+        }
+
+        const proxyToken = await createToken(euuid);
+
+        setTokenInLocalStorage({
+          prefix: 'authentication/proxy_token',
+          token: {
+            ...proxyToken,
+            token: `Bearer ${proxyToken.token}`,
+          },
+        });
+
+        updateCurrentToken({ userType: 'proxy' });
+        onClose();
+        location.reload();
+      } catch (error) {
+        // Error is handled by createTokenError.
+      }
+    };
+
+    /**
+     * This useEffect hook sets up a real-time countdown to track the expiry of a token stored in local storage.
+     * It calculates the remaining time until expiry in minutes and seconds, updating this countdown every second.
+     * Upon component unmount, it clears the timeout to prevent memory leaks, ensuring the countdown stops accurately.
+     */
+    useEffect(() => {
+      let timeoutId: NodeJS.Timeout | undefined;
+
+      const checkTokenExpiry = () => {
+        const expiryString = getStorage('authentication/proxy_token/expire');
+        if (!expiryString) {
+          return;
+        }
+
+        // Calculate the difference from now until the expiry time in both minutes and seconds
+        const diff = parseAPIDate(expiryString)
+          .diffNow(['minutes', 'seconds'])
+          .toObject();
+
+        // Format the remaining time as MM:SS, ensuring minutes and seconds are correctly rounded
+        const minutes = Math.max(0, Math.floor(diff.minutes ?? 0));
+        const seconds = Math.max(0, Math.floor(diff.seconds ?? 0) % 60); // Ensure seconds don't exceed 60
+
+        setTimeRemaining({
+          minutes,
+          seconds,
+        });
+
+        // Set or reset the timeout to check every second for real-time countdown accuracy
+        timeoutId = setTimeout(checkTokenExpiry, 1000);
+      };
+
+      // Initial timer setup
+      checkTokenExpiry();
+
+      // Cleanup function to clear the timeout when the component unmounts
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, []);
+
+    useEffect(() => {
+      if (timeRemaining.minutes < 5) {
+        sessionExpirationContext.updateState({ isOpen: true });
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [timeRemaining.minutes, sessionExpirationContext.updateState]);
+
+    const actions = (
+      <ActionsPanel
+        primaryButtonProps={{
+          label: 'Continue Working',
+          loading: createTokenLoading,
+          onClick: () =>
+            handleRefreshToken({
+              euuid,
+            }),
+        }}
+        secondaryButtonProps={{
+          label: 'Log Out',
+          loading: logoutLoading,
+          onClick: handleLogout,
+        }}
+      />
+    );
+
+    return (
+      <ConfirmationDialog
+        onClose={() => {
+          onClose();
+        }}
+        actions={actions}
+        data-testid="session-expiration-dialog"
+        error={createTokenErrorReason}
+        maxWidth="xs"
+        open={isOpen}
+        title="Your session is about to expire"
+      >
+        <Typography>
+          Your session will expire in{' '}
+          {pluralize('minute', 'minutes', formattedTimeRemaining)}. Do you want
+          to continue working?
+        </Typography>
+      </ConfirmationDialog>
+    );
+  }
+);
diff --git a/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
similarity index 82%
rename from packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.test.tsx
rename to packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
index 3304c35029b..dd4edcc81ab 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.test.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
@@ -2,7 +2,7 @@ import { renderHook } from '@testing-library/react';
 import * as React from 'react';
 
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
-import { useParentTokenManagement } from 'src/features/Account/SwitchAccounts/useParentTokenManagement';
+import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
 
 const queryMocks = vi.hoisted(() => ({
   isParentTokenValid: vi.fn().mockReturnValue({}),
@@ -31,7 +31,7 @@ const wrapper = ({ children }: any) => (
   </switchAccountSessionContext.Provider>
 );
 
-describe('useParentTokenManagement', () => {
+describe('useIsParentTokenExpired', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
@@ -39,7 +39,7 @@ describe('useParentTokenManagement', () => {
   it('should not mark parent token as expired if it is valid', async () => {
     queryMocks.isParentTokenValid.mockReturnValue(true);
     const { result } = renderHook(
-      () => useParentTokenManagement({ isProxyUser: true }),
+      () => useIsParentTokenExpired({ isProxyUser: true }),
       { wrapper }
     );
 
@@ -49,7 +49,7 @@ describe('useParentTokenManagement', () => {
   it('should mark parent token as expired if it is invalid', async () => {
     queryMocks.isParentTokenValid.mockReturnValue(false);
     const { result } = renderHook(
-      () => useParentTokenManagement({ isProxyUser: true }),
+      () => useIsParentTokenExpired({ isProxyUser: true }),
       { wrapper }
     );
 
@@ -58,7 +58,7 @@ describe('useParentTokenManagement', () => {
 
   it('should not update the session context when isParentTokenExpired is false', async () => {
     queryMocks.isParentTokenValid.mockReturnValue(true);
-    renderHook(() => useParentTokenManagement({ isProxyUser: true }), {
+    renderHook(() => useIsParentTokenExpired({ isProxyUser: true }), {
       wrapper,
     });
 
diff --git a/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.tsx b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.tsx
similarity index 77%
rename from packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.tsx
rename to packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.tsx
index 292e3bf0f58..a821e2bfc09 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/useParentTokenManagement.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { isParentTokenValid } from 'src/features/Account/utils';
+import { isParentTokenValid } from 'src/features/Account/SwitchAccounts/utils';
 
 // Checks and reacts to the expiration status of parent tokens.
-export const useParentTokenManagement = ({
+export const useIsParentTokenExpired = ({
   isProxyUser,
 }: {
   isProxyUser: boolean;
diff --git a/packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx b/packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx
new file mode 100644
index 00000000000..3e1db9818e6
--- /dev/null
+++ b/packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx
@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+
+import {
+  isParentTokenValid,
+  updateCurrentTokenBasedOnUserType,
+} from 'src/features/Account/SwitchAccounts/utils';
+import { useCreateChildAccountPersonalAccessTokenMutation } from 'src/queries/account/account';
+import { useRevokePersonalAccessTokenMutation } from 'src/queries/tokens';
+import { getStorage } from 'src/utilities/storage';
+
+import type { Token, UserType } from '@linode/api-v4';
+
+interface useAuthenticationProps {
+  tokenIdToRevoke: number;
+}
+
+export const useParentChildAuthentication = ({
+  tokenIdToRevoke,
+}: useAuthenticationProps) => {
+  const {
+    error: revokeTokenError,
+    isLoading: revokeTokenLoading,
+    mutateAsync: revokeAccessToken,
+  } = useRevokePersonalAccessTokenMutation(tokenIdToRevoke);
+
+  const {
+    error: createTokenError,
+    isLoading: createTokenLoading,
+    mutateAsync: createProxyToken,
+  } = useCreateChildAccountPersonalAccessTokenMutation();
+
+  const createToken = useCallback(
+    async (euuid: string): Promise<Token> => {
+      return createProxyToken({
+        euuid,
+        headers: {
+          /**
+           * Headers are required for proxy users when obtaining a proxy token.
+           * For 'proxy' userType, use the stored parent token in the request.
+           */
+          Authorization: getStorage('authentication/parent_token/token'),
+        },
+      });
+    },
+    [createProxyToken]
+  );
+
+  const revokeToken = useCallback(async (): Promise<{}> => {
+    return revokeAccessToken();
+  }, [revokeAccessToken]);
+
+  const updateCurrentToken = useCallback(
+    ({ userType }: { userType: Extract<UserType, 'parent' | 'proxy'> }) => {
+      updateCurrentTokenBasedOnUserType({ userType });
+    },
+    []
+  );
+
+  const validateParentToken = useCallback(() => {
+    return isParentTokenValid();
+  }, []);
+
+  return {
+    createToken,
+    createTokenError,
+    createTokenLoading,
+    revokeToken,
+    revokeTokenError,
+    revokeTokenLoading,
+    updateCurrentToken,
+    validateParentToken,
+  };
+};
diff --git a/packages/manager/src/features/Account/SwitchAccounts/utils.ts b/packages/manager/src/features/Account/SwitchAccounts/utils.ts
index 8e56b896f8c..7484f44042c 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/utils.ts
+++ b/packages/manager/src/features/Account/SwitchAccounts/utils.ts
@@ -1,10 +1,4 @@
-import { createChildAccountPersonalAccessToken } from '@linode/api-v4';
-
-import {
-  setTokenInLocalStorage,
-  updateCurrentTokenBasedOnUserType,
-} from 'src/features/Account/utils';
-import { getStorage } from 'src/utilities/storage';
+import { getStorage, setStorage } from 'src/utilities/storage';
 
 import type { Token, UserType } from '@linode/api-v4';
 import type { State as AuthState } from 'src/store/authentication';
@@ -45,33 +39,79 @@ export const updateParentTokenInLocalStorage = ({
 };
 
 /**
- * Headers are required for proxy users when obtaining a proxy token.
- * For 'proxy' userType, use the stored parent token in the request.
+ * Determine whether the tokens used for switchable accounts are still valid.
+ */
+export const isParentTokenValid = (): boolean => {
+  const now = new Date().toISOString();
+
+  // From a proxy user, check whether parent token is still valid before switching.
+  if (
+    now >
+    new Date(getStorage('authentication/parent_token/expire')).toISOString()
+  ) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Set token information in the local storage.
+ * This allows us to store a token for later use, such as switching between parent and proxy accounts.
+ */
+export const setTokenInLocalStorage = ({
+  prefix,
+  token = { expiry: '', scopes: '', token: '' },
+}: {
+  prefix: string;
+  token?: Pick<Token, 'expiry' | 'scopes' | 'token'>;
+}) => {
+  const { expiry, scopes, token: tokenValue } = token;
+
+  if (!tokenValue || !expiry) {
+    return;
+  }
+
+  setStorage(`${prefix}/token`, tokenValue);
+  setStorage(`${prefix}/expire`, expiry);
+  setStorage(`${prefix}/scopes`, scopes);
+};
+
+/**
+ * Set the active token in the local storage.
  */
-export const updateProxyTokenInLocalStorage = async ({
-  euuid,
-  token,
+export const updateCurrentTokenBasedOnUserType = ({
   userType,
-}: ProxyTokenCreationParams) => {
-  const proxyToken = await createChildAccountPersonalAccessToken({
-    euuid,
-    headers:
-      userType === 'proxy'
-        ? {
-            Authorization: token,
-          }
-        : undefined,
-  });
+}: {
+  userType: 'parent' | 'proxy';
+}) => {
+  const storageKeyPrefix = `authentication/${userType}_token`;
 
-  setTokenInLocalStorage({
-    prefix: 'authentication/proxy_token',
-    token: {
-      ...proxyToken,
-      token: `Bearer ${proxyToken.token}`,
-    },
-  });
+  const userToken = getStorage(`${storageKeyPrefix}/token`);
+  const userScope = getStorage(`${storageKeyPrefix}/scopes`);
+  const userExpiry = getStorage(`${storageKeyPrefix}/expire`);
 
-  updateCurrentTokenBasedOnUserType({
-    userType: 'proxy',
-  });
+  if (userToken) {
+    setStorage('authentication/token', userToken);
+    setStorage('authentication/scopes', userScope);
+    setStorage('authentication/expire', userExpiry);
+  }
 };
+
+/**
+ * Finds a personal access token stored locally for revocation,
+ * typically used when switching between accounts. Searching local storage
+ * for the token is necessary because the token is not persisted in state.
+ */
+export function getPersonalAccessTokenForRevocation(
+  tokens: Token[] | undefined,
+  currentTokenWithBearer: string
+): Token | undefined {
+  if (!tokens) {
+    return;
+  }
+  return tokens.find(
+    (token) =>
+      token.token &&
+      currentTokenWithBearer.replace('Bearer ', '').startsWith(token.token)
+  );
+}
diff --git a/packages/manager/src/features/Account/utils.ts b/packages/manager/src/features/Account/utils.ts
index 29ff0cbe72a..b181a1f88c0 100644
--- a/packages/manager/src/features/Account/utils.ts
+++ b/packages/manager/src/features/Account/utils.ts
@@ -1,8 +1,6 @@
-import { getStorage, setStorage } from 'src/utilities/storage';
-
 import { ADMINISTRATOR, PARENT_USER } from './constants';
 
-import type { GlobalGrantTypes, GrantLevel, Token } from '@linode/api-v4';
+import type { GlobalGrantTypes, GrantLevel } from '@linode/api-v4';
 import type { GrantTypeMap } from 'src/features/Account/types';
 
 export type ActionType =
@@ -65,89 +63,3 @@ export const getRestrictedResourceText = ({
 
   return message;
 };
-
-// TODO: Parent/Child: FOR MSW ONLY, REMOVE WHEN API IS READY
-// ================================================================
-// const mockExpiredTime =
-//   'Mon Nov 20 2023 22:50:52 GMT-0800 (Pacific Standard Time)';
-// ================================================================
-
-/**
- * Determine whether the tokens used for switchable accounts are still valid.
- */
-export const isParentTokenValid = (): boolean => {
-  const now = new Date().toISOString();
-
-  // From a proxy user, check whether parent token is still valid before switching.
-  if (
-    now >
-    new Date(getStorage('authentication/parent_token/expire')).toISOString()
-
-    // TODO: Parent/Child: FOR MSW ONLY, REMOVE WHEN API IS READY
-    // ================================================================
-    // new Date(mockExpiredTime).toISOString()
-    // ================================================================
-  ) {
-    return false;
-  }
-  return true;
-};
-
-/**
- * Set token information in the local storage.
- * This allows us to store a token for later use, such as switching between parent and proxy accounts.
- */
-export const setTokenInLocalStorage = ({
-  prefix,
-  token = { expiry: '', scopes: '', token: '' },
-}: {
-  prefix: string;
-  token?: Pick<Token, 'expiry' | 'scopes' | 'token'>;
-}) => {
-  const { expiry, scopes, token: tokenValue } = token;
-
-  if (!tokenValue || !expiry) {
-    return;
-  }
-
-  setStorage(`${prefix}/token`, tokenValue);
-  setStorage(`${prefix}/expire`, expiry);
-  setStorage(`${prefix}/scopes`, scopes);
-};
-
-/**
- * Set the active token in the local storage.
- */
-export const updateCurrentTokenBasedOnUserType = ({
-  userType,
-}: {
-  userType: 'parent' | 'proxy';
-}) => {
-  const storageKeyPrefix = `authentication/${userType}_token`;
-
-  const userToken = getStorage(`${storageKeyPrefix}/token`);
-  const userScope = getStorage(`${storageKeyPrefix}/scopes`);
-  const userExpiry = getStorage(`${storageKeyPrefix}/expire`);
-
-  if (userToken) {
-    setStorage('authentication/token', userToken);
-    setStorage('authentication/scopes', userScope);
-    setStorage('authentication/expire', userExpiry);
-  }
-};
-
-/**
- * Finds a personal access token stored locally for revocation,
- * typically used when switching between accounts. Searching local storage
- * for the token is necessary because the token is not persisted in state.
- */
-export async function getPersonalAccessTokenForRevocation(
-  tokens: Token[],
-  currentTokenWithBearer: string
-): Promise<Token | undefined> {
-  return tokens.find(
-    (token) =>
-      token.token &&
-      currentTokenWithBearer.replace('Bearer ', '').startsWith(token.token)
-  );
-}
diff --git a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
index 80440e8e92b..1f459809a46 100644
--- a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
+++ b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
@@ -2,6 +2,7 @@ import { isEmpty } from 'ramda';
 import * as React from 'react';
 
 import AbuseTicketBanner from 'src/components/AbuseTicketBanner';
+import { sessionExpirationContext as _sessionExpirationContext } from 'src/context/sessionExpirationContext';
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
 import { SwitchAccountSessionDialog } from 'src/features/Account/SwitchAccounts/SwitchAccountSessionDialog';
 import { useDismissibleNotifications } from 'src/hooks/useDismissibleNotifications';
@@ -9,6 +10,7 @@ import { useFlags } from 'src/hooks/useFlags';
 import { useProfile } from 'src/queries/profile';
 import { useSecurityQuestions } from 'src/queries/securityQuestions';
 
+import { SessionExpirationDialog } from '../Account/SwitchAccounts/SessionExpirationDialog';
 import { APIMaintenanceBanner } from './APIMaintenanceBanner';
 import { ComplianceBanner } from './ComplianceBanner';
 import { ComplianceUpdateModal } from './ComplianceUpdateModal';
@@ -16,11 +18,11 @@ import { EmailBounceNotificationSection } from './EmailBounce';
 import { RegionStatusBanner } from './RegionStatusBanner';
 import { TaxCollectionBanner } from './TaxCollectionBanner';
 import { VerificationDetailsBanner } from './VerificationDetailsBanner';
-
 export const GlobalNotifications = () => {
   const flags = useFlags();
   const { data: profile } = useProfile();
   const sessionContext = React.useContext(switchAccountSessionContext);
+  const sessionExpirationContext = React.useContext(_sessionExpirationContext);
   const isChildUser =
     Boolean(flags.parentChildAccountAccess) && profile?.user_type === 'child';
   const isProxyUser =
@@ -56,10 +58,18 @@ export const GlobalNotifications = () => {
       <AbuseTicketBanner />
       <ComplianceBanner />
       {isProxyUser && (
-        <SwitchAccountSessionDialog
-          isOpen={Boolean(sessionContext.isOpen)}
-          onClose={() => sessionContext.updateState({ isOpen: false })}
-        />
+        <>
+          <SwitchAccountSessionDialog
+            isOpen={Boolean(sessionContext.isOpen)}
+            onClose={() => sessionContext.updateState({ isOpen: false })}
+          />
+          <SessionExpirationDialog
+            onClose={() =>
+              sessionExpirationContext.updateState({ isOpen: false })
+            }
+            isOpen={Boolean(sessionExpirationContext.isOpen)}
+          />
+        </>
       )}
       <ComplianceUpdateModal />
       {isChildUser && !isVerified && (
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 3dc5c540da8..1a8ee066649 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -20,9 +20,8 @@ import { Typography } from 'src/components/Typography';
 import { switchAccountSessionContext } from 'src/context/switchAccountSessionContext';
 import { SwitchAccountButton } from 'src/features/Account/SwitchAccountButton';
 import { SwitchAccountDrawer } from 'src/features/Account/SwitchAccountDrawer';
-import { useParentTokenManagement } from 'src/features/Account/SwitchAccounts/useParentTokenManagement';
+import { useIsParentTokenExpired } from 'src/features/Account/SwitchAccounts/useIsParentTokenExpired';
 import { useFlags } from 'src/hooks/useFlags';
-import { usePendingRevocationToken } from 'src/hooks/usePendingRevocationToken';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useAccount } from 'src/queries/account/account';
 import { useGrants, useProfile } from 'src/queries/profile';
@@ -30,6 +29,7 @@ import { sendSwitchAccountEvent } from 'src/utilities/analytics';
 import { getStorage, setStorage } from 'src/utilities/storage';
 
 import { getCompanyNameOrEmail } from './utils';
+
 interface MenuLink {
   display: string;
   hide?: boolean;
@@ -59,10 +59,6 @@ export const UserMenu = React.memo(() => {
     null
   );
   const [isDrawerOpen, setIsDrawerOpen] = React.useState<boolean>(false);
-  const {
-    getPendingRevocationToken,
-    pendingRevocationToken,
-  } = usePendingRevocationToken();
 
   const { data: account } = useAccount();
   const { data: profile } = useProfile();
@@ -94,7 +90,7 @@ export const UserMenu = React.memo(() => {
     profile,
   });
 
-  const { isParentTokenExpired } = useParentTokenManagement({ isProxyUser });
+  const { isParentTokenExpired } = useIsParentTokenExpired({ isProxyUser });
 
   // Used for fetching parent profile and account data by making a request with the parent's token.
   const proxyHeaders =
@@ -124,9 +120,9 @@ export const UserMenu = React.memo(() => {
 
   React.useEffect(() => {
     // Run after we've switched to a proxy user.
-    if (isProxyUser && !getStorage('proxy_user')) {
+    if (isProxyUser && !getStorage('is_proxy_user')) {
       // Flag for proxy user to display success toast once.
-      setStorage('proxy_user', 'true');
+      setStorage('is_proxy_user', 'true');
 
       enqueueSnackbar(`Account switched to ${companyNameOrEmail}.`, {
         variant: 'success',
@@ -205,10 +201,6 @@ export const UserMenu = React.memo(() => {
       });
     }
 
-    if (isProxyUser) {
-      getPendingRevocationToken();
-    }
-
     setIsDrawerOpen(true);
   };
 
@@ -347,7 +339,6 @@ export const UserMenu = React.memo(() => {
       <SwitchAccountDrawer
         onClose={() => setIsDrawerOpen(false)}
         open={isDrawerOpen}
-        proxyToken={pendingRevocationToken}
         userType={profile?.user_type}
       />
     </>
diff --git a/packages/manager/src/hooks/usePendingRevocationToken.ts b/packages/manager/src/hooks/usePendingRevocationToken.ts
index ba41f077681..5e6f3b4110c 100644
--- a/packages/manager/src/hooks/usePendingRevocationToken.ts
+++ b/packages/manager/src/hooks/usePendingRevocationToken.ts
@@ -1,7 +1,7 @@
 import { Token } from '@linode/api-v4';
 import React from 'react';
 
-import { getPersonalAccessTokenForRevocation } from 'src/features/Account/utils';
+import { getPersonalAccessTokenForRevocation } from 'src/features/Account/SwitchAccounts/utils';
 import { useCurrentToken } from 'src/hooks/useAuthentication';
 import { usePersonalAccessTokensQuery } from 'src/queries/tokens';
 
diff --git a/packages/manager/src/queries/account/account.ts b/packages/manager/src/queries/account/account.ts
index 10e9adaed7b..4d520314936 100644
--- a/packages/manager/src/queries/account/account.ts
+++ b/packages/manager/src/queries/account/account.ts
@@ -66,10 +66,8 @@ export const useChildAccountsInfiniteQuery = (options: RequestOptions) => {
   });
 };
 
-export const useCreateChildAccountPersonalAccessTokenMutation = ({
-  euuid,
-  headers,
-}: ChildAccountPayload) =>
-  useMutation<Token, APIError[], ChildAccountPayload>(() =>
-    createChildAccountPersonalAccessToken({ euuid, headers })
+export const useCreateChildAccountPersonalAccessTokenMutation = () =>
+  useMutation<Token, APIError[], ChildAccountPayload>(
+    ({ euuid, headers }: ChildAccountPayload) =>
+      createChildAccountPersonalAccessToken({ euuid, headers })
   );

From 18d9d10a59f843aeff2d74af88d761f1b86c1046 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Mon, 8 Apr 2024 13:27:39 -0400
Subject: [PATCH 02/11] Update and add some more tests

---
 .../useIsParentTokenExpired.test.tsx          | 33 ++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
index dd4edcc81ab..a914b307cb2 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
@@ -8,8 +8,10 @@ const queryMocks = vi.hoisted(() => ({
   isParentTokenValid: vi.fn().mockReturnValue({}),
 }));
 
-vi.mock('src/features/Account/utils', async () => {
-  const actual = await vi.importActual('src/features/Account/utils');
+vi.mock('src/features/Account/SwitchAccounts/utils', async () => {
+  const actual = await vi.importActual(
+    'src/features/Account/SwitchAccounts/utils'
+  );
   return {
     ...actual,
     isParentTokenValid: queryMocks.isParentTokenValid,
@@ -36,7 +38,7 @@ describe('useIsParentTokenExpired', () => {
     vi.clearAllMocks();
   });
 
-  it('should not mark parent token as expired if it is valid', async () => {
+  it('should not mark parent token as expired if it is valid', () => {
     queryMocks.isParentTokenValid.mockReturnValue(true);
     const { result } = renderHook(
       () => useIsParentTokenExpired({ isProxyUser: true }),
@@ -46,7 +48,7 @@ describe('useIsParentTokenExpired', () => {
     expect(result.current.isParentTokenExpired).toBe(false);
   });
 
-  it('should mark parent token as expired if it is invalid', async () => {
+  it('should mark parent token as expired if it is invalid', () => {
     queryMocks.isParentTokenValid.mockReturnValue(false);
     const { result } = renderHook(
       () => useIsParentTokenExpired({ isProxyUser: true }),
@@ -56,7 +58,7 @@ describe('useIsParentTokenExpired', () => {
     expect(result.current.isParentTokenExpired).toBe(true);
   });
 
-  it('should not update the session context when isParentTokenExpired is false', async () => {
+  it('should not update the session context when isParentTokenExpired is false', () => {
     queryMocks.isParentTokenValid.mockReturnValue(true);
     renderHook(() => useIsParentTokenExpired({ isProxyUser: true }), {
       wrapper,
@@ -64,4 +66,25 @@ describe('useIsParentTokenExpired', () => {
 
     expect(mockUpdateState).not.toHaveBeenCalled();
   });
+
+  it('should react to isProxyUser changes', () => {
+    queryMocks.isParentTokenValid.mockReturnValue(false);
+
+    const { rerender, result } = renderHook(
+      ({ isProxyUser }) => useIsParentTokenExpired({ isProxyUser }),
+      {
+        initialProps: { isProxyUser: false },
+        wrapper,
+      }
+    );
+
+    // Initially, with isProxyUser false, token should not be marked as expired
+    expect(result.current.isParentTokenExpired).toBe(false);
+
+    // Rerender with isProxyUser true
+    rerender({ isProxyUser: true });
+
+    // Now, if the token is invalid, isParentTokenExpired should be true
+    expect(result.current.isParentTokenExpired).toBe(true);
+  });
 });

From 738cc11ddc503b84deafc669881d41b6e3ff9f22 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Mon, 8 Apr 2024 13:59:50 -0400
Subject: [PATCH 03/11] Update and add some more tests

---
 .../useIsParentTokenExpired.test.tsx          | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
index a914b307cb2..70484252363 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/useIsParentTokenExpired.test.tsx
@@ -33,43 +33,49 @@ const wrapper = ({ children }: any) => (
   </switchAccountSessionContext.Provider>
 );
 
+// Utility function to render the hook with the wrapper and initialProps
+const renderUseIsParentTokenExpiredHook = ({
+  isProxyUser,
+}: {
+  isProxyUser: boolean;
+}) =>
+  renderHook(() => useIsParentTokenExpired({ isProxyUser }), {
+    initialProps: isProxyUser,
+    wrapper,
+  });
+
 describe('useIsParentTokenExpired', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    queryMocks.isParentTokenValid.mockReturnValue(true);
   });
 
   it('should not mark parent token as expired if it is valid', () => {
-    queryMocks.isParentTokenValid.mockReturnValue(true);
-    const { result } = renderHook(
-      () => useIsParentTokenExpired({ isProxyUser: true }),
-      { wrapper }
-    );
+    const { result } = renderUseIsParentTokenExpiredHook({
+      isProxyUser: true,
+    });
 
     expect(result.current.isParentTokenExpired).toBe(false);
   });
 
   it('should mark parent token as expired if it is invalid', () => {
     queryMocks.isParentTokenValid.mockReturnValue(false);
-    const { result } = renderHook(
-      () => useIsParentTokenExpired({ isProxyUser: true }),
-      { wrapper }
-    );
+    const { result } = renderUseIsParentTokenExpiredHook({
+      isProxyUser: true,
+    });
 
     expect(result.current.isParentTokenExpired).toBe(true);
   });
 
   it('should not update the session context when isParentTokenExpired is false', () => {
-    queryMocks.isParentTokenValid.mockReturnValue(true);
-    renderHook(() => useIsParentTokenExpired({ isProxyUser: true }), {
-      wrapper,
+    renderUseIsParentTokenExpiredHook({
+      isProxyUser: true,
     });
 
     expect(mockUpdateState).not.toHaveBeenCalled();
   });
 
   it('should react to isProxyUser changes', () => {
-    queryMocks.isParentTokenValid.mockReturnValue(false);
-
     const { rerender, result } = renderHook(
       ({ isProxyUser }) => useIsParentTokenExpired({ isProxyUser }),
       {
@@ -81,7 +87,8 @@ describe('useIsParentTokenExpired', () => {
     // Initially, with isProxyUser false, token should not be marked as expired
     expect(result.current.isParentTokenExpired).toBe(false);
 
-    // Rerender with isProxyUser true
+    // Change mock value, rerender with isProxyUser true
+    queryMocks.isParentTokenValid.mockReturnValue(false);
     rerender({ isProxyUser: true });
 
     // Now, if the token is invalid, isParentTokenExpired should be true

From dc7911fcb6f75de2f3c6b10bb1c1154ba896ddcc Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Mon, 8 Apr 2024 15:03:09 -0400
Subject: [PATCH 04/11] Remove hook - no longer need

---
 .../hooks/usePendingRevocationToken.test.ts   | 90 -------------------
 .../src/hooks/usePendingRevocationToken.ts    | 45 ----------
 2 files changed, 135 deletions(-)
 delete mode 100644 packages/manager/src/hooks/usePendingRevocationToken.test.ts
 delete mode 100644 packages/manager/src/hooks/usePendingRevocationToken.ts

diff --git a/packages/manager/src/hooks/usePendingRevocationToken.test.ts b/packages/manager/src/hooks/usePendingRevocationToken.test.ts
deleted file mode 100644
index 2049effb82b..00000000000
--- a/packages/manager/src/hooks/usePendingRevocationToken.test.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
-
-import { queryClientFactory } from 'src/queries/base';
-import { wrapWithTheme } from 'src/utilities/testHelpers';
-
-import { usePendingRevocationToken } from './usePendingRevocationToken'; // Adjust path as needed
-import { Token } from '@linode/api-v4';
-
-const queryClient = queryClientFactory();
-
-const queryMocks = vi.hoisted(() => ({
-  getPersonalAccessTokenForRevocation: vi.fn(
-    (tokens, currentTokenWithBearer) => {
-      const tokenValue = currentTokenWithBearer.replace('Bearer ', '');
-      const foundToken = tokens.find(
-        (token: Token) => token.token === tokenValue
-      );
-      return Promise.resolve(foundToken);
-    }
-  ),
-  useCurrentToken: vi.fn(() => 'Bearer 232345245345'),
-  usePersonalAccessTokensQuery: vi.fn().mockReturnValue({
-    data: {
-      data: [{ id: 123, token: '232345245345' }],
-    },
-  }),
-}));
-
-vi.mock('src/queries/tokens', async () => {
-  const actual = await vi.importActual('src/queries/tokens');
-  return {
-    ...actual,
-    usePersonalAccessTokensQuery: queryMocks.usePersonalAccessTokensQuery,
-  };
-});
-
-vi.mock('src/features/Account/utils', async () => {
-  const actual = await vi.importActual('src/features/Account/utils');
-  return {
-    ...actual,
-    getPersonalAccessTokenForRevocation:
-      queryMocks.getPersonalAccessTokenForRevocation,
-  };
-});
-
-vi.mock('src/hooks/useAuthentication', async () => {
-  const actual = await vi.importActual('src/hooks/useAuthentication');
-  return {
-    ...actual,
-    useCurrentToken: queryMocks.useCurrentToken,
-  };
-});
-
-describe('usePendingRevocationToken', () => {
-  it('should set pendingRevocationToken id when personal access tokens are available', async () => {
-    const { result } = renderHook(() => usePendingRevocationToken(), {
-      wrapper: (ui) => wrapWithTheme(ui, { queryClient }),
-    });
-
-    await waitFor(() => {
-      expect(result.current.pendingRevocationToken?.id).toBeUndefined();
-    });
-
-    await act(async () => {
-      await result.current.getPendingRevocationToken();
-    });
-
-    await waitFor(() => {
-      expect(result.current.pendingRevocationToken?.id).toEqual(123);
-    });
-  });
-
-  it('should not set pendingRevocationToken?.id when no matching tokens are available', async () => {
-    // Adjust the mock to return a token that doesn't match
-    queryMocks.useCurrentToken.mockReturnValue('Bearer nonMatchingToken');
-
-    const { result } = renderHook(() => usePendingRevocationToken(), {
-      wrapper: (ui) => wrapWithTheme(ui, { queryClient }),
-    });
-
-    await act(async () => {
-      await result.current.getPendingRevocationToken();
-    });
-
-    // Now expecting undefined because there should be no match
-    await waitFor(() => {
-      expect(result.current.pendingRevocationToken?.id).toBeUndefined();
-    });
-  });
-});
diff --git a/packages/manager/src/hooks/usePendingRevocationToken.ts b/packages/manager/src/hooks/usePendingRevocationToken.ts
deleted file mode 100644
index 5e6f3b4110c..00000000000
--- a/packages/manager/src/hooks/usePendingRevocationToken.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Token } from '@linode/api-v4';
-import React from 'react';
-
-import { getPersonalAccessTokenForRevocation } from 'src/features/Account/SwitchAccounts/utils';
-import { useCurrentToken } from 'src/hooks/useAuthentication';
-import { usePersonalAccessTokensQuery } from 'src/queries/tokens';
-
-/**
- * Custom hook to manage the ID of a personal access token pending revocation.
- *
- * This hook provides functionality to determine which personal access token
- * should be considered for revocation based on the current authentication state
- * and the list of personal access tokens associated with the account. It utilizes
- * the current bearer token to identify the corresponding personal access token
- * and sets its ID for potential revocation actions.
- *
- * @returns {object} An object containing:
- * - `getPendingRevocationToken`: A function to fetch and set the pending revocation token ID based on current conditions.
- * - `pendingRevocationTokenId`: The ID of the token currently marked for pending revocation, or `undefined` if none.
- */
-export const usePendingRevocationToken = () => {
-  const [pendingRevocationToken, setPendingRevocationToken] = React.useState<
-    Token | undefined
-  >(undefined);
-  const currentTokenWithBearer = useCurrentToken() ?? '';
-  const { data: personalAccessTokens } = usePersonalAccessTokensQuery();
-
-  const getPendingRevocationToken = async () => {
-    if (!personalAccessTokens?.data) {
-      return;
-    }
-
-    const token = await getPersonalAccessTokenForRevocation(
-      personalAccessTokens?.data,
-      currentTokenWithBearer
-    );
-
-    setPendingRevocationToken(token);
-  };
-
-  return {
-    getPendingRevocationToken,
-    pendingRevocationToken,
-  };
-};

From 33ebb652c929c9b4ccf6243fd0d59032386bca36 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Tue, 9 Apr 2024 17:13:56 -0400
Subject: [PATCH 05/11] Add useInterval hook

---
 .../SessionExpirationDialog.tsx               |  70 ++++++------
 .../manager/src/hooks/useInterval.test.tsx    |  61 +++++++++++
 packages/manager/src/hooks/useInterval.tsx    | 100 ++++++++++++++++++
 3 files changed, 196 insertions(+), 35 deletions(-)
 create mode 100644 packages/manager/src/hooks/useInterval.test.tsx
 create mode 100644 packages/manager/src/hooks/useInterval.tsx

diff --git a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
index 680b9de3fef..4c76c5ae96b 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
@@ -11,6 +11,7 @@ import {
   setTokenInLocalStorage,
 } from 'src/features/Account/SwitchAccounts/utils';
 import { useCurrentToken } from 'src/hooks/useAuthentication';
+import { useInterval } from 'src/hooks/useInterval';
 import { useAccount } from 'src/queries/account/account';
 import { usePersonalAccessTokensQuery } from 'src/queries/tokens';
 import { parseAPIDate } from 'src/utilities/date';
@@ -65,6 +66,30 @@ export const SessionExpirationDialog = React.memo(
       timeRemaining.seconds < 10 ? '0' : ''
     }${timeRemaining.seconds}`;
 
+    const intervalCallback = () => {
+      if (timeRemaining.minutes < 15 && timeRemaining.seconds === 50) {
+        sessionExpirationContext.updateState({ isOpen: true });
+      }
+      setTimeRemaining((prev) => {
+        if (prev.minutes === 0 && prev.seconds === 0) {
+          cancel();
+          handleLogout();
+          return prev;
+        }
+        return {
+          minutes: prev.seconds === 0 ? prev.minutes - 1 : prev.minutes,
+          seconds: prev.seconds === 0 ? 59 : prev.seconds - 1,
+        };
+      });
+    };
+
+    const { cancel } = useInterval({
+      callback: intervalCallback,
+      cancelOnError: false,
+      delay: 1000,
+      startImmediately: true,
+    });
+
     /**
      * Redirect to the logout page if the parent token is invalid.
      * Otherwise, switch back to the parent account.
@@ -76,11 +101,9 @@ export const SessionExpirationDialog = React.memo(
         history.push('/logout');
       }
 
-      try {
-        await revokeToken();
-      } catch (error) {
-        // Swallow error: Allow user account switching; tokens expire naturally.
-      }
+      await revokeToken().catch(() => {
+        /* Allow user account switching; tokens will expire naturally. */
+      });
 
       updateCurrentToken({ userType: 'parent' });
 
@@ -94,11 +117,9 @@ export const SessionExpirationDialog = React.memo(
 
     const handleRefreshToken = async ({ euuid }: { euuid: string }) => {
       try {
-        try {
-          await revokeToken();
-        } catch (error) {
-          // Swallow error: Allow user account switching; tokens expire naturally.
-        }
+        await revokeToken().catch(() => {
+          /* Allow user account switching; tokens will expire naturally. */
+        });
 
         const proxyToken = await createToken(euuid);
 
@@ -124,10 +145,9 @@ export const SessionExpirationDialog = React.memo(
      * Upon component unmount, it clears the timeout to prevent memory leaks, ensuring the countdown stops accurately.
      */
     useEffect(() => {
-      let timeoutId: NodeJS.Timeout | undefined;
-
       const checkTokenExpiry = () => {
         const expiryString = getStorage('authentication/proxy_token/expire');
+
         if (!expiryString) {
           return;
         }
@@ -137,37 +157,17 @@ export const SessionExpirationDialog = React.memo(
           .diffNow(['minutes', 'seconds'])
           .toObject();
 
-        // Format the remaining time as MM:SS, ensuring minutes and seconds are correctly rounded
-        const minutes = Math.max(0, Math.floor(diff.minutes ?? 0));
-        const seconds = Math.max(0, Math.floor(diff.seconds ?? 0) % 60); // Ensure seconds don't exceed 60
-
+        // Format the remaining time as MM:SS
         setTimeRemaining({
-          minutes,
-          seconds,
+          minutes: Math.max(0, Math.floor(diff.minutes ?? 0)),
+          seconds: Math.max(0, Math.floor(diff.seconds ?? 0) % 60),
         });
-
-        // Set or reset the timeout to check every second for real-time countdown accuracy
-        timeoutId = setTimeout(checkTokenExpiry, 1000);
       };
 
       // Initial timer setup
       checkTokenExpiry();
-
-      // Cleanup function to clear the timeout when the component unmounts
-      return () => {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
-      };
     }, []);
 
-    useEffect(() => {
-      if (timeRemaining.minutes < 5) {
-        sessionExpirationContext.updateState({ isOpen: true });
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [timeRemaining.minutes, sessionExpirationContext.updateState]);
-
     const actions = (
       <ActionsPanel
         primaryButtonProps={{
diff --git a/packages/manager/src/hooks/useInterval.test.tsx b/packages/manager/src/hooks/useInterval.test.tsx
new file mode 100644
index 00000000000..dd68b31486e
--- /dev/null
+++ b/packages/manager/src/hooks/useInterval.test.tsx
@@ -0,0 +1,61 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { useInterval } from './useInterval';
+
+describe('useInterval', () => {
+  vi.useFakeTimers();
+
+  test('calls the callback with a specified delay', () => {
+    const callback = vi.fn();
+
+    renderHook(() => useInterval({ callback, delay: 1000 }));
+
+    expect(callback).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  test('does not call the callback when "when" is false', () => {
+    const callback = vi.fn();
+
+    renderHook(() => useInterval({ callback, delay: 1000, when: false }));
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  test('stops calling the callback after being cancelled', () => {
+    const callback = vi.fn();
+
+    const { result } = renderHook(() => useInterval({ callback, delay: 1000 }));
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      result.current.cancel();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/manager/src/hooks/useInterval.tsx b/packages/manager/src/hooks/useInterval.tsx
new file mode 100644
index 00000000000..44082110306
--- /dev/null
+++ b/packages/manager/src/hooks/useInterval.tsx
@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+interface UseIntervalOptions {
+  /**
+   * The function to call on each interval.
+   */
+  callback: () => void;
+  /**
+   * If true, the interval will be canceled if the callback throws an error.
+   */
+  cancelOnError?: boolean;
+  /**
+   * The delay in milliseconds between each interval.
+   */
+  delay?: number;
+  /**
+   * If true, errors thrown by the callback will be silenced.
+   */
+  silenceError?: boolean;
+  /**
+   * If true, the interval will start immediately.
+   */
+  startImmediately?: boolean;
+  /**
+   * If true, the interval will run when the condition is true.
+   */
+  when?: boolean;
+}
+
+interface UseIntervalReturn {
+  /**
+   * Cancels the interval.
+   */
+  cancel: () => void;
+  /**
+   * Reference to the interval timer.
+   */
+  intervalRef: React.MutableRefObject<NodeJS.Timer | undefined>;
+}
+
+const useInterval = ({
+  callback,
+  cancelOnError = true,
+  delay = 1000,
+  silenceError = false,
+  startImmediately = false,
+  when = true,
+}: UseIntervalOptions): UseIntervalReturn => {
+  const intervalRef = useRef<NodeJS.Timer | undefined>();
+
+  // Save the callback to a ref to ensure it has the most recent version
+  // without needing to reset the interval each time the callback changes.
+  const savedCallback = useRef(callback);
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  const clearTimer = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+
+      // Optionally clear the ref after stopping the interval
+      intervalRef.current = undefined;
+    }
+  }, []);
+
+  const tick = useCallback(() => {
+    try {
+      savedCallback.current();
+    } catch (error) {
+      if (!silenceError) {
+        throw error;
+      }
+      if (cancelOnError) {
+        clearTimer();
+      }
+    }
+  }, [silenceError, cancelOnError, clearTimer]);
+
+  useEffect(() => {
+    if (when) {
+      if (startImmediately) {
+        tick();
+      }
+
+      intervalRef.current = setInterval(tick, delay);
+
+      return clearTimer;
+    }
+
+    // Ensure the cleanup function is properly defined for all paths.
+    return clearTimer;
+  }, [tick, delay, when, startImmediately, clearTimer]);
+
+  // Return the intervalRef and a method to programmatically cancel the interval
+  return { cancel: clearTimer, intervalRef };
+};
+
+export { useInterval };

From f69aea96709bf9c0c8404f3afabdef288e270c7a Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Tue, 9 Apr 2024 17:14:24 -0400
Subject: [PATCH 06/11] Adjust options

---
 .../features/Account/SwitchAccounts/SessionExpirationDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
index 4c76c5ae96b..a3d6aa15767 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
@@ -85,7 +85,7 @@ export const SessionExpirationDialog = React.memo(
 
     const { cancel } = useInterval({
       callback: intervalCallback,
-      cancelOnError: false,
+      cancelOnError: true,
       delay: 1000,
       startImmediately: true,
     });

From ec2d75ad72a9d8b17d841e3dc4f3744f6aa8aac4 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Tue, 9 Apr 2024 17:18:04 -0400
Subject: [PATCH 07/11] Revert my testing code

---
 .../features/Account/SwitchAccounts/SessionExpirationDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
index a3d6aa15767..c22758f99e5 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.tsx
@@ -67,7 +67,7 @@ export const SessionExpirationDialog = React.memo(
     }${timeRemaining.seconds}`;
 
     const intervalCallback = () => {
-      if (timeRemaining.minutes < 15 && timeRemaining.seconds === 50) {
+      if (timeRemaining.minutes === 5) {
         sessionExpirationContext.updateState({ isOpen: true });
       }
       setTimeRemaining((prev) => {

From 7017e403f254eb4dae19b62cd08e536b0c48eb79 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Tue, 9 Apr 2024 17:54:58 -0400
Subject: [PATCH 08/11] Minor cleanup

---
 .../features/Account/SwitchAccountDrawer.tsx   | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
index 09ecfb2a259..3265e9f67a8 100644
--- a/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
+++ b/packages/manager/src/features/Account/SwitchAccountDrawer.tsx
@@ -81,12 +81,10 @@ export const SwitchAccountDrawer = ({ onClose, open, userType }: Props) => {
 
       try {
         if (isProxyUser) {
-          try {
-            // Revoke proxy token before switching accounts.
-            await revokeToken();
-          } catch (error) {
-            // Swallow error: Allow user account switching; tokens expire naturally.
-          }
+          // Revoke proxy token before switching accounts.
+          await revokeToken().catch(() => {
+            /* Allow user account switching; tokens will expire naturally. */
+          });
         } else {
           // Before switching to a child account, update the parent token in local storage.
           updateParentTokenInLocalStorage({ currentTokenWithBearer });
@@ -128,11 +126,9 @@ export const SwitchAccountDrawer = ({ onClose, open, userType }: Props) => {
     setSubmitting(true);
 
     // Revoke proxy token before switching to parent account.
-    try {
-      await revokeToken();
-    } catch (error) {
-      // Swallow error
-    }
+    await revokeToken().catch(() => {
+      /* Allow user account switching; tokens will expire naturally. */
+    });
 
     updateCurrentToken({ userType: 'parent' });
 

From 2231880ea433f8d77547f55fc106bbf2ef0606fe Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Thu, 11 Apr 2024 11:40:56 -0400
Subject: [PATCH 09/11] Added changeset: Dialog to Refresh Proxy Tokens as Time
 Expires

---
 .../.changeset/pr-10361-upcoming-features-1712850056835.md   | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-10361-upcoming-features-1712850056835.md

diff --git a/packages/manager/.changeset/pr-10361-upcoming-features-1712850056835.md b/packages/manager/.changeset/pr-10361-upcoming-features-1712850056835.md
new file mode 100644
index 00000000000..b3c88fdfbad
--- /dev/null
+++ b/packages/manager/.changeset/pr-10361-upcoming-features-1712850056835.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Dialog to Refresh Proxy Tokens as Time Expires ([#10361](https://github.com/linode/manager/pull/10361))

From 8d82bb4a6e8cfb782ec4f71c01e81508ae1f9da0 Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Wed, 1 May 2024 15:23:49 -0400
Subject: [PATCH 10/11] Fix tests

---
 .../SwitchAccounts/SessionExpirationDialog.test.tsx      | 6 +++---
 .../SwitchAccounts/useParentChildAuthentication.tsx      | 9 ++++++++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx
index cc7cca4fa6b..d842329d47b 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/SessionExpirationDialog.test.tsx
@@ -7,7 +7,7 @@ import { renderWithTheme } from 'src/utilities/testHelpers';
 
 const mockParentChildAuthentication = {
   createToken: vi.fn(),
-  revokeToken: vi.fn(),
+  revokeToken: vi.fn(() => Promise.resolve()), // Ensure it returns a resolved promise
   updateCurrentToken: vi.fn(),
   validateParentToken: vi.fn().mockReturnValue(false),
 };
@@ -61,9 +61,8 @@ describe('SessionExpirationDialog', () => {
       </MemoryRouter>
     );
 
-    fireEvent.click(getByText('Continue Working'));
-
     await act(async () => {
+      fireEvent.click(getByText('Continue Working'));
       await Promise.resolve();
     });
 
@@ -85,6 +84,7 @@ describe('SessionExpirationDialog', () => {
 
     await act(async () => {
       fireEvent.click(getByText('Log Out'));
+      await Promise.resolve();
     });
 
     expect(mockHistory.push).toHaveBeenCalledWith('/logout');
diff --git a/packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx b/packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx
index d4879134ec8..7fdd87b63e7 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/useParentChildAuthentication.tsx
@@ -42,10 +42,17 @@ export const useParentChildAuthentication = () => {
 
   const revokeToken = useCallback(async (): Promise<void> => {
     const tokens = await getPersonalAccessTokens();
+
+    // No tokens available for revocation.
+    if (!tokens?.data?.length) {
+      return;
+    }
+
     const pendingRevocationToken = getPersonalAccessTokenForRevocation(
-      tokens?.data,
+      tokens.data,
       currentTokenWithBearer
     );
+
     if (pendingRevocationToken) {
       await deletePersonalAccessToken(pendingRevocationToken.id);
     }

From 0168ad1deb8212f688d75f19a421bba4a5f8973c Mon Sep 17 00:00:00 2001
From: Jaalah Ramos <jaalah.ramos@gmail.com>
Date: Wed, 1 May 2024 21:24:27 -0400
Subject: [PATCH 11/11] fix e2e test

---
 .../src/features/Account/SwitchAccounts/ChildAccountList.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
index 6bafe5a5fe0..c6dfa3b3cea 100644
--- a/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
+++ b/packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx
@@ -65,7 +65,7 @@ export const ChildAccountList = React.memo(
       );
     }
 
-    if (childAccounts?.length === 0 || !childAccounts) {
+    if (childAccounts?.length === 0) {
       return (
         <Notice variant="info">There are no indirect customer accounts.</Notice>
       );