|
| 1 | +--- |
| 2 | +description: Learn how to use Passkey with MetaMask Smart Accounts. |
| 3 | +sidebar_label: Passkey |
| 4 | +keywords: [passkey, smart account, signer, metamask smart account] |
| 5 | +--- |
| 6 | + |
| 7 | +# Use a passkey with MetaMask Smart Accounts |
| 8 | + |
| 9 | +Passkeys eliminate the need for traditional seed phrases that are difficult to remember, enabling a more seamless |
| 10 | +and secure way for users to access their Externally Owned Accounts (EOAs). Compared to traditional EOAs which use |
| 11 | +secp256k1 elliptic curve to generate key pairs and signatures, a passkey-based EOA uses the |
| 12 | +secp256r1 (P-256) elliptic curve. |
| 13 | + |
| 14 | +MetaMask Smart Accounts is signer agnostic and natively supports passkeys (P-256 elliptic curve signatures), so you can use a passkey as the signer. |
| 15 | + |
| 16 | +## Prerequisites |
| 17 | + |
| 18 | +- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later |
| 19 | +- Install [Yarn](https://yarnpkg.com/), |
| 20 | + [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager |
| 21 | + |
| 22 | +## Steps |
| 23 | + |
| 24 | +### 1. Install dependencies |
| 25 | + |
| 26 | +Install the [Smart Accounts Kit](https://www.npmjs.com/package/@metamask/smart-accounts-kit) and other dependencies in your project: |
| 27 | + |
| 28 | +```bash npm2yarn |
| 29 | +npm install @metamask/smart-accounts-kit ox |
| 30 | +``` |
| 31 | + |
| 32 | +### 2. Create a passkey |
| 33 | + |
| 34 | +To create a passkey signer, use Viem's [`createWebAuthnCredential`](https://viem.sh/account-abstraction/accounts/webauthn/createWebAuthnCredential) function to securely register the passkey (WebAuthn credential). |
| 35 | + |
| 36 | +```ts |
| 37 | +import { createWebAuthnCredential } from 'viem/account-abstraction' |
| 38 | + |
| 39 | +const credential = await createWebAuthnCredential({ |
| 40 | + name: 'MetaMask Smart Account', |
| 41 | +}) |
| 42 | +``` |
| 43 | + |
| 44 | +### 3. Create a smart account |
| 45 | + |
| 46 | +Once the passkey is created, use the [Viem WebAuthn Account](https://viem.sh/account-abstraction/accounts/webauthn) to configure your passkey as a MetaMask smart account signer. |
| 47 | + |
| 48 | +The `deployParams` parameter needs the X and Y coordinates of the P-256 public key. Since WebAuthn credentials store |
| 49 | +a compressed public key, you need to deserialize it, and extract the X and Y coordinates. |
| 50 | + |
| 51 | +<Tabs> |
| 52 | +<TabItem value="example.ts"> |
| 53 | + |
| 54 | +```typescript |
| 55 | +import { publicClient } from "./config.ts" |
| 56 | +import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit"; |
| 57 | +import { toWebAuthnAccount } from "viem/account-abstraction"; |
| 58 | +import { Address, PublicKey } from "ox"; |
| 59 | +import { toHex } from "viem"; |
| 60 | + |
| 61 | +const webAuthnAccount = toWebAuthnAccount({ credential }); |
| 62 | + |
| 63 | +// Deserialize compressed public key |
| 64 | +const publicKey = PublicKey.fromHex(credential.publicKey); |
| 65 | + |
| 66 | +// Convert public key to address |
| 67 | +const owner = Address.fromPublicKey(publicKey); |
| 68 | + |
| 69 | +const smartAccount = await toMetaMaskSmartAccount({ |
| 70 | + client: publicClient, |
| 71 | + implementation: Implementation.Hybrid, |
| 72 | + deployParams: [owner, [toHex(credential.id)], [publicKey.x], [publicKey.y]], |
| 73 | + deploySalt: "0x", |
| 74 | + signer: { webAuthnAccount, keyId: toHex(credential.id) }, |
| 75 | +}); |
| 76 | +``` |
| 77 | + |
| 78 | +</TabItem> |
| 79 | + |
| 80 | +<TabItem value="config.ts"> |
| 81 | + |
| 82 | +```typescript |
| 83 | +import { http, createPublicClient } from "viem"; |
| 84 | +import { sepolia as chain } from "viem/chains"; |
| 85 | + |
| 86 | +const transport = http(); |
| 87 | +export const publicClient = createPublicClient({ |
| 88 | + transport, |
| 89 | + chain, |
| 90 | +}); |
| 91 | +``` |
| 92 | + |
| 93 | +</TabItem> |
| 94 | +</Tabs> |
| 95 | + |
| 96 | +## Next steps |
| 97 | + |
| 98 | +- See how to [send a user operation](../send-user-operation.md). |
| 99 | +- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md). |
0 commit comments