Skip to content

Latest commit

 

History

History
161 lines (113 loc) · 4.82 KB

passkeys.mdx

File metadata and controls

161 lines (113 loc) · 4.82 KB

import { Callout, Steps, Tabs } from 'nextra/components'

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

Install dependencies

{/* */}

<Tabs items={['npm', 'yarn', 'pnpm']}> <Tabs.Tab> bash npm install @safe-global/protocol-kit </Tabs.Tab> <Tabs.Tab> bash yarn add @safe-global/protocol-kit </Tabs.Tab> <Tabs.Tab> bash pnpm add @safe-global/protocol-kit </Tabs.Tab>

{/* */}

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 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

{/* */}

<Tabs items={['viem']}> <Tabs.Tab> You can instantiate the provider using viem and the following imports:

  ```typescript
  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
  ```
</Tabs.Tab>

{/* */}

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.