feat(console): use account API for profile page (#8130)

* feat(console): use account API for profile page

Replace /me API with Account API (/api/my-account) for user profile management in the console.

Changes:
- Add useAccountApi hook for calling Account API with opaque access tokens
- Update BasicUserInfoUpdateModal to use Account API for name and username
- Update useCurrentUser to fetch user info and update custom data via Account API
- Add UserScope.Profile to console scopes
- Enable account center for admin tenant with all fields editable
- Add database alteration for existing installations

* feat(console): guard Account API usage with isDevFeaturesEnabled flag

Conditionally use Account API or Me API based on the dev features flag:
- BasicUserInfoUpdateModal uses Account API for name/username only when enabled
- use-current-user uses Account API for fetching and updating only when enabled

Author: wangsijie

packages/cli/src/commands/database/seed/tables.ts

@@ -28,7 +28,10 @@ import {
   AccountCenters,
 } from '@logto/schemas';
 import { getTenantRole } from '@logto/schemas';
-import { createDefaultAccountCenter } from '@logto/schemas/lib/seeds/account-center.js';
+import {
+  createDefaultAccountCenter,
+  createAdminTenantAccountCenter,
+} from '@logto/schemas/lib/seeds/account-center.js';
 import { Tenants } from '@logto/schemas/models';
 import { generateStandardId } from '@logto/shared';
 import type { DatabaseTransactionConnection } from '@silverhand/slonik';
@@ -204,7 +207,9 @@ export const seedTables = async (
     connection.query(insertInto(createAdminTenantSignInExperience(), SignInExperiences.table)),
     connection.query(insertInto(createDefaultAdminConsoleApplication(), Applications.table)),
     connection.query(insertInto(createDefaultAccountCenter(defaultTenantId), AccountCenters.table)),
-    connection.query(insertInto(createDefaultAccountCenter(adminTenantId), AccountCenters.table)),
+    connection.query(
+      insertInto(createAdminTenantAccountCenter(adminTenantId), AccountCenters.table)
+    ),
   ]);
 
   // The below seed data is for the Logto Cloud only. We put it here for the sake of simplicity.

packages/console/src/App.tsx

@@ -84,6 +84,7 @@ function Providers() {
 
   const scopes = useMemo(
     () => [
+      UserScope.Profile,
       UserScope.Email,
       UserScope.Identities,
       UserScope.CustomData,

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

@@ -0,0 +1,111 @@
+import { httpCodeToMessage } from '@logto/core-kit';
+import type { LogtoErrorCode } from '@logto/phrases';
+import { useLogto } from '@logto/react';
+import type { RequestErrorBody } from '@logto/schemas';
+import { conditionalArray } from '@silverhand/essentials';
+import ky from 'ky';
+import { type KyInstance } from 'node_modules/ky/distribution/types/ky';
+import { useCallback, useMemo } from 'react';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+
+import { requestTimeout, adminTenantEndpoint } from '@/consts';
+
+import useRedirectUri from './use-redirect-uri';
+import useSignOut from './use-sign-out';
+
+type AccountApiProps = {
+  hideErrorToast?: boolean | LogtoErrorCode[];
+  timeout?: number;
+  signal?: AbortSignal;
+};
+
+const useGlobalRequestErrorHandler = (toastDisabledErrorCodes?: LogtoErrorCode[]) => {
+  const { signOut } = useSignOut();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const postSignOutRedirectUri = useRedirectUri('signOut');
+
+  const handleError = useCallback(
+    async (response: Response) => {
+      const fallbackErrorMessage = t('errors.unknown_server_error');
+
+      try {
+        const data = await response.clone().json<RequestErrorBody>();
+
+        if (response.status === 403 && data.message === 'Insufficient permissions.') {
+          await signOut(postSignOutRedirectUri.href);
+          return;
+        }
+
+        if (toastDisabledErrorCodes?.includes(data.code)) {
+          return;
+        }
+
+        toast.error([data.message, data.details].join('\n') || fallbackErrorMessage);
+      } catch {
+        toast.error(httpCodeToMessage[response.status] ?? fallbackErrorMessage);
+      }
+    },
+    [t, toastDisabledErrorCodes, signOut, postSignOutRedirectUri.href]
+  );
+
+  return { handleError };
+};
+
+/**
+ * A hook to get a Ky instance for calling the Account API (/api/my-account).
+ * The Account API uses OIDC opaque access tokens (no resource indicator).
+ */
+const useAccountApi = ({
+  hideErrorToast,
+  timeout = requestTimeout,
+  signal,
+}: AccountApiProps = {}): KyInstance => {
+  const { isAuthenticated, getAccessToken } = useLogto();
+  const { i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const disableGlobalErrorHandling = hideErrorToast === true;
+  const toastDisabledErrorCodes = Array.isArray(hideErrorToast) ? hideErrorToast : undefined;
+  const { handleError } = useGlobalRequestErrorHandler(toastDisabledErrorCodes);
+
+  const api = useMemo(
+    () =>
+      ky.create({
+        prefixUrl: adminTenantEndpoint,
+        timeout,
+        signal,
+        hooks: {
+          beforeError: conditionalArray(
+            !disableGlobalErrorHandling &&
+              (async (error) => {
+                await handleError(error.response);
+                return error;
+              })
+          ),
+          beforeRequest: [
+            async (request) => {
+              if (isAuthenticated) {
+                // Get opaque access token without resource indicator for Account API
+                const accessToken = await getAccessToken();
+                request.headers.set('Authorization', `Bearer ${accessToken ?? ''}`);
+                request.headers.set('Accept-Language', i18n.language);
+              }
+            },
+          ],
+        },
+      }),
+    [
+      timeout,
+      signal,
+      disableGlobalErrorHandling,
+      handleError,
+      isAuthenticated,
+      getAccessToken,
+      i18n.language,
+    ]
+  );
+
+  return api;
+};
+
+export default useAccountApi;

packages/console/src/hooks/use-current-user.ts

@@ -6,22 +6,32 @@ import { useTranslation } from 'react-i18next';
 import useSWR from 'swr';
 
 import { adminTenantEndpoint, meApi } from '@/consts';
+import { isDevFeaturesEnabled } from '@/consts/env';
 
+import useAccountApi from './use-account-api';
 import type { RequestError } from './use-api';
 import { useStaticApi } from './use-api';
 import useSwrFetcher from './use-swr-fetcher';
 
 const useCurrentUser = () => {
   const { isAuthenticated } = useLogto();
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const api = useStaticApi({ prefixUrl: adminTenantEndpoint, resourceIndicator: meApi.indicator });
+  const meApi_ = useStaticApi({
+    prefixUrl: adminTenantEndpoint,
+    resourceIndicator: meApi.indicator,
+  });
+  const accountApi = useAccountApi();
+  const api = isDevFeaturesEnabled ? accountApi : meApi_;
   const fetcher = useSwrFetcher<UserProfileResponse>(api);
   const {
     data: user,
     error,
     isLoading,
     mutate,
-  } = useSWR<UserProfileResponse, RequestError>(isAuthenticated && 'me', fetcher);
+  } = useSWR<UserProfileResponse, RequestError>(
+    isAuthenticated && (isDevFeaturesEnabled ? 'api/my-account' : 'me'),
+    fetcher
+  );
 
   const updateCustomData = useCallback(
     async (customData: JsonObject) => {
@@ -30,16 +40,26 @@ const useCurrentUser = () => {
         return;
       }
 
-      await mutate({
-        ...user,
-        customData: await api
-          .patch(`me/custom-data`, {
-            json: customData,
+      await (isDevFeaturesEnabled
+        ? mutate({
+            ...user,
+            customData: await accountApi
+              .patch('api/my-account', {
+                json: { customData },
+              })
+              .json<UserProfileResponse>()
+              .then((response) => response.customData),
           })
-          .json<JsonObject>(),
-      });
+        : mutate({
+            ...user,
+            customData: await meApi_
+              .patch('me/custom-data', {
+                json: customData,
+              })
+              .json<JsonObject>(),
+          }));
     },
-    [api, mutate, t, user]
+    [accountApi, meApi_, mutate, t, user]
   );
 
   return {

packages/console/src/pages/Profile/containers/BasicUserInfoUpdateModal/index.tsx

@@ -6,10 +6,12 @@ import { useTranslation } from 'react-i18next';
 import ReactModal from 'react-modal';
 
 import { adminTenantEndpoint, meApi } from '@/consts';
+import { isDevFeaturesEnabled } from '@/consts/env';
 import Button from '@/ds-components/Button';
 import ModalLayout from '@/ds-components/ModalLayout';
 import TextInput from '@/ds-components/TextInput';
 import ImageUploaderField from '@/ds-components/Uploader/ImageUploaderField';
+import useAccountApi from '@/hooks/use-account-api';
 import { useStaticApi } from '@/hooks/use-api';
 import { useConfirmModal } from '@/hooks/use-confirm-modal';
 import useUserAssetsService from '@/hooks/use-user-assets-service';
@@ -33,11 +35,12 @@ type FormFields = {
 function BasicUserInfoUpdateModal({ field, value: initialValue, isOpen, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { show: showModal } = useConfirmModal();
-  const api = useStaticApi({
+  const meApi_ = useStaticApi({
     prefixUrl: adminTenantEndpoint,
     resourceIndicator: meApi.indicator,
     hideErrorToast: true,
   });
+  const accountApi = useAccountApi({ hideErrorToast: true });
   const {
     register,
     clearErrors,
@@ -85,7 +88,11 @@ function BasicUserInfoUpdateModal({ field, value: initialValue, isOpen, onClose
     clearErrors();
     void handleSubmit(async (data) => {
       try {
-        await api.patch('me', { json: { [field]: data[field] } });
+        // Use Account API for name and username fields when dev features enabled,
+        // Me API for avatar (image upload not supported in Account API yet) and fallback
+        await (isDevFeaturesEnabled && field !== 'avatar'
+          ? accountApi.patch('api/my-account', { json: { [field]: data[field] } })
+          : meApi_.patch('me', { json: { [field]: data[field] } }));
         toast.success(t('profile.updated', { target: t(`profile.settings.${field}`) }));
         onClose();
       } catch (error: unknown) {
@@ -134,7 +141,7 @@ function BasicUserInfoUpdateModal({ field, value: initialValue, isOpen, onClose
                 name={name}
                 value={value}
                 uploadUrl="me/user-assets"
-                apiInstance={api}
+                apiInstance={meApi_}
                 onChange={onChange}
               />
             )}

packages/schemas/alterations/next-1766651246-enable-account-center-for-admin-tenant.ts

@@ -0,0 +1,32 @@
+import { sql } from '@silverhand/slonik';
+
+import type { AlterationScript } from '../lib/types/alteration.js';
+
+const adminTenantId = 'admin';
+
+/**
+ * Enable the account center for the admin tenant and set all fields to Edit.
+ * This allows the console profile page to use the Account API.
+ */
+const alteration: AlterationScript = {
+  up: async (pool) => {
+    await pool.query(sql`
+      update account_centers
+      set enabled = true,
+          fields = '{"name": "Edit", "avatar": "Edit", "profile": "Edit", "email": "Edit", "phone": "Edit", "password": "Edit", "username": "Edit", "social": "Edit", "customData": "Edit", "mfa": "Edit"}'::jsonb
+      where tenant_id = ${adminTenantId}
+        and id = 'default'
+    `);
+  },
+  down: async (pool) => {
+    await pool.query(sql`
+      update account_centers
+      set enabled = false,
+          fields = '{}'::jsonb
+      where tenant_id = ${adminTenantId}
+        and id = 'default'
+    `);
+  },
+};
+
+export default alteration;

packages/schemas/src/seeds/account-center.ts

@@ -1,4 +1,5 @@
 import type { CreateAccountCenter } from '../db-entries/index.js';
+import { AccountCenterControlValue } from '../foundations/index.js';
 
 export const createDefaultAccountCenter = (forTenantId: string): Readonly<CreateAccountCenter> =>
   Object.freeze({
@@ -7,3 +8,29 @@ export const createDefaultAccountCenter = (forTenantId: string): Readonly<Create
     enabled: false,
     fields: {},
   });
+
+/**
+ * Create the account center for the admin tenant.
+ * The account center is enabled by default and allows editing all fields,
+ * so that the console profile page can use the Account API.
+ */
+export const createAdminTenantAccountCenter = (
+  forTenantId: string
+): Readonly<CreateAccountCenter> =>
+  Object.freeze({
+    tenantId: forTenantId,
+    id: 'default',
+    enabled: true,
+    fields: {
+      name: AccountCenterControlValue.Edit,
+      avatar: AccountCenterControlValue.Edit,
+      profile: AccountCenterControlValue.Edit,
+      email: AccountCenterControlValue.Edit,
+      phone: AccountCenterControlValue.Edit,
+      password: AccountCenterControlValue.Edit,
+      username: AccountCenterControlValue.Edit,
+      social: AccountCenterControlValue.Edit,
+      customData: AccountCenterControlValue.Edit,
+      mfa: AccountCenterControlValue.Edit,
+    },
+  });