tkhq · taylorjdawson · Dec 11, 2024 · Dec 12, 2024 · Dec 18, 2024 · Dec 18, 2024
diff --git a/docs/documentation/getting-started/Quickstart.mdx b/docs/documentation/getting-started/Quickstart.mdx
diff --git 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
@@ -0,0 +1,263 @@
+---
+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 and organization as described in the [Getting Started](/getting-started) section.
+
+## Installation
+
+Create a new Next.js app via `npx create-next-app@latest`. Or install into an existing project.
+
+<Tabs>
+  <TabItem value="npm" label="npm">
+
+```bash
+npm install @turnkey/sdk-react
+```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+```bash
+pnpm add @turnkey/sdk-react
+```
+
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+
+```bash
+yarn add @turnkey/sdk-react
+```
+
+  </TabItem>
+</Tabs>
+
+:::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).
+
+:::
+
+### Add Turnkey to your app
+
+<Steps>
+
+<Step>Environment</Step>
+
+The following environment variables are necessary to use the Turnkey SDK.
+
+```bash title=".env"
+NEXT_PUBLIC_TURNKEY_ORGANIZATION_ID=<your turnkey org id>
+TURNKEY_API_PUBLIC_KEY=<your api public key>
+TURNKEY_API_PRIVATE_KEY=<your api private key>
+```
+
+<Step>Configure</Step>
+
+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,
+};
+```
+
+<Step>Provider</Step>
+
+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 (
+    <html lang="en">
+      <body>
+        <TurnkeyProvider config={config}>{children}</TurnkeyProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+:::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"
+<TurnkeyProvider config={config}>
+  {/* @ts-ignore */}
+  {children}
+</TurnkeyProvider>
+```
+
+We're actively working towards React 19 compatibility.
+
+:::
+
+</Steps>
+
+## Auth Component
+
+<p
+  style={{
+    textAlign: "center",
+    width: "100%",
+    backgroundColor: "#222",
+    backgroundImage: "radial-gradient(#444 1px, transparent 1px)",
+    backgroundSize: "20px 20px",
+    backgroundPosition: "0 0",
+    padding: "24px",
+    borderRadius: "12px",
+  }}
+>
+  <img
+    src="/img/quickstart/auth-component.png"
+    alt="Auth Component"
+    style={{
+      width: 260,
+      borderRadius: "12px",
+      boxShadow: "0 2px 5px 0 #0003",
+    }}
+  />
+</p>
+
+The auth component contains the UI and logic to handle the authentication flow.
+
+<Steps>
+
+<Step>Configure</Step>
+
+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"
+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 <div></div>;
+}
+```
+
+<details>
+<summary>Auth Config Options</summary>
+
+```ts
+type AuthConfig = {
+  emailEnabled: boolean;
+  passkeyEnabled: boolean;
+  phoneEnabled: boolean;
+  appleEnabled: boolean;
+  googleEnabled: boolean;
+  facebookEnabled: boolean;
+};
+```
+
+</details>
+
+<Step>Import</Step>
+
+Import the auth component into your app and pass in the config object.
+
+```tsx title="src/app/page.tsx"
+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 (
+    <div>
+      <Auth {...config} />
+    </div>
+  );
+}
+```
+
+<Step>Handlers</Step>
+
+Define two function 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.
+
+```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 onAuthSuccess = async () => {};
+
+  const onError = (errorMessage: string) => {
+    setErrorMessage(errorMessage);
+  };
+
+  // Add the handlers to the config object
+  const config = {
+    // ...
+    onAuthSuccess: onAuthSuccess,
+    onError: onError,
+  };
+
+  return (
+    <div>
+      <Auth {...config} />
+    </div>
+  );
+}
+```
+
+</Steps>
diff --git 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
 ---