feat(webapp): show hidden root API keys masked and allow regenerating them

The API keys page now always lists the root API key. A hidden root key
shows masked to its last 4 characters and can be regenerated, but never
revealed or copied. When it's hidden and you have no other keys, the
page prompts you to create an API key for your backend.

"Revoke the previous key immediately" now also stops older root keys
still in their 24-hour grace window.

Mono-RevId: e0466df43d3fae68e32f01da137835ea3dec4858

Author: myftija

.server-changes/masked-hidden-root-api-key.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The API keys page now always lists your root API key, masked to its last 4 characters when it's hidden, so you can regenerate it and revoke the previous key. When the root key is hidden, the page points you to creating an API key for your backend.

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

@@ -19,6 +19,7 @@ type ModalProps = {
   title: string;
   hasVercelIntegration: boolean;
   isDevelopment: boolean;
+  isRootApiKeyHidden?: boolean;
 };
 
 type ModalContentProps = ModalProps & {
@@ -31,6 +32,7 @@ export function RegenerateApiKeyModal({
   title,
   hasVercelIntegration,
   isDevelopment,
+  isRootApiKeyHidden = false,
 }: ModalProps) {
   const randomWord = generateTwoRandomWords();
   const [open, setOpen] = useState(false);
@@ -48,6 +50,7 @@ export function RegenerateApiKeyModal({
           title={title}
           hasVercelIntegration={hasVercelIntegration}
           isDevelopment={isDevelopment}
+          isRootApiKeyHidden={isRootApiKeyHidden}
           randomWord={randomWord}
           closeModal={() => setOpen(false)}
         />
@@ -62,6 +65,7 @@ const RegenerateApiKeyModalContent = ({
   title,
   hasVercelIntegration,
   isDevelopment,
+  isRootApiKeyHidden,
   closeModal,
 }: ModalContentProps) => {
   const [confirmationText, setConfirmationText] = useState("");
@@ -83,6 +87,7 @@ const RegenerateApiKeyModalContent = ({
         action={`/resources/environments/${id}/regenerate-api-key`}
         className="mt-2 w-full"
       >
+        {isRootApiKeyHidden ? <input type="hidden" name="rootApiKeyHidden" value="true" /> : null}
         <Fieldset className="w-full">
           <InputGroup className="max-w-full">
             <RadioGroup name="previousKey" defaultValue="grace" className="flex flex-col gap-2">
@@ -91,14 +96,22 @@ const RegenerateApiKeyModalContent = ({
                 value="grace"
                 variant="description"
                 label="Keep the previous key working for 24 hours"
-                description="Roll out the new key to your environment variables without downtime. The previous key stops working after 24 hours."
+                description={
+                  isRootApiKeyHidden
+                    ? "Anything still using the previous key keeps working for 24 hours."
+                    : "Roll out the new key to your environment variables without downtime. The previous key stops working after 24 hours."
+                }
               />
               <RadioGroupItem
                 id="previousKey-revoke"
                 value="revoke"
                 variant="description"
                 label="Revoke the previous key immediately"
-                description="Choose this if the key may have leaked. Deployments and services still using the previous key will fail until they are updated with the new key."
+                description={
+                  isRootApiKeyHidden
+                    ? "Choose this if the key may have leaked. It stops working now, along with any older key still in its 24-hour window."
+                    : "Choose this if the key may have leaked. It stops working now, along with any older key still in its 24-hour window. Deployments and services still using them will fail until they are updated with the new key."
+                }
               />
             </RadioGroup>
           </InputGroup>

apps/webapp/app/models/api-key.server.ts

@@ -27,6 +27,7 @@ type RootApiKeyMutationInput = {
 
 type RegenerateApiKeyInput = RootApiKeyMutationInput & {
   revokeImmediately?: boolean;
+  allowHidden?: boolean;
 };
 
 export class RootApiKeyNotVisibleError extends Error {
@@ -38,7 +39,8 @@ export class RootApiKeyNotVisibleError extends Error {
 
 async function findRootApiKeyEnvironment(
   { userId, environmentId }: RootApiKeyMutationInput,
-  prismaClient: PrismaClient
+  prismaClient: PrismaClient,
+  { allowHidden = false }: { allowHidden?: boolean } = {}
 ) {
   const requestedEnvironment = await prismaClient.runtimeEnvironment.findFirst({
     where: {
@@ -86,16 +88,17 @@ async function findRootApiKeyEnvironment(
     throw new Error("User does not have permission to manage this root API key");
   }
 
-  if (environment.rootApiKeyHiddenAt) {
+  if (environment.rootApiKeyHiddenAt && !allowHidden) {
     throw new RootApiKeyNotVisibleError();
   }
 
   return environment;
 }
 
-async function lockVisibleRootApiKeyEnvironment(
+async function lockRootApiKeyEnvironment(
   prismaClient: PrismaTransactionClient,
-  environmentId: string
+  environmentId: string,
+  { allowHidden = false }: { allowHidden?: boolean } = {}
 ) {
   const [environment] = await prismaClient.$queryRaw<
     Array<{ apiKey: string; rootApiKeyHiddenAt: Date | null }>
@@ -106,18 +109,18 @@ async function lockVisibleRootApiKeyEnvironment(
     FOR UPDATE
   `;
 
-  if (!environment || environment.rootApiKeyHiddenAt) {
+  if (!environment || (environment.rootApiKeyHiddenAt && !allowHidden)) {
     throw new RootApiKeyNotVisibleError();
   }
 
   return environment;
 }
 
 export async function regenerateApiKey(
-  { revokeImmediately = false, ...input }: RegenerateApiKeyInput,
+  { revokeImmediately = false, allowHidden = false, ...input }: RegenerateApiKeyInput,
   { prismaClient = prisma }: { prismaClient?: PrismaClient } = {}
 ) {
-  const environment = await findRootApiKeyEnvironment(input, prismaClient);
+  const environment = await findRootApiKeyEnvironment(input, prismaClient, { allowHidden });
   const newApiKey = createApiKeyForEnv(environment.type);
   const newPkApiKey = createPkApiKeyForEnv(environment.type);
   const revokedApiKeyExpiresAt = new Date(Date.now() + REVOKED_API_KEY_GRACE_PERIOD_MS);
@@ -126,7 +129,9 @@ export async function regenerateApiKey(
     prismaClient,
     "regenerate root API key",
     async (tx) => {
-      const currentEnvironment = await lockVisibleRootApiKeyEnvironment(tx, environment.id);
+      const currentEnvironment = await lockRootApiKeyEnvironment(tx, environment.id, {
+        allowHidden,
+      });
 
       await tx.runtimeEnvironment.update({
         where: { id: environment.id },
@@ -136,7 +141,13 @@ export async function regenerateApiKey(
         },
       });
 
-      if (!revokeImmediately) {
+      if (revokeImmediately) {
+        const now = new Date();
+        await tx.revokedApiKey.updateMany({
+          where: { runtimeEnvironmentId: environment.id, expiresAt: { gt: now } },
+          data: { expiresAt: now },
+        });
+      } else {
         await tx.revokedApiKey.create({
           data: {
             apiKey: currentEnvironment.apiKey,
@@ -146,7 +157,12 @@ export async function regenerateApiKey(
         });
       }
 
-      return { ...environment, apiKey: newApiKey, pkApiKey: newPkApiKey };
+      return {
+        ...environment,
+        apiKey: newApiKey,
+        pkApiKey: newPkApiKey,
+        rootApiKeyHiddenAt: currentEnvironment.rootApiKeyHiddenAt,
+      };
     }
   );
 
@@ -172,7 +188,7 @@ export async function disableRootApiKeyVisibility(
     prismaClient,
     "disable root API key visibility",
     async (tx) => {
-      const currentEnvironment = await lockVisibleRootApiKeyEnvironment(tx, environment.id);
+      const currentEnvironment = await lockRootApiKeyEnvironment(tx, environment.id);
 
       await tx.runtimeEnvironment.update({
         where: { id: environment.id },

apps/webapp/app/presenters/v3/ApiKeysPresenter.server.ts

@@ -120,19 +120,19 @@ export class ApiKeysPresenter {
     ]);
     const presetsById = new Map(presets?.map((preset) => [preset.id, preset]));
     const { taskIdentifiers, organizationId: _organizationId, ...environmentData } = environment;
-    const rootApiKey = keyEnvironment.rootApiKeyHiddenAt
-      ? null
-      : {
-          id: keyEnvironment.id,
-          name: "Root API key",
-          value: keyEnvironment.apiKey,
-          obfuscated: obfuscateApiKey(keyEnvironment.type, keyEnvironment.apiKey.slice(-4)),
-        };
+    const isRootApiKeyHidden = keyEnvironment.rootApiKeyHiddenAt !== null;
+    const rootApiKey = {
+      id: keyEnvironment.id,
+      name: "Root API key",
+      value: isRootApiKeyHidden ? null : keyEnvironment.apiKey,
+      obfuscated: obfuscateApiKey(keyEnvironment.type, keyEnvironment.apiKey.slice(-4)),
+      isHidden: isRootApiKeyHidden,
+    };
 
     return {
       environment: {
         ...environmentData,
-        apiKey: rootApiKey?.value ?? null,
+        apiKey: rootApiKey.value,
         keyEnvironmentId,
       },
       availableTasks: taskIdentifiers.map((task) => task.slug),

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx

@@ -54,6 +54,7 @@ import {
   TableHeaderCell,
   TableRow,
 } from "~/components/primitives/Table";
+import { InfoIconTooltip } from "~/components/primitives/Tooltip";
 import { MAX_API_KEY_TASK_IDENTIFIERS } from "~/consts";
 import {
   createEnvironmentApiKey,
@@ -329,7 +330,14 @@ export default function Page() {
         .join("\n")
     : null;
 
-  const hasApiKeys = rootApiKey !== null || apiKeys.length > 0;
+  const hasUsableApiKey = apiKeys.some(
+    (apiKey) =>
+      !apiKey.revokedAt && !(apiKey.expiresAt && new Date(apiKey.expiresAt).getTime() <= loadedAt)
+  );
+  const showCreateApiKeyPrompt = rootApiKey?.isHidden === true && !hasUsableApiKey;
+  const canManageRootApiKey = canWriteApiKeys || rootApiKey?.isHidden === false;
+  const chooseAccessHint =
+    isRbacPluginAvailable && presets !== null ? ", and choose what it can access" : "";
 
   return (
     <PageContainer>
@@ -378,9 +386,9 @@ export default function Page() {
                     />
                   ) : null}
                   <RevokedFilter checked={showRevoked} />
-                  {hasApiKeys ? (
+                  {showCreateApiKeyPrompt ? null : (
                     <NewApiKeyButton canWrite={canWriteApiKeys} variant="primary/small" />
-                  ) : null}
+                  )}
                 </div>
               </div>
 
@@ -401,7 +409,14 @@ export default function Page() {
                           <span className="font-mono text-text-dimmed">
                             {rootApiKey.obfuscated}
                           </span>
-                          <CopyButton value={rootApiKey.value} variant="icon" size="small" />
+                          {rootApiKey.value ? (
+                            <CopyButton value={rootApiKey.value} variant="icon" size="small" />
+                          ) : (
+                            <InfoIconTooltip
+                              content={`Root keys are being phased out. Create a new API key instead${chooseAccessHint}.`}
+                              contentClassName="max-w-xs"
+                            />
+                          )}
                         </div>
                       </TableCell>
                       <TableCell>
@@ -417,17 +432,22 @@ export default function Page() {
                         isSticky
                         className="w-32"
                         hiddenButtons={
-                          <>
-                            {canWriteApiKeys ? (
-                              <RegenerateApiKeyModal
-                                id={environment.keyEnvironmentId}
-                                title={environmentFullTitle(apiKeyEnvironmentLabel)}
-                                hasVercelIntegration={hasVercelIntegration}
-                                isDevelopment={environment.type === "DEVELOPMENT"}
-                              />
-                            ) : null}
-                            <DisableRootApiKeyButton canWrite={canWriteApiKeys} />
-                          </>
+                          canManageRootApiKey ? (
+                            <>
+                              {canWriteApiKeys ? (
+                                <RegenerateApiKeyModal
+                                  id={environment.keyEnvironmentId}
+                                  title={environmentFullTitle(apiKeyEnvironmentLabel)}
+                                  hasVercelIntegration={hasVercelIntegration}
+                                  isDevelopment={environment.type === "DEVELOPMENT"}
+                                  isRootApiKeyHidden={rootApiKey.isHidden}
+                                />
+                              ) : null}
+                              {rootApiKey.isHidden ? null : (
+                                <DisableRootApiKeyButton canWrite={canWriteApiKeys} />
+                              )}
+                            </>
+                          ) : null
                         }
                       />
                     </TableRow>
@@ -493,19 +513,19 @@ export default function Page() {
                     );
                   })}
 
-                  {hasApiKeys ? null : (
+                  {showCreateApiKeyPrompt ? (
                     <TableBlankRow colSpan={8}>
                       <div className="flex flex-col items-center justify-center gap-y-4 py-8">
                         <div className="flex flex-col items-center gap-y-1">
-                          <Header2>You don't have any API keys.</Header2>
+                          <Header2>Create an API key for your backend</Header2>
                           <Paragraph variant="small">
-                            Create one so your backend can authenticate with Trigger.dev.
+                            {`Root keys are being phased out. Create an API key so your backend can authenticate with Trigger.dev${chooseAccessHint}.`}
                           </Paragraph>
                         </div>
                         <NewApiKeyButton canWrite={canWriteApiKeys} variant="primary/medium" />
                       </div>
                     </TableBlankRow>
-                  )}
+                  ) : null}
                 </TableBody>
               </Table>
             </NewApiKeyDialog>
@@ -1265,8 +1285,8 @@ function DisableRootApiKeyButton({ canWrite }: { canWrite: boolean }) {
         <Form method="post" className="flex flex-col gap-4 pt-3">
           <input type="hidden" name="action" value="disable-root" />
           <Callout variant="warning">
-            The root API key will no longer be displayed for this environment. A new hidden root key
-            will be generated, and this can't be reversed.
+            The full root API key will no longer be displayed for this environment, only its last 4
+            characters. A new hidden root key will be generated, and this can't be reversed.
           </Callout>
           <Paragraph>
             The current root key will remain valid for 24 hours. Create and deploy an additional API

apps/webapp/app/routes/resources.environments.$environmentId.regenerate-api-key.tsx

@@ -53,12 +53,14 @@ export const action = dashboardAction(
     const formData = await request.formData();
     const syncToVercel = formData.get("syncToVercel") === "on";
     const revokeImmediately = formData.get("previousKey") === "revoke";
+    const allowHidden = formData.get("rootApiKeyHidden") === "true";
 
     try {
       const updatedEnvironment = await regenerateApiKey({
         userId: user.id,
         environmentId,
         revokeImmediately,
+        allowHidden,
       });
 
       // Sync the regenerated API key to Vercel only when requested and not for DEVELOPMENT