From 4d1daf4580c8cdc9d884bcb0cfc30d86b5ec9df3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAyushBherwani1998=E2=80=9D?= <“ayush.bherwani1998@gmail.com”> Date: Fri, 22 Aug 2025 11:45:12 +0530 Subject: [PATCH 1/4] adds tutorial: use passkey as backup signer --- delegation-toolkit/tutorials/_category_.json | 4 + .../tutorials/passkey-signer.md | 161 ++++++++++++++++++ 2 files changed, 165 insertions(+) create mode 100644 delegation-toolkit/tutorials/_category_.json create mode 100644 delegation-toolkit/tutorials/passkey-signer.md diff --git a/delegation-toolkit/tutorials/_category_.json b/delegation-toolkit/tutorials/_category_.json new file mode 100644 index 00000000000..03bb310eef8 --- /dev/null +++ b/delegation-toolkit/tutorials/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Tutorials", + "position": 5 +} \ No newline at end of file diff --git a/delegation-toolkit/tutorials/passkey-signer.md b/delegation-toolkit/tutorials/passkey-signer.md new file mode 100644 index 00000000000..bca07d68190 --- /dev/null +++ b/delegation-toolkit/tutorials/passkey-signer.md @@ -0,0 +1,161 @@ +--- +description: Learn how to use Passkey as a back up signer with MetaMask smart account +sidebar_position: 1 +--- + +# Use Passkey as a back up signer + +In this tutorial, we’ll explore how to use a Passkey (WebAuthn Account) as a backup signer for your [MetaMask smart account](../concepts/smart-accounts). Passkeys offer a seamless and secure way to access your Web3 wallet, eliminating the need for traditional seed phrases that are often difficult to remember. This approach helps create a user friendly and secure onboarding experience for end users. + +## Technical overview + +An Externally Owned Account(EOA) uses the secP-256k1 elliptic curve to generate key pairs and signatures. In contrast, a Web3Authn account(Passkey) uses a different elliptic curve, secP-256r1(P-256) for key pair generation and signing. MetaMask Smart Accounts support three implementation types. Among them, the Hybrid implementation supports signature validation for both secP-256k1 and secP-256r1 curves. This allows you to add Passkeys as a backup signer for your smart account. + +## Prerequisites + +- [Install and set up the Delegation Toolkit.](../get-started/install) +- [Install Ox SDK.](https://oxlib.sh/#installation) +- [Configure the Delegation Toolkit.](../guides/configure) +- [Create a smart account](../guides/smart-accounts/create-smart-account) + +## Steps + +Passkeys can be added as a backup signer either during smart account creation or after the account has been deployed. In this tutorial, we’ll focus on how to add a Passkey signer to an already deployed smart account. + +:::info + +Please note, this tutorial assumes that you have already deployed a MetaMask smart account with the Hybrid implementation. + +::: + +### 1. Set up a Public Client + +Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. This client will let the smart account query the signer's account state and interact with blockchain network. + +```typescript +import { createPublicClient, http } from "viem"; +import { sepolia as chain } from "viem/chains"; + +const publicClient = createPublicClient({ + chain, + transport: http(), +}); +``` + +### 2. Set up a Bundler Client + +Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. This lets you use the bundler service to estimate gas for user operations and submit transactions to the network. + +```typescript +import { createBundlerClient } from "viem/account-abstraction"; + +const bundlerClient = createBundlerClient({ + client: publicClient, + transport: http("https://your-bundler-rpc.com"), +}); +``` + +### 3. Create a MetaMask smart account + +Create a MetaMask smart account to add back up signer. This tutorial configures a Hybrid smart account, which is a flexible smart account implementation that supports adding P-256 (Passkey) signers: + +```typescript +import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; +import { privateKeyToAccount } from "viem/accounts"; + +const account = privateKeyToAccount("0x..."); + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [account.address, [], [], []], + deploySalt: "0x", + signatory: { account }, +}); +``` + +### 4. Create WebAuthn credential + +To add a Passkey signer, you first need to use Viem’s `createWebAuthnCredential` to securely register the WebAuthn(P-256) credential. + +```ts +import { + createWebAuthnCredential, +} from "viem/account-abstraction"; + +const credential = await createWebAuthnCredential({ + name: "MetaMask Smart Account", +}); +``` + +### 5. Add Passkey as a back up signer + +Next, use the `HybridDeleGator` contract namespace from the Delegation Toolkit to encode the calldata required to add the Passkey signer. The encoding function needs the X and Y coordinates of the P-256 public key. Since WebAuthn credentials store a compressed public key, you need to use the [Ox](https://oxlib.sh/#installation) SDK to deserialize it, and extract the X and Y coordinates. + +Once the calldata is prepared, send it to your smart account address to register the Passkey as a backup signer. + +```ts +import { PublicKey } from "ox"; +import { HybridDeleGator, P256Owner } from "@metamask/delegation-toolkit/contracts"; + +// Deserialize compressed public key +const publicKey = PublicKey.fromHex(credential.publicKey); + +const p256Owner: P256Owner = { + keyId: credential.id, + x: publicKey.x, + y: publicKey.y, +} + +const data = HybridDeleGator.encode.addKey({ + p256Owner, +}); + +// Appropriate fee per gas must be determined for the specific bundler being used. +const maxFeePerGas = 1n; +const maxPriorityFeePerGas = 1n; + +const userOperationHash = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + { + to: smartAccount.addres, + data, + }, + ], + maxFeePerGas, + maxPriorityFeePerGas, +}); +``` + +### 6. Use Passkey signer (Optional) + +You can now use the Passkey signer to access your Smart Account and sign transactions. If you ever lose your primary signer(private key) used in [third step](#3-create-a-metamask-smart-account), the Passkey can be used a secure backup method to retain access to your smart account. + +Use the [Viem WebAuthn Account](https://viem.sh/account-abstraction/accounts/webauthn) to configure your Passkey as a MetaMask smart account signer. + +```ts +import { Address } from "ox"; +import { toWebAuthnAccount } from "viem/account-abstraction"; +import { toHex } from "viem"; +import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; + +// Use the deserialize from previous step +const owner = Address.fromPublicKey(publicKey); + +// Use the credential from previous step +const webAuthnAccount = toWebAuthnAccount({ credential }); + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [owner, [credential.id], [publicKey.x], [publicKey.y]], + deploySalt: "0x", + signatory: { webAuthnAccount, keyId: toHex(credential.id) }, +}); +``` + +### Resources + +- See [create a MetaMask smart account](../guides/smart-accounts/create-smart-account) to learn more about smart account implementations. +- See [send a gasless transaction](../guides/smart-accounts/send-gasless-transaction) to learn how to sponsor gas fees when adding a Passkey as a backup signer. \ No newline at end of file From 89b3fb68fdbb316037d2fd5f63b7748d0fc385e8 Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Mon, 25 Aug 2025 21:55:25 -0700 Subject: [PATCH 2/4] edits --- delegation-toolkit/concepts/smart-accounts.md | 6 +- .../smart-account-quickstart/index.md | 2 +- .../smart-accounts/create-smart-account.md | 9 +- .../reference/api/smart-account.md | 6 +- .../tutorials/passkey-signer.md | 161 ----------------- .../tutorials/use-passkey-as-backup-signer.md | 168 ++++++++++++++++++ 6 files changed, 180 insertions(+), 172 deletions(-) delete mode 100644 delegation-toolkit/tutorials/passkey-signer.md create mode 100644 delegation-toolkit/tutorials/use-passkey-as-backup-signer.md diff --git a/delegation-toolkit/concepts/smart-accounts.md b/delegation-toolkit/concepts/smart-accounts.md index 181af10d8e3..ec7841303c5 100644 --- a/delegation-toolkit/concepts/smart-accounts.md +++ b/delegation-toolkit/concepts/smart-accounts.md @@ -37,13 +37,13 @@ ERC-4337 introduces the following concepts: ## Smart account implementation types -The MetaMask Delegation Toolkit supports three types of MetaMask Smart Accounts, each offering unique features and use cases. +The MetaMask Delegation Toolkit supports three types of MetaMask Smart Accounts, each offering different signature schemes for verifying access to the smart account. See [Create a smart account](../guides/smart-accounts/create-smart-account.md) to learn how to use these different account types. ### Hybrid smart account -The Hybrid smart account is a flexible implementation that supports both an externally owned account (EOA) owner and any number of P256 (passkey) signers. +The Hybrid smart account is a flexible implementation that supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers. You can configure any of these signers as the signatory, and use them to sign any data, including user operations, on behalf of the smart account. This type is referenced in the toolkit as `Implementation.Hybrid`. @@ -51,7 +51,7 @@ This type is referenced in the toolkit as `Implementation.Hybrid`. ### Multisig smart account The Multisig smart account is an implementation that supports multiple signers with a configurable threshold for valid signatures, allowing for enhanced security and flexibility in account management. -The signatory must have at least as many signers include as the threshold is configured for the account. +The signatory, which signs on behalf of the smart account, must have at least as many signers as the configured threshold. This type is referenced in the toolkit as `Implementation.Multisig`. diff --git a/delegation-toolkit/get-started/smart-account-quickstart/index.md b/delegation-toolkit/get-started/smart-account-quickstart/index.md index b8d29e6e081..2d65660cf80 100644 --- a/delegation-toolkit/get-started/smart-account-quickstart/index.md +++ b/delegation-toolkit/get-started/smart-account-quickstart/index.md @@ -46,7 +46,7 @@ const bundlerClient = createBundlerClient({ [Create a MetaMask smart account](../../guides/smart-accounts/create-smart-account.md) to send the first user operation. This example configures a Hybrid smart account, -which is a flexible smart account implementation that supports both an externally owned account (EOA) owner and any number of P256 (passkey) signers: +which is a flexible smart account implementation that supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers: ```typescript import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; diff --git a/delegation-toolkit/guides/smart-accounts/create-smart-account.md b/delegation-toolkit/guides/smart-accounts/create-smart-account.md index a2b565a64d0..3989a08155f 100644 --- a/delegation-toolkit/guides/smart-accounts/create-smart-account.md +++ b/delegation-toolkit/guides/smart-accounts/create-smart-account.md @@ -9,7 +9,8 @@ import TabItem from "@theme/TabItem"; # Create a smart account You can enable users to create a [MetaMask smart account](../../concepts/smart-accounts.md) directly in your dapp. -This page provides examples of using [`toMetaMaskSmartAccount`](../../reference/api/smart-account.md#tometamasksmartaccount) with Viem Core SDK to create different types of smart accounts with different types of signatories. +This page provides examples of using [`toMetaMaskSmartAccount`](../../reference/api/smart-account.md#tometamasksmartaccount) with Viem Core SDK to create different types of smart accounts with different signature schemes. +An account's supported *signatories* can sign data on behalf of the smart account. ## Prerequisites @@ -18,7 +19,7 @@ This page provides examples of using [`toMetaMaskSmartAccount`](../../reference/ ## Create a Hybrid smart account -A Hybrid smart account supports both an externally owned account (EOA) owner and any number of P256 (passkey) signers. +A Hybrid smart account supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers. You can create a Hybrid smart account with the following types of signatories. ### Create a Hybrid smart account with an Account signatory @@ -138,9 +139,9 @@ export const walletClient = createWalletClient({ -### Create a Hybrid smart account with a WebAuthn (passkey) signatory +### Create a Hybrid smart account with a passkey signatory -Use [`toMetaMaskSmartAccount`](../../reference/api/smart-account.md#tometamasksmartaccount) and Viem's [`toWebAuthnAccount`](https://viem.sh/account-abstraction/accounts/webauthn) to create a Hybrid smart account with a WebAuthn Account signatory: +Use [`toMetaMaskSmartAccount`](../../reference/api/smart-account.md#tometamasksmartaccount) and Viem's [`toWebAuthnAccount`](https://viem.sh/account-abstraction/accounts/webauthn) to create a Hybrid smart account with a passkey (WebAuthn) signatory: :::info Installation required To work with WebAuthn, install the [Ox SDK](https://oxlib.sh/). diff --git a/delegation-toolkit/reference/api/smart-account.md b/delegation-toolkit/reference/api/smart-account.md index 517bc54915e..e1b053a5b40 100644 --- a/delegation-toolkit/reference/api/smart-account.md +++ b/delegation-toolkit/reference/api/smart-account.md @@ -544,9 +544,9 @@ All Hybrid deploy parameters are required: | Name | Type | Description | | ---- | ---- | ----------- | | `owner` | `Hex` | The owner's account address. The owner can be the zero address, indicating that there is no owner configured. | -| `p256KeyIds` | `Hex[]` | An array of key identifiers for P256 signers. | -| `p256XValues` | `bigint[]` | An array of public key x-values for P256 signers. | -| `p256YValues` | `bigint[]` | An array of public key y-values for P256 signers. | +| `p256KeyIds` | `Hex[]` | An array of key identifiers for passkey signers. | +| `p256XValues` | `bigint[]` | An array of public key x-values for passkey signers. | +| `p256YValues` | `bigint[]` | An array of public key y-values for passkey signers. | #### Example diff --git a/delegation-toolkit/tutorials/passkey-signer.md b/delegation-toolkit/tutorials/passkey-signer.md deleted file mode 100644 index bca07d68190..00000000000 --- a/delegation-toolkit/tutorials/passkey-signer.md +++ /dev/null @@ -1,161 +0,0 @@ ---- -description: Learn how to use Passkey as a back up signer with MetaMask smart account -sidebar_position: 1 ---- - -# Use Passkey as a back up signer - -In this tutorial, we’ll explore how to use a Passkey (WebAuthn Account) as a backup signer for your [MetaMask smart account](../concepts/smart-accounts). Passkeys offer a seamless and secure way to access your Web3 wallet, eliminating the need for traditional seed phrases that are often difficult to remember. This approach helps create a user friendly and secure onboarding experience for end users. - -## Technical overview - -An Externally Owned Account(EOA) uses the secP-256k1 elliptic curve to generate key pairs and signatures. In contrast, a Web3Authn account(Passkey) uses a different elliptic curve, secP-256r1(P-256) for key pair generation and signing. MetaMask Smart Accounts support three implementation types. Among them, the Hybrid implementation supports signature validation for both secP-256k1 and secP-256r1 curves. This allows you to add Passkeys as a backup signer for your smart account. - -## Prerequisites - -- [Install and set up the Delegation Toolkit.](../get-started/install) -- [Install Ox SDK.](https://oxlib.sh/#installation) -- [Configure the Delegation Toolkit.](../guides/configure) -- [Create a smart account](../guides/smart-accounts/create-smart-account) - -## Steps - -Passkeys can be added as a backup signer either during smart account creation or after the account has been deployed. In this tutorial, we’ll focus on how to add a Passkey signer to an already deployed smart account. - -:::info - -Please note, this tutorial assumes that you have already deployed a MetaMask smart account with the Hybrid implementation. - -::: - -### 1. Set up a Public Client - -Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. This client will let the smart account query the signer's account state and interact with blockchain network. - -```typescript -import { createPublicClient, http } from "viem"; -import { sepolia as chain } from "viem/chains"; - -const publicClient = createPublicClient({ - chain, - transport: http(), -}); -``` - -### 2. Set up a Bundler Client - -Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. This lets you use the bundler service to estimate gas for user operations and submit transactions to the network. - -```typescript -import { createBundlerClient } from "viem/account-abstraction"; - -const bundlerClient = createBundlerClient({ - client: publicClient, - transport: http("https://your-bundler-rpc.com"), -}); -``` - -### 3. Create a MetaMask smart account - -Create a MetaMask smart account to add back up signer. This tutorial configures a Hybrid smart account, which is a flexible smart account implementation that supports adding P-256 (Passkey) signers: - -```typescript -import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; -import { privateKeyToAccount } from "viem/accounts"; - -const account = privateKeyToAccount("0x..."); - -const smartAccount = await toMetaMaskSmartAccount({ - client: publicClient, - implementation: Implementation.Hybrid, - deployParams: [account.address, [], [], []], - deploySalt: "0x", - signatory: { account }, -}); -``` - -### 4. Create WebAuthn credential - -To add a Passkey signer, you first need to use Viem’s `createWebAuthnCredential` to securely register the WebAuthn(P-256) credential. - -```ts -import { - createWebAuthnCredential, -} from "viem/account-abstraction"; - -const credential = await createWebAuthnCredential({ - name: "MetaMask Smart Account", -}); -``` - -### 5. Add Passkey as a back up signer - -Next, use the `HybridDeleGator` contract namespace from the Delegation Toolkit to encode the calldata required to add the Passkey signer. The encoding function needs the X and Y coordinates of the P-256 public key. Since WebAuthn credentials store a compressed public key, you need to use the [Ox](https://oxlib.sh/#installation) SDK to deserialize it, and extract the X and Y coordinates. - -Once the calldata is prepared, send it to your smart account address to register the Passkey as a backup signer. - -```ts -import { PublicKey } from "ox"; -import { HybridDeleGator, P256Owner } from "@metamask/delegation-toolkit/contracts"; - -// Deserialize compressed public key -const publicKey = PublicKey.fromHex(credential.publicKey); - -const p256Owner: P256Owner = { - keyId: credential.id, - x: publicKey.x, - y: publicKey.y, -} - -const data = HybridDeleGator.encode.addKey({ - p256Owner, -}); - -// Appropriate fee per gas must be determined for the specific bundler being used. -const maxFeePerGas = 1n; -const maxPriorityFeePerGas = 1n; - -const userOperationHash = await bundlerClient.sendUserOperation({ - account: smartAccount, - calls: [ - { - to: smartAccount.addres, - data, - }, - ], - maxFeePerGas, - maxPriorityFeePerGas, -}); -``` - -### 6. Use Passkey signer (Optional) - -You can now use the Passkey signer to access your Smart Account and sign transactions. If you ever lose your primary signer(private key) used in [third step](#3-create-a-metamask-smart-account), the Passkey can be used a secure backup method to retain access to your smart account. - -Use the [Viem WebAuthn Account](https://viem.sh/account-abstraction/accounts/webauthn) to configure your Passkey as a MetaMask smart account signer. - -```ts -import { Address } from "ox"; -import { toWebAuthnAccount } from "viem/account-abstraction"; -import { toHex } from "viem"; -import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; - -// Use the deserialize from previous step -const owner = Address.fromPublicKey(publicKey); - -// Use the credential from previous step -const webAuthnAccount = toWebAuthnAccount({ credential }); - -const smartAccount = await toMetaMaskSmartAccount({ - client: publicClient, - implementation: Implementation.Hybrid, - deployParams: [owner, [credential.id], [publicKey.x], [publicKey.y]], - deploySalt: "0x", - signatory: { webAuthnAccount, keyId: toHex(credential.id) }, -}); -``` - -### Resources - -- See [create a MetaMask smart account](../guides/smart-accounts/create-smart-account) to learn more about smart account implementations. -- See [send a gasless transaction](../guides/smart-accounts/send-gasless-transaction) to learn how to sponsor gas fees when adding a Passkey as a backup signer. \ No newline at end of file diff --git a/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md new file mode 100644 index 00000000000..548df2adb77 --- /dev/null +++ b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md @@ -0,0 +1,168 @@ +--- +description: Learn how to use Passkey as a back up signer with MetaMask smart account +sidebar_position: 1 +--- + +# Use a passkey as a backup signer + +This tutorial walks you through using a passkey as a backup signer for your [MetaMask smart account](../concepts/smart-accounts). + +## About passkeys + +An externally owned account (EOA) uses the secp256k1 elliptic curve to generate key pairs and signatures. +In contrast, a passkey (WebAuthn credential) uses the secp256r1 (P-256) elliptic curve to generate key pairs and signatures. +Passkeys eliminate the need for traditional seed phrases that are difficult to remember, enabling a more seamless and secure way for users to access their web3 wallets. + +MetaMask Smart Accounts offer a [Hybrid implementation](../concepts/smart-accounts.md#hybrid-smart-account), which supports signature validation for both secp256k1 and secp256r1 curves. +This allows you to add a passkey as a backup signer for your smart account. + + +You can add passkeys during smart account creation or after the account has been deployed. +This tutorial walks you through adding a passkey signer to an already deployed smart account. + +## Prerequisites + +- [Install and set up the Delegation Toolkit.](../get-started/install) +- [Install Ox SDK.](https://oxlib.sh/#installation) +- [Configure the Delegation Toolkit.](../guides/configure) +- [Create and deploy a Hybrid smart account.](../guides/smart-accounts/create-smart-account) + +## Steps + +### 1. Create a Public Client + +Create a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. +You will configure a smart account and Bundler Client with the Public Client, which you can use to query the signer's account state and interact with the blockchain network. + +```typescript +import { createPublicClient, http } from "viem"; +import { sepolia as chain } from "viem/chains"; + +const publicClient = createPublicClient({ + chain, + transport: http(), +}); +``` + +### 2. Create a Bundler Client + +Create a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. +You can use the bundler service to estimate gas for user operations and submit transactions to the network. + +```typescript +import { createBundlerClient } from "viem/account-abstraction"; + +const bundlerClient = createBundlerClient({ + client: publicClient, + transport: http("https://your-bundler-rpc.com"), +}); +``` + +### 3. Create a Hybrid smart account + +Create a [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account) with a signatory from a private key. +The Hybrid implementation supports adding additional passkey signers. + +```typescript +import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; +import { privateKeyToAccount } from "viem/accounts"; + +const account = privateKeyToAccount("0x..."); + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [account.address, [], [], []], + deploySalt: "0x", + signatory: { account }, +}); +``` + +### 4. Create a passkey + +To add a passkey signer, use Viem's [`createWebAuthnCredential`](https://viem.sh/account-abstraction/accounts/webauthn/createWebAuthnCredential) function to securely register the passkey (WebAuthn credential). + +```ts +import { + createWebAuthnCredential, +} from "viem/account-abstraction"; + +const credential = await createWebAuthnCredential({ + name: "MetaMask Smart Account", +}); +``` + +### 5. Add the passkey as a backup signer + +Use the `HybridDeleGator` contract namespace from the Delegation Toolkit to encode the calldata required to add the passkey signer. +The encoding function needs the X and Y coordinates of the P-256 public key. +Since WebAuthn credentials store a compressed public key, you need to use the [Ox SDK](https://oxlib.sh/#installation) to deserialize it, and extract the X and Y coordinates. + +Once the calldata is prepared, send it to your smart account address to register the passkey as a backup signer. + +```ts +import { PublicKey } from "ox"; +import { HybridDeleGator, P256Owner } from "@metamask/delegation-toolkit/contracts"; + +// Deserialize the compressed public key. +const publicKey = PublicKey.fromHex(credential.publicKey); + +const p256Owner: P256Owner = { + keyId: credential.id, + x: publicKey.x, + y: publicKey.y, +} + +const data = HybridDeleGator.encode.addKey({ + p256Owner, +}); + +// Appropriate fee per gas must be determined for the specific bundler being used. +const maxFeePerGas = 1n; +const maxPriorityFeePerGas = 1n; + +const userOperationHash = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + { + to: smartAccount.address, + data, + }, + ], + maxFeePerGas, + maxPriorityFeePerGas, +}); +``` + +### 6. (Optional) Use the passkey signer + +You can now use the passkey signer to access your smart account and sign transactions. +If you ever lose your primary signer (private key) used in [Step 3](#3-create-a-hybrid-smart-account), you can use the passkey as a secure backup method to retain access to your smart account. + +Use the [Viem WebAuthn Account](https://viem.sh/account-abstraction/accounts/webauthn) to configure your passkey as a MetaMask smart account signer. + +```ts +import { Address } from "ox"; +import { toWebAuthnAccount } from "viem/account-abstraction"; +import { toHex } from "viem"; +import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; + +// Use the deserialized public key from the previous step. +const owner = Address.fromPublicKey(publicKey); + +// Use the credential from the previous step. +const webAuthnAccount = toWebAuthnAccount({ credential }); + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [owner, [credential.id], [publicKey.x], [publicKey.y]], + deploySalt: "0x", + signatory: { webAuthnAccount, keyId: toHex(credential.id) }, +}); +``` + +## Next steps + +- See [Create a MetaMask smart account](../guides/smart-accounts/create-smart-account.md) to learn more about smart account implementations. +- See [Send a gasless transaction](../guides/smart-accounts/send-gasless-transaction.md) to learn how to sponsor gas fees when adding a passkey as a backup signer. From 0f0689a31de540f19f212426fd2fc94cbf97d1cd Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Tue, 26 Aug 2025 12:02:01 -0700 Subject: [PATCH 3/4] update description --- delegation-toolkit/tutorials/use-passkey-as-backup-signer.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md index 548df2adb77..dca145fdb3b 100644 --- a/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md +++ b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md @@ -1,5 +1,5 @@ --- -description: Learn how to use Passkey as a back up signer with MetaMask smart account +description: Follow this tutorial to use a passkey as a backup signer with a Hybrid MetaMask smart account. sidebar_position: 1 --- @@ -16,7 +16,6 @@ Passkeys eliminate the need for traditional seed phrases that are difficult to r MetaMask Smart Accounts offer a [Hybrid implementation](../concepts/smart-accounts.md#hybrid-smart-account), which supports signature validation for both secp256k1 and secp256r1 curves. This allows you to add a passkey as a backup signer for your smart account. - You can add passkeys during smart account creation or after the account has been deployed. This tutorial walks you through adding a passkey signer to an already deployed smart account. From d048a5e9ee3a8e1ae785e63050ed58ef68a52ef5 Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Wed, 27 Aug 2025 13:00:24 -0700 Subject: [PATCH 4/4] fixes --- delegation-toolkit/concepts/smart-accounts.md | 6 +++--- .../tutorials/use-passkey-as-backup-signer.md | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/delegation-toolkit/concepts/smart-accounts.md b/delegation-toolkit/concepts/smart-accounts.md index ec7841303c5..ab153d1fa57 100644 --- a/delegation-toolkit/concepts/smart-accounts.md +++ b/delegation-toolkit/concepts/smart-accounts.md @@ -37,7 +37,7 @@ ERC-4337 introduces the following concepts: ## Smart account implementation types -The MetaMask Delegation Toolkit supports three types of MetaMask Smart Accounts, each offering different signature schemes for verifying access to the smart account. +The MetaMask Delegation Toolkit supports three types of MetaMask Smart Accounts, each offering unique features and use cases. See [Create a smart account](../guides/smart-accounts/create-smart-account.md) to learn how to use these different account types. @@ -50,8 +50,8 @@ This type is referenced in the toolkit as `Implementation.Hybrid`. ### Multisig smart account -The Multisig smart account is an implementation that supports multiple signers with a configurable threshold for valid signatures, allowing for enhanced security and flexibility in account management. -The signatory, which signs on behalf of the smart account, must have at least as many signers as the configured threshold. +The Multisig smart account is an implementation that supports multiple signers with a configurable threshold, allowing for enhanced security and flexibility in account management. +A valid signature requires signatures from at least the number of signers specified by the threshold. This type is referenced in the toolkit as `Implementation.Multisig`. diff --git a/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md index dca145fdb3b..4a92bf0374e 100644 --- a/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md +++ b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md @@ -21,10 +21,10 @@ This tutorial walks you through adding a passkey signer to an already deployed s ## Prerequisites -- [Install and set up the Delegation Toolkit.](../get-started/install) -- [Install Ox SDK.](https://oxlib.sh/#installation) -- [Configure the Delegation Toolkit.](../guides/configure) -- [Create and deploy a Hybrid smart account.](../guides/smart-accounts/create-smart-account) +- [Install and set up the Delegation Toolkit](../get-started/install) in your project. +- [Install Ox SDK](https://oxlib.sh/#installation). +- [Configure the Delegation Toolkit](../guides/configure). +- [Create and deploy a Hybrid smart account,](../guides/smart-accounts/create-smart-account) with a signatory from a private key. ## Steps @@ -59,7 +59,7 @@ const bundlerClient = createBundlerClient({ ### 3. Create a Hybrid smart account -Create a [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account) with a signatory from a private key. +Configure the same [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account) that you created and deployed as a [prerequisite](#prerequisites). The Hybrid implementation supports adding additional passkey signers. ```typescript