docs: add docs for using the alchemy signer (alchemyplatform#445)

packages/alchemy/src/signer/client/index.ts

@@ -7,7 +7,6 @@ import { IframeStamper } from "@turnkey/iframe-stamper";
 import { WebauthnStamper } from "@turnkey/webauthn-stamper";
 import { type Hex } from "viem";
 import { z } from "zod";
-import { SessionManagerParamsSchema } from "../session/manager.js";
 import { base64UrlEncode } from "../utils/base64UrlEncode.js";
 import { generateRandomBuffer } from "../utils/generateRandomBuffer.js";
 import type {
@@ -26,7 +25,6 @@ export const AlchemySignerClientParamsSchema = z.object({
     iframeElementId: z.string().default("turnkey-iframe"),
     iframeContainerId: z.string(),
   }),
-  sessionConfig: SessionManagerParamsSchema.optional(),
 });
 
 export type AlchemySignerClientParams = z.input<

site/.vitepress/sidebar/index.ts

@@ -51,6 +51,7 @@ export const sidebar: DefaultTheme.Sidebar = [
     base: "/signers",
     items: [
       { text: "Introduction", link: "/choosing-a-signer" },
+      { text: "Alchemy Signer", link: "/alchemy-signer" },
       {
         text: "Signer guides",
         base: "/signers/guides",

site/.vitepress/sidebar/packages/aa-alchemy.ts

@@ -51,6 +51,54 @@ export const aaAlchemySidebar: DefaultTheme.SidebarItem = {
         },
       ],
     },
+    {
+      text: "Alchemy Signer",
+      base: "/packages/aa-alchemy/signer",
+      collapsed: true,
+      items: [
+        {
+          text: "Overview",
+          link: "/overview",
+        },
+        {
+          text: "authenticate",
+          link: "/authenticate",
+        },
+        {
+          text: "disconnect",
+          link: "/disconnect",
+        },
+        {
+          text: "getAuthDetails",
+          link: "/getAuthDetails",
+        },
+
+        {
+          text: "getAddress",
+          link: "/getAddress",
+        },
+        {
+          text: "signMessage",
+          link: "/signMessage",
+        },
+        {
+          text: "signTypedData",
+          link: "/signTypedData",
+        },
+        {
+          text: "getUser",
+          link: "/getUser",
+        },
+        {
+          text: "addPasskey",
+          link: "/addPasskey",
+        },
+        {
+          text: "exportWallet",
+          link: "/exportWallet",
+        },
+      ],
+    },
     {
       text: "Utils",
       collapsed: true,

site/packages/aa-alchemy/signer/addPasskey.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: Alchemy Signer • addPasskey
+  - - meta
+    - name: description
+      content: Learn how to use the AlchemySigner.addPasskey method
+  - - meta
+    - property: og:description
+      content: Learn how to use the AlchemySigner.addPasskey method
+  - - meta
+    - name: twitter:title
+      content: Alchemy Signer • addPasskey
+  - - meta
+    - name: twitter:description
+      content: Learn how to use the AlchemySigner.addPasskey method
+---
+
+# addPasskey
+
+The `addPasskey` method is used to add a passkey as an auth method to an already logged in user.
+
+::: warning
+This method throws if there is no authenticated user.
+:::
+
+## Usage
+
+::: code-group
+
+```ts
+import { signer } from "./signer";
+
+await signer.addPasskey();
+```
+
+<<< @/snippets/signers/alchemy/signer.ts
+
+:::
+
+## Returns
+
+`Promise<string[]>` -- on success returns an array of credential ids
+
+## Parameters
+
+`params?: CredentialCreationOptions` -- overrides for the WebAuthn credential creation options. For more info on the `CredentialCreationOptions` interface, see [here](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.credentialcreationoptions.html).

site/packages/aa-alchemy/signer/authenticate.md

@@ -0,0 +1,71 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: Alchemy Signer • authenticate
+  - - meta
+    - name: description
+      content: Learn how to use the AlchemySigner.authenticate method
+  - - meta
+    - property: og:description
+      content: Learn how to use the AlchemySigner.authenticate method
+  - - meta
+    - name: twitter:title
+      content: Alchemy Signer • authenticate
+  - - meta
+    - name: twitter:description
+      content: Learn how to use the AlchemySigner.authenticate method
+---
+
+# authenticate
+
+The `authenticate` method is used to authenticate a user with the Alchemy Signer.
+
+## Usage
+
+::: code-group
+
+```ts
+import { signer } from "./signer";
+
+const bundlePromise = new Promise(async (resolve) => {
+  // up to you define how you collect the OTP from the user
+  const otpFromUser = await getOtpFromUser();
+  resolve(otpFromUser);
+});
+
+const user = await signer.authenticate({
+  type: "email",
+  email: "[email protected]",
+  // the bundle is the OTP that the user will input from their email
+  bundle: bundlePromise,
+});
+```
+
+<<< @/snippets/signers/alchemy/signer.ts
+
+:::
+
+## Returns
+
+`Promise<User>` -- on success returns a `User` object representing the authenticated user.
+
+## Parameters
+
+`AuthParams` -- an object that contains the following properties:
+
+```ts
+export type AuthParams =
+  | { type: "email"; email: string; bundle: Promise<string> }
+  | {
+      type: "passkey";
+      createNew: false;
+    }
+  | {
+      type: "passkey";
+      createNew: true;
+      username: string;
+      creationOpts?: CredentialCreationOptionOverrides;
+    };
+```

site/packages/aa-alchemy/signer/disconnect.md

@@ -0,0 +1,37 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: Alchemy Signer • disconnect
+  - - meta
+    - name: description
+      content: Learn how to use the AlchemySigner.disconnect method
+  - - meta
+    - property: og:description
+      content: Learn how to use the AlchemySigner.disconnect method
+  - - meta
+    - name: twitter:title
+      content: Alchemy Signer • disconnect
+  - - meta
+    - name: twitter:description
+      content: Learn how to use the AlchemySigner.disconnect method
+---
+
+# disconnect
+
+The `disconnect` method is used to disconnect a user from the Alchemy Signer and clear the local session.
+
+## Usage
+
+::: code-group
+
+```ts
+import { signer } from "./signer";
+
+await signer.disconnect();
+```
+
+<<< @/snippets/signers/alchemy/signer.ts
+
+:::

site/packages/aa-alchemy/signer/exportWallet.md

@@ -0,0 +1,57 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: Alchemy Signer • exportWallet
+  - - meta
+    - name: description
+      content: Learn how to use the AlchemySigner.exportWallet method
+  - - meta
+    - property: og:description
+      content: Learn how to use the AlchemySigner.exportWallet method
+  - - meta
+    - name: twitter:title
+      content: Alchemy Signer • exportWallet
+  - - meta
+    - name: twitter:description
+      content: Learn how to use the AlchemySigner.exportWallet method
+---
+
+# exportWallet
+
+The `exportWallet` method is used to export the user's private key or seed phrase.
+
+If the user is authenticated with an Email, this will return a seed phrase
+If the user is authenticated with a Passkey, this will return a private key
+
+::: warning
+This method throws if there is no authenticated user.
+:::
+
+## Usage
+
+::: code-group
+
+```ts
+import { signer } from "./signer";
+
+await signer.exportWallet({
+  iframeContainerId: "my-export-wallet-container",
+});
+```
+
+<<< @/snippets/signers/alchemy/signer.ts
+
+:::
+
+## Returns
+
+`Promise<boolean>` -- returns a boolean indicating the success of the export
+
+## Parameters
+
+`params: ExportWalletParams`
+
+- `iframeContainerId: string` -- the id of the container to render the export wallet iframe in
+- `iframeElementId?: string` -- the id given to the iframe element that will be injected into the DOM

site/packages/aa-alchemy/signer/getAddress.md

@@ -0,0 +1,45 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: Alchemy Signer • getAddress
+  - - meta
+    - name: description
+      content: Learn how to use the AlchemySigner.getAddress method
+  - - meta
+    - property: og:description
+      content: Learn how to use the AlchemySigner.getAddress method
+  - - meta
+    - name: twitter:title
+      content: Alchemy Signer • getAddress
+  - - meta
+    - name: twitter:description
+      content: Learn how to use the AlchemySigner.getAddress method
+---
+
+# getAddress
+
+Returns the signer's public address.
+
+::: warning
+This method throws if there is no authenticated user.
+:::
+
+## Usage
+
+::: code-group
+
+```ts
+import { signer } from "./signer";
+
+const address = await signer.getAddress();
+```
+
+<<< @/snippets/signers/alchemy/signer.ts
+
+:::
+
+## Returns
+
+`Promise<Address>` -- on success returns the signer's public address.

site/packages/aa-alchemy/signer/getAuthDetails.md

@@ -0,0 +1,45 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: Alchemy Signer • getAuthDetails
+  - - meta
+    - name: description
+      content: Learn how to use the AlchemySigner.getAuthDetails method
+  - - meta
+    - property: og:description
+      content: Learn how to use the AlchemySigner.getAuthDetails method
+  - - meta
+    - name: twitter:title
+      content: Alchemy Signer • getAuthDetails
+  - - meta
+    - name: twitter:description
+      content: Learn how to use the AlchemySigner.getAuthDetails method
+---
+
+# getAuthDetails
+
+The `getAuthDetails` method is used to get the details of the currently authenticated user. This method will also use session storage to get the user's details if they are already authenticated.
+
+::: warning
+This method throws if there is no authenticated user.
+:::
+
+## Usage
+
+::: code-group
+
+```ts
+import { signer } from "./signer";
+
+const user = await signer.getAuthDetails();
+```
+
+<<< @/snippets/signers/alchemy/signer.ts
+
+:::
+
+## Returns
+
+`Promise<User>` -- on success returns a `User` object representing the authenticated user.