feat(account-center): password verification (#7996)

* feat(account-center): restore route after sign-in redirects

* feat(account-center): setup account center context

* refactor: verification component

* feat: fetch account info

* feat: add VerificationMethodList

* fix: add scopes

* refactor: secondary layout

* feat: apply layout

* feat: verification method button

* feat: wrap password verification

* refactor: add react router dom

* feat: password input

* feat: error toast

* refactor: simply error

* fix: handle go back

* feat: createAuthenticatedKy

* feat: persist verification id

* chore: fix pnpm lock

* chore: fix jest scss

* fix: add openapi

* refactor: update NavBar goback param

Author: wangsijie

packages/account-center/package.json

@@ -52,10 +52,12 @@
     "react-modal": "^3.15.1",
     "react-top-loading-bar": "^2.3.1",
     "stylelint": "^15.0.0",
+    "superstruct": "^2.0.0",
     "typescript": "^5.5.3",
     "use-debounced-loader": "^0.1.1",
     "vite": "^6.3.6",
-    "vite-plugin-compression": "^0.5.1"
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "engines": {
     "node": "^22.14.0"
@@ -66,5 +68,8 @@
   "stylelint": {
     "extends": "@silverhand/eslint-config-react/.stylelintrc"
   },
-  "prettier": "@silverhand/eslint-config/.prettierrc"
+  "prettier": "@silverhand/eslint-config/.prettierrc",
+  "dependencies": {
+    "react-router-dom": "^7.9.6"
+  }
 }

packages/account-center/src/App.tsx

@@ -1,6 +1,7 @@
-import { LogtoProvider, useLogto } from '@logto/react';
+import { LogtoProvider, useLogto, UserScope } from '@logto/react';
 import { accountCenterApplicationId } from '@logto/schemas';
 import { useContext, useEffect } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import AppBoundary from '@ac/Providers/AppBoundary';
 
@@ -11,21 +12,22 @@ import PageContext from './Providers/PageContextProvider/PageContext';
 import BrandingHeader from './components/BrandingHeader';
 import ErrorPage from './components/ErrorPage';
 import initI18n from './i18n/init';
+import Email from './pages/Email';
 import Home from './pages/Home';
-import { handleAccountCenterRoute } from './utils/account-center-route';
+import { accountCenterBasePath, handleAccountCenterRoute } from './utils/account-center-route';
 
 import '@experience/shared/scss/normalized.scss';
 
 void initI18n();
 handleAccountCenterRoute();
 
-const redirectUri = `${window.location.origin}/account-center`;
+const redirectUri = `${window.location.origin}${accountCenterBasePath}`;
 
 const Main = () => {
   const params = new URLSearchParams(window.location.search);
   const isInCallback = Boolean(params.get('code'));
   const { isAuthenticated, isLoading, signIn } = useLogto();
-  const { isLoadingExperience, experienceError } = useContext(PageContext);
+  const { isLoadingExperience, experienceError, userInfoError } = useContext(PageContext);
 
   useEffect(() => {
     if (isInCallback || isLoading) {
@@ -41,7 +43,7 @@ const Main = () => {
     return <Callback />;
   }
 
-  if (experienceError) {
+  if (experienceError ?? userInfoError) {
     return (
       <ErrorPage
         titleKey="error.something_went_wrong"
@@ -58,31 +60,40 @@ const Main = () => {
     return <div className={styles.status}>Redirecting to sign in…</div>;
   }
 
-  return <Home />;
+  return (
+    <Routes>
+      <Route path="email" element={<Email />} />
+      <Route index element={<Home />} />
+      <Route path="*" element={<Home />} />
+    </Routes>
+  );
 };
 
 const App = () => (
-  <LogtoProvider
-    config={{
-      endpoint: window.location.origin,
-      appId: accountCenterApplicationId,
-    }}
-  >
-    <PageContextProvider>
-      <AppBoundary>
-        <div className={styles.app}>
-          <BrandingHeader />
-          <div className={styles.layout}>
-            <div className={styles.container}>
-              <main className={styles.main}>
-                <Main />
-              </main>
+  <BrowserRouter basename={accountCenterBasePath}>
+    <LogtoProvider
+      config={{
+        endpoint: window.location.origin,
+        appId: accountCenterApplicationId,
+        scopes: [UserScope.Profile, UserScope.Email, UserScope.Phone, UserScope.Identities],
+      }}
+    >
+      <PageContextProvider>
+        <AppBoundary>
+          <div className={styles.app}>
+            <BrandingHeader />
+            <div className={styles.layout}>
+              <div className={styles.container}>
+                <main className={styles.main}>
+                  <Main />
+                </main>
+              </div>
             </div>
           </div>
-        </div>
-      </AppBoundary>
-    </PageContextProvider>
-  </LogtoProvider>
+        </AppBoundary>
+      </PageContextProvider>
+    </LogtoProvider>
+  </BrowserRouter>
 );
 
 export default App;

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

@@ -1,6 +1,8 @@
 import useColorTheme from '@/Providers/AppBoundary/use-color-theme';
 import type { ReactElement } from 'react';
 
+import ToastProvider from '../ToastProvider';
+
 import AppMeta from './AppMeta';
 
 type Props = {
@@ -13,7 +15,7 @@ const AppBoundary = ({ children }: Props) => {
   return (
     <>
       <AppMeta />
-      {children}
+      <ToastProvider>{children}</ToastProvider>
     </>
   );
 };

packages/account-center/src/Providers/ExperiencePageContextBridge.tsx

@@ -15,9 +15,8 @@ type Props = {
  * package so shared components (AppBoundary) can consume consistent values.
  */
 const ExperiencePageContextBridge = ({ children }: Props) => {
-  const { theme, setTheme, experienceSettings, setExperienceSettings } =
+  const { theme, toast, setTheme, setToast, experienceSettings, setExperienceSettings } =
     useContext(AccountPageContext);
-  const [toast, setToast] = useState('');
   const [loading, setLoading] = useState(false);
   const [platform, setPlatform] = useState<Platform>('web');
   const [termsAgreement, setTermsAgreement] = useState(false);

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

@@ -1,24 +1,42 @@
 import type { SignInExperienceResponse } from '@experience/shared/types';
-import { Theme } from '@logto/schemas';
+import { Theme, type AccountCenter, type UserProfileResponse } from '@logto/schemas';
 import { createContext } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
 export type PageContextType = {
   theme: Theme;
+  toast: string;
   setTheme: React.Dispatch<React.SetStateAction<Theme>>;
+  setToast: React.Dispatch<React.SetStateAction<string>>;
   experienceSettings?: SignInExperienceResponse;
   setExperienceSettings: React.Dispatch<React.SetStateAction<SignInExperienceResponse | undefined>>;
+  accountCenterSettings?: AccountCenter;
+  setAccountCenterSettings: React.Dispatch<React.SetStateAction<AccountCenter | undefined>>;
+  userInfo?: Partial<UserProfileResponse>;
+  setUserInfo: React.Dispatch<React.SetStateAction<Partial<UserProfileResponse> | undefined>>;
+  userInfoError?: Error;
+  verificationId?: string;
+  setVerificationId: (verificationId?: string, expiresAt?: string) => void;
   isLoadingExperience: boolean;
   experienceError?: Error;
 };
 
 const PageContext = createContext<PageContextType>({
   theme: Theme.Light,
+  toast: '',
   setTheme: noop,
+  setToast: noop,
   experienceSettings: undefined,
   setExperienceSettings: noop,
+  accountCenterSettings: undefined,
+  setAccountCenterSettings: noop,
+  userInfo: undefined,
+  setUserInfo: noop,
+  userInfoError: undefined,
+  verificationId: undefined,
+  setVerificationId: noop,
   isLoadingExperience: false,
   experienceError: undefined,
 });

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

@@ -1,33 +1,101 @@
+import { useLogto } from '@logto/react';
 import { Theme } from '@logto/schemas';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { getAccountCenterSettings } from '@ac/apis/account-center';
 import { getSignInExperienceSettings } from '@ac/apis/sign-in-experience';
+import { getUserInfo } from '@ac/apis/user';
 import { getThemeBySystemPreference, subscribeToSystemTheme } from '@ac/utils/theme';
 
 import type { PageContextType } from './PageContext';
 import PageContext from './PageContext';
+import {
+  clearVerificationRecord,
+  getStoredVerificationId,
+  persistVerificationRecord,
+} from './verification-storage';
 
 type Props = {
   readonly children: React.ReactNode;
 };
 
 const PageContextProvider = ({ children }: Props) => {
+  const { isAuthenticated, getAccessToken } = useLogto();
   const [theme, setTheme] = useState(Theme.Light);
+  const [toast, setToast] = useState('');
   const [experienceSettings, setExperienceSettings] =
     useState<PageContextType['experienceSettings']>(undefined);
+  const [accountCenterSettings, setAccountCenterSettings] =
+    useState<PageContextType['accountCenterSettings']>(undefined);
+  const [userInfo, setUserInfo] = useState<PageContextType['userInfo']>(undefined);
+  const [userInfoError, setUserInfoError] = useState<Error>();
+  const [verificationId, setVerificationId] = useState<string>();
   const [isLoadingExperience, setIsLoadingExperience] = useState(true);
   const [experienceError, setExperienceError] = useState<Error>();
 
+  useEffect(() => {
+    const storedVerificationId = getStoredVerificationId();
+
+    if (storedVerificationId) {
+      setVerificationId(storedVerificationId);
+    }
+  }, []);
+
+  const setVerificationIdCallback = useCallback((id?: string, expiresAt?: string) => {
+    setVerificationId(id);
+
+    if (!id || !expiresAt) {
+      clearVerificationRecord();
+      return;
+    }
+
+    persistVerificationRecord({
+      verificationId: id,
+      expiresAt,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!isAuthenticated) {
+      return;
+    }
+
+    const fetchUserInfo = async () => {
+      try {
+        const accessToken = await getAccessToken();
+        if (!accessToken) {
+          return;
+        }
+
+        const data = await getUserInfo(accessToken);
+
+        setUserInfo(data);
+        setUserInfoError(undefined);
+      } catch (error: unknown) {
+        setUserInfoError(
+          error instanceof Error ? error : new Error('Failed to load user information.')
+        );
+      }
+    };
+
+    void fetchUserInfo();
+  }, [isAuthenticated, getAccessToken]);
+
   useEffect(() => {
     const loadSettings = async () => {
       setIsLoadingExperience(true);
 
       try {
-        const settings = await getSignInExperienceSettings();
+        const [settings, accountCenter] = await Promise.all([
+          getSignInExperienceSettings(),
+          getAccountCenterSettings(),
+        ]);
         setExperienceSettings(settings);
+        setAccountCenterSettings(accountCenter);
         setExperienceError(undefined);
       } catch (error: unknown) {
         setExperienceSettings(undefined);
+        setAccountCenterSettings(undefined);
         setExperienceError(
           error instanceof Error ? error : new Error('Failed to load sign-in experience settings.')
         );
@@ -60,13 +128,33 @@ const PageContextProvider = ({ children }: Props) => {
   const value = useMemo<PageContextType>(
     () => ({
       theme,
+      toast,
       setTheme,
+      setToast,
       experienceSettings,
       setExperienceSettings,
+      accountCenterSettings,
+      setAccountCenterSettings,
+      userInfo,
+      setUserInfo,
+      userInfoError,
+      verificationId,
+      setVerificationId: setVerificationIdCallback,
       isLoadingExperience,
       experienceError,
     }),
-    [experienceError, experienceSettings, isLoadingExperience, theme]
+    [
+      accountCenterSettings,
+      experienceError,
+      experienceSettings,
+      isLoadingExperience,
+      theme,
+      toast,
+      userInfo,
+      userInfoError,
+      verificationId,
+      setVerificationIdCallback,
+    ]
   );
 
   return <PageContext.Provider value={value}>{children}</PageContext.Provider>;