fix(console): update default tenant id on manual navigation only (#4417)

packages/console/src/containers/AppContent/components/Topbar/TenantSelector/index.tsx

@@ -9,6 +9,7 @@ import { TenantsContext } from '@/contexts/TenantsProvider';
 import Divider from '@/ds-components/Divider';
 import Dropdown from '@/ds-components/Dropdown';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
+import useUserDefaultTenantId from '@/hooks/use-user-default-tenant-id';
 import { onKeyDownHandler } from '@/utils/a11y';
 
 import TenantDropdownItem from './TenantDropdownItem';
@@ -28,6 +29,7 @@ export default function TenantSelector() {
   const anchorRef = useRef<HTMLDivElement>(null);
   const [showDropdown, setShowDropdown] = useState(false);
   const [showCreateTenantModal, setShowCreateTenantModal] = useState(false);
+  const { updateDefaultTenantId } = useUserDefaultTenantId();
 
   if (tenants.length === 0 || !currentTenantInfo) {
     return null;
@@ -69,6 +71,7 @@ export default function TenantSelector() {
               isSelected={tenantData.id === currentTenantId}
               onClick={() => {
                 navigateTenant(tenantData.id);
+                void updateDefaultTenantId(tenantData.id);
                 setShowDropdown(false);
               }}
             />

packages/console/src/containers/TenantAccess/index.tsx

@@ -10,7 +10,6 @@ import AppLoading from '@/components/AppLoading';
 // eslint-disable-next-line unused-imports/no-unused-imports
 import type ProtectedRoutes from '@/containers/ProtectedRoutes';
 import { TenantsContext } from '@/contexts/TenantsProvider';
-import useUserDefaultTenantId from '@/hooks/use-user-default-tenant-id';
 
 /**
  * The container that ensures the user has access to the current tenant. When the user is
@@ -47,7 +46,6 @@ export default function TenantAccess() {
   const { getAccessToken, signIn, isAuthenticated } = useLogto();
   const { currentTenant, currentTenantId, currentTenantStatus, setCurrentTenantStatus } =
     useContext(TenantsContext);
-  const { updateIfNeeded } = useUserDefaultTenantId();
   const { mutate } = useSWRConfig();
 
   // Clean the cache when the current tenant ID changes. This is required because the
@@ -104,12 +102,5 @@ export default function TenantAccess() {
     signIn,
   ]);
 
-  // Update the user's default tenant ID if the current tenant is validated.
-  useEffect(() => {
-    if (currentTenantStatus === 'validated') {
-      void updateIfNeeded();
-    }
-  }, [currentTenantStatus, updateIfNeeded]);
-
   return currentTenantStatus === 'validated' ? <Outlet /> : <AppLoading />;
 }

packages/console/src/hooks/use-user-default-tenant-id.ts

@@ -1,6 +1,6 @@
 import { defaultTenantId as ossDefaultTenantId } from '@logto/schemas';
 import { trySafe } from '@silverhand/essentials';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import { z } from 'zod';
 
 import { isCloud } from '@/consts/env';
@@ -24,8 +24,6 @@ const useUserDefaultTenantId = () => {
     () => trySafe(() => z.object({ [key]: z.string() }).parse(data)[key]),
     [data]
   );
-  /** The last tenant ID that has been updated in the user's `customData`. */
-  const [updatedTenantId, setUpdatedTenantId] = useState(storedId);
 
   const defaultTenantId = useMemo(() => {
     // Directly return the default tenant ID for OSS because it's single tenant.
@@ -42,31 +40,26 @@ const useUserDefaultTenantId = () => {
     return tenants[0]?.id;
   }, [storedId, tenants]);
 
-  const updateIfNeeded = useCallback(async () => {
+  const updateDefaultTenantId = useCallback(
+    async (tenantId: string) => {
       // No need for updating for OSS because it's single tenant.
       if (!isCloud) {
         return;
       }
 
-    // Note storedId is not checked here because it's by design that the default tenant ID
-    // should be updated only when the user manually changes the current tenant. That is,
-    // if the user opens a new tab and go back to the original tab, the default tenant ID
-    // should still be the ID of the new tab.
-    if (currentTenantId !== updatedTenantId) {
-      setUpdatedTenantId(currentTenantId);
       await updateMeCustomData({
-        [key]: currentTenantId,
+        [key]: tenantId,
       });
-    }
-  }, [currentTenantId, updateMeCustomData, updatedTenantId]);
+    },
+    [updateMeCustomData]
+  );
 
   return useMemo(
     () => ({
       defaultTenantId,
-      /** Update the default tenant ID to the current tenant ID. */
-      updateIfNeeded,
+      updateDefaultTenantId,
     }),
-    [defaultTenantId, updateIfNeeded]
+    [defaultTenantId, updateDefaultTenantId]
   );
 };