Merge pull request #1828 from dubinc/restrict-token-update

Restrict token update to owners only

Author: steven-tey

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/tokens/page-client.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { clientAccessCheck } from "@/lib/api/tokens/permissions";
 import { scopesToName } from "@/lib/api/tokens/scopes";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { TokenProps } from "@/lib/types";
@@ -27,7 +28,7 @@ import { useState } from "react";
 import useSWR from "swr";
 
 export default function TokensPageClient() {
-  const { id: workspaceId } = useWorkspace();
+  const { id: workspaceId, role } = useWorkspace();
   const { pagination, setPagination } = usePagination();
   const [createdToken, setCreatedToken] = useState<string | null>(null);
   const [selectedToken, setSelectedToken] = useState<TokenProps | null>(null);
@@ -61,6 +62,12 @@ export default function TokensPageClient() {
       setSelectedToken,
     });
 
+  const accessCheckError = clientAccessCheck({
+    action: "tokens.write",
+    role,
+    customPermissionDescription: "update or delete API keys",
+  }).error;
+
   const { table, ...tableProps } = useTable({
     data: tokens || [],
     loading: isLoading && !error && !tokens,
@@ -151,10 +158,12 @@ export default function TokensPageClient() {
     rowCount: tokens?.length || 0,
     thClassName: "border-l-0",
     tdClassName: "border-l-0",
-    onRowClick: (row) => {
-      setSelectedToken(row.original);
-      setShowAddEditTokenModal(true);
-    },
+    onRowClick: accessCheckError
+      ? undefined
+      : (row) => {
+          setSelectedToken(row.original);
+          setShowAddEditTokenModal(true);
+        },
     emptyState: (
       <AnimatedEmptyState
         title="No tokens found"
@@ -224,6 +233,7 @@ function RowMenuButton({
 }) {
   const [isOpen, setIsOpen] = useState(false);
 
+  const { role } = useWorkspace();
   const { DeleteTokenModal, setShowDeleteTokenModal } = useDeleteTokenModal({
     token,
   });
@@ -258,6 +268,13 @@ function RowMenuButton({
           className="h-8 whitespace-nowrap px-2"
           variant="outline"
           icon={<Dots className="h-4 w-4 shrink-0" />}
+          disabledTooltip={
+            clientAccessCheck({
+              action: "tokens.write",
+              role,
+              customPermissionDescription: "update or delete API keys",
+            }).error
+          }
         />
       </Popover>
     </>

apps/web/lib/api/rbac/permissions.ts

@@ -86,7 +86,7 @@ export const ROLE_PERMISSIONS: {
   {
     action: "tokens.write",
     description: "create, update, or delete API keys",
-    roles: ["owner", "member"],
+    roles: ["owner"],
   },
   {
     action: "oauth_apps.read",

apps/web/lib/api/tokens/scopes.ts

@@ -3,15 +3,15 @@ import { PermissionAction } from "../rbac/permissions";
 import { ResourceKey } from "../rbac/resources";
 
 export const SCOPES = [
-  "workspaces.read",
-  "workspaces.write",
   "links.read",
   "links.write",
   "tags.read",
   "tags.write",
   "analytics.read",
   "domains.read",
   "domains.write",
+  "workspaces.read",
+  "workspaces.write",
   "conversions.write",
   "apis.all", // All API scopes
   "apis.read", // All read scopes

apps/web/ui/modals/add-edit-token-modal.tsx

@@ -1,4 +1,5 @@
 import { ResourceKey, RESOURCES } from "@/lib/api/rbac/resources";
+import { clientAccessCheck } from "@/lib/api/tokens/permissions";
 import {
   getScopesByResourceForRole,
   Scope,
@@ -124,6 +125,7 @@ function AddEditTokenModal({
         onTokenCreated?.(result.token);
       }
     } else {
+      setSaving(false);
       toast.error(result.error.message);
     }
   };
@@ -140,24 +142,6 @@ function AddEditTokenModal({
     [role, conversionEnabled],
   );
 
-  const helpTexts = {
-    user: {
-      title:
-        "This API key will be tied to your user account – if you are removed from the workspace, it will be deleted.",
-      cta: "Learn more",
-      href: "https://dub.co/docs/api-reference/tokens",
-    },
-    machine: {
-      title: isOwner
-        ? "A new bot member will be added to your workspace, and the key will be associated with it. Since the key is not tied to your account, it will not be deleted even if you leave the workspace."
-        : "Only the workspace owner can create machine users.",
-      cta: "Learn more",
-      href: "https://dub.co/docs/api-reference/tokens#machine-users",
-    },
-  };
-
-  const helpText = helpTexts[data.isMachine ? "machine" : "user"];
-
   return (
     <>
       <Modal
@@ -362,11 +346,20 @@ function AddTokenButton({
   setShowAddEditTokenModal: Dispatch<SetStateAction<boolean>>;
   buttonProps?: Partial<ButtonProps>;
 }) {
+  const { role } = useWorkspace();
+
   return (
     <div>
       <Button
         text="Create API key"
         onClick={() => setShowAddEditTokenModal(true)}
+        disabledTooltip={
+          clientAccessCheck({
+            action: "tokens.write",
+            role,
+            customPermissionDescription: "create new API keys",
+          }).error || undefined
+        }
         {...buttonProps}
       />
     </div>

apps/web/ui/modals/delete-token-modal.tsx

@@ -113,8 +113,8 @@ function DeleteTokenModal({
                 mutate(endpoint.mutate);
                 setShowDeleteTokenModal(false);
               } else {
-                const error = await res.text();
-                toast.error(error);
+                const { error } = await res.json();
+                toast.error(error.message);
               }
             });
           }}