feat(webapp): gate API keys page on env-tier read access

matt-aitken · matt-aitken · commit dbca7f4b3ec3 · 2026-06-16T14:05:40.000+01:00
Add a reusable PermissionDenied panel and use it on the API keys page:
when a role can't read a given environment's secret key (e.g. deployed
environments for a restricted role), the secret is withheld server-side
and the page renders the panel instead. Regenerating an API key is gated
the same way, enforced on the POST so a disabled button isn't the only
guard.
diff --git a/apps/webapp/app/components/PermissionDenied.tsx b/apps/webapp/app/components/PermissionDenied.tsx
@@ -0,0 +1,25 @@
+import { organizationRolesPath } from "~/utils/pathBuilder";
+import { LinkButton } from "./primitives/Buttons";
+import { InfoPanel } from "./primitives/InfoPanel";
+import { LockClosedIcon } from "@heroicons/react/20/solid";
+import { useOrganization } from "~/hooks/useOrganizations";
+import React from "react";
+
+export function PermissionDenied({ message }: { message: React.ReactNode }) {
+  const organization = useOrganization();
+
+  return (
+    <InfoPanel
+      icon={LockClosedIcon}
+      iconClassName="text-text-dimmed"
+      title="Permission denied"
+      accessory={
+        <LinkButton to={organizationRolesPath(organization)} variant="secondary/small">
+          View roles
+        </LinkButton>
+      }
+    >
+      {message}
+    </InfoPanel>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx
@@ -1,6 +1,5 @@
 import { BookOpenIcon } from "@heroicons/react/20/solid";
 import { type MetaFunction } from "@remix-run/react";
-import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { CodeBlock } from "~/components/code/CodeBlock";
@@ -16,6 +15,7 @@ import {
   PageBody,
   PageContainer,
 } from "~/components/layout/AppLayout";
+import { PermissionDenied } from "~/components/PermissionDenied";
 import {
   Accordion,
   AccordionContent,
@@ -31,9 +31,10 @@ import { InputGroup } from "~/components/primitives/InputGroup";
 import { Label } from "~/components/primitives/Label";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import * as Property from "~/components/primitives/PropertyTable";
+import { $replica } from "~/db.server";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { ApiKeysPresenter } from "~/presenters/v3/ApiKeysPresenter.server";
-import { requireUserId } from "~/services/session.server";
+import { dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
 import { cn } from "~/utils/cn";
 import { docsPath, EnvironmentParamSchema } from "~/utils/pathBuilder";
 
@@ -45,33 +46,55 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export const loader = async ({ request, params }: LoaderFunctionArgs) => {
-  const userId = await requireUserId(request);
-  const { projectParam, envParam } = EnvironmentParamSchema.parse(params);
+async function resolveOrgIdFromSlug(slug: string): Promise<string | null> {
+  const org = await $replica.organization.findFirst({ where: { slug }, select: { id: true } });
+  return org?.id ?? null;
+}
 
-  try {
-    const presenter = new ApiKeysPresenter();
-    const { environment, hasVercelIntegration } = await presenter.call({
-      userId,
-      projectSlug: projectParam,
-      environmentSlug: envParam,
-    });
+export const loader = dashboardLoader(
+  {
+    params: EnvironmentParamSchema,
+    context: async (params) => {
+      const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
+      return organizationId ? { organizationId } : {};
+    },
+    // No hard authorization: anyone with project access can open the page.
+    // Reading the secret key is gated per environment tier below — a role
+    // that can't read this tier's keys gets the info panel, not the key.
+  },
+  async ({ params, user, ability }) => {
+    const { projectParam, envParam } = params;
 
-    return typedjson({
-      environment,
-      hasVercelIntegration,
-    });
-  } catch (error) {
-    console.error(error);
-    throw new Response(undefined, {
-      status: 400,
-      statusText: "Something went wrong, if this problem persists please contact support.",
-    });
+    try {
+      const presenter = new ApiKeysPresenter();
+      const { environment, hasVercelIntegration } = await presenter.call({
+        userId: user.id,
+        projectSlug: projectParam,
+        environmentSlug: envParam,
+      });
+
+      const canReadApiKeys =
+        !environment || ability.can("read", { type: "apiKeys", envType: environment.type });
+
+      return typedjson({
+        // Never serialize the secret key to the client when the role can't
+        // read it for this environment tier.
+        environment: environment && !canReadApiKeys ? { ...environment, apiKey: "" } : environment,
+        hasVercelIntegration,
+        canReadApiKeys,
+      });
+    } catch (error) {
+      console.error(error);
+      throw new Response(undefined, {
+        status: 400,
+        statusText: "Something went wrong, if this problem persists please contact support.",
+      });
+    }
   }
-};
+);
 
 export default function Page() {
-  const { environment, hasVercelIntegration } = useTypedLoaderData<typeof loader>();
+  const { environment, hasVercelIntegration, canReadApiKeys } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
 
   if (!environment) {
@@ -126,70 +149,78 @@ export default function Page() {
               API keys
             </Header2>
           </div>
-          <div className="flex flex-col gap-6">
-            <InputGroup fullWidth>
-              <div className="flex w-full items-center justify-between">
-                <Label>Secret key</Label>
-                <RegenerateApiKeyModal
-                  id={environment.parentEnvironment?.id ?? environment.id}
-                  title={environmentFullTitle(environment)}
-                  hasVercelIntegration={hasVercelIntegration}
-                  isDevelopment={environment.type === "DEVELOPMENT"}
-                />
-              </div>
-              <ClipboardField
-                className="w-full max-w-none"
-                secure={`tr_${environment.apiKey.split("_")[1]}_••••••••`}
-                value={environment.apiKey}
-                variant={"secondary/small"}
-              />
-              <Hint>
-                Set this as your <InlineCode variant="extra-small">TRIGGER_SECRET_KEY</InlineCode>{" "}
-                env var in your backend.
-              </Hint>
-            </InputGroup>
-            {environment.branchName && (
+          {canReadApiKeys ? (
+            <div className="flex flex-col gap-6">
               <InputGroup fullWidth>
-                <Label>Branch name</Label>
+                <div className="flex w-full items-center justify-between">
+                  <Label>Secret key</Label>
+                  <RegenerateApiKeyModal
+                    id={environment.parentEnvironment?.id ?? environment.id}
+                    title={environmentFullTitle(environment)}
+                    hasVercelIntegration={hasVercelIntegration}
+                    isDevelopment={environment.type === "DEVELOPMENT"}
+                  />
+                </div>
                 <ClipboardField
                   className="w-full max-w-none"
-                  value={environment.branchName}
+                  secure={`tr_${environment.apiKey.split("_")[1]}_••••••••`}
+                  value={environment.apiKey}
                   variant={"secondary/small"}
                 />
                 <Hint>
-                  Set this as your{" "}
-                  <InlineCode variant="extra-small">TRIGGER_PREVIEW_BRANCH</InlineCode> env var in
-                  your backend.
+                  Set this as your <InlineCode variant="extra-small">TRIGGER_SECRET_KEY</InlineCode>{" "}
+                  env var in your backend.
                 </Hint>
               </InputGroup>
-            )}
-            {environment.type === "DEVELOPMENT" && (
-              <Callout variant="info">
-                Every team member gets their own dev Secret key. Make sure you're using the one
-                above otherwise you will trigger runs on your team member's machine.
-              </Callout>
-            )}
+              {environment.branchName && (
+                <InputGroup fullWidth>
+                  <Label>Branch name</Label>
+                  <ClipboardField
+                    className="w-full max-w-none"
+                    value={environment.branchName}
+                    variant={"secondary/small"}
+                  />
+                  <Hint>
+                    Set this as your{" "}
+                    <InlineCode variant="extra-small">TRIGGER_PREVIEW_BRANCH</InlineCode> env var in
+                    your backend.
+                  </Hint>
+                </InputGroup>
+              )}
+              {environment.type === "DEVELOPMENT" && (
+                <Callout variant="info">
+                  Every team member gets their own dev Secret key. Make sure you're using the one
+                  above otherwise you will trigger runs on your team member's machine.
+                </Callout>
+              )}
 
-            <Accordion type="single" collapsible>
-              <AccordionItem value="item-1">
-                <AccordionTrigger>How to set these environment variables</AccordionTrigger>
-                <AccordionContent>
-                  <div className="flex flex-col gap-2">
-                    <div>
-                      You need to set these environment variables in your backend. This allows the
-                      SDK to authenticate with Trigger.dev.
+              <Accordion type="single" collapsible>
+                <AccordionItem value="item-1">
+                  <AccordionTrigger>How to set these environment variables</AccordionTrigger>
+                  <AccordionContent>
+                    <div className="flex flex-col gap-2">
+                      <div>
+                        You need to set these environment variables in your backend. This allows the
+                        SDK to authenticate with Trigger.dev.
+                      </div>
+                      <CodeBlock
+                        language="javascript"
+                        code={envBlock}
+                        showOpenInModal={false}
+                        showLineNumbers={false}
+                      />
                     </div>
-                    <CodeBlock
-                      language="javascript"
-                      code={envBlock}
-                      showOpenInModal={false}
-                      showLineNumbers={false}
-                    />
-                  </div>
-                </AccordionContent>
-              </AccordionItem>
-            </Accordion>
-          </div>
+                  </AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </div>
+          ) : (
+            <PermissionDenied
+              message={`With your current role, you can't view the API keys for ${environmentFullTitle(
+                environment
+              )}.`}
+            />
+          )}
         </MainHorizontallyCenteredContainer>
       </PageBody>
     </PageContainer>
diff --git a/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx b/apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx
@@ -1,56 +1,86 @@
-import type { ActionFunctionArgs } from "@remix-run/server-runtime";
 import { z } from "zod";
 import { environmentFullTitle } from "~/components/environments/EnvironmentLabel";
+import { $replica } from "~/db.server";
 import { regenerateApiKey } from "~/models/api-key.server";
-import { VercelIntegrationRepository } from "~/models/vercelIntegration.server";
 import { jsonWithErrorMessage, jsonWithSuccessMessage } from "~/models/message.server";
-import { requireUserId } from "~/services/session.server";
+import { VercelIntegrationRepository } from "~/models/vercelIntegration.server";
 import { logger } from "~/services/logger.server";
+import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
 
 const ParamsSchema = z.object({
   environmentId: z.string(),
 });
 
-export async function action({ request, params }: ActionFunctionArgs) {
-  // Ensure this is a POST request
-  if (request.method.toUpperCase() !== "POST") {
-    return { status: 405, body: "Method Not Allowed" };
-  }
-
-  const userId = await requireUserId(request);
-
-  const { environmentId } = ParamsSchema.parse(params);
+export const action = dashboardAction(
+  {
+    params: ParamsSchema,
+    context: async (params) => {
+      const environment = await $replica.runtimeEnvironment.findFirst({
+        where: { id: params.environmentId },
+        select: { organizationId: true },
+      });
+      return environment ? { organizationId: environment.organizationId } : {};
+    },
+    // Env-tier write:apiKeys is enforced in the handler — the target
+    // environment's tier isn't known until we resolve it from the id.
+  },
+  async ({ request, params, user, ability }) => {
+    if (request.method.toUpperCase() !== "POST") {
+      throw new Response("Method Not Allowed", { status: 405 });
+    }
 
-  const formData = await request.formData();
-  const syncToVercel = formData.get("syncToVercel") === "on";
+    const { environmentId } = params;
 
-  try {
-    const updatedEnvironment = await regenerateApiKey({ userId, environmentId });
+    const environment = await $replica.runtimeEnvironment.findFirst({
+      where: { id: environmentId },
+      select: { type: true },
+    });
+    if (!environment) {
+      return jsonWithErrorMessage({ ok: false }, request, "Environment not found");
+    }
 
-    // Sync the regenerated API key to Vercel only when requested and not for DEVELOPMENT
-    if (syncToVercel && updatedEnvironment.type !== "DEVELOPMENT") {
-      await syncApiKeyToVercel(
-        updatedEnvironment.projectId,
-        updatedEnvironment.type as "PRODUCTION" | "STAGING" | "PREVIEW",
-        updatedEnvironment.apiKey
+    // Gate the regenerate even on a direct POST: a role that can't write
+    // this tier's API keys can't rotate them. The disabled UI control is
+    // not the boundary; this check is.
+    if (!ability.can("write", { type: "apiKeys", envType: environment.type })) {
+      return jsonWithErrorMessage(
+        { ok: false },
+        request,
+        "You don't have permission to regenerate API keys for this environment."
       );
     }
 
-    return jsonWithSuccessMessage(
-      { ok: true },
-      request,
-      `API keys regenerated for ${environmentFullTitle(updatedEnvironment)} environment`
-    );
-  } catch (error) {
-    const message = error instanceof Error ? error.message : "Unknown error";
+    const formData = await request.formData();
+    const syncToVercel = formData.get("syncToVercel") === "on";
 
-    return jsonWithErrorMessage(
-      { ok: false },
-      request,
-      `API keys could not be regenerated: ${message}`
-    );
+    try {
+      const updatedEnvironment = await regenerateApiKey({ userId: user.id, environmentId });
+
+      // Sync the regenerated API key to Vercel only when requested and not for DEVELOPMENT
+      if (syncToVercel && updatedEnvironment.type !== "DEVELOPMENT") {
+        await syncApiKeyToVercel(
+          updatedEnvironment.projectId,
+          updatedEnvironment.type as "PRODUCTION" | "STAGING" | "PREVIEW",
+          updatedEnvironment.apiKey
+        );
+      }
+
+      return jsonWithSuccessMessage(
+        { ok: true },
+        request,
+        `API keys regenerated for ${environmentFullTitle(updatedEnvironment)} environment`
+      );
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+
+      return jsonWithErrorMessage(
+        { ok: false },
+        request,
+        `API keys could not be regenerated: ${message}`
+      );
+    }
   }
-}
+);
 
 /**
  * Sync the API key to Vercel.
