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.
Note: 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 { extractPasskeyData } 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 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 a new object with the PasskeyArgType type that will contain the rawId and the coordinates information.
_10if (!passkeyCredential) {_10 throw Error('Passkey creation failed: No credential was returned.')_10}_10_10const passkey = await extractPasskeyData(passkeyCredential)
At this point, it's critical to securely store the information in the passkey 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 can get the provider and signer, which is the externally-owned account of the user that was derived from its credentials.
You can instantiate the provider using viem and the following imports:
_10import { createWalletClient, http } from 'viem'_10import { sepolia } from 'viem/chains'
_10const provider = createWalletClient({_10 chain: sepolia,_10 transport: http('https://rpc.ankr.com/eth_sepolia')_10})_10_10const signer = passkey
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.
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.