chore(sdk): Update passkeys documentation

pages/sdk/protocol-kit/reference/safe.mdx

@@ -1081,3 +1081,32 @@ const signedMessage = await protocolKit.signMessage(signedMessage, SigningMethod
 const signedMessage = await protocolKit.signMessage(signedMessage, SigningMethod.ETH_SIGN)
 const signedMessage = await protocolKit.signMessage(signedMessage, SigningMethod.SAFE_SIGNATURE, parentSafeAddress).
 ```
+
+## Passkeys
+
+### `createPasskeySigner`
+
+Creates a new passkey signer using a [WebAuthn credential](https://developer.mozilla.org/en-US/docs/Web/API/Credential).
+
+```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
+})
+```
+
+Return an object of type `PasskeyArgType` 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
+
+You can add these optional properties to the resulting object before instantiating the Protocol Kit:
+- `customVerifierAddress`: The custom verifier address. This is optional and only needed if the Safe is using a custom verifier.
+- `getFn`: The function used to obtain the credential. This is optional and only necessary if you are creating the credential in environments where the WebAuthN API does not exist, such as React Native.
+

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 an `PasskeyArgType` object containing the `rawId` and the `coordinates` information.
 
   {/* <!-- vale off --> */}
 
@@ -98,44 +100,68 @@ 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` props that the Safe\{Core\} SDK require to instantiate the kits.
 
+  [How to initialize the Protocol Kit](https://docs.safe.global/reference-sdk-protocol-kit/initialization/init)
+
+  The `provider` (eip1193 compatible or rpc) can be obtained by using `viem` in several ways:
   {/* <!-- vale off --> */}
 
-  <Tabs items={['viem']}>
+  <Tabs items={['eip1193', 'rpcUrl']}>
     <Tabs.Tab>
-      You can instantiate the provider using `viem` and the following imports:
-
-      ```typescript
-      import { createWalletClient, http } from 'viem'
-      import { sepolia } from 'viem/chains'
-      ```
+    ```typescript
+    import { createWalletClient, http } from 'viem'
+    import { sepolia } from 'viem/chains'
 
-      ```typescript
-      const provider = createWalletClient({
-        chain: sepolia,
-        transport: http('https://rpc.ankr.com/eth_sepolia')
-      })
+    const walletClient = createWalletClient({
+      chain: sepolia,
+      transport: http('https://rpc.ankr.com/eth_sepolia')
+    })
 
-      const signer = passkey
+    const provider = { request: walletClient.request }
+    const signer = passkeySigner
       ```
+          </Tabs.Tab>
+    <Tabs.Tab>
+    ```typescript
+    import { sepolia } from 'viem/chains'
+
+    const provider = sepolia.rpcUrls.default.http[0]
+    const signer = passkeySigner
+    ```
     </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.
 
-</Steps>
+  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