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
_10npm install @safe-global/protocol-kit
Steps
Imports
Here are the necessary imports for this guide.
_10import 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.
_25const RP_NAME = 'Safe Smart Account'_25const USER_DISPLAY_NAME = 'User display name'_25const USER_NAME = 'User name'_25_25const passkeyCredential = await navigator.credentials.create({_25 publicKey: {_25 pubKeyCredParams: [_25 {_25 alg: -7,_25 type: 'public-key'_25 }_25 ],_25 challenge: crypto.getRandomValues(new Uint8Array(32)),_25 rp: {_25 name: RP_NAME_25 },_25 user: {_25 displayName: USER_DISPLAY_NAME,_25 id: crypto.getRandomValues(new Uint8Array(32)),_25 name: USER_NAME_25 },_25 timeout: 60_000,_25 attestation: 'none'_25 }_25})
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.
_10if (!passkeyCredential) {_10 throw Error('Passkey creation failed: No credential was returned.')_10}_10_10const 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:
_10import { createWalletClient, http } from 'viem'_10import { sepolia } from 'viem/chains_10_10const provider = createWalletClient({_10 chain: sepolia,_10 transport: http('https://rpc.ankr.com/eth_sepolia')_10})_10const 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:
_10const protocolKit = await Safe.init({ provider, signer, safeAddress })_10_10const transaction = { to: '0x1234', value: '0x0', data: '0x' }_10const safeTransaction = await protocolKit.createTransaction({ transactions: [transaction] })_10const 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.