feat: execute pending recovery on login (#57)

* feat: execute pending recovery on login

* feat: move recovery client to sdk

* feat: add account-not-ready view

* chore: fix pnpm lock

---------

Co-authored-by: aon <21188659+aon@users.noreply.github.com>

Author: MiniRoman

packages/auth-server/composables/useAccountLogin.ts

@@ -28,9 +28,25 @@ export const useAccountLogin = (_chainId: MaybeRef<SupportedChainId>) => {
       });
       return { success: true } as const;
     } catch {
-      const { checkRecoveryRequest } = useRecoveryGuardian();
+      const { checkRecoveryRequest, executeRecovery } = useRecoveryGuardian();
       const recoveryRequest = await checkRecoveryRequest(credential.id);
       if (recoveryRequest) {
+        const isReady = recoveryRequest[1];
+        if (isReady) {
+          await executeRecovery(recoveryRequest[0]);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const { username, address, passkeyPublicKey } = await fetchAccount(client as any, {
+            contracts: contractsByChain[chainId.value],
+            uniqueAccountId: credential.id,
+          });
+          login({
+            username,
+            address,
+            passkey: toHex(passkeyPublicKey),
+          });
+          return { success: true } as const;
+        }
+
         return {
           success: false,
           recoveryRequest: {

packages/auth-server/composables/useRecoveryGuardian.ts

@@ -1,4 +1,5 @@
 import type { Account, Address, Chain, Client, Transport } from "viem";
+import { hexToBytes } from "viem";
 import { GuardianRecoveryModuleAbi } from "zksync-sso/abi";
 import { confirmGuardian as sdkConfirmGuardian } from "zksync-sso/client";
 
@@ -7,7 +8,7 @@ const getGuardiansError = ref<Error | null>(null);
 const getGuardiansData = ref<readonly { addr: Address; isReady: boolean }[] | null>(null);
 
 export const useRecoveryGuardian = () => {
-  const { getClient, getPublicClient, getWalletClient, defaultChain } = useClientStore();
+  const { getClient, getPublicClient, getWalletClient, getRecoveryClient, defaultChain } = useClientStore();
   const paymasterAddress = contractsByChain[defaultChain!.id].accountPaymaster;
 
   const getGuardedAccountsInProgress = ref(false);
@@ -156,6 +157,19 @@ export const useRecoveryGuardian = () => {
     return tx;
   });
 
+  const { inProgress: executeRecoveryInProgress, error: executeRecoveryError, execute: executeRecovery } = useAsync(async (address: Address) => {
+    const recoveryClient = await getRecoveryClient({ chainId: defaultChain.id, address });
+    const pendingRecovery = await getPendingRecoveryData(address);
+
+    const tx = await recoveryClient.addAccountOwnerPasskey({
+      passkeyPublicKey: hexToBytes(pendingRecovery![0]!),
+      paymaster: {
+        address: paymasterAddress,
+      },
+    });
+    return tx;
+  });
+
   return {
     confirmGuardianInProgress,
     confirmGuardianError,
@@ -189,5 +203,8 @@ export const useRecoveryGuardian = () => {
     checkRecoveryRequestInProgress,
     checkRecoveryRequestError,
     checkRecoveryRequest,
+    executeRecoveryInProgress,
+    executeRecoveryError,
+    executeRecovery,
   };
 };

packages/auth-server/package.json

@@ -20,6 +20,7 @@
     "@vueuse/nuxt": "^11.1.0",
     "@wagmi/core": "^2.13.3",
     "@wagmi/vue": "^0.0.49",
+    "date-fns": "^4.1.0",
     "nuxt": "^3.12.3",
     "nuxt-gtag": "3.0.2",
     "nuxt-typed-router": "3.7.3",

packages/auth-server/pages/index.vue

@@ -74,7 +74,7 @@ const logIn = async () => {
     return;
   }
   if (result?.recoveryRequest?.isReady === false) {
-    navigateTo("/recovery/account-not-ready");
+    navigateTo(`/recovery/account-not-ready?address=${result!.recoveryRequest.account}`);
     return;
   }
   // TODO: handle rest of the cases

packages/auth-server/pages/recovery/account-not-ready.vue

@@ -2,19 +2,28 @@
   <main class="h-full flex flex-col justify-center px-4">
     <AppAccountLogo class="dark:text-neutral-100 h-16 md:h-20 mb-12" />
 
-    <div class="space-y-2">
+    <div
+      class="space-y-2"
+      :loading="!recoveryState"
+    >
       <h2 class="text-3xl font-bold text-center mb-2 text-gray-900 dark:text-white">
         Account in Recovery
       </h2>
       <p class="text-center text-gray-600 dark:text-gray-400 text-lg">
-        Your account is not ready yet
+        {{ recoveryState!.type === 'notYet' ? "Your account is not ready yet" : "Your recovery request already expired"
+        }}
       </p>
     </div>
 
-    <div class="flex flex-col items-center mt-8">
+    <div
+      v-if="recoveryState!.type === 'notYet'"
+      class="flex flex-col items-center mt-8"
+    >
       <div class="p-6 rounded-lg bg-gray-50 dark:bg-gray-800 max-w-md w-full text-center">
         <p class="text-gray-600 dark:text-gray-300 mb-4">
-          Your account is currently in the recovery process. It will be ready in <span class="font-semibold text-gray-900 dark:text-white">24hs</span>.
+          Your account is currently in the recovery process. It will be ready in <span
+            class="font-semibold text-gray-900 dark:text-white"
+          >{{ recoveryState!.time }}</span>.
         </p>
         <p class="text-sm text-gray-500 dark:text-gray-400">
           Please check back later
@@ -28,11 +37,56 @@
         href="/"
         class="inline-flex items-center gap-2 justify-center"
       >
-        <ZkIcon
-          icon="arrow_back"
-        />
+        <ZkIcon icon="arrow_back" />
         Back to Home
       </ZkLink>
     </div>
   </main>
 </template>
+
+<script setup lang="ts">
+import { formatDuration, intervalToDuration } from "date-fns";
+import type { Address } from "viem";
+import { z } from "zod";
+
+import { AddressSchema } from "@/utils/schemas";
+
+const route = useRoute();
+const { checkRecoveryRequest, getPendingRecoveryData } = useRecoveryGuardian();
+
+const accountAddress = ref<Address | null>(null);
+
+const params = z.object({
+  address: AddressSchema,
+}).safeParse(route.query);
+
+const pendingRecovery = ref<Awaited<ReturnType<typeof checkRecoveryRequest>> | null>(null);
+const recoveryState = ref<{ type: "notYet"; time: string } | { type: "expired" } | null>(null);
+
+if (!params.success) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: "Page not found",
+    fatal: true,
+  });
+} else {
+  accountAddress.value = params.data.address;
+  const recoveryRequestData = await getPendingRecoveryData(accountAddress.value);
+  if (recoveryRequestData) {
+    const recoveryData = await checkRecoveryRequest(recoveryRequestData[2]);
+    pendingRecovery.value = recoveryData;
+    if (recoveryData && recoveryData[2] > 0n) {
+      recoveryState.value = {
+        type: "notYet", time: formatDuration(intervalToDuration({
+          start: 0,
+          end: parseFloat((recoveryData[2]).toString()) * 1000,
+        })),
+      };
+    } else if (recoveryData && recoveryData[2] === 0n) {
+      recoveryState.value = {
+        type: "expired",
+      };
+    }
+  }
+}
+</script>

packages/auth-server/stores/client.ts

@@ -3,6 +3,7 @@ import { generatePrivateKey, privateKeyToAccount } from "viem/accounts";
 import { zksyncInMemoryNode, zksyncSepoliaTestnet } from "viem/chains";
 import { eip712WalletActions } from "viem/zksync";
 import { createZksyncPasskeyClient, type PasskeyRequiredContracts } from "zksync-sso/client/passkey";
+import { createZksyncRecoveryGuardianClient } from "zksync-sso/client/recovery";
 
 import localChainData from "./local-node.json";
 
@@ -72,6 +73,21 @@ export const useClientStore = defineStore("client", () => {
     return client;
   };
 
+  const getRecoveryClient = ({ chainId, address }: { chainId: SupportedChainId; address: Address }) => {
+    const chain = supportedChains.find((chain) => chain.id === chainId);
+    if (!chain) throw new Error(`Chain with id ${chainId} is not supported`);
+    const contracts = contractsByChain[chainId];
+
+    const client = createZksyncRecoveryGuardianClient({
+      address,
+      contracts,
+      chain: chain,
+      transport: http(),
+    });
+
+    return client;
+  };
+
   const getConfigurableClient = ({
     chainId,
     address,
@@ -86,7 +102,6 @@ export const useClientStore = defineStore("client", () => {
     const chain = supportedChains.find((chain) => chain.id === chainId);
     if (!chain) throw new Error(`Chain with id ${chainId} is not supported`);
     const contracts = contractsByChain[chainId];
-
     return createZksyncPasskeyClient({
       address,
       credentialPublicKey,
@@ -140,6 +155,7 @@ export const useClientStore = defineStore("client", () => {
     getClient,
     getThrowAwayClient,
     getWalletClient,
+    getRecoveryClient,
     getConfigurableClient,
   };
 });

packages/sdk/package.json

@@ -79,6 +79,11 @@
       "import": "./dist/_esm/client/passkey/index.js",
       "require": "./dist/_cjs/client/passkey/index.js"
     },
+    "./client/recovery": {
+      "types": "./dist/_types/client/recovery/index.d.ts",
+      "import": "./dist/_esm/client/recovery/index.js",
+      "require": "./dist/_cjs/client/recovery/index.js"
+    },
     "./client/session": {
       "types": "./dist/_types/client/session/index.d.ts",
       "import": "./dist/_esm/client/session/index.js",