chore(sdk): Update passkeys documentation (#649)

pages/reference-sdk-protocol-kit/_meta.json

@@ -16,5 +16,6 @@
   "messages": "Messages",
   "safe-modules": "Safe Modules",
   "safe-guards": "Safe Guards",
-  "fallback-handler": "Fallback Handler"
+  "fallback-handler": "Fallback Handler",
+  "passkeys": "Passkeys"
 }

pages/reference-sdk-protocol-kit/passkeys/_meta.json

@@ -0,0 +1,3 @@
+{
+  "createpasskeysigner": "createPasskeySigner"
+}

pages/reference-sdk-protocol-kit/passkeys/createpasskeysigner.mdx

@@ -0,0 +1,37 @@
+import { Tabs } from 'nextra/components'
+
+# `createPasskeySigner`
+
+Creates a new passkey signer using a [WebAuthn credential](https://developer.mozilla.org/en-US/docs/Web/API/Credential).
+
+## Usage
+
+```typescript
+const rpcUrl = "https://..."
+const credential = window.navigator.credentials.create({ ... })
+
+const passkeySigner = await Safe.createPasskeySigner(credential)
+
+const protocolKit = await Safe.init({
+  provider: rpcURL,
+  signer: passkeySigner,
+  safeAddress
+})
+```
+
+## Parameters
+
+### `credential`
+
+- **Type**: `Credential`
+
+The WebAuthn credential to use for signing.
+
+### Returns
+
+`Promise<Pick<PasskeyArgType, 'rawId' | 'coordinates'>>`
+
+An object containing the passkey signer that should be stored securely containing:
+
+- `rawId`: The `rawId` of the credential.
+- `coordinates`: The coordinates of the credential. The coordinates are used to sign using Safe smart contracts

pages/sdk/signers/passkeys.mdx

@@ -4,7 +4,9 @@ import { Callout, Steps, Tabs } from 'nextra/components'
 
 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.
+<Callout type="warning" emoji="⚠️">
+  Please always use a combination of passkeys and other authentication methods to ensure the security of your users' assets.
+</Callout>
 
 ## Prerequisites
 
@@ -46,7 +48,7 @@ In this guide, you will learn how to create a Passkey signer that can be added a
   {/* <!-- vale off --> */}
 
   ```typescript
-  import { extractPasskeyData } from '@safe-global/protocol-kit'
+  import Safe from '@safe-global/protocol-kit'
   ```
 
   {/* <!-- vale on --> */}
@@ -55,7 +57,7 @@ In this guide, you will learn how to create a Passkey signer that can be added a
 
   ### Create a passkey
 
-  Firstly, you need to generate a passkey credential using the WebAuthn API in a supporting browser environment.
+  Firstly, you need to generate a passkey credential using the [WebAuthn API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API) in a supporting browser environment.
 
   {/* <!-- vale off --> */}
 
@@ -89,7 +91,7 @@ In this guide, you will learn how to create a Passkey signer that can be added a
 
   {/* <!-- vale on --> */}
 
-  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.
+  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.
 
   {/* <!-- vale off --> */}
 
@@ -98,16 +100,18 @@ In this guide, you will learn how to create a Passkey signer that can be added a
     throw Error('Passkey creation failed: No credential was returned.')
   }
 
-  const passkey = await extractPasskeyData(passkeyCredential)
+  const passkeySigner = await Safe.createPasskeySigner(passkeyCredential)
   ```
 
   {/* <!-- vale on --> */}
 
-  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.
+  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 can get the `provider` and `signer`, which is the externally-owned account of the user that was derived from its credentials.
+  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](../../reference-sdk-protocol-kit/initialization/init.mdx)
 
   {/* <!-- vale off --> */}
 
@@ -117,24 +121,37 @@ In this guide, you will learn how to create a Passkey signer that can be added a
 
       ```typescript
       import { createWalletClient, http } from 'viem'
-      import { sepolia } from 'viem/chains'
-      ```
-
-      ```typescript
+      import { sepolia } from 'viem/chains
+
       const provider = createWalletClient({
         chain: sepolia,
         transport: http('https://rpc.ankr.com/eth_sepolia')
       })
-
       const signer = passkey
       ```
     </Tabs.Tab>
   </Tabs>
 
   {/* <!-- vale on --> */}
 
+  ### 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:
+
+  {/* <!-- vale off --> */}
+
+  ```typescript
+  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)
+  ```
+
+  {/* <!-- vale on --> */}
+
 </Steps>
 
 ## Recap and further reading