> For the complete documentation index, see [llms.txt](/llms.txt).

# Use a passkey as a backup signer

`delegation toolkit` `smart accounts kit` `passkey` `backup signer` `smart account`MetaMask Developer Relations | Aug 27, 2025

Open in Claude

This tutorial walks you through using a passkey as a backup signer for your [MetaMask smart account](/smart-accounts-kit/concepts/smart-accounts/).

## About passkeys[​](#about-passkeys "Direct link to 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](/smart-accounts-kit/concepts/smart-accounts/#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[​](#prerequisites "Direct link to Prerequisites")

- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
- Install [Yarn](https://yarnpkg.com/), [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.

## Steps[​](#steps "Direct link to Steps")

### 1\. Install dependencies[​](#1-install-dependencies "Direct link to 1. Install dependencies")

Install the [Smart Accounts Kit](https://www.npmjs.com/package/@metamask/smart-accounts-kit) and [Ox SDK](https://oxlib.sh/#installation) in your project:

- npm
- Yarn
- pnpm
- Bun

```
npm install @metamask/smart-accounts-kit ox

```

```
yarn add @metamask/smart-accounts-kit ox

```

```
pnpm add @metamask/smart-accounts-kit ox

```

```
bun add @metamask/smart-accounts-kit ox

```

### 2\. Set up a Public Client[​](#2-set-up-a-public-client "Direct link to 2. Set up a Public Client")

Set up a Public Client using Viem's [createPublicClient](https://viem.sh/docs/clients/public) function. You will configure a [smart account](/smart-accounts-kit/development/reference/glossary#metamask-smart-account)**MetaMask smart account** A smart contract account created using the Smart Accounts Kit that supports programmable behavior, flexible signing options, and ERC-7710 delegations. and Bundler Client with the Public Client, which you can use to query the [signer](/smart-accounts-kit/development/reference/glossary#signer)**Signer** An account that can sign transactions for a smart account.'s account state and interact with the blockchain network.

```
import { createPublicClient, http } from 'viem'
import { sepolia as chain } from 'viem/chains'

const publicClient = createPublicClient({
  chain,
  transport: http(),
})

```

### 3\. Set up a Bundler Client[​](#3-set-up-a-bundler-client "Direct link to 3. Set up a Bundler Client")

Set up a Bundler Client using Viem's [createBundlerClient](https://viem.sh/account-abstraction/clients/bundler) function. You can use the [bundler](/smart-accounts-kit/development/reference/glossary#bundler)**Bundler** An ERC-4337 component that manages the alternate mempool: it collects user operations from smart accounts, packages them, and submits them to the network. service to estimate gas for user operations and submit transactions to the network.

```
import { createBundlerClient } from 'viem/account-abstraction'

const bundlerClient = createBundlerClient({
  client: publicClient,
  transport: http('https://your-bundler-rpc.com'),
})

```

### 4\. Create and deploy a smart account[​](#4-create-and-deploy-a-smart-account "Direct link to 4. Create and deploy a smart account")

Create and deploy a [Hybrid smart account](/smart-accounts-kit/guides/smart-accounts/create-smart-account/), with a private key signer. The Hybrid implementation supports adding additional passkey signers.

```
import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit'
import { privateKeyToAccount } from 'viem/accounts'
import { zeroAddress } from 'viem'

const account = privateKeyToAccount('0x...')

// Create the smart account.
const smartAccount = await toMetaMaskSmartAccount({
  client: publicClient,
  implementation: Implementation.Hybrid,
  deployParams: [account.address, [], [], []],
  deploySalt: '0x',
  signer: { account },
})

// Deploy the smart account by sending a user operation.
// Appropriate fee per gas must be determined for the bundler being used.
const maxFeePerGas = 1n
const maxPriorityFeePerGas = 1n

const userOperationHash = await bundlerClient.sendUserOperation({
  account: smartAccount,
  calls: [{ to: zeroAddress }],
  maxFeePerGas,
  maxPriorityFeePerGas,
})

```

### 5\. Create a passkey[​](#5-create-a-passkey "Direct link to 5. 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).

```
import { createWebAuthnCredential } from 'viem/account-abstraction'

const credential = await createWebAuthnCredential({
  name: 'MetaMask Smart Account',
})

```

### 6\. Add the passkey as a backup signer[​](#6-add-the-passkey-as-a-backup-signer "Direct link to 6. Add the passkey as a backup signer")

Use the `HybridDeleGator` contract namespace from the Smart Accounts Kit 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.

```
import { PublicKey } from 'ox'
import { toHex } from 'viem'
import { HybridDeleGator, P256Owner } from '@metamask/smart-accounts-kit/contracts'

// Deserialize the compressed public key.
const publicKey = PublicKey.fromHex(credential.publicKey)

const p256Owner: P256Owner = {
  keyId: toHex(credential.id),
  x: publicKey.x,
  y: publicKey.y,
}

const data = HybridDeleGator.encode.addKey({
  p256Owner,
})

// Appropriate fee per gas must be determined for the bundler being used.
const maxFeePerGas = 1n
const maxPriorityFeePerGas = 1n

const userOperationHash = await bundlerClient.sendUserOperation({
  account: smartAccount,
  calls: [
    {
      to: smartAccount.address,
      data,
    },
  ],
  maxFeePerGas,
  maxPriorityFeePerGas,
})

```

### 7\. (Optional) Use the passkey signer[​](#7-optional-use-the-passkey-signer "Direct link to 7. (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 4](#4-create-and-deploy-a-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.

```
import { Address } from 'ox'
import { toWebAuthnAccount } from 'viem/account-abstraction'
import { toHex } from 'viem'
import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit'

// 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, [toHex(credential.id)], [publicKey.x], [publicKey.y]],
  deploySalt: '0x',
  signer: { webAuthnAccount, keyId: toHex(credential.id) },
})

```

## Next steps[​](#next-steps "Direct link to Next steps")

- Learn more about [smart account implementations](/smart-accounts-kit/guides/smart-accounts/create-smart-account/).
- To sponsor gas fees when adding a passkey as a backup signer, see how to [send a gasless transaction](/smart-accounts-kit/guides/smart-accounts/send-gasless-transaction/).

[Share](https://www.facebook.com/sharer/sharer.php?https://metamask.io/tutorials/use-passkey-as-backup-signer)[Tweet](http://twitter.com/share?text=Checkout Use a passkey as a backup signer published by @MetaMask&url=https://metamask.io/tutorials/use-passkey-as-backup-signer)Copy

On this page
- [About passkeys](#about-passkeys)
- [Prerequisites](#prerequisites)
- [Steps](#steps)
  - [1\. Install dependencies](#1-install-dependencies)
  - [2\. Set up a Public Client](#2-set-up-a-public-client)
  - [3\. Set up a Bundler Client](#3-set-up-a-bundler-client)
  - [4\. Create and deploy a smart account](#4-create-and-deploy-a-smart-account)
  - [5\. Create a passkey](#5-create-a-passkey)
  - [6\. Add the passkey as a backup signer](#6-add-the-passkey-as-a-backup-signer)
  - [7\. (Optional) Use the passkey signer](#7-optional-use-the-passkey-signer)
- [Next steps](#next-steps)