fix(account-center): handle session expiration (#8004)

Author: wangsijie

packages/account-center/src/App.tsx

@@ -12,9 +12,11 @@ import PageContextProvider from './Providers/PageContextProvider';
 import PageContext from './Providers/PageContextProvider/PageContext';
 import BrandingHeader from './components/BrandingHeader';
 import ErrorPage from './components/ErrorPage';
+import { emailRoute, sessionExpiredRoute } from './constants/routes';
 import initI18n from './i18n/init';
 import Email from './pages/Email';
 import Home from './pages/Home';
+import SessionExpired from './pages/SessionExpired';
 import { accountCenterBasePath, handleAccountCenterRoute } from './utils/account-center-route';
 
 import '@experience/shared/scss/normalized.scss';
@@ -64,7 +66,8 @@ const Main = () => {
 
   return (
     <Routes>
-      <Route path="email" element={<Email />} />
+      <Route path={sessionExpiredRoute} element={<SessionExpired />} />
+      <Route path={emailRoute} element={<Email />} />
       <Route index element={<Home />} />
       <Route path="*" element={<Home />} />
     </Routes>

packages/account-center/src/Providers/PageContextProvider/index.tsx

@@ -1,10 +1,13 @@
 import { useLogto } from '@logto/react';
 import { Theme } from '@logto/schemas';
+import { HTTPError } from 'ky';
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { getAccountCenterSettings } from '@ac/apis/account-center';
 import { getSignInExperienceSettings } from '@ac/apis/sign-in-experience';
 import { getUserInfo } from '@ac/apis/user';
+import { sessionExpiredRoute } from '@ac/constants/routes';
 import { getThemeBySystemPreference, subscribeToSystemTheme } from '@ac/utils/theme';
 
 import type { PageContextType } from './PageContext';
@@ -21,6 +24,7 @@ type Props = {
 
 const PageContextProvider = ({ children }: Props) => {
   const { isAuthenticated, getAccessToken } = useLogto();
+  const navigate = useNavigate();
   const [theme, setTheme] = useState(Theme.Light);
   const [toast, setToast] = useState('');
   const [experienceSettings, setExperienceSettings] =
@@ -72,14 +76,19 @@ const PageContextProvider = ({ children }: Props) => {
         setUserInfo(data);
         setUserInfoError(undefined);
       } catch (error: unknown) {
+        if (error instanceof HTTPError && error.response.status === 401) {
+          void navigate(sessionExpiredRoute, { replace: true });
+          return;
+        }
+
         setUserInfoError(
           error instanceof Error ? error : new Error('Failed to load user information.')
         );
       }
     };
 
     void fetchUserInfo();
-  }, [isAuthenticated, getAccessToken]);
+  }, [isAuthenticated, getAccessToken, navigate]);
 
   useEffect(() => {
     const loadSettings = async () => {
@@ -94,6 +103,11 @@ const PageContextProvider = ({ children }: Props) => {
         setAccountCenterSettings(accountCenter);
         setExperienceError(undefined);
       } catch (error: unknown) {
+        if (error instanceof HTTPError && error.response.status === 401) {
+          void navigate(sessionExpiredRoute, { replace: true });
+          return;
+        }
+
         setExperienceSettings(undefined);
         setAccountCenterSettings(undefined);
         setExperienceError(
@@ -105,7 +119,7 @@ const PageContextProvider = ({ children }: Props) => {
     };
 
     void loadSettings();
-  }, []);
+  }, [navigate]);
 
   useEffect(() => {
     if (!experienceSettings?.color.isDarkModeEnabled) {

packages/account-center/src/components/ErrorPage/index.module.scss

@@ -45,3 +45,7 @@
     text-decoration: underline;
   }
 }
+
+.action {
+  align-self: center;
+}

packages/account-center/src/components/ErrorPage/index.tsx

@@ -1,5 +1,6 @@
 import EmptyStateDark from '@experience/assets/icons/empty-state-dark.svg';
 import EmptyState from '@experience/assets/icons/empty-state.svg';
+import Button from '@experience/shared/components/Button';
 import DynamicT from '@experience/shared/components/DynamicT';
 import PageMeta from '@experience/shared/components/PageMeta';
 import { Theme } from '@logto/schemas';
@@ -15,6 +16,10 @@ type Props = {
   readonly titleKey?: TFuncKey;
   readonly messageKey?: TFuncKey;
   readonly rawMessage?: string;
+  readonly action?: {
+    titleKey: TFuncKey;
+    onClick: () => void;
+  };
 };
 
 const SupportInfo = () => {
@@ -69,7 +74,12 @@ const SupportInfo = () => {
   );
 };
 
-const ErrorPage = ({ titleKey = 'description.not_found', messageKey, rawMessage }: Props) => {
+const ErrorPage = ({
+  titleKey = 'description.not_found',
+  messageKey,
+  rawMessage,
+  action,
+}: Props) => {
   const { theme } = useContext(PageContext);
   const message = rawMessage ?? (messageKey ? <DynamicT forKey={messageKey} /> : undefined);
   const illustration = theme === Theme.Light ? EmptyState : EmptyStateDark;
@@ -84,6 +94,9 @@ const ErrorPage = ({ titleKey = 'description.not_found', messageKey, rawMessage
         <DynamicT forKey={titleKey} />
       </div>
       {message && <div className={styles.message}>{message}</div>}
+      {action && (
+        <Button className={styles.action} title={action.titleKey} onClick={action.onClick} />
+      )}
       <SupportInfo />
     </div>
   );

packages/account-center/src/constants/routes.ts

@@ -0,0 +1,2 @@
+export const sessionExpiredRoute = '/session-expired';
+export const emailRoute = '/email';

packages/account-center/src/hooks/use-error-handler.ts

@@ -2,8 +2,10 @@ import type { RequestErrorBody } from '@logto/schemas';
 import { HTTPError, TimeoutError } from 'ky';
 import { useCallback, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
 
 import PageContext from '@ac/Providers/PageContextProvider/PageContext';
+import { sessionExpiredRoute } from '@ac/constants/routes';
 
 export type ErrorHandlers = {
   [key in RequestErrorBody['code']]?: (error: RequestErrorBody) => void | Promise<void>;
@@ -15,10 +17,16 @@ export type ErrorHandlers = {
 const useErrorHandler = () => {
   const { t } = useTranslation();
   const { setToast } = useContext(PageContext);
+  const navigate = useNavigate();
 
   const handleError = useCallback(
     async (error: unknown, errorHandlers?: ErrorHandlers) => {
       if (error instanceof HTTPError) {
+        if (error.response.status === 401) {
+          void navigate(sessionExpiredRoute, { replace: true });
+          return;
+        }
+
         try {
           const logtoError = await error.response.json<RequestErrorBody>();
 
@@ -50,7 +58,7 @@ const useErrorHandler = () => {
       setToast(t('error.unknown'));
       console.error(error);
     },
-    [setToast, t]
+    [navigate, setToast, t]
   );
 
   return handleError;

packages/account-center/src/pages/SessionExpired/index.tsx

@@ -0,0 +1,25 @@
+import { useLogto } from '@logto/react';
+
+import ErrorPage from '@ac/components/ErrorPage';
+import { accountCenterBasePath } from '@ac/utils/account-center-route';
+
+const redirectUri = `${window.location.origin}${accountCenterBasePath}`;
+
+const SessionExpired = () => {
+  const { signIn } = useLogto();
+
+  return (
+    <ErrorPage
+      titleKey="error.something_went_wrong"
+      messageKey="error.invalid_session"
+      action={{
+        titleKey: 'action.sign_in',
+        onClick: () => {
+          void signIn({ redirectUri });
+        },
+      }}
+    />
+  );
+};
+
+export default SessionExpired;

packages/account-center/src/utils/account-center-route.ts

@@ -1,7 +1,9 @@
+import { emailRoute } from '@ac/constants/routes';
+
 export const accountCenterBasePath = '/account-center';
 const storageKey = 'account-center-route-cache';
 
-const knownRoutePrefixes: readonly string[] = ['/email', '/phone', '/username', '/password'];
+const knownRoutePrefixes: readonly string[] = [emailRoute, '/phone', '/username', '/password'];
 
 const isKnownRoute = (pathname?: string): pathname is string =>
   pathname !== undefined &&