Passkeys Signer

In this guide, you will learn how to create a Passkey signer that can be added as a Safe owner and used to initialize any of the kits from the Safe{Core} SDK.

⚠️

Please always use a combination of passkeys and other authentication methods to ensure the security of your users' assets.

Prerequisites

Node.js and npm (opens in a new tab).
Passkeys feature is available only in secure contexts (opens in a new tab) (HTTPS), in some or all supporting browsers (opens in a new tab).

Install dependencies

npm install @safe-global/protocol-kit

Steps

Imports

Here are the necessary imports for this guide.

import Safe from '@safe-global/protocol-kit'

In addition, you will need to import a web3 library of your choice to use in the "Get the provider and signer" section. In this guide, we are using viem.

Create a passkey

Firstly, you need to generate a passkey credential using the WebAuthn API (opens in a new tab) in a supporting browser environment.

const RP_NAME = 'Safe Smart Account'
const USER_DISPLAY_NAME = 'User display name'
const USER_NAME = 'User name'

const passkeyCredential = await navigator.credentials.create({
  publicKey: {
    pubKeyCredParams: [
      {
        alg: -7,
        type: 'public-key'
      }
    ],
    challenge: crypto.getRandomValues(new Uint8Array(32)),
    rp: {
      name: RP_NAME
    },
    user: {
      displayName: USER_DISPLAY_NAME,
      id: crypto.getRandomValues(new Uint8Array(32)),
      name: USER_NAME
    },
    timeout: 60_000,
    attestation: 'none'
  }
})

After generating the passkeyCredential object, you need to create the signer. This signer will be a PasskeyArgType object containing the rawId and the coordinates information.

if (!passkeyCredential) {
  throw Error('Passkey creation failed: No credential was returned.')
}

const passkeySigner = await Safe.createPasskeySigner(passkeyCredential)

At this point, it's critical to securely store the information in the passkeySigner object in a persistent service. Losing access to this data will result in the user being unable to access their passkey and, therefore, their Safe Smart Account.

Get the provider and signer

Once the passkey is created, you need the provider and signer properties required to instantiate the Safe{Core} SDK kits.

Check how to initialize the Protocol Kit

You can instantiate the provider using viem and the following imports:

import { createWalletClient, http } from 'viem'
import { sepolia } from 'viem/chains

const provider = createWalletClient({
  chain: sepolia,
  transport: http('https://rpc.ankr.com/eth_sepolia')
})
const signer = passkey

Instantiate SDK

With the provider and signer you are ready to instantiate any of the kits from the Safe{Core} SDK and set up or use this signer as a Safe owner.

For example, you can instantiate the protocol-kit as follows and sign a transaction with the passkey signer:

const protocolKit = await Safe.init({ provider, signer, safeAddress })

const transaction = { to: '0x1234', value: '0x0', data: '0x' }
const safeTransaction = await protocolKit.createTransaction({ transactions: [transaction] })
const signedSafeTransaction = await protocolKit.signTransaction(safeTransaction)

Recap and further reading

After following this guide, you are able to create a Safe signer using passkeys and get the provider and signer required to initialize the kits from the Safe{Core} SDK.

Safe Passkeys contracts (opens in a new tab)

Last updated on April 3, 2025

Magic Privy

Was this page helpful?