feat(console): update user access immediately on tenant role updates (#…

…5720) * feat(console): update user access immediately on tenant role updates * chore: improve comments Co-authored-by: Gao Sun <gao@silverhand.io> --------- Co-authored-by: Gao Sun <gao@silverhand.io>
logto-io · Apr 16, 2024 · 59acede · 59acede
1 parent 75deb2d
commit 59acede
Show file tree

Hide file tree

Showing 19 changed files with 164 additions and 100 deletions.
diff --git a/packages/connectors/connector-logto-email/package.json b/packages/connectors/connector-logto-email/package.json
@@ -48,6 +48,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-ab8a489"
+    "@logto/cloud": "0.2.5-821690c"
   }
 }
diff --git a/packages/console/package.json b/packages/console/package.json
@@ -28,13 +28,13 @@
     "@fontsource/roboto-mono": "^5.0.0",
     "@jest/types": "^29.5.0",
     "@logto/app-insights": "workspace:^1.4.0",
-    "@logto/cloud": "0.2.5-94f7bcc",
+    "@logto/cloud": "0.2.5-821690c",
     "@logto/connector-kit": "workspace:^3.0.0",
     "@logto/core-kit": "workspace:^2.4.0",
     "@logto/language-kit": "workspace:^1.1.0",
     "@logto/phrases": "workspace:^1.10.0",
     "@logto/phrases-experience": "workspace:^1.6.1",
-    "@logto/react": "^3.0.5",
+    "@logto/react": "^3.0.8",
     "@logto/schemas": "workspace:^1.15.0",
     "@logto/shared": "workspace:^3.1.0",
     "@mdx-js/react": "^1.6.22",

diff --git a/packages/console/src/containers/ConsoleContent/hooks.ts b/packages/console/src/containers/ConsoleContent/hooks.ts
@@ -0,0 +1,59 @@
+import { Prompt, useLogto } from '@logto/react';
+import { getTenantOrganizationId } from '@logto/schemas';
+import { useContext, useEffect, useState } from 'react';
+
+import { TenantsContext } from '@/contexts/TenantsProvider';
+import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
+import useRedirectUri from '@/hooks/use-redirect-uri';
+import { saveRedirect } from '@/utils/storage';
+
+/**
+ * Listens to the tenant scope changes for the current signed-in user. This hook will fetch the tenant scopes
+ * for the user, and compare it with the "scope" token claim in access token. After comparing the scopes:
+ *
+ * - If the user has been granted new scopes, it will re-consent to obtain the additional scopes.
+ * - If the user has been revoked scopes, it will clear the cached access token and renew one with shrunk scopes.
+ *
+ * Note: This hook should only be used once in the ConsoleContent component.
+ */
+const useTenantScopeListener = () => {
+  const { currentTenantId } = useContext(TenantsContext);
+  const { clearAccessToken, clearAllTokens, getOrganizationTokenClaims, signIn } = useLogto();
+  const [tokenClaims, setTokenClaims] = useState<string[]>();
+  const redirectUri = useRedirectUri();
+  const { scopes = [], isLoading } = useCurrentTenantScopes();
+
+  useEffect(() => {
+    (async () => {
+      const organizationId = getTenantOrganizationId(currentTenantId);
+      const claims = await getOrganizationTokenClaims(organizationId);
+      setTokenClaims(claims?.scope?.split(' ') ?? []);
+    })();
+  }, [currentTenantId, getOrganizationTokenClaims]);
+
+  useEffect(() => {
+    if (isLoading || tokenClaims === undefined) {
+      return;
+    }
+    const hasScopesGranted = scopes.some((scope) => !tokenClaims.includes(scope));
+    const hasScopesRevoked = tokenClaims.some((claim) => !scopes.includes(claim));
+    if (hasScopesGranted) {
+      (async () => {
+        // User has been newly granted scopes. Need to re-consent to obtain the additional scopes.
+        saveRedirect();
+        await clearAllTokens();
+        void signIn({
+          redirectUri: redirectUri.href,
+          prompt: Prompt.Consent,
+        });
+      })();
+    }
+    if (hasScopesRevoked) {
+      // User has been revoked scopes. Need to clear the cached access token and it will be renewed
+      // automatically with shrunk scopes.
+      void clearAccessToken();
+    }
+  }, [clearAccessToken, clearAllTokens, isLoading, redirectUri.href, scopes, signIn, tokenClaims]);
+};
+
+export default useTenantScopeListener;
diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx
@@ -6,11 +6,14 @@ import { useConsoleRoutes } from '@/hooks/use-console-routes';
 import type { AppContentOutletContext } from '../AppContent/types';
 
 import Sidebar from './Sidebar';
+import useTenantScopeListener from './hooks';
 import * as styles from './index.module.scss';
 
 function ConsoleContent() {
   const { scrollableContent } = useOutletContext<AppContentOutletContext>();
   const routes = useConsoleRoutes();
+  // Use this hook here to make sure console listens to user tenant scope changes.
+  useTenantScopeListener();
 
   return (
     <div className={styles.content}>

diff --git a/packages/console/src/hooks/use-console-routes/routes/tenant-settings.tsx b/packages/console/src/hooks/use-console-routes/routes/tenant-settings.tsx
@@ -14,7 +14,9 @@ import TenantMembers from '@/pages/TenantSettings/TenantMembers';
 
 export const useTenantSettings = () => {
   const { isDevTenant } = useContext(TenantsContext);
-  const { canManageTenant } = useCurrentTenantScopes();
+  const {
+    access: { canManageTenant },
+  } = useCurrentTenantScopes();
 
   const tenantSettings: RouteObject = useMemo(
     () => ({

diff --git a/packages/console/src/hooks/use-current-tenant-scopes.ts b/packages/console/src/hooks/use-current-tenant-scopes.ts
@@ -1,61 +1,52 @@
-import { useLogto } from '@logto/react';
-import { TenantScope, getTenantOrganizationId } from '@logto/schemas';
-import { useContext, useEffect, useState } from 'react';
+import { TenantScope } from '@logto/schemas';
+import { useContext, useMemo } from 'react';
+import useSWR from 'swr';
 
+import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 
+import { type RequestError } from './use-api';
+import useCurrentUser from './use-current-user';
+
 const useCurrentTenantScopes = () => {
   const { currentTenantId, isInitComplete } = useContext(TenantsContext);
-  const { isAuthenticated, getOrganizationTokenClaims } = useLogto();
-
-  const [scopes, setScopes] = useState<string[]>([]);
-  const [canInviteMember, setCanInviteMember] = useState(false);
-  const [canRemoveMember, setCanRemoveMember] = useState(false);
-  const [canUpdateMemberRole, setCanUpdateMemberRole] = useState(false);
-  const [canManageTenant, setCanManageTenant] = useState(false);
+  const cloudApi = useAuthedCloudApi();
+  const { user } = useCurrentUser();
+  const userId = user?.id ?? '';
 
-  useEffect(() => {
-    (async () => {
-      if (isAuthenticated && isInitComplete) {
-        const organizationId = getTenantOrganizationId(currentTenantId);
-        const claims = await getOrganizationTokenClaims(organizationId);
-        const allScopes = claims?.scope?.split(' ') ?? [];
-        setScopes(allScopes);
+  const {
+    data: scopes,
+    isLoading,
+    mutate,
+  } = useSWR<string[], RequestError>(
+    userId && isInitComplete && `api/tenants/${currentTenantId}/members/${userId}/scopes`,
+    async () => {
+      const scopes = await cloudApi.get('/api/tenants/:tenantId/members/:userId/scopes', {
+        params: { tenantId: currentTenantId, userId },
+      });
+      return scopes.map(({ name }) => name);
+    }
+  );
 
-        for (const scope of allScopes) {
-          switch (scope) {
-            case TenantScope.InviteMember: {
-              setCanInviteMember(true);
-              break;
-            }
-            case TenantScope.RemoveMember: {
-              setCanRemoveMember(true);
-              break;
-            }
-            case TenantScope.UpdateMemberRole: {
-              setCanUpdateMemberRole(true);
-              break;
-            }
-            case TenantScope.ManageTenant: {
-              setCanManageTenant(true);
-              break;
-            }
-            default: {
-              break;
-            }
-          }
-        }
-      }
-    })();
-  }, [currentTenantId, getOrganizationTokenClaims, isAuthenticated, isInitComplete]);
+  const access = useMemo(
+    () => ({
+      canInviteMember: Boolean(scopes?.includes(TenantScope.InviteMember)),
+      canRemoveMember: Boolean(scopes?.includes(TenantScope.RemoveMember)),
+      canUpdateMemberRole: Boolean(scopes?.includes(TenantScope.UpdateMemberRole)),
+      canManageTenant: Boolean(scopes?.includes(TenantScope.ManageTenant)),
+    }),
+    [scopes]
+  );
 
-  return {
-    canInviteMember,
-    canRemoveMember,
-    canUpdateMemberRole,
-    canManageTenant,
-    scopes,
-  };
+  return useMemo(
+    () => ({
+      isLoading,
+      scopes,
+      access,
+      mutate,
+    }),
+    [isLoading, scopes, access, mutate]
+  );
 };
 
 export default useCurrentTenantScopes;
diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/index.tsx b/packages/console/src/pages/TenantSettings/TenantBasicSettings/ProfileForm/index.tsx
@@ -16,7 +16,9 @@ type Props = {
 };
 
 function ProfileForm({ currentTenantId }: Props) {
-  const { canManageTenant } = useCurrentTenantScopes();
+  const {
+    access: { canManageTenant },
+  } = useCurrentTenantScopes();
   const {
     register,
     formState: { errors },

diff --git a/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx b/packages/console/src/pages/TenantSettings/TenantBasicSettings/index.tsx
@@ -30,7 +30,9 @@ const tenantProfileToForm = (tenant?: TenantResponse): TenantSettingsForm => {
 
 function TenantBasicSettings() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { canManageTenant } = useCurrentTenantScopes();
+  const {
+    access: { canManageTenant },
+  } = useCurrentTenantScopes();
   const api = useCloudApi();
   const {
     currentTenant,

diff --git a/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx b/packages/console/src/pages/TenantSettings/TenantDomainSettings/index.tsx
@@ -23,7 +23,9 @@ function TenantDomainSettings() {
   const { data: customDomain, isLoading: isLoadingCustomDomain, mutate } = useCustomDomain(true);
   const { getDocumentationUrl } = useDocumentationUrl();
   const api = useApi();
-  const { canManageTenant } = useCurrentTenantScopes();
+  const {
+    access: { canManageTenant },
+  } = useCurrentTenantScopes();
 
   if (isLoadingCustomDomain) {
     return <Skeleton />;

diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/EditMemberModal/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/EditMemberModal/index.tsx
@@ -12,6 +12,7 @@ import FormField from '@/ds-components/FormField';
 import ModalLayout from '@/ds-components/ModalLayout';
 import Select, { type Option } from '@/ds-components/Select';
 import { useConfirmModal } from '@/hooks/use-confirm-modal';
+import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
 import * as modalStyles from '@/scss/modal.module.scss';
 
 type Props = {
@@ -23,6 +24,7 @@ type Props = {
 function EditMemberModal({ user, isOpen, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.tenant_members' });
   const { currentTenantId } = useContext(TenantsContext);
+  const { mutate: mutateUserTenantScopes } = useCurrentTenantScopes();
 
   const [isLoading, setIsLoading] = useState(false);
   const [role, setRole] = useState(TenantRole.Collaborator);
@@ -57,6 +59,7 @@ function EditMemberModal({ user, isOpen, onClose }: Props) {
         params: { tenantId: currentTenantId, userId: user.id },
         body: { roleName: role },
       });
+      void mutateUserTenantScopes();
       onClose();
     } finally {
       setIsLoading(false);

diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/Invitations/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/Invitations/index.tsx
@@ -53,7 +53,9 @@ function Invitations() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.tenant_members' });
   const cloudApi = useAuthedCloudApi();
   const { currentTenantId } = useContext(TenantsContext);
-  const { canInviteMember, canRemoveMember } = useCurrentTenantScopes();
+  const {
+    access: { canInviteMember, canRemoveMember },
+  } = useCurrentTenantScopes();
 
   const { data, error, isLoading, mutate } = useSWR<TenantInvitationResponse[], RequestError>(
     `api/tenants/${currentTenantId}/invitations`,

diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/Members/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/Members/index.tsx
@@ -24,7 +24,9 @@ function Members() {
   const cloudApi = useAuthedCloudApi();
   const { currentTenantId } = useContext(TenantsContext);
   const { user: currentUser } = useCurrentUser();
-  const { canRemoveMember, canUpdateMemberRole } = useCurrentTenantScopes();
+  const {
+    access: { canRemoveMember, canUpdateMemberRole },
+  } = useCurrentTenantScopes();
 
   const { data, error, isLoading, mutate } = useSWR<TenantMemberResponse[], RequestError>(
     `api/tenants/${currentTenantId}/members`,

diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/hooks.ts b/packages/console/src/pages/TenantSettings/TenantMembers/hooks.ts
@@ -13,7 +13,9 @@ import { hasReachedQuotaLimit, hasSurpassedQuotaLimit } from '@/utils/quota';
 const useTenantMembersUsage = () => {
   const { currentPlan } = useContext(SubscriptionDataContext);
   const { currentTenantId } = useContext(TenantsContext);
-  const { canInviteMember } = useCurrentTenantScopes();
+  const {
+    access: { canInviteMember },
+  } = useCurrentTenantScopes();
 
   const cloudApi = useAuthedCloudApi();
 

diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/index.tsx
@@ -30,7 +30,9 @@ function TenantMembers() {
   const { hasTenantMembersSurpassedLimit } = useTenantMembersUsage();
   const { navigate, match } = useTenantPathname();
   const [showInviteModal, setShowInviteModal] = useState(false);
-  const { canInviteMember } = useCurrentTenantScopes();
+  const {
+    access: { canInviteMember },
+  } = useCurrentTenantScopes();
 
   const isInvitationTab = match(
     `/tenant-settings/${TenantSettingsTabs.Members}/${invitationsRoute}`

diff --git a/packages/console/src/pages/TenantSettings/index.tsx b/packages/console/src/pages/TenantSettings/index.tsx
@@ -12,7 +12,9 @@ import * as styles from './index.module.scss';
 
 function TenantSettings() {
   const { isDevTenant } = useContext(TenantsContext);
-  const { canManageTenant } = useCurrentTenantScopes();
+  const {
+    access: { canManageTenant },
+  } = useCurrentTenantScopes();
 
   return (
     <div className={styles.container}>

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -92,7 +92,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@logto/cloud": "0.2.5-94f7bcc",
+    "@logto/cloud": "0.2.5-821690c",
     "@silverhand/eslint-config": "5.0.0",
     "@silverhand/ts-config": "5.0.0",
     "@types/debug": "^4.1.7",

diff --git a/packages/demo-app/package.json b/packages/demo-app/package.json
@@ -22,7 +22,7 @@
     "@logto/core-kit": "workspace:^2.4.0",
     "@logto/language-kit": "workspace:^1.1.0",
     "@logto/phrases": "workspace:^1.10.0",
-    "@logto/react": "^3.0.5",
+    "@logto/react": "^3.0.8",
     "@logto/schemas": "workspace:^1.15.0",
     "@parcel/core": "2.9.3",
     "@parcel/transformer-sass": "2.9.3",

diff --git a/packages/integration-tests/package.json b/packages/integration-tests/package.json
@@ -27,7 +27,7 @@
     "@logto/connector-kit": "workspace:^3.0.0",
     "@logto/core-kit": "workspace:^",
     "@logto/js": "^4.1.1",
-    "@logto/node": "^2.4.4",
+    "@logto/node": "^2.4.7",
     "@logto/schemas": "workspace:^1.15.0",
     "@logto/shared": "workspace:^3.1.0",
     "@silverhand/eslint-config": "5.0.0",