diff --git a/docs/documentation/ecosystem-integrations/_category_.json b/docs/documentation/ecosystem-integrations/_category_.json
index a3025ccd..a206419e 100644
--- a/docs/documentation/ecosystem-integrations/_category_.json
+++ b/docs/documentation/ecosystem-integrations/_category_.json
@@ -1,5 +1,5 @@
{
"label": "Ecosystem Integrations",
"position": 6,
- "collapsed": false
+ "collapsed": true
}
diff --git a/docs/documentation/features/_category_.json b/docs/documentation/features/_category_.json
index 0628b99b..47ff4e2a 100644
--- a/docs/documentation/features/_category_.json
+++ b/docs/documentation/features/_category_.json
@@ -1,5 +1,5 @@
{
"label": "Features",
"position": 5,
- "collapsed": false
+ "collapsed": true
}
diff --git a/docs/documentation/getting-started/Quickstart.mdx b/docs/documentation/getting-started/Quickstart.mdx
index 17279184..c823fa79 100644
--- a/docs/documentation/getting-started/Quickstart.mdx
+++ b/docs/documentation/getting-started/Quickstart.mdx
@@ -1,353 +1,128 @@
---
-id: quickstart
+id: index
title: "Quickstart"
sidebar_position: 1
-description: Onboard and sign your first Ethereum transaction
+description: Get started with Turnkey by creating an organization and obtaining your keys.
slug: /getting-started/quickstart
---
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-import Parameter from "@site/src/components/parameter";
+import DocCardList from "@theme/DocCardList";
+
+import { Step, Steps } from "@site/src/components/step";
# Quickstart
-Turnkey is a secure, flexible, and scalable piece of crypto infrastructure that allows for programmatic management of cryptographic keypairs and signing of crypto transactions. The guide below will walk you through Turnkey's onboarding, and using Turnkey's SDK to programmatically create a wallet and sign your first Ethereum transaction. It will also walk you through a common flow for creating a non-custodial wallet on behalf of another user, and having that user sign their first Ethereum transaction using a passkey authenticator.
+Before diving into the code, let's set up your organization and conjure up an API keypair to unlock the full potential of Turnkey!
-### Create your Turnkey Organization
+## Create An Account
-- Visit [app.turnkey.com/dashboard/auth/initial](https://app.turnkey.com/dashboard/auth/initial) and enter your email address
-- Confirm your email by clicking on the link inside of the confirmation email
-- Follow the prompts to add your first authenticator and create your organization
+Navigate to the [Turnkey Dashboard](https://app.turnkey.com/dashboard/auth/initial) to create an account and setup your organization:
-You can find your newly created organization ID in the user dropdown menu at the top right corner of the dashboard.
+
+
+
-
+## Get Your Organization ID
-You'll want to reference this in your code or as an environment variable, as you'll need it to make requests to the Turnkey API.
+Once logged in, open the user dropdown at the top right. Your Organization ID is listed there. Copy it for use in your code or environment variables.
-### Create an API Key
+
+
+
-Turnkey API Keys consist of P-256 public / private keypairs that allow you to make authenticated requests to Turnkey's API. You can create an API Key from your user page of the dashboard. Navigate to your user page by clicking on "User Details" in the user dropdown menu, and then click "Create an API key".
+## Create an API Key
-
+The API keypair is used to authenticate requests to Turnkey. We'll create one now.
+
+
+ Navigate to the User Details page.
-- Select "Generate API keys in-browser" and click continue.
-- Give your API keypair a name and click continue.
-- Save your Public and Private Key locally.
-- Make sure to click "Approve" to sign the API Creation activity with your authenticator device.
-
-A couple of notes on the action you just took:
-
-- Every action on Turnkey returns an `activity`, including creating the API keypair in the previous step. You can read more about the full [Turnkey Activity Model here](/concepts/policies/language#activity-breakdown).
-- The keypair you just created is an authenticator for the root user of your Turnkey organization. **Any code using an API keypair for the parent organization should only ever be used and stored securely server-side, and never exposed to end-users**.
-- You will need both the public and private key to sign requests to the Turnkey API.
-
-### Instantiate Turnkey using the Server SDK
-
-The simplest way to use Turnkey's API is through one of our SDK libraries. This example will make requests to the API using our server-side node.js library. You can see the full list of client libraries supported on our [SDK Reference page.](/sdks/introduction). Additionally, if you're looking for an example to get started, here are some fullstack Next.js apps that use [Ethers](https://github.com/tkhq/demo-ethers-passkeys) and [Viem](https://github.com/tkhq/demo-viem-passkeys), respectively.
-
-#### Installation
-
-
-
-
-```bash
-yarn add @turnkey/sdk-server
-```
-
-
-
-
-```bash
-npm install @turnkey/sdk-server
-```
-
-
-
-
-#### Initialize an `apiClient`
-
-There are multiple ways to authenticate a request to Turnkey's API. The `apiClient` is how you make requests using a public/private keypair (like the one you created above). The `apiClient` needs two additional parameters as well as the private and public key:
-
-1. the `apiBaseUrl` that you are making requests to (you will use https://api.turnkey.com when making requests to Turnkey's production API)
-2. the `defaultOrganizationId` to make requests on behalf of (you can use the organization ID you saved above).
-
-```typescript
-import { Turnkey } from "@turnkey/sdk-server";
-
-const turnkey = new Turnkey({
- apiBaseUrl: "https://api.turnkey.com",
- apiPrivateKey: process.env.TURNKEY_API_PRIVATE_KEY,
- apiPublicKey: process.env.TURNKEY_API_PUBLIC_KEY,
- defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,
-});
-
-const apiClient = turnkey.apiClient();
-```
-
-### Create a Wallet
-
-A [hierarchical deterministic (HD) Wallet](https://learnmeabitcoin.com/technical/hd-wallets) is a collection of cryptographic private/public keypairs that share a common seed. For simplicity, you can think of a `wallet` as a collection of `accounts` where each `account` has a single `address` associated with it. An `address` is a string such as `0x7aAE6F67798D1Ea0b8bFB5b64231B2f12049DB5e` that you reference when you want to transfer funds to someone.
-
-You can read more about how Turnkey implements wallets in our [Wallet guide.](/concepts/wallets)
-
-In order to create a wallet you can call `createWallet` and pass in the name of the wallet, as well as any accounts that you want to derive when creating the wallet. In this example, we will create a new wallet and create a single Ethereum account along with it.
-
-Note: You can always add new accounts to a wallet later using the `createWalletAccounts` method.
-
-```typescript
-import { DEFAULT_ETHEREUM_ACCOUNTS } from "@turnkey/sdk-server";
-
-const walletResponse = await apiClient.createWallet({
- walletName: "Example Wallet 1",
- accounts: DEFAULT_ETHEREUM_ACCOUNTS,
-});
-
-const walletId = walletResponse.walletId;
-const accountAddress = walletResponse.addresses[0];
-```
-
-You should now be able to see your newly created wallet on your Turnkey dashboard in the Wallets section.
-
-### Sign a Transaction
-
-A Turnkey client can be used as a signer alongside many popular web3 libraries. You can see the full list of supported web3 integrations [here](/category/web3-libraries). In this example, we will use [Turnkey's Ethers.js wrapper](https://www.npmjs.com/package/@turnkey/ethers) to sign and broadcast a transaction. Note that we also support [Viem](https://www.npmjs.com/package/@turnkey/viem).
-
-
-
-
-```bash
-yarn add ethers
-yarn add @turnkey/ethers
-```
-
-
-
-
-```bash
-npm install ethers
-npm install @turnkey/ethers
-```
-
-
-
+Click "Create an API key".
-```typescript
-import { ethers } from "ethers";
-import { TurnkeySigner } from "@turnkey/ethers";
-
-const turnkeySigner = new TurnkeySigner({
- client: apiClient,
- organizationId: process.env.TURNKEY_ORGANIZATION_ID,
- signWith: accountAddress
-})
-
-// a provider is required if you want to interact with the live network,
-// i.e. broadcast transactions, fetch gas prices, etc.
-const provider = new ethers.JsonRpcProvider();
-const connectedSigner = turnkeySigner.connect(provider);
-
-const transactionRequest = {
- to: ,
- value: ethers.parseEther(),
- type: 2
-}
-const transactionResult = await connectedSigner.sendTransaction(transactionRequest);
-```
-
-And that's it, you have sent your first Ethereum transaction without ever having to manage private key material on your own server!
-
-Sending transactions this way provides a **much stronger security model** than managing key material directly on your own servers, but the real power of Turnkey comes from its extensibility. In the next section we will show you how to create fully non-custodial wallets on behalf of your users, where users can sign transactions themselves using passkeys.
-
----
-
-## Create a Non-Custodial Wallet for a User
-
-The following example will walk you through a simple flow for having a user create a wallet as a configurable `subOrganization` of your parent Turnkey organization. This gives you full control of the policies and access controls associated with the wallet when it's created.
-
-For a more comprehensive breakdown of all our embedded wallet flows you can read our [Embedded Wallets Guide.](/embedded-wallets/overview)
-
-### Instantiate Turnkey using the Browser SDK
-
-Turnkey offers a browser SDK which includes utilities for leveraging native browser APIs in addition to facilitating calls to Turnkey's API. These utilities enable the creation and management of user passkeys and the storage of user login sessions among other things.
-
-#### Installation
-
-
-
-
-```bash
-yarn add @turnkey/sdk-browser
-```
-
-
-
-
-```bash
-npm install @turnkey/sdk-browser
-```
-
-
-
-
-#### Initialize a `passkeyClient`
-
-```typescript
-import { Turnkey } from "@turnkey/sdk-browser";
-
-const turnkey = new Turnkey({
- apiBaseUrl: "https://api.turnkey.com",
- defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,
-});
-
-const passkeyClient = turnkey.passkeyClient();
-```
-
-#### Create a Local Passkey Credential
-
-This will prompt a user natively in their browser to create a passkey.
-
-```typescript
-const credential = await passkeyClient.createUserPasskey({
- publicKey: {
- user: {
- name: ,
- displayName:
- }
- }
-})
-
-// now, you can specify this credential when you create a sub-organization below
-```
+
-#### Configure the `subOrganization` for the User
+Choose a key generation method.
-In this example flow, you are creating a segregated `subOrganization` for each end-user. Each `subOrganization` can have it's own policies associated with it. The `subOrganization` can be configured in any way, including shared custodial setups that require multisig schemes to execute. In this example config, you are creating a wallet where only the end-user has the ability to approve signing, with the passkey credential they created above.
+For this guide, we'll use the in-browser method.
-```typescript
-import { DEFAULT_ETHEREUM_ACCOUNTS } from "@turnkey/sdk-server";
+
-// receive posted credential
+
-const subOrganizationConfig = {
- subOrganizationName: ,
- rootUsers: [{
- userName: ,
- userEmail: ,
- apiKeys: [],
- authenticators: [
- {
- authenticatorName: ,
- challenge: credential.challenge,
- attestation: credential.attestation
- }
- ],
- oauthProviders: []
- }],
- rootQuorumThreshold: 1,
- wallet: {
- walletName: ,
- accounts: DEFAULT_ETHEREUM_ACCOUNTS
- }
-}
-```
+Optionally, you may also generate keys using the Turnkey CLI.
-#### Call `createSubOrganization` from your `apiClient`
+
-The call to `createSubOrganization` must ultimately be done using the parent organization credentials, which is why we make the call from the server-side `apiClient`.
+Name your keypair
-```typescript
-const subOrganizationResponse = await apiClient.createSubOrganization(
- subOrganizationConfig,
-);
-```
+
-### Make user requests
+Approve & Create
-Once the `subOrganization` has been created, all future activities on that `subOrganization` can be authenticated from the end-user's passkey credential, and performed directly from the `passkeyClient` in the browser SDK. A user could authenticate the call to create another wallet on their account with the following code.
+You'll be prompted to authenticate with the authenticator setup during account creation.
+Save the private key in a secure location — **it won't be visible after this step**.
-```typescript
-const walletResponse = await passkeyClient.createWallet({
- walletName: "Wallet Created with User Authentication",
- accounts: DEFAULT_ETHEREUM_ACCOUNTS,
-});
-
-const walletId = walletResponse.walletId;
-const accountAddress = walletResponse.addresses[0];
-```
-
-#### Sign a Transaction
-
-```typescript
-import { ethers } from "ethers";
-import { TurnkeySigner } from "@turnkey/ethers";
-
-const turnkeySigner = new TurnkeySigner({
- client: passkeyClient,
- organizationId: process.env.TURNKEY_ORGANIZATION_ID,
- signWith: accountAddress
-})
-
-// a provider is required if you want to interact with the live network,
-// i.e. broadcast transactions, fetch gas prices, etc.
-const provider = new ethers.JsonRpcProvider();
-const connectedSigner = turnkeySigner.connect(provider);
-
-const transactionRequest = {
- to: ,
- value: ethers.parseEther(),
- type: 2
-}
-const transactionResult = await connectedSigner.sendTransaction(transactionRequest);
-```
-
-#### Login a User
-
-Whenever you call a method on `passkeySigner` the browser will prompt the end-user for a passkey signature to use as an authentication credential for the request to Turnkey's API. This is good when used for stateful write actions to their `subOrganization`, but a bit cumbersome when used for reading data from their account. In order to make this UX feel more streamlined, the browser SDK offers a way to `login` a user and then subsequently make read-only requests to Turnkey's API via a login session instead of needing an end-user to tap a passkey each time.
-
-```typescript
-const response = await passkeyClient.login();
-if (response.organizationId) {
- // user is authenticated with Turnkey
-} else {
- // user was not authenticated with Turnkey
-}
-```
-
-Once a user has been logged in, you will have access to the `currentUserSession` to call Turnkey's API. The following example will return a list of wallets for the logged-in user.
-
-```typescript
-const currentUserSession = await turnkey.currentUserSession();
-
-if (currentUserSession) {
- // this request will not require the user to tap a passkey
- const walletsResponse = await currentUserSession.getWallets();
- const allUserWallets = walletsResponse.wallets;
-}
-```
+**Important**: Both the public and private keys are required for signing requests to the Turnkey API. Keep these keys secure and out of reach of end-users.
----
+
-## Next Steps and Examples
+API Key Created 🎉
-In addition to programmatic transaction signing, and embedded wallet passkey flows, Turnkey also allows ways for users to authenticate with email and recover lost accounts, create specific policies around transaction execution, and much much more.
+
-- Check out our [examples](/getting-started/examples) to see what can be built.
- - This includes some lightweight, fullstack Next.js apps that use [Ethers](https://github.com/tkhq/demo-ethers-passkeys) and [Viem](https://github.com/tkhq/demo-viem-passkeys).
-- Learn more about [Organizations](/concepts/organizations) and [Wallets](/concepts/wallets).
-- See our [API design](/category/api-overview) or dive into our [API reference](/api).
+
+
+## Next Steps
+
+Now that you've created an organization and API keypair, you're ready to start developing with Turnkey!
+
+
diff --git a/docs/documentation/getting-started/_category_.json b/docs/documentation/getting-started/_category_.json
index ca1218f0..7afff231 100644
--- a/docs/documentation/getting-started/_category_.json
+++ b/docs/documentation/getting-started/_category_.json
@@ -3,7 +3,6 @@
"position": 1,
"collapsed": false,
"link": {
- "type": "generated-index",
- "description": "Get started with Turnkey."
+ "type": "generated-index"
}
}
diff --git a/docs/documentation/getting-started/embedded-wallet-quickstart.mdx b/docs/documentation/getting-started/embedded-wallet-quickstart.mdx
new file mode 100644
index 00000000..7e972c62
--- /dev/null
+++ b/docs/documentation/getting-started/embedded-wallet-quickstart.mdx
@@ -0,0 +1,627 @@
+---
+id: embedded-wallet-quickstart
+sidebar_position: 2
+description: Quickstart guide to building Embedded Wallets with Turnkey
+slug: /getting-started/embedded-wallet-quickstart
+sidebar_label: "Embedded Wallets"
+title: "Embedded Wallets"
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { Step, Steps } from "@site/src/components/step";
+
+# Embedded Wallets Quickstart
+
+Turnkey's Embedded Wallets enable you to integrate secure, custom wallet experiences directly
+into your product. With features like advanced security, seamless authentication, and flexible
+UX options, you can focus on building great products while we handle the complexities of private key management.
+
+## Prerequisites
+
+This guide assumes you've completed the steps to create an account, organization, and API keypair as described in the [Quickstart](/getting-started/quickstart) section.
+
+## Installation
+
+Create a new Next.js app via `npx create-next-app@latest`. Or install into an existing project.
+
+
+
+
+```bash
+npm install @turnkey/sdk-react
+```
+
+
+
+
+```bash
+pnpm add @turnkey/sdk-react
+```
+
+
+
+
+```bash
+yarn add @turnkey/sdk-react
+```
+
+
+
+
+:::note
+
+**React 19 Users**
+
+If you're using Next.js 15 with React 19 you may encounter an installation error with `@turnkey/sdk-react`. Consider:
+
+- Downgrading React to `18.x.x`
+- Using `npm install --force` or `--legacy-peer-deps`
+
+You may learn more about this [here](https://ui.shadcn.com/docs/react-19).
+
+:::
+
+## Setup
+
+
+
+Environment
+
+The following environment variables are necessary to use the Turnkey SDK.
+
+```bash title=".env"
+NEXT_PUBLIC_ORGANIZATION_ID=
+TURNKEY_API_PUBLIC_KEY=
+TURNKEY_API_PRIVATE_KEY=
+NEXT_PUBLIC_BASE_URL=https://api.turnkey.com
+```
+
+Configure
+
+Fill in with your Organization ID and API Base URL.
+
+```tsx title="src/app/layout.tsx"
+const config = {
+ apiBaseUrl: "https://api.turnkey.com",
+ defaultOrganizationId: process.env.NEXT_PUBLIC_TURNKEY_ORGANIZATION_ID,
+};
+```
+
+Provider
+
+Wrap your layout with the `TurnkeyProvider` component.
+
+```tsx title="src/app/layout.tsx"
+import { TurnkeyProvider } from "@turnkey/sdk-react";
+
+export default function RootLayout({ children }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+```
+
+:::note
+
+**React 19 Users**
+
+`@turnkey/sdk-react` is built with React 18. If you're using React 19 you'll find a type mismatch on the children type.
+
+To fix this, you can use the `@ts-ignore` directive to suppress the error.
+
+```tsx title="src/app/layout.tsx"
+
+ {/* @ts-ignore */}
+ {children}
+
+```
+
+We're actively working towards React 19 compatibility.
+
+:::
+
+
+
+## Authenticate
+
+
+
+
+
+The auth component contains the UI and logic to handle the authentication flow.
+
+
+
+Configure
+
+For simplicity, this app will only support email authentication. We have other guides on additional authentication methods.
+Additionally, you can customize the order in which the auth methods are displayed.
+
+```tsx title="src/app/page.tsx"
+"use client";
+
+export default function Home() {
+ // The auth methods to display in the UI
+ const config = {
+ authConfig: {
+ emailEnabled: true,
+ // Set the rest to false to disable them
+ passkeyEnabled: false,
+ phoneEnabled: false,
+ appleEnabled: false,
+ facebookEnabled: false,
+ googleEnabled: false,
+ },
+ // The order of the auth methods to display in the UI
+ configOrder: ["email" /* "passkey", "phone", "socials" */],
+ };
+
+ return ;
+}
+```
+
+
+Auth Config Options
+
+```ts
+type AuthConfig = {
+ emailEnabled: boolean;
+ passkeyEnabled: boolean;
+ phoneEnabled: boolean;
+ appleEnabled: boolean;
+ googleEnabled: boolean;
+ facebookEnabled: boolean;
+};
+```
+
+
+
+Import
+
+Import the auth component into your app and pass in the config object.
+
+```tsx title="src/app/page.tsx"
+"use client";
+
+import { Auth } from "@turnkey/sdk-react";
+
+export default function Home() {
+ const config = {
+ authConfig: {
+ emailEnabled: true,
+ passkeyEnabled: false,
+ phoneEnabled: false,
+ appleEnabled: false,
+ facebookEnabled: false,
+ googleEnabled: false,
+ },
+ configOrder: ["email"],
+ };
+
+ return (
+
+
+
+ );
+}
+```
+
+Handlers
+
+Define two functions to handle the "success" and "error" states. Initially, the `onError` function will set an `errorMessage`
+state variable which will be used to display an error message to the user. The `onAuthSuccess`
+function will route the user to the dashboard after successful authentication.
+
+A new [sub-organization](/concepts/sub-organizations) and [wallet](/concepts/wallets) is created for each new user during the authentication flow.
+
+```tsx title="src/app/page.tsx"
+"use client";
+
+import { useState } from "react";
+import { Auth } from "@turnkey/sdk-react";
+
+export default function Home() {
+ const [errorMessage, setErrorMessage] = useState("");
+ const router = useRouter();
+
+ const onAuthSuccess = async () => {
+ // We'll add the dashboard route in the next step
+ router.push("/dashboard");
+ };
+
+ const onError = (errorMessage: string) => {
+ setErrorMessage(errorMessage);
+ };
+
+ // Add the handlers to the config object
+ const config = {
+ // ...
+ onAuthSuccess: onAuthSuccess,
+ onError: onError,
+ };
+
+ return (
+
+
+
+ );
+}
+```
+
+Dashboard: User Session
+
+Add a dashboard route to the app where the user will be able to view their account and sign messages.
+
+```tsx title="src/app/dashboard/page.tsx"
+export default function Dashboard() {
+ return
Dashboard
;
+}
+```
+
+Since the app is wrapped with the `TurnkeyProvider` component, the `useTurnkey` hook is available to all child components.
+Calling `turnkey.getCurrentUser()` will return the current user's session information from local storage.
+
+Add a state variable to store the user:
+
+```tsx title="src/app/dashboard/page.tsx" {2,8}
+import { useState, useEffect } from "react";
+import { useTurnkey } from "@turnkey/sdk-react";
+
+export default function Dashboard() {
+ const { turnkey } = useTurnkey();
+ const [user, setUser] = useState(null);
+
+ useEffect(() => {
+ if (turnkey) {
+ const user = turnkey.getCurrentUser();
+ setUser(user);
+ }
+ }, [turnkey]);
+
+ return
Dashboard
;
+}
+```
+
+
+User Session
+
+```ts
+export interface User {
+ // Unique identifier for the user.
+ userId: string;
+ // Username of the user.
+ username: string;
+ organization: {
+ // Unique identifier for the organization.
+ organizationId: string;
+ // Name of the organization.
+ organizationName: string;
+ };
+ session:
+ | {
+ // read-only session .
+ read?: ReadOnlySession;
+ // read-write session details.
+ write?: ReadWriteSession;
+ // Authenticated client associated with the session.
+ authClient: AuthClient;
+ }
+ | undefined;
+}
+
+export interface ReadOnlySession {
+ // Read-only session token for `X-Session` header
+ token: string;
+ // Expiry time in seconds since Unix epoch.
+ expiry: number;
+}
+
+export interface ReadWriteSession {
+ // Credential bundle for iFrame client, generated by `createReadWriteSession` or `createApiKeys`.
+ credentialBundle: string;
+ // Expiry time in seconds since Unix epoch.
+ expiry: number;
+}
+```
+
+
+
+
+
+## Sign Message
+
+Turnkey supports signing arbitrary messages with the [`signRawPayload`](/api#tag/Signing/operation/SignRawPayload) method.
+
+The `signRawPayload` method requires these parameters:
+
+- `payload`: The raw unsigned payload to sign
+- `signWith`: The signing address (wallet account, private key address, or private key ID)
+- `encoding`: The message encoding format
+- `hashFunction`: The selected hash algorithm
+
+
+
+The Payload
+
+For simplicity, a human readable string, `message`, will be the payload to sign. Add a state variable to store the message and an input field to allow the user to enter the message:
+
+```tsx title="src/app/dashboard/page.tsx" {6}
+import { useState, useEffect } from "react";
+
+export default function Dashboard() {
+ //...
+
+ const [message, setMessage] = useState("");
+
+ //...
+
+ return (
+
+ setMessage(e.target.value)}
+ placeholder="Enter message to sign"
+ />
+
+ );
+}
+```
+
+The Signer
+
+Signing messages requires a signer e.g. a Turnkey wallet address to sign with and a payload or message to sign. A new wallet is created for each user during the authentication flow.
+
+Create a function called `getSignWith`, to get the user's wallet account address which will be used to sign the message.
+
+Use the `getActiveClient` method from the `useTurnkey` hook to get the client authenticated with the user's read-write session:
+
+```tsx title="src/app/dashboard/page.tsx" {5,7-32}
+import { useState, useEffect } from "react";
+import { useTurnkey } from "@turnkey/sdk-react";
+
+export default function Dashboard() {
+ const { turnkey, getActiveClient } = useTurnkey();
+ const [user, setUser] = useState(null);
+
+ const getSignWith = async () => {
+ // This will return the authIframeClient with the credential bundle injected
+ const client = await getActiveClient();
+
+ // The user's sub-organization id
+ const organizationId = user?.organization.organizationId;
+
+ // Get the user's wallets
+ const wallets = await client?.getWallets({
+ organizationId,
+ });
+
+ // Get the first wallet of the user
+ const walletId = wallets?.wallets[0].walletId ?? "";
+
+ // Use the `walletId` to get the accounts associated with the wallet
+ const accounts = await client?.getWalletAccounts({
+ organizationId,
+ walletId,
+ });
+
+ const signWith = accounts?.accounts[0].address ?? "";
+
+ return signWith;
+ };
+
+ useEffect(/* ... */*/);
+
+ return (/*
...
*/*/);
+}
+```
+
+The Signing Function
+
+Create a function called `signMessage`. This function will:
+
+- Get the user's wallet account for signing the message
+- Compute the keccak256 hash of the message
+- Call the `signRawPayload` method
+
+Note: To compute the `keccak256` hash of the message, this example uses the `hashMessage` function from `viem`. However, any other hashing library can be used.
+
+```tsx
+const signMessage = async () => {
+ const payload = await hashMessage(message);
+ const signWith = await getSignWith();
+
+ const signature = await client?.signRawPayload({
+ payload,
+ signWith,
+ // The message encoding format
+ encoding: "PAYLOAD_ENCODING_TEXT_UTF8",
+ // The hash function used to hash the message
+ hashFunction: "HASH_FUNCTION_KECCAK256",
+ });
+};
+```
+
+Display
+
+Add a button to the UI to trigger the `signMessage` function.
+
+```tsx title="src/app/dashboard/page.tsx" {2,8}
+import { useState, useEffect } from "react";
+import { useTurnkey } from "@turnkey/sdk-react";
+import { hashMessage } from "viem";
+
+export default function Dashboard() {
+ //...
+
+ const [message, setMessage] = useState("");
+
+ const signMessage = async () => {
+ const payload = await hashMessage(message);
+ const signWith = await getSignWith();
+
+ const signature = await client?.signRawPayload({
+ payload,
+ signWith,
+ // The message encoding format
+ encoding: "PAYLOAD_ENCODING_TEXT_UTF8",
+ // The hash function used to hash the message
+ hashFunction: "HASH_FUNCTION_KECCAK256",
+ });
+ };
+
+ return (
+
+ );
+}
+```
+
+
+
+### Next Steps
diff --git a/docs/documentation/getting-started/examples.md b/docs/documentation/getting-started/examples.md
index baa65899..dc368b9d 100644
--- a/docs/documentation/getting-started/examples.md
+++ b/docs/documentation/getting-started/examples.md
@@ -1,5 +1,5 @@
---
-sidebar_position: 3
+sidebar_position: 4
description: Check out some of our example apps and use cases
slug: /getting-started/examples
---
diff --git a/docs/documentation/getting-started/signing-automation-quickstart.mdx b/docs/documentation/getting-started/signing-automation-quickstart.mdx
new file mode 100644
index 00000000..82698198
--- /dev/null
+++ b/docs/documentation/getting-started/signing-automation-quickstart.mdx
@@ -0,0 +1,130 @@
+---
+id: signing-automation-quickstart
+title: "Signing Automation"
+sidebar_position: 3
+description: Automate signing with Turnkey
+slug: /getting-started/signing-automation-quickstart
+---
+
+import { Step, Steps } from "@site/src/components/step";
+
+# Signing Automation Quickstart
+
+Turnkey's Signing Automation enables you to build secure, programmatic signing workflows directly into your applications. With features like customizable policies, multi-party approvals, and support for any blockchain, you can confidently automate complex signing operations while maintaining enterprise-grade security.
+
+## Prerequisites
+
+This guide assumes you've completed the steps to create an account, organization, and API keypair as described in the [Quickstart](/getting-started/quickstart) section.
+
+## Installation
+
+Install the Turnkey CLI to get started:
+
+```sh
+brew install tkhq/tap/turnkey
+```
+
+We use Homebrew for a quick installation process. For a more secure installation that requires no trust in external parties, see our [CLI repository](https://github.com/tkhq/tkcli).
+
+## Transaction Signing
+
+
+
+Setup
+
+Set the `ORGANIZATION_ID` environment variable to your organization ID. This will be used to identify your organization in the API requests.
+
+```sh
+export ORGANIZATION_ID=
+```
+
+An API keypair is required to authenticate requests to the Turnkey API.
+
+Create a new key named `quickstart` using the turnkey CLI:
+
+```sh
+turnkey generate api-key --organization $ORGANIZATION_ID --key-name quickstart
+```
+
+You'll see output like this:
+
+```json
+{
+ "privateKeyFile": "/home/user/.config/turnkey/keys/quickstart.private",
+ "publicKey": "03...72",
+ "publicKeyFile": "/home/user/.config/turnkey/keys/quickstart.public"
+}
+```
+
+Follow the instructions in this [guide](/sdks/cli#add-your-public-api-key) to add your new public API key to your organization via the dashboard.
+
+ Create Wallet
+
+Wallets are collections of cryptographic key pairs typically used for sending and receiving digital assets. To create one, we need to provide a name:
+
+```sh
+turnkey wallets create --name default --key-name quickstart
+```
+
+:::note
+
+This command requires a key named `quickstart` to exist in your configuration. This key should have been created during the [Quickstart](/getting-started/quickstart) guide. If you haven't created it yet, please complete the initial setup steps first.
+
+If the key doesn't exist, you'll see an error like this:
+
+```json
+{
+ "error": "failed to load key bytes \"quickstart\": failed to read from \"/.config/turnkey/keys/quickstart.private\": open /.config/turnkey/keys/quickstart.private: no such file or directory"
+}
+```
+
+If the key exists but has not been added to your organization, you'll see an error like this:
+
+```json
+{
+ "error": "failed to associate the API key with an organization; please manually specify the organization ID"
+}
+```
+
+:::
+
+ Create Ethereum Account
+
+To create a cryptographic key pair on our new wallet, we need to pass our desired address format:
+
+```sh
+turnkey wallets accounts create --wallet default --address-format ADDRESS_FORMAT_ETHEREUM --key-name quickstart
+```
+
+This command will produce an Ethereum address (e.g. `0x08cb1216C95149DF66978b574E484869512CE2bF`) that we'll need to sign a transaction. You can see your new Wallet account with:
+
+```sh
+turnkey wallets accounts list --wallet default --key-name quickstart
+```
+
+ Sign a Transaction
+
+Now you can sign an Ethereum transaction with this new address with our [`sign_transaction` endpoint](https://docs.turnkey.com/api#tag/Signers/operation/SignTransaction). Make sure to replace the `unsignedTransaction` below with your own. You can use our [simple transaction generator](https://build.tx.xyz) if you need a quick transaction for testing:
+
+```sh
+turnkey request --path /public/v1/submit/sign_transaction --body '{
+ "timestampMs": "'"$(date +%s)"'000",
+ "type": "ACTIVITY_TYPE_SIGN_TRANSACTION_V2",
+ "organizationId": "'"$ORGANIZATION_ID"'",
+ "parameters": {
+ "type": "TRANSACTION_TYPE_ETHEREUM",
+ "signWith": "",
+ "unsignedTransaction": ""
+ }
+}' --key-name quickstart
+```
+
+If you'd like to broadcast your transaction, you can easily do so via [Etherscan](https://etherscan.io/pushTx).
+
+
+
+## Next Steps
+
+- Check out our [examples](/getting-started/examples) to see what can be built
+- Learn more about [Organizations](/concepts/organizations) and [Wallets](/concepts/wallets)
+- See our [API design](/category/api-overview) or dive into our [API reference](/api)
diff --git a/package.json b/package.json
index 8c086190..6f3a7bb7 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"@docusaurus/core": "2.4.1",
"@docusaurus/preset-classic": "2.4.1",
"@mdx-js/react": "^1.6.22",
+ "@turnkey/sdk-react": "^2.0.2",
"clsx": "^1.2.1",
"docusaurus-biel": "^1.0.1",
"prism-react-renderer": "^1.3.5",
diff --git a/src/components/card-link/card-link.css b/src/components/card-link/card-link.css
new file mode 100644
index 00000000..cffae7c8
--- /dev/null
+++ b/src/components/card-link/card-link.css
@@ -0,0 +1,38 @@
+.card-link {
+ display: block;
+ padding: 1rem;
+ background-color: #1a1a1a;
+ color: white;
+ border-radius: 0.5rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: background-color 0.3s;
+ text-decoration: none;
+ border: 1px solid var(--tk-border-gray-100);
+}
+
+.card-link:hover {
+ background-color: #333;
+ color: unset;
+ text-decoration: none;
+}
+
+.card-link-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 0.5rem;
+}
+
+.card-link-icon {
+ margin-right: 0.5rem;
+ display: flex;
+}
+
+.card-link-title {
+ font-size: 1.125rem;
+ font-weight: 600;
+}
+
+.card-link-content {
+ font-size: 0.875rem;
+ color: #b3b3b3;
+}
diff --git a/src/components/card-link/card-link.tsx b/src/components/card-link/card-link.tsx
new file mode 100644
index 00000000..26eb5cd3
--- /dev/null
+++ b/src/components/card-link/card-link.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import "./card-link.css";
+
+interface CardLinkProps {
+ icon: React.ReactNode;
+ title: string;
+ href: string;
+ children: React.ReactNode;
+}
+
+export const CardLink: React.FC = ({
+ icon,
+ title,
+ href,
+ children,
+}) => (
+
+
+
+## Get Your Organization ID
-You'll want to reference this in your code or as an environment variable, as you'll need it to make requests to the Turnkey API.
+Once logged in, open the user dropdown at the top right. Your Organization ID is listed there. Copy it for use in your code or environment variables.
-### Create an API Key
+
+
+The API keypair is used to authenticate requests to Turnkey. We'll create one now.
+
+
-- Select "Generate API keys in-browser" and click continue.
-- Give your API keypair a name and click continue.
-- Save your Public and Private Key locally.
-- Make sure to click "Approve" to sign the API Creation activity with your authenticator device.
-
-A couple of notes on the action you just took:
-
-- Every action on Turnkey returns an `activity`, including creating the API keypair in the previous step. You can read more about the full [Turnkey Activity Model here](/concepts/policies/language#activity-breakdown).
-- The keypair you just created is an authenticator for the root user of your Turnkey organization. **Any code using an API keypair for the parent organization should only ever be used and stored securely server-side, and never exposed to end-users**.
-- You will need both the public and private key to sign requests to the Turnkey API.
-
-### Instantiate Turnkey using the Server SDK
-
-The simplest way to use Turnkey's API is through one of our SDK libraries. This example will make requests to the API using our server-side node.js library. You can see the full list of client libraries supported on our [SDK Reference page.](/sdks/introduction). Additionally, if you're looking for an example to get started, here are some fullstack Next.js apps that use [Ethers](https://github.com/tkhq/demo-ethers-passkeys) and [Viem](https://github.com/tkhq/demo-viem-passkeys), respectively.
-
-#### Installation
-
-
-#### Configure the `subOrganization` for the User
+
-// receive posted credential
+
-const subOrganizationConfig = {
- subOrganizationName: 
-### Make user requests
+
-## Next Steps and Examples
+
-- Check out our [examples](/getting-started/examples) to see what can be built.
- - This includes some lightweight, fullstack Next.js apps that use [Ethers](https://github.com/tkhq/demo-ethers-passkeys) and [Viem](https://github.com/tkhq/demo-viem-passkeys).
-- Learn more about [Organizations](/concepts/organizations) and [Wallets](/concepts/wallets).
-- See our [API design](/category/api-overview) or dive into our [API reference](/api).
+
+