[Engine] Replace vault access token with project secret key for authentication

Author: joaquim-verges

.changeset/icy-islands-dress.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/service-utils": patch
+---
+
+Add encryption utilities

.changeset/loud-mails-peel.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Make vault access token optional

apps/dashboard/src/@/components/project/create-project-modal/index.tsx

@@ -38,6 +38,7 @@ import { createProjectClient } from "@/hooks/useApi";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { projectDomainsSchema, projectNameSchema } from "@/schema/validations";
 import { toArrFromList } from "@/utils/string";
+import { createVaultAccountAndAccessToken } from "../../../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client";
 
 const ALL_PROJECT_SERVICES = SERVICES.filter(
   (srv) => srv.name !== "relayer" && srv.name !== "chainsaw",
@@ -63,6 +64,10 @@ const CreateProjectDialog = (props: CreateProjectDialogProps) => {
     <CreateProjectDialogUI
       createProject={async (params) => {
         const res = await createProjectClient(props.teamId, params);
+        await createVaultAccountAndAccessToken({
+          project: res.project,
+          projectSecretKey: res.secret,
+        });
         return {
           project: res.project,
           secret: res.secret,

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/ftux.client.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { Project } from "@/api/projects";
 import { type Step, StepsCard } from "@/components/blocks/StepsCard";
@@ -22,24 +22,8 @@ interface Props {
 }
 
 export const EngineChecklist: React.FC<Props> = (props) => {
-  const [userAccessToken, setUserAccessToken] = useState<string | undefined>();
-
   const finalSteps = useMemo(() => {
     const steps: Step[] = [];
-    steps.push({
-      children: (
-        <CreateVaultAccountStep
-          onUserAccessTokenCreated={(token) => setUserAccessToken(token)}
-          project={props.project}
-          teamSlug={props.teamSlug}
-        />
-      ),
-      completed: !!props.managementAccessToken,
-      description:
-        "Vault is thirdweb's key management system. It allows you to create secure server wallets and manage access tokens.",
-      showCompletedChildren: false,
-      title: "Create a Vault Admin Account",
-    });
     steps.push({
       children: (
         <CreateServerWalletStep
@@ -61,7 +45,6 @@ export const EngineChecklist: React.FC<Props> = (props) => {
           client={props.client}
           project={props.project}
           teamSlug={props.teamSlug}
-          userAccessToken={userAccessToken}
           wallets={props.wallets}
         />
       ),
@@ -78,7 +61,6 @@ export const EngineChecklist: React.FC<Props> = (props) => {
     props.project,
     props.wallets,
     props.hasTransactions,
-    userAccessToken,
     props.teamSlug,
     props.client,
   ]);
@@ -94,7 +76,6 @@ export const EngineChecklist: React.FC<Props> = (props) => {
         client={props.client}
         project={props.project}
         teamSlug={props.teamSlug}
-        userAccessToken={userAccessToken}
         walletId={props.testTxWithWallet}
         wallets={props.wallets}
       />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/send-test-tx.client.tsx

@@ -11,7 +11,6 @@ import { engineCloudProxy } from "@/actions/proxies";
 import type { Project } from "@/api/projects";
 import { SingleNetworkSelector } from "@/components/blocks/NetworkSelectors";
 import { Button } from "@/components/ui/button";
-import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Input } from "@/components/ui/input";
 import {
   Select,
@@ -24,10 +23,10 @@ import { useAllChainsData } from "@/hooks/chains/allChains";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import type { Wallet } from "../server-wallets/wallet-table/types";
 import { SmartAccountCell } from "../server-wallets/wallet-table/wallet-table-ui.client";
-import { deleteUserAccessToken, getUserAccessToken } from "./utils";
+import { deleteUserAccessToken } from "./utils";
 
 const formSchema = z.object({
-  accessToken: z.string().min(1, "Access token is required"),
+  secretKey: z.string().min(1, "Secret key is required"),
   chainId: z.number(),
   walletIndex: z.string(),
 });
@@ -38,7 +37,6 @@ export function SendTestTransaction(props: {
   wallets?: Wallet[];
   project: Project;
   teamSlug: string;
-  userAccessToken?: string;
   expanded?: boolean;
   walletId?: string;
   client: ThirdwebClient;
@@ -49,12 +47,9 @@ export function SendTestTransaction(props: {
 
   const chainsQuery = useAllChainsData();
 
-  const userAccessToken =
-    props.userAccessToken ?? getUserAccessToken(props.project.id) ?? "";
-
   const form = useForm<FormValues>({
     defaultValues: {
-      accessToken: userAccessToken,
+      secretKey: "",
       chainId: 84532,
       walletIndex:
         props.wallets && props.walletId
@@ -73,7 +68,7 @@ export function SendTestTransaction(props: {
   const sendDummyTxMutation = useMutation({
     mutationFn: async (args: {
       walletAddress: string;
-      accessToken: string;
+      secretKey: string;
       chainId: number;
     }) => {
       const response = await engineCloudProxy({
@@ -93,7 +88,7 @@ export function SendTestTransaction(props: {
           "Content-Type": "application/json",
           "x-client-id": props.project.publishableKey,
           "x-team-id": props.project.teamId,
-          "x-vault-access-token": args.accessToken,
+          "x-secret-key": args.secretKey,
         },
         method: "POST",
         pathname: "/v1/write/transaction",
@@ -123,7 +118,7 @@ export function SendTestTransaction(props: {
 
   const onSubmit = async (data: FormValues) => {
     await sendDummyTxMutation.mutateAsync({
-      accessToken: data.accessToken,
+      secretKey: data.secretKey,
       chainId: data.chainId,
       walletAddress: selectedWallet.address,
     });
@@ -141,44 +136,28 @@ export function SendTestTransaction(props: {
         )}
         <p className="flex items-center gap-2 text-sm text-warning-text">
           <LockIcon className="h-4 w-4" />
-          {userAccessToken
-            ? "Copy your Vault access token, you'll need it for every HTTP call to Engine."
-            : "Every wallet action requires your Vault access token."}
+          Every server wallet action requires your project secret key.
         </p>
         <div className="h-4" />
         {/* Responsive container */}
         <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-2">
           <div className="flex-grow">
             <div className="flex flex-col gap-2">
-              <p className="text-sm">Vault Access Token</p>
-              {userAccessToken ? (
-                <div className="flex flex-col gap-2 ">
-                  <CopyTextButton
-                    className="!h-auto w-full justify-between bg-background px-3 py-3 font-mono text-xs"
-                    copyIconPosition="right"
-                    textToCopy={userAccessToken}
-                    textToShow={userAccessToken}
-                    tooltip="Copy Vault Access Token"
-                  />
-                  <p className="text-muted-foreground text-xs">
-                    This is a project-wide access token to access your server
-                    wallets. You can create more access tokens using your admin
-                    key, with granular scopes and permissions.
-                  </p>
-                </div>
-              ) : (
+              <p className="text-sm">Project Secret Key</p>
                 <Input
-                  placeholder="vt_act_1234....ABCD"
-                  type={userAccessToken ? "text" : "password"}
-                  {...form.register("accessToken")}
+                  placeholder="Enter your project secret key"
+                  type={"password"}
+                  {...form.register("secretKey")}
                   className="text-xs"
                   disabled={isLoading}
                 />
-              )}
+                <p className="text-muted-foreground text-xs">
+                  Your project secret key was generated when you created your project. If you lost it, you can regenerate one in the project settings.
+                </p>
             </div>
           </div>
         </div>
-        <div className="h-4" />
+        <div className="h-6" />
         {/* Wallet Selector */}
         <div className="flex flex-col gap-2">
           <div className="flex flex-col gap-2 md:flex-row md:items-end md:gap-2">

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts

@@ -2,12 +2,14 @@
 
 import {
   createAccessToken,
+  createServiceAccount,
   createVaultClient,
   type VaultClient,
 } from "@thirdweb-dev/vault-sdk";
 import type { Project } from "@/api/projects";
 import { NEXT_PUBLIC_THIRDWEB_VAULT_URL } from "@/constants/public-envs";
 import { updateProjectClient } from "@/hooks/useApi";
+import { encrypt } from "@thirdweb-dev/service-utils";
 
 const SERVER_WALLET_ACCESS_TOKEN_PURPOSE =
   "Access Token for All Server Wallets";
@@ -27,6 +29,86 @@ export async function initVaultClient() {
   return vc;
 }
 
+export async function createVaultAccountAndAccessToken(props: {
+  project: Project;
+  projectSecretKey: string;
+}) {
+  try {
+    const { project, projectSecretKey } = props;
+    const vaultClient = await initVaultClient();
+    const serviceAccount = await createServiceAccount({
+      client: vaultClient,
+      request: {
+        options: {
+          metadata: {
+            projectId: props.project.id,
+            purpose: "Thirdweb Project Server Wallet Service Account",
+            teamId: props.project.teamId,
+          },
+        },
+      },
+    });
+    if (serviceAccount.success === false) {
+      throw new Error(
+        `Failed to create service account: ${serviceAccount.error}`,
+      );
+    }
+    const adminKey = serviceAccount.data.adminKey;
+    const rotationCode = serviceAccount.data.rotationCode;
+
+    const [managementTokenResult, walletTokenResult] = await Promise.all([
+      createManagementAccessToken({ project, adminKey, vaultClient }),
+      createWalletAccessToken({ project, adminKey, vaultClient }),
+    ]);
+
+    if (!managementTokenResult.success) {
+      throw new Error(
+        `Failed to create management token: ${serviceAccount.error}`,
+      );
+    }
+
+    if (!walletTokenResult.success) {
+      throw new Error(
+        `Failed to create wallet token: ${walletTokenResult.error}`,
+      );
+    }
+
+    const managementToken = managementTokenResult.data;
+    const walletToken = walletTokenResult.data;
+
+    // encrypt admin key and wallet token with project secret key
+    const [encryptedAdminKey, encryptedWalletAccessToken] = await Promise.all([
+      encrypt(adminKey, projectSecretKey),
+      encrypt(walletToken.accessToken, projectSecretKey),
+    ]);
+
+    await updateProjectClient(
+      {
+        projectId: props.project.id,
+        teamId: props.project.teamId,
+      },
+      {
+        services: [
+          ...props.project.services,
+          {
+            name: "engineCloud",
+            actions: [],
+            managementAccessToken: managementToken.accessToken,
+            maskedAdminKey: maskSecret(adminKey),
+            encryptedAdminKey,
+            encryptedWalletAccessToken,
+            rotationCode: rotationCode,
+          },
+        ],
+      },
+    );
+  } catch (error) {
+    throw new Error(
+      `Failed to create vault account and access token: ${error}`,
+    );
+  }
+}
+
 export async function createWalletAccessToken(props: {
   project: Project;
   adminKey: string;
@@ -246,10 +328,9 @@ export async function createWalletAccessToken(props: {
 export async function createManagementAccessToken(props: {
   project: Project;
   adminKey: string;
-  rotationCode: string;
   vaultClient: VaultClient;
 }) {
-  const res = await createAccessToken({
+  return createAccessToken({
     client: props.vaultClient,
     request: {
       auth: {
@@ -333,29 +414,6 @@ export async function createManagementAccessToken(props: {
       },
     },
   });
-  if (res.success) {
-    const data = res.data;
-    await updateProjectClient(
-      {
-        projectId: props.project.id,
-        teamId: props.project.teamId,
-      },
-      {
-        services: [
-          ...props.project.services,
-          {
-            actions: [],
-            managementAccessToken: data.accessToken,
-            maskedAdminKey: maskSecret(props.adminKey),
-            name: "engineCloud",
-            rotationCode: props.rotationCode,
-          },
-        ],
-      },
-    );
-    return res;
-  }
-  throw new Error(`Failed to create management access token: ${res.error}`);
 }
 
 export function maskSecret(secret: string) {