docs: started

docs/components/icons.tsx

@@ -392,4 +392,17 @@ export const Icons = {
 			</g>
 		</svg>
 	),
+	expo: (props?: SVGProps<any>) => (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="1.2em"
+			height="1.2em"
+			viewBox="0 0 32 32"
+		>
+			<path
+				fill="currentColor"
+				d="M24.292 15.547a3.93 3.93 0 0 0 4.115-3.145a2.57 2.57 0 0 0-2.161-1.177c-2.272-.052-3.491 2.651-1.953 4.323zm-9.177-10.85l5.359-3.104L18.766.63l-7.391 4.281l.589.328l1.119.629l2.032-1.176zm6.046-3.39c.089.027.161.1.188.188l2.484 7.593a.285.285 0 0 1-.125.344a5.06 5.06 0 0 0-2.317 5.693a5.066 5.066 0 0 0 5.401 3.703a.3.3 0 0 1 .307.203l2.563 7.803a.3.3 0 0 1-.125.344l-7.859 4.771a.3.3 0 0 1-.131.036a.26.26 0 0 1-.203-.041l-2.765-1.797a.3.3 0 0 1-.109-.129l-5.396-12.896l-8.219 4.875c-.016.011-.037.021-.052.032a.3.3 0 0 1-.261-.021l-1.859-1.093a.283.283 0 0 1-.115-.381l7.953-15.749a.27.27 0 0 1 .135-.131L18.615.045a.29.29 0 0 1 .292-.005zm-8.322 5.1l-1.932-1.089l-7.693 15.229l1.396.823l6.631-9.015a.28.28 0 0 1 .271-.12a.29.29 0 0 1 .235.177l7.228 17.296l1.933 1.251l-8.063-24.552zm13.406 10.557c-2.256 0-3.787-2.292-2.923-4.376c.86-2.083 3.563-2.619 5.156-1.025c.595.593.928 1.396.928 2.235a3.16 3.16 0 0 1-3.161 3.167z"
+			></path>
+		</svg>
+	),
 };

docs/components/sidebar-content.tsx

@@ -632,6 +632,17 @@ export const contents: Content[] = [
 				icon: Icons.elysia,
 				href: "/docs/integrations/elysia",
 			},
+			{
+				group: true,
+				title: "Mobile & Desktop",
+				href: "/docs/integrations",
+				icon: LucideAArrowDown,
+			},
+			{
+				title: "Expo",
+				icon: Icons.expo,
+				href: "/docs/integrations/expo",
+			},
 		],
 	},
 	{

docs/content/docs/installation.mdx

@@ -355,8 +355,7 @@ Better Auth supports any backend framework with standard Request and Response ob
     ```
     </Tab>
     <Tab value="tanstack-start">
-    ```ts
-    // app/routes/api/auth/$.ts
+    ```ts title="app/routes/api/auth/$.ts"
     import { auth } from '~/lib/server/auth'
     import { createAPIFileRoute } from '@tanstack/start/api'
 

docs/content/docs/integrations/expo.mdx

@@ -3,19 +3,58 @@ title: Expo
 description: Learn how to use Better Auth with Expo.
 ---
 
-Expo is a popular framework for building cross-platform apps with React Native. This guide will show you how to use Better Auth with Expo.
-
+Expo is a popular framework for building cross-platform apps with React Native. Better Auth supports both Expo native and web apps.
 
 ## Installation
 
-First we need to install Better Auth main packge on both Expo and Our Server.
+<Steps>
+    <Step>
+        ## Configure A Better Auth Backend
+        Before using Better Auth with Expo, make sure you have a Better Auth backend set up. You can either use a separate server or leverage Expo's new [API Routes](https://docs.expo.dev/router/reference/api-routes) feature to host your Better Auth instance.
+
+        To get started, check out our [installation](/docs/installation) guide for setting up Better Auth on your server.
+    </Step>
+    <Step>
+        ## Install Better Auth and Expo Plugin
+
+        With your server up and running, install both Better Auth and the Expo plugin in your Expo project.
+
+        ```package-install
+        better-auth @better-auth/expo
+        ```
+    </Step>
+    <Step>
+        ## Initialize Better Auth Client
+        
+        To initialize Better Auth in your Expo app, you need to call `createAuthClient` with the base url of your Better Auth backend. Make sure to import the client from `/react`.
+
+        ```ts title="src/auth-client.ts"
+        import { createAuthClient } from 'better-auth/react';
+
+        const authClient = createAuthClient({
+            basURL: 'http://localhost:8081', /* base url of your Better Auth backend. */
+        });
+        ```
+        <Callout>
+         Be sure to include the full URL, including the path, if you've changed the default path from `/api/auth`.
+        </Callout>
+    </Step>
+    <Step>
+        ## Configure Metro Bundler
+
+        To resolve better auth exports you'll need to enable `unstable_enablePackageExports` in your metro config. 
+
+        ```js title="metro.config.js"
+        const { getDefaultConfig } = require("expo/metro-config");
+
+        const config = getDefaultConfig(__dirname)
+
+        config.resolver.unstable_enablePackageExports = true; // [!code highlight]
+
+        module.exports = config;
+        ```
+    </Step>
+</Steps>
 
-```package-install
-install better-auth
-```
 
-Then we need to install the Expo plugin.
 
-```package-install
-install @betterauth/expo
-```