feat: Recoverable keys feature for the dashboard

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/new/client.tsx

@@ -78,6 +78,7 @@ const formSchema = z.object({
       },
     )
     .optional(),
+  recoverEnabled: z.boolean().default(false),
   limitEnabled: z.boolean().default(false),
   limit: z
     .object({
@@ -163,6 +164,7 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
       expireEnabled: false,
       limitEnabled: false,
       metaEnabled: false,
+      recoverEnabled: false,
       ratelimitEnabled: false,
     },
   });
@@ -203,6 +205,7 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
       expires: values.expires?.getTime() ?? undefined,
       ownerId: values.ownerId ?? undefined,
       remaining: values.limit?.remaining ?? undefined,
+      recoverEnabled: values.recoverEnabled,
       enabled: true,
     });
 
@@ -257,7 +260,6 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
                 Please pass it on to your user or store it somewhere safe.
               </AlertDescription>
             </Alert>
-
             <Code className="flex items-center justify-between w-full gap-4 my-8 ph-no-capture max-sm:text-xs sm:overflow-hidden">
               <pre>{showKey ? key.data.key : maskedKey}</pre>
               <div className="flex items-start justify-between gap-4 max-sm:absolute max-sm:right-11">
@@ -292,6 +294,7 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
                 form.setValue("expireEnabled", false);
                 form.setValue("ratelimitEnabled", false);
                 form.setValue("metaEnabled", false);
+                form.setValue("recoverEnabled", false);
                 form.setValue("limitEnabled", false);
                 router.refresh();
               }}
@@ -806,6 +809,54 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
                         ) : null}
                       </CardContent>
                     </Card>
+                    <Card>
+                      <CardContent className="justify-between w-full p-4 item-center">
+                        <div className="flex items-center justify-between w-full">
+                          <span>Recoverable</span>
+
+                          <FormField
+                            control={form.control}
+                            name="recoverEnabled"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel className="sr-only">Recoverable</FormLabel>
+                                <FormControl>
+                                  <Switch
+                                    onCheckedChange={(e) => {
+                                      field.onChange(e);
+                                      if (field.value === false) {
+                                        resetLimited();
+                                      }
+                                    }}
+                                  />
+                                </FormControl>
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+
+                        {form.watch("recoverEnabled") ? (
+                          <>
+                            {form.formState.errors.ratelimit && (
+                              <p className="text-xs text-center text-content-alert">
+                                {form.formState.errors.ratelimit.message}
+                              </p>
+                            )}
+                          </>
+                        ) : null}
+                        <p className="text-xs text-content-subtle">
+                          You can choose to recover and display plaintext keys later, though it's
+                          not recommended. Recoverable keys are securely stored in an encrypted
+                          vault. For more, visit{" "}
+                          <Link
+                            className="font-semibold"
+                            href={"unkey.com/docs/security/recovering-keys"}
+                          >
+                            unkey.com/docs/security/recovering-keys.
+                          </Link>
+                        </p>
+                      </CardContent>
+                    </Card>
 
                     <div className="w-full">
                       <Button

apps/dashboard/lib/trpc/routers/key/create.ts

@@ -1,8 +1,11 @@
+import { Api } from "@/app/(app)/settings/root-keys/[keyId]/permissions/api";
 import { db, schema } from "@/lib/db";
+import { env } from "@/lib/env";
 import { ingestAuditLogs } from "@/lib/tinybird";
 import { TRPCError } from "@trpc/server";
 import { newId } from "@unkey/id";
 import { newKey } from "@unkey/keys";
+import { type EncryptRequest, type RequestContext, Vault } from "@unkey/vault";
 import { z } from "zod";
 import { auth, t } from "../../trpc";
 
@@ -15,6 +18,7 @@ export const createKey = t.procedure
       keyAuthId: z.string(),
       ownerId: z.string().nullish(),
       meta: z.record(z.unknown()).optional(),
+      recoverEnabled: z.boolean().optional(),
       remaining: z.number().int().positive().optional(),
       refill: z
         .object({
@@ -67,7 +71,6 @@ export const createKey = t.procedure
       prefix: input.prefix,
       byteLength: input.bytes,
     });
-
     await db
       .insert(schema.keys)
       .values({
@@ -100,7 +103,22 @@ export const createKey = t.procedure
             "We are unable to create the key. Please contact support using support.unkey.dev",
         });
       });
-
+    if (input.recoverEnabled && keyAuth?.storeEncryptedKeys) {
+      const vault = new Vault(env().AGENT_URL, env().AGENT_TOKEN);
+      const encryptReq: EncryptRequest = {
+        keyring: workspace.id,
+        data: key,
+      };
+      const requestId = crypto.randomUUID();
+      const context: RequestContext = { requestId };
+      const vaultRes = await vault.encrypt(context, encryptReq);
+      await db.insert(schema.encryptedKeys).values({
+        keyId: keyId,
+        workspaceId: workspace.id,
+        encrypted: vaultRes.encrypted,
+        encryptionKeyId: vaultRes.keyId,
+      });
+    }
     await ingestAuditLogs({
       workspaceId: workspace.id,
       actor: { type: "user", id: ctx.user.id },

apps/dashboard/package.json

@@ -53,6 +53,7 @@
     "@unkey/rbac": "workspace:^",
     "@unkey/resend": "workspace:^",
     "@unkey/schema": "workspace:^",
+    "@unkey/vault": "workspace:^",
     "@unkey/vercel": "workspace:^",
     "@upstash/ratelimit": "^2.0.1",
     "@upstash/redis": "^1.31.3",

internal/vault/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@unkey/vault",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@unkey/tsconfig": "workspace:*",
+    "typescript": "^5.5.3"
+  }
+}

internal/vault/src/index.ts

@@ -0,0 +1,101 @@
+export type EncryptRequest = {
+  keyring: string;
+  data: string;
+};
+
+export type EncryptResponse = {
+  encrypted: string;
+  keyId: string;
+};
+
+export type EncryptBulkRequest = {
+  keyring: string;
+  data: string[];
+};
+
+export type EncryptBulkResponse = {
+  encrypted: EncryptResponse[];
+};
+
+export type DecryptRequest = {
+  keyring: string;
+  encrypted: string;
+};
+
+export type DecryptResponse = {
+  plaintext: string;
+};
+
+export type RequestContext = {
+  requestId: string;
+};
+
+export class Vault {
+  private readonly baseUrl: string;
+  private readonly token: string;
+
+  constructor(baseUrl: string, token: string) {
+    this.baseUrl = baseUrl;
+    this.token = token;
+  }
+
+  public async encrypt(c: RequestContext, req: EncryptRequest): Promise<EncryptResponse> {
+    const url = `${this.baseUrl}/vault.v1.VaultService/Encrypt`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.token}`,
+        "Unkey-Request-Id": c.requestId,
+      },
+      body: JSON.stringify(req),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Unable to encrypt, fetch error: ${await res.text()}`);
+    }
+
+    return res.json();
+  }
+
+  public async encryptBulk(
+    c: RequestContext,
+    req: EncryptBulkRequest,
+  ): Promise<EncryptBulkResponse> {
+    const url = `${this.baseUrl}/vault.v1.VaultService/EncryptBulk`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.token}`,
+        "Unkey-Request-Id": c.requestId,
+      },
+      body: JSON.stringify(req),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Unable to encryptBulk, fetch error: ${await res.text()}`);
+    }
+
+    return res.json();
+  }
+
+  public async decrypt(c: RequestContext, req: DecryptRequest): Promise<DecryptResponse> {
+    const url = `${this.baseUrl}/vault.v1.VaultService/Decrypt`;
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${this.token}`,
+        "Unkey-Request-Id": c.requestId,
+      },
+      body: JSON.stringify(req),
+    });
+
+    if (!res.ok) {
+      throw new Error(`Unable to decrypt, fetch error: ${await res.text()}`);
+    }
+
+    return res.json();
+  }
+}