diff --git a/pages/reference-sdk-protocol-kit/_meta.json b/pages/reference-sdk-protocol-kit/_meta.json index 9f06d949..7771e392 100644 --- a/pages/reference-sdk-protocol-kit/_meta.json +++ b/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" } diff --git a/pages/reference-sdk-protocol-kit/passkeys/_meta.json b/pages/reference-sdk-protocol-kit/passkeys/_meta.json new file mode 100644 index 00000000..991b2dbd --- /dev/null +++ b/pages/reference-sdk-protocol-kit/passkeys/_meta.json @@ -0,0 +1,3 @@ +{ + "createpasskeysigner": "createPasskeySigner" +} diff --git a/pages/reference-sdk-protocol-kit/passkeys/createpasskeysigner.mdx b/pages/reference-sdk-protocol-kit/passkeys/createpasskeysigner.mdx new file mode 100644 index 00000000..b7ed19e7 --- /dev/null +++ b/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>` + +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 diff --git a/pages/sdk/signers/passkeys.mdx b/pages/sdk/signers/passkeys.mdx index ca5be6e6..786514a7 100644 --- a/pages/sdk/signers/passkeys.mdx +++ b/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. + + Please always use a combination of passkeys and other authentication methods to ensure the security of your users' assets. + ## Prerequisites @@ -46,7 +48,7 @@ In this guide, you will learn how to create a Passkey signer that can be added a {/* */} ```typescript - import { extractPasskeyData } from '@safe-global/protocol-kit' + import Safe from '@safe-global/protocol-kit' ``` {/* */} @@ -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. {/* */} @@ -89,7 +91,7 @@ In this guide, you will learn how to create a Passkey signer that can be added a {/* */} - 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. {/* */} @@ -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) ``` {/* */} - 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) {/* */} @@ -117,15 +121,12 @@ 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 ``` @@ -133,8 +134,24 @@ In this guide, you will learn how to create a Passkey signer that can be added a {/* */} + ### 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: + + {/* */} + + ```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) + ``` + + {/* */} + ## Recap and further reading