refactor(account-center): get access token hook (#8020)

refactor(account-center): session error boundry

Author: wangsijie

packages/account-center/src/App.tsx

@@ -4,25 +4,20 @@ import { useContext, useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import AppBoundary from '@ac/Providers/AppBoundary';
+import ErrorBoundary from '@ac/Providers/AppBoundary/ErrorBoundary';
+import LogtoErrorBoundary from '@ac/Providers/AppBoundary/LogtoErrorBoundary';
 import LoadingContextProvider from '@ac/Providers/LoadingContextProvider';
 
 import styles from './App.module.scss';
 import Callback from './Callback';
 import PageContextProvider from './Providers/PageContextProvider';
 import PageContext from './Providers/PageContextProvider/PageContext';
 import BrandingHeader from './components/BrandingHeader';
-import ErrorPage from './components/ErrorPage';
-import {
-  emailRoute,
-  phoneRoute,
-  sessionExpiredRoute,
-  updateSuccessRoute,
-} from './constants/routes';
+import { emailRoute, phoneRoute, updateSuccessRoute } from './constants/routes';
 import initI18n from './i18n/init';
 import Email from './pages/Email';
 import Home from './pages/Home';
 import Phone from './pages/Phone';
-import SessionExpired from './pages/SessionExpired';
 import UpdateSuccess from './pages/UpdateSuccess';
 import { accountCenterBasePath, handleAccountCenterRoute } from './utils/account-center-route';
 
@@ -37,7 +32,7 @@ const Main = () => {
   const params = new URLSearchParams(window.location.search);
   const isInCallback = Boolean(params.get('code'));
   const { isAuthenticated, isLoading, signIn } = useLogto();
-  const { isLoadingExperience, experienceError, userInfoError } = useContext(PageContext);
+  const { isLoadingExperience } = useContext(PageContext);
   const isInitialAuthLoading = !isAuthenticated && isLoading;
 
   useEffect(() => {
@@ -54,15 +49,6 @@ const Main = () => {
     return <Callback />;
   }
 
-  if (experienceError ?? userInfoError) {
-    return (
-      <ErrorPage
-        titleKey="error.something_went_wrong"
-        rawMessage="We were unable to load your experience settings. Please refresh the page."
-      />
-    );
-  }
-
   if (isInitialAuthLoading || isLoadingExperience) {
     return <div className={styles.status}>Loading…</div>;
   }
@@ -73,7 +59,6 @@ const Main = () => {
 
   return (
     <Routes>
-      <Route path={sessionExpiredRoute} element={<SessionExpired />} />
       <Route path={updateSuccessRoute} element={<UpdateSuccess />} />
       <Route path={emailRoute} element={<Email />} />
       <Route path={phoneRoute} element={<Phone />} />
@@ -100,7 +85,11 @@ const App = () => (
               <div className={styles.layout}>
                 <div className={styles.container}>
                   <main className={styles.main}>
-                    <Main />
+                    <ErrorBoundary>
+                      <LogtoErrorBoundary>
+                        <Main />
+                      </LogtoErrorBoundary>
+                    </ErrorBoundary>
                   </main>
                 </div>
               </div>

packages/account-center/src/Providers/AppBoundary/ErrorBoundary.tsx

@@ -0,0 +1,55 @@
+import { LogtoClientError, LogtoError, LogtoRequestError } from '@logto/react';
+import { HTTPError } from 'ky';
+import type { ReactNode } from 'react';
+import { Component } from 'react';
+
+import ErrorPage from '@ac/components/ErrorPage';
+import SessionExpired from '@ac/pages/SessionExpired';
+
+const isOidcInvalidGrantError = (error: Error) => {
+  if (!(error instanceof LogtoRequestError)) {
+    return false;
+  }
+
+  const oidcGrantErrors = ['oidc.invalid_grant', 'oidc.invalid_target'];
+
+  return oidcGrantErrors.includes(error.code);
+};
+
+type Props = {
+  readonly children: ReactNode;
+};
+
+type State = {
+  error?: Error;
+};
+
+class ErrorBoundary extends Component<Props, State> {
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  public state: State = {};
+
+  render() {
+    const { children } = this.props;
+    const { error } = this.state;
+
+    if (!error) {
+      return children;
+    }
+
+    if (
+      error instanceof LogtoError ||
+      error instanceof LogtoClientError ||
+      isOidcInvalidGrantError(error) ||
+      (error instanceof HTTPError && error.response.status === 401)
+    ) {
+      return <SessionExpired />;
+    }
+
+    return <ErrorPage titleKey="error.something_went_wrong" rawMessage={error.message} />;
+  }
+}
+
+export default ErrorBoundary;

packages/account-center/src/Providers/AppBoundary/LogtoErrorBoundary.tsx

@@ -0,0 +1,20 @@
+import { useLogto } from '@logto/react';
+import type { ReactElement } from 'react';
+import { useEffect } from 'react';
+
+/**
+ * Keep children untouched but throw Logto errors so upper error boundary can handle them.
+ */
+const LogtoErrorBoundary = ({ children }: { readonly children: ReactElement }) => {
+  const { error } = useLogto();
+
+  useEffect(() => {
+    if (error) {
+      throw error;
+    }
+  }, [error]);
+
+  return children;
+};
+
+export default LogtoErrorBoundary;

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

@@ -1,13 +1,11 @@
 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 useApi from '@ac/hooks/use-api';
 import { getThemeBySystemPreference, subscribeToSystemTheme } from '@ac/utils/theme';
 
 import type { PageContextType } from './PageContext';
@@ -23,8 +21,8 @@ type Props = {
 };
 
 const PageContextProvider = ({ children }: Props) => {
-  const { isAuthenticated, getAccessToken } = useLogto();
-  const navigate = useNavigate();
+  const { isAuthenticated } = useLogto();
+  const getUserInfoRequest = useApi(getUserInfo, { silent: true });
   const [theme, setTheme] = useState(Theme.Light);
   const [toast, setToast] = useState('');
   const [experienceSettings, setExperienceSettings] =
@@ -65,30 +63,21 @@ const PageContextProvider = ({ children }: Props) => {
     }
 
     const fetchUserInfo = async () => {
-      try {
-        const accessToken = await getAccessToken();
-        if (!accessToken) {
-          return;
-        }
-
-        const data = await getUserInfo(accessToken);
-
-        setUserInfo(data);
-        setUserInfoError(undefined);
-      } catch (error: unknown) {
-        if (error instanceof HTTPError && error.response.status === 401) {
-          void navigate(sessionExpiredRoute, { replace: true });
-          return;
-        }
+      const [error, data] = await getUserInfoRequest();
 
+      if (error || !data) {
         setUserInfoError(
           error instanceof Error ? error : new Error('Failed to load user information.')
         );
+        return;
       }
+
+      setUserInfo(data);
+      setUserInfoError(undefined);
     };
 
     void fetchUserInfo();
-  }, [isAuthenticated, getAccessToken, navigate]);
+  }, [getUserInfoRequest, isAuthenticated]);
 
   useEffect(() => {
     const loadSettings = async () => {
@@ -103,11 +92,6 @@ 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(
@@ -119,7 +103,7 @@ const PageContextProvider = ({ children }: Props) => {
     };
 
     void loadSettings();
-  }, [navigate]);
+  }, []);
 
   useEffect(() => {
     if (!experienceSettings?.color.isDarkModeEnabled) {

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

@@ -4,7 +4,6 @@ import SmartInputField from '@experience/shared/components/InputFields/SmartInpu
 import VerificationCodeInput, {
   defaultLength,
 } from '@experience/shared/components/VerificationCode';
-import { useLogto } from '@logto/react';
 import { SignInIdentifier } from '@logto/schemas';
 import type { TFuncKey } from 'i18next';
 import { useCallback, useContext, useEffect, useState } from 'react';
@@ -60,7 +59,6 @@ const CodeVerification = ({
   verifyCode,
 }: Props) => {
   const { t } = useTranslation();
-  const { getAccessToken } = useLogto();
   const { setToast, setVerificationId } = useContext(PageContext);
   const { loading } = useContext(LoadingContext);
   const sendCodeRequest = useApi(sendCode);
@@ -104,13 +102,7 @@ const CodeVerification = ({
       return;
     }
 
-    const accessToken = await getAccessToken();
-
-    if (!accessToken) {
-      return;
-    }
-
-    const [error, result] = await sendCodeRequest(accessToken, identifier);
+    const [error, result] = await sendCodeRequest(identifier);
 
     if (error) {
       await handleError(error);
@@ -129,16 +121,7 @@ const CodeVerification = ({
     setCodeInput([]);
     setHasSentCode(true);
     startCountdown();
-  }, [
-    getAccessToken,
-    handleError,
-    identifier,
-    loading,
-    sendCodeRequest,
-    setToast,
-    startCountdown,
-    t,
-  ]);
+  }, [handleError, identifier, loading, sendCodeRequest, setToast, startCountdown, t]);
 
   const handleVerify = useCallback(
     async (code: string[]) => {
@@ -154,13 +137,7 @@ const CodeVerification = ({
 
       const { recordId, expiresAt } = pendingVerificationRecord;
 
-      const accessToken = await getAccessToken();
-
-      if (!accessToken) {
-        return;
-      }
-
-      const [error] = await verifyCodeRequest(accessToken, {
+      const [error] = await verifyCodeRequest({
         verificationRecordId: recordId,
         code: code.join(''),
         identifier,
@@ -176,7 +153,6 @@ const CodeVerification = ({
       setPendingVerificationRecord(undefined);
     },
     [
-      getAccessToken,
       handleError,
       identifier,
       loading,

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

@@ -1,6 +1,5 @@
 import Button from '@experience/shared/components/Button';
 import PasswordInputField from '@experience/shared/components/InputFields/PasswordInputField';
-import { useLogto } from '@logto/react';
 import { useState, useContext, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -20,7 +19,6 @@ type Props = {
 const PasswordVerification = ({ onBack }: Props) => {
   const { t } = useTranslation();
   const { setVerificationId, setToast } = useContext(PageContext);
-  const { getAccessToken } = useLogto();
   const { loading } = useContext(LoadingContext);
   const [password, setPassword] = useState('');
   const asyncVerifyPassword = useApi(verifyPassword);
@@ -33,14 +31,7 @@ const PasswordVerification = ({ onBack }: Props) => {
       return;
     }
 
-    const accessToken = await getAccessToken();
-
-    if (!accessToken) {
-      setToast(t('account_center.password_verification.error_failed'));
-      return;
-    }
-
-    const [error, result] = await asyncVerifyPassword(accessToken, password);
+    const [error, result] = await asyncVerifyPassword(password);
 
     if (error) {
       await handleError(error);

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

@@ -1,4 +1,3 @@
-export const sessionExpiredRoute = '/session-expired';
 export const emailRoute = '/email';
 export const phoneRoute = '/phone';
 export const updateSuccessRoute = '/update-success';

packages/account-center/src/hooks/use-api.ts

@@ -1,3 +1,4 @@
+import { useLogto } from '@logto/react';
 import type { Nullable } from '@silverhand/essentials';
 import { useCallback, useContext } from 'react';
 
@@ -8,9 +9,10 @@ type Options = {
 };
 
 const useApi = <Args extends unknown[], Response>(
-  api: (...args: Args) => Promise<Response>,
+  api: (accessToken: string, ...args: Args) => Promise<Response>,
   options?: Options
 ) => {
+  const { getAccessToken } = useLogto();
   const { setLoading } = useContext(LoadingContext);
 
   const request = useCallback(
@@ -20,7 +22,13 @@ const useApi = <Args extends unknown[], Response>(
       }
 
       try {
-        const result = await api(...args);
+        const accessToken = await getAccessToken();
+
+        if (!accessToken) {
+          throw new Error('Session expired');
+        }
+
+        const result = await api(accessToken, ...args);
         return [null, result];
       } catch (error: unknown) {
         return [error];
@@ -30,7 +38,7 @@ const useApi = <Args extends unknown[], Response>(
         }
       }
     },
-    [api, options?.silent, setLoading]
+    [api, getAccessToken, options?.silent, setLoading]
   );
 
   return request;