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,
     },
   });
@@ -176,8 +178,7 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
     },
     onError(err) {
       console.error(err);
-      const message = parseTrpcError(err);
-      toast.error(message);
+      toast.error(err.message);
     },
   });
 
@@ -203,6 +204,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,
     });
 
@@ -297,6 +299,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();
               }}
@@ -811,6 +814,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,9 +1,12 @@
+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 { rateLimitedProcedure, ratelimit } from "@/lib/trpc/ratelimitProcedure";
 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";
 
 export const createKey = rateLimitedProcedure(ratelimit.create)
@@ -14,6 +17,7 @@ export const createKey = rateLimitedProcedure(ratelimit.create)
       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({
@@ -66,7 +70,6 @@ export const createKey = rateLimitedProcedure(ratelimit.create)
       prefix: input.prefix,
       byteLength: input.bytes,
     });
-
     await db
       .insert(schema.keys)
       .values({
@@ -99,6 +102,44 @@ export const createKey = rateLimitedProcedure(ratelimit.create)
             "We are unable to create the key. Please contact support using support.unkey.dev",
         });
       });
+    if (input.recoverEnabled && !keyAuth?.storeEncryptedKeys) {
+      throw new TRPCError({
+        code: "INTERNAL_SERVER_ERROR",
+        message:
+          "Storing encrypted keys for your workspace is disabled. Please contact support using [email protected]",
+      });
+    }
+
+    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).catch((_err) => {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "Encryption Failed. Please contact support using [email protected]",
+        });
+      });
+      await db
+        .insert(schema.encryptedKeys)
+        .values({
+          keyId: keyId,
+          workspaceId: workspace?.id,
+          encrypted: vaultRes.encrypted,
+          encryptionKeyId: vaultRes.keyId,
+        })
+        .catch((_err) => {
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message:
+              "We are unable to store encrypt the key. Please contact support using [email protected]",
+          });
+        });
+    }
 
     await ingestAuditLogs({
       workspaceId: workspace.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();
+  }
+}