refactor(console): fix me api error

packages/console/src/hooks/use-logto-user-id.ts

@@ -0,0 +1,25 @@
+import { useLogto } from '@logto/react';
+import { useEffect, useState } from 'react';
+
+const useLogtoUserId = () => {
+  const { getIdTokenClaims, isAuthenticated } = useLogto();
+  const [userId, setUserId] = useState<string>();
+
+  useEffect(() => {
+    const fetch = async () => {
+      const claims = await getIdTokenClaims();
+      setUserId(claims?.sub);
+    };
+
+    if (isAuthenticated) {
+      void fetch();
+    } else {
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      setUserId(undefined);
+    }
+  }, [getIdTokenClaims, isAuthenticated]);
+
+  return userId;
+};
+
+export default useLogtoUserId;

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

@@ -2,13 +2,16 @@ import { languageKeys } from '@logto/core-kit';
 import { useLogto } from '@logto/react';
 import { AppearanceMode } from '@logto/schemas';
 import { Nullable, Optional } from '@silverhand/essentials';
+import { t } from 'i18next';
 import { useCallback, useEffect, useMemo } from 'react';
+import { toast } from 'react-hot-toast';
 import useSWR from 'swr';
 import { z } from 'zod';
 
 import { themeStorageKey } from '@/consts';
 
 import useApi, { RequestError } from './use-api';
+import useLogtoUserId from './use-logto-user-id';
 
 const userPreferencesGuard = z.object({
   language: z.enum(languageKeys).optional(),
@@ -28,9 +31,10 @@ const getEnumFromArray = <T extends string>(
 
 const useUserPreferences = () => {
   const { isAuthenticated, error: authError } = useLogto();
-  const shouldFetch = isAuthenticated && !authError;
+  const userId = useLogtoUserId();
+  const shouldFetch = isAuthenticated && !authError && userId;
   const { data, mutate, error } = useSWR<unknown, RequestError>(
-    shouldFetch && '/api/users/me/custom-data'
+    shouldFetch && `/api/users/${userId}/custom-data`
   );
   const api = useApi();
 
@@ -49,8 +53,14 @@ const useUserPreferences = () => {
   const userPreferences = useMemo(() => parseData(), [parseData]);
 
   const update = async (data: Partial<UserPreferences>) => {
+    if (!userId) {
+      toast.error(t('errors.unexpected_error'));
+
+      return;
+    }
+
     const updated = await api
-      .patch('/api/users/me/custom-data', {
+      .patch(`/api/users/${userId}/custom-data`, {
         json: {
           customData: {
             [key]: {

packages/console/src/pages/Settings/components/ChangePassword.tsx

@@ -9,6 +9,7 @@ import FormField from '@/components/FormField';
 import ModalLayout from '@/components/ModalLayout';
 import TextInput from '@/components/TextInput';
 import useApi from '@/hooks/use-api';
+import useLogtoUserId from '@/hooks/use-logto-user-id';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 import * as styles from './ChangePassword.module.scss';
@@ -23,12 +24,19 @@ const ChangePassword = () => {
   const [isOpen, setIsOpen] = useState(false);
   const { watch, register, reset } = useForm<FormFields>();
   const [isLoading, setIsLoading] = useState(false);
+  const userId = useLogtoUserId();
   const api = useApi();
   const password = watch('password');
   const confirmPassword = watch('confirmPassword');
   const isDisabled = !password || password !== confirmPassword;
 
   const onSubmit = async () => {
+    if (!userId) {
+      toast.error(t('errors.unexpected_error'));
+
+      return;
+    }
+
     setIsLoading(true);
     await api.patch(`/api/users/me/password`, { json: { password } }).json();
     setIsLoading(false);