Initial setup

Author: SarahSoutoul

docs/reference/hooks/use-auth.mdx

@@ -5,3 +5,89 @@ sdk: astro, chrome-extension, expo, nextjs, react, react-router, remix, tanstack
 ---
 
 <Typedoc src="clerk-react/use-auth" />
+
+## 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>

docs/reference/hooks/use-sign-in.mdx

@@ -5,3 +5,49 @@ sdk: chrome-extension, expo, nextjs, react, react-router, remix, tanstack-react-
 ---
 
 <Typedoc src="clerk-react/use-sign-in" />
+
+## Examples
+
+### Check the current state of a sign-in
+
+The following example uses the `useSignIn()` hook to access the [`SignIn`](/docs/reference/javascript/sign-in) object, which contains the current sign-in attempt status and methods to create a new sign-in attempt. The `isLoaded` property is used to handle the loading state.
+
+<If sdk="react">
+     ```tsx {{ filename: 'src/pages/SignInPage.tsx' }}
+  import { useSignIn } from '@clerk/clerk-react'
+ 
+  export default function SignInPage() {
+    const { isLoaded, signIn } = useSignIn()
+ 
+    if (!isLoaded) {
+      // Handle loading state
+      return null
+    }
+ 
+    return <div>The current sign-in attempt status is {signIn?.status}.</div>
+  }
+  ```
+</If>
+
+<If sdk="nextjs">
+    ```tsx {{ filename: 'app/sign-in/page.tsx' }}
+        'use client';
+
+        import { useSignIn } from '@clerk/nextjs';
+
+        export default function SignInPage() {
+        const { isLoaded, signIn } = useSignIn();
+
+        if (!isLoaded) {
+            // Handle loading state
+            return null;
+        }
+
+        return <div>The current sign-in attempt status is {signIn?.status}.</div>;
+        }
+    ``` 
+</If>
+
+### Create a custom sign-in flow with `useSignIn()`
+
+The `useSignIn()` hook can also be used to build fully custom sign-in flows, if Clerk's prebuilt components don't meet your specific needs or if you require more control over the authentication flow. Different sign-in flows include email and password, email and phone codes, email links, and multifactor (MFA). To learn more about using the `useSignIn()` hook to create custom flows, see the [custom flow guides](/docs/guides/development/custom-flows/overview).