Ensure all hooks are using typedocs + have code examples for each supported SDK

docs/reference/hooks/use-auth.mdx

@@ -1,7 +1,283 @@
 ---
 title: useAuth()
 description: Access and manage authentication state in your application with Clerk's useAuth() hook.
-sdk: astro, chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: astro, chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-auth" />
+The `useAuth()` hook provides access to the current user's authentication state and methods to manage the active session.
+
+> [!NOTE]
+> To access auth data server-side, see the [`Auth` object reference doc](/docs/reference/backend/types/auth-object).
+
+<If sdk="nextjs">
+  By default, Next.js opts all routes into static rendering. If you need to opt a route or routes into dynamic rendering because you need to access the authentication data at request time, you can create a boundary by passing the `dynamic` prop to `<ClerkProvider>`. See the [guide on rendering modes](/docs/guides/development/rendering-modes) for more information, including code examples.
+</If>
+
+## Example
+
+The following example demonstrates how to use the `useAuth()` hook to access the current auth state, like whether the user is signed in or not. It also includes a basic example for using the `getToken()` method to retrieve a session token for fetching data from an external resource.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/ExternalDataPage.tsx' }}
+  import { useAuth } from '@clerk/clerk-react'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  'use client'
+
+  import { useAuth } from '@clerk/nextjs'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useAuth } from '@clerk/react-router'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useAuth } from '@clerk/chrome-extension'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useAuth } from '@clerk/tanstack-react-start'
+  import { createFileRoute } from '@tanstack/react-router'
+
+  export const Route = createFileRoute('/')({
+    component: ExternalDataPage,
+  })
+
+  function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <div>
+        <p>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </p>
+        <button onClick={fetchExternalData}>Fetch Data</button>
+      </div>
+    )
+  }
+  ```
+</If>
+
+{/* <If sdk="astro">
+
+
+  </If> */}
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/external-data/page.tsx' }}
+  import { useAuth } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity, ScrollView } from 'react-native'
+
+  export default function ExternalDataPage() {
+    const { userId, sessionId, getToken, isLoaded, isSignedIn } = useAuth()
+
+    const fetchExternalData = async () => {
+      const token = await getToken()
+
+      // Fetch data from an external API
+      const response = await fetch('https://api.example.com/data', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      return response.json()
+    }
+
+    if (!isLoaded) {
+      return <div>Loading...</div>
+    }
+
+    if (!isSignedIn) {
+      return <div>Sign in to view this page</div>
+    }
+
+    return (
+      <View>
+        <Text>
+          Hello, {userId}! Your current active session is {sessionId}.
+        </Text>
+        <TouchableOpacity onPress={fetchExternalData}>
+          <Text>Fetch Data</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>
+
+## Parameters
+
+<Typedoc src="clerk-react/use-auth-options" />
+
+## Returns
+
+<Typedoc src="types/use-auth-return" />
+
+

docs/reference/hooks/use-clerk.mdx

@@ -1,7 +1,99 @@
 ---
 title: useClerk()
 description: Access and manage the Clerk object in your React application with Clerk's useClerk() hook.
-sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-start
+sdk: chrome-extension, expo, nextjs, react, react-router, tanstack-react-start
 ---
 
-<Typedoc src="clerk-react/use-clerk" />
+> [!WARNING]
+> This hook should only be used for advanced use cases, such as building a completely custom OAuth flow or as an escape hatch to access to the `Clerk` object.
+
+The `useClerk()` hook provides access to the [`Clerk`](/docs/reference/javascript/clerk) object, allowing you to build alternatives to any Clerk Component.
+
+## Returns
+
+The `useClerk()` hook returns the `Clerk` object, which includes all the methods and properties listed in the [`Clerk` reference](/docs/reference/javascript/clerk).
+
+## Example
+
+The following example uses the `useClerk()` hook to access the `clerk` object. The `clerk` object is used to call the [`openSignIn()`](/docs/reference/javascript/clerk#sign-in) method to open the sign-in modal.
+
+<If sdk="react">
+  ```tsx {{ filename: 'src/pages/Home.tsx' }}
+  import { useClerk } from '@clerk/clerk-react'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+  ```tsx {{ filename: 'app/home/page.tsx' }}
+  'use client'
+
+  import { useClerk } from '@clerk/nextjs'
+
+  export default function HomePage() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="react-router">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/react-router'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="chrome-extension">
+  ```tsx {{ filename: 'src/routes/page.tsx' }}
+  import { useClerk } from '@clerk/chrome-extension'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="tanstack-react-start">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/tanstack-react-start'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return <button onClick={() => clerk.openSignIn({})}>Sign in</button>
+  }
+  ```
+</If>
+
+<If sdk="expo">
+  ```tsx {{ filename: 'app/routes/page.tsx' }}
+  import { useClerk } from '@clerk/clerk-expo'
+  import { Text, View, TouchableOpacity } from 'react-native'
+
+  export default function Home() {
+    const clerk = useClerk()
+
+    return (
+      <View>
+        <TouchableOpacity onPress={() => clerk.openSignIn({})}>
+          <Text>Sign in</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+  ```
+</If>