GeezerVison

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.

title: string;

hasVercelIntegration: boolean;

isDevelopment: boolean;

isRootApiKeyHidden?: boolean;

type ModalContentProps = ModalProps & {

title,

hasVercelIntegration,

isDevelopment,

isRootApiKeyHidden = false,

}: ModalProps) {

const randomWord = generateTwoRandomWords();

const [open, setOpen] = useState(false);

title={title}

hasVercelIntegration={hasVercelIntegration}

isDevelopment={isDevelopment}

isRootApiKeyHidden={isRootApiKeyHidden}

randomWord={randomWord}

closeModal={() => setOpen(false)}

/>

title,

hasVercelIntegration,

isDevelopment,

isRootApiKeyHidden,

closeModal,

}: ModalContentProps) => {

const [confirmationText, setConfirmationText] = useState("");

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">

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>

type RegenerateApiKeyInput = RootApiKeyMutationInput & {

revokeImmediately?: boolean;

allowHidden?: boolean;

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: {

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 }>

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);

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 },

},

});

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,

});

}

return { ...environment, apiKey: newApiKey, pkApiKey: newPkApiKey };

return {

...environment,

apiKey: newApiKey,

pkApiKey: newPkApiKey,

rootApiKeyHiddenAt: currentEnvironment.rootApiKeyHiddenAt,

};

}

);

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 },

]);

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),

TableHeaderCell,

TableRow,

} from "~/components/primitives/Table";

import { InfoIconTooltip } from "~/components/primitives/Tooltip";

import { MAX_API_KEY_TASK_IDENTIFIERS } from "~/consts";

import {

createEnvironmentApiKey,

.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>

/>

) : null}

<RevokedFilter checked={showRevoked} />

{hasApiKeys ? (

{showCreateApiKeyPrompt ? null : (

<NewApiKeyButton canWrite={canWriteApiKeys} variant="primary/small" />

) : null}

)}

</div>

</div>

<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>

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>

);

})}

{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>

<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

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