From 6ad6cded12d4bf424dfe46745d951e1c3fbbfc90 Mon Sep 17 00:00:00 2001
From: Bereket Engida <bekacru@gmail.com>
Date: Thu, 31 Oct 2024 23:28:09 +0300
Subject: [PATCH] docs: add expo docs

---
 docs/components/features.tsx            |   5 +-
 docs/components/icons.tsx               |   1 +
 docs/components/techstack-icons.tsx     |   4 +
 docs/content/docs/installation.mdx      |  10 +-
 docs/content/docs/integrations/expo.mdx | 164 ++++++++++++++++++++++++
 packages/expo/src/client.ts             |   6 +-
 6 files changed, 186 insertions(+), 4 deletions(-)

diff --git a/docs/components/features.tsx b/docs/components/features.tsx
index d7c81dbbb1..62a96b4ee6 100644
--- a/docs/components/features.tsx
+++ b/docs/components/features.tsx
@@ -188,8 +188,9 @@ export default function Features({ stars }: { stars: string | null }) {
 										"svelteKit",
 										"astro",
 										"solidStart",
-										"react",
-										"hono",
+										// "react",
+										// "hono",
+										"expo",
 										"tanstack",
 									]}
 								/>
diff --git a/docs/components/icons.tsx b/docs/components/icons.tsx
index a5504cadb5..ecdcf89b9b 100644
--- a/docs/components/icons.tsx
+++ b/docs/components/icons.tsx
@@ -398,6 +398,7 @@ export const Icons = {
 			width="1.2em"
 			height="1.2em"
 			viewBox="0 0 32 32"
+			{...props}
 		>
 			<path
 				fill="currentColor"
diff --git a/docs/components/techstack-icons.tsx b/docs/components/techstack-icons.tsx
index da186d562a..650f28936a 100644
--- a/docs/components/techstack-icons.tsx
+++ b/docs/components/techstack-icons.tsx
@@ -38,4 +38,8 @@ export const techStackIcons: TechStackIconType = {
 		name: "TanStack Start",
 		icon: <Icons.tanstack className="w-10 h-10" />,
 	},
+	expo: {
+		name: "Expo",
+		icon: <Icons.expo className="w-10 h-10" />,
+	},
 };
diff --git a/docs/content/docs/installation.mdx b/docs/content/docs/installation.mdx
index b745bcba45..df02289dea 100644
--- a/docs/content/docs/installation.mdx
+++ b/docs/content/docs/installation.mdx
@@ -236,7 +236,7 @@ Create a new file or route in your framework's designated catch-all route handle
 Better Auth supports any backend framework with standard Request and Response objects and offers helper functions for popular frameworks.
 </Callout>
 
-<Tabs items={["next-js", "nuxt", "svelte-kit", "remix", "solid-start", "hono", "express", "elysia", "tanstack-start"]} defaultValue="react">
+<Tabs items={["next-js", "nuxt", "svelte-kit", "remix", "solid-start", "hono", "express", "elysia", "tanstack", "expo"]} defaultValue="react">
     <Tab value="next-js">
         ```ts title="/app/api/auth/[...all]/route.ts"
         import { auth } from "@/lib/auth"; // path to your auth file
@@ -369,6 +369,14 @@ Better Auth supports any backend framework with standard Request and Response ob
     });
     ```
     </Tab>
+    <Tab value="expo">
+    ```ts title="app/api/auth/[..all]+api.ts"
+    import { auth } from '@/lib/server/auth'; // path to your auth file
+
+    const handler = auth.handler;
+    export { handler as GET, handler as POST };
+    ```
+    </Tab>
 </Tabs>
 </Step>
 
diff --git a/docs/content/docs/integrations/expo.mdx b/docs/content/docs/integrations/expo.mdx
index 5138bdfa14..08e850de3c 100644
--- a/docs/content/docs/integrations/expo.mdx
+++ b/docs/content/docs/integrations/expo.mdx
@@ -13,6 +13,15 @@ Expo is a popular framework for building cross-platform apps with React Native.
         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.
+
+        To use the new API routes feature in Expo to host your Better Auth instance you can create a new API route in your Expo app and mount the Better Auth handler.
+
+        ```ts title="app/api/auth/[...auth]+api.ts"
+        import { auth } from "@/lib/auth"; // import Better Auth handler
+        
+        const handler = auth.handler;
+        export { handler as GET, handler as POST }; // export handler for both GET and POST requests
+        ```
     </Step>
     <Step>
         ## Install Better Auth and Expo Plugin
@@ -57,4 +66,159 @@ Expo is a popular framework for building cross-platform apps with React Native.
 </Steps>
 
 
+## Usage
 
+### Authenticating Users
+
+With Better Auth initialized, you can now use the `authClient` to authenticate users in your Expo app.
+
+<Tabs items={["sign-in", "sign-up"]}>
+    <Tab value="sign-in">
+        ```tsx title="app/sign-in.tsx"
+        import { useState } from 'react';
+        import { View, TextInput, Button } from 'react-native';
+        import { authClient } from './auth-client';
+
+        export default function App() {
+            const [email, setEmail] = useState('');
+            const [password, setPassword] = useState('');
+
+            const handleLogin = async () => {
+            await authClient.signIn.email({
+                    email,
+                    password,
+            })
+            };
+
+            return (
+                <View>
+                    <TextInput
+                        placeholder="Email"
+                        value={email}
+                        onChangeText={setEmail}
+                    />
+                    <TextInput
+                        placeholder="Password"
+                        value={password}
+                        onChangeText={setPassword}
+                    />
+                    <Button title="Login" onPress={handleLogin} />
+                </View>
+            );
+        }
+        ```
+    </Tab>
+    <Tab value="sign-up">
+        ```tsx title="app/sign-up.tsx"
+        import { useState } from 'react';
+        import { View, TextInput, Button } from 'react-native';
+        import { authClient } from './auth-client';
+
+        export default function App() {
+            const [email, setEmail] = useState('');
+            const [name, setName] = useState('');
+            const [password, setPassword] = useState('');
+
+            const handleLogin = async () => {
+                await authClient.signUp.email({
+                        email,
+                        password,
+                        name
+                })
+            };
+
+            return (
+                <View>
+                    <TextInput
+                        placeholder="Name"
+                        value={name}
+                        onChangeText={setName}
+                    />
+                    <TextInput
+                        placeholder="Email"
+                        value={email}
+                        onChangeText={setEmail}
+                    />
+                    <TextInput
+                        placeholder="Password"
+                        value={password}
+                        onChangeText={setPassword}
+                    />
+                    <Button title="Login" onPress={handleLogin} />
+                </View>
+            );
+        }
+        ```
+    </Tab>
+</Tabs>
+
+For social sign-in, you can use the `authClient.signIn.social` method with the provider name and a callback URL.
+
+```tsx title="app/social-sign-in.tsx"
+
+import { Button } from 'react-native';
+
+export default function App() {
+    const handleLogin = async () => {
+        await authClient.signIn.social({
+            provider: 'google',
+            callbackURL: "/dashboard" // this will be converted to a deep link (eg. `myapp://dashboard`) on native
+        })
+    };
+    return <Button title="Login with Google" onPress={handleLogin} />;
+}
+```
+
+### Session
+
+Better Auth provides a `useSession` hook to access the current user's session in your app.
+
+```tsx title="src/App.tsx"
+
+import { authClient } from '@/lib/auth-client';
+
+export default function App() {
+    const { data: session } = authClient.useSession();
+
+    return <Text>Welcome, {data.user.name}</Text>;
+}
+```
+
+On native, the session data will be cached in SecureStore. This will allow you to remove the need for a loading spinner when the app is reloaded. You can disable this behavior by passing the `disableCache` option to the client.
+
+## Options
+
+
+**storage**: on native you can pass a storage option to the client to change the storage mechanism. By default, the client will use SecureStore.
+
+```ts title="src/auth-client.ts"
+import { createAuthClient } from 'better-auth/react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const authClient = createAuthClient({
+    basURL: 'http://localhost:8081',
+    storage: AsyncStorage
+});
+```
+
+**scheme**: scheme is used to deep link back to your app after a user has authenticated using oAuth providers. By default, Better Auth tries to read the scheme from the `app.json` file. If you need to override this, you can pass the scheme option to the client.
+
+```ts title="src/auth-client.ts"
+import { createAuthClient } from 'better-auth/react';
+
+const authClient = createAuthClient({
+    basURL: 'http://localhost:8081',
+    scheme: 'myapp'
+});
+```
+
+**disableCache**: By default, the client will cache the session data in SecureStore. You can disable this behavior by passing the `disableCache` option to the client.
+
+```ts title="src/auth-client.ts"
+import { createAuthClient } from 'better-auth/react';
+
+const authClient = createAuthClient({
+    basURL: 'http://localhost:8081',
+    disableCache: true
+});
+```
\ No newline at end of file
diff --git a/packages/expo/src/client.ts b/packages/expo/src/client.ts
index 91efb6425a..98757b531a 100644
--- a/packages/expo/src/client.ts
+++ b/packages/expo/src/client.ts
@@ -43,6 +43,7 @@ interface ExpoClientOptions {
 		getItem: (key: string) => string | null;
 	};
 	storagePrefix?: string;
+	disableCache?: boolean;
 }
 
 interface StoredCookie {
@@ -128,7 +129,10 @@ export const expoClient = (opts: ExpoClientOptions) => {
 							store?.notify("$sessionSignal");
 						}
 
-						if (context.request.url.toString().includes("/get-session")) {
+						if (
+							context.request.url.toString().includes("/get-session") &&
+							!opts.disableCache
+						) {
 							const data = context.data;
 							storage.setItem(localCacheName, JSON.stringify(data));
 						}