Updated the overview and nav

Author: D-K-P

docs/docs.json

@@ -122,10 +122,10 @@
                 "group": "React hooks (frontend)",
                 "pages": [
                   "realtime/react-hooks/overview",
+                  "realtime/react-hooks/triggering",
                   "realtime/react-hooks/realtime",
                   "realtime/react-hooks/metadata",
-                  "realtime/react-hooks/streams",
-                  "realtime/react-hooks/triggering"
+                  "realtime/react-hooks/streams"
                 ]
               },
               {

docs/realtime/react-hooks/overview.mdx

@@ -30,7 +30,7 @@ yarn install @trigger.dev/react-hooks
 
 ## Authentication
 
-All hooks accept an optional last argument `options` that accepts an `accessToken` param, which should be a valid Public Access Token. Learn more about [generating tokens in our authentication guide](/realtime/auth).
+All hooks require authentication with a Public Access Token. Pass the token via the `accessToken` option:
 
 ```tsx
 import { useRealtimeRun } from "@trigger.dev/react-hooks";
@@ -43,204 +43,24 @@ export function MyComponent({
   publicAccessToken: string;
 }) {
   const { run, error } = useRealtimeRun(runId, {
-    accessToken: publicAccessToken, // This is required
+    accessToken: publicAccessToken,
     baseURL: "https://your-trigger-dev-instance.com", // optional, only needed if you are self-hosting Trigger.dev
   });
 
   // ...
 }
 ```
 
-### TriggerAuthContext
+Learn more about [generating and managing tokens in our authentication guide](/realtime/auth).
 
-Alternatively, you can use our `TriggerAuthContext` provider to avoid passing the token to every hook:
-
-```tsx
-import { TriggerAuthContext } from "@trigger.dev/react-hooks";
-
-export function SetupTrigger({ publicAccessToken }: { publicAccessToken: string }) {
-  return (
-    <TriggerAuthContext.Provider value={{ accessToken: publicAccessToken }}>
-      <MyComponent />
-    </TriggerAuthContext.Provider>
-  );
-}
-```
-
-Now children components can use the hooks to interact with the Trigger.dev API. If you are self-hosting Trigger.dev, you can provide the `baseURL` to the `TriggerAuthContext` provider.
-
-```tsx
-import { TriggerAuthContext } from "@trigger.dev/react-hooks";
-
-export function SetupTrigger({ publicAccessToken }: { publicAccessToken: string }) {
-  return (
-    <TriggerAuthContext.Provider
-      value={{
-        accessToken: publicAccessToken,
-        baseURL: "https://your-trigger-dev-instance.com",
-      }}
-    >
-      <MyComponent />
-    </TriggerAuthContext.Provider>
-  );
-}
-```
-
-### Next.js and client components
-
-If you are using Next.js with the App Router, you have to make sure the component that uses the `TriggerAuthContext` is a client component. So for example, the following code will not work:
-
-```tsx app/page.tsx
-import { TriggerAuthContext } from "@trigger.dev/react-hooks";
-
-export default function Page() {
-  return (
-    <TriggerAuthContext.Provider value={{ accessToken: "your-access-token" }}>
-      <MyComponent />
-    </TriggerAuthContext.Provider>
-  );
-}
-```
-
-That's because `Page` is a server component and the `TriggerAuthContext.Provider` uses client-only react code. To fix this, wrap the `TriggerAuthContext.Provider` in a client component:
-
-```ts components/TriggerProvider.tsx
-"use client";
-
-import { TriggerAuthContext } from "@trigger.dev/react-hooks";
-
-export function TriggerProvider({
-  accessToken,
-  children,
-}: {
-  accessToken: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <TriggerAuthContext.Provider
-      value={{
-        accessToken,
-      }}
-    >
-      {children}
-    </TriggerAuthContext.Provider>
-  );
-}
-```
-
-### Passing the token to the frontend
-
-Techniques for passing the token to the frontend vary depending on your setup. Here are a few ways to do it for different setups:
-
-#### Next.js App Router
-
-If you are using Next.js with the App Router and you are triggering a task from a server action, you can use cookies to store and pass the token to the frontend.
-
-```tsx actions/trigger.ts
-"use server";
-
-import { tasks } from "@trigger.dev/sdk/v3";
-import type { exampleTask } from "@/trigger/example";
-import { redirect } from "next/navigation";
-import { cookies } from "next/headers";
-
-export async function startRun() {
-  const handle = await tasks.trigger<typeof exampleTask>("example", { foo: "bar" });
-
-  // Set the auto-generated publicAccessToken in a cookie
-  cookies().set("publicAccessToken", handle.publicAccessToken); // ✅ this token only has access to read this run
-
-  redirect(`/runs/${handle.id}`);
-}
-```
-
-Then in the `/runs/[id].tsx` page, you can read the token from the cookie and pass it to the `TriggerProvider`.
-
-```tsx pages/runs/[id].tsx
-import { TriggerProvider } from "@/components/TriggerProvider";
-
-export default function RunPage({ params }: { params: { id: string } }) {
-  const publicAccessToken = cookies().get("publicAccessToken");
-
-  return (
-    <TriggerProvider accessToken={publicAccessToken}>
-      <RunDetails id={params.id} />
-    </TriggerProvider>
-  );
-}
-```
-
-Instead of a cookie, you could also use a query parameter to pass the token to the frontend:
-
-```tsx actions/trigger.ts
-import { tasks } from "@trigger.dev/sdk/v3";
-import type { exampleTask } from "@/trigger/example";
-import { redirect } from "next/navigation";
-import { cookies } from "next/headers";
-
-export async function startRun() {
-  const handle = await tasks.trigger<typeof exampleTask>("example", { foo: "bar" });
-
-  redirect(`/runs/${handle.id}?publicAccessToken=${handle.publicAccessToken}`);
-}
-```
-
-And then in the `/runs/[id].tsx` page:
-
-```tsx pages/runs/[id].tsx
-import { TriggerProvider } from "@/components/TriggerProvider";
-
-export default function RunPage({
-  params,
-  searchParams,
-}: {
-  params: { id: string };
-  searchParams: { publicAccessToken: string };
-}) {
-  return (
-    <TriggerProvider accessToken={searchParams.publicAccessToken}>
-      <RunDetails id={params.id} />
-    </TriggerProvider>
-  );
-}
-```
-
-Another alternative would be to use a server-side rendered page to fetch the token and pass it to the frontend:
-
-<CodeGroup>
-
-```tsx pages/runs/[id].tsx
-import { TriggerProvider } from "@/components/TriggerProvider";
-import { generatePublicAccessToken } from "@/trigger/auth";
-
-export default async function RunPage({ params }: { params: { id: string } }) {
-  // This will be executed on the server only
-  const publicAccessToken = await generatePublicAccessToken(params.id);
-
-  return (
-    <TriggerProvider accessToken={publicAccessToken}>
-      <RunDetails id={params.id} />
-    </TriggerProvider>
-  );
-}
-```
+## Available hooks
 
-```tsx trigger/auth.ts
-import { auth } from "@trigger.dev/sdk/v3";
-
-export async function generatePublicAccessToken(runId: string) {
-  return auth.createPublicToken({
-    scopes: {
-      read: {
-        runs: [runId],
-      },
-    },
-    expirationTime: "1h",
-  });
-}
-```
+We provide several categories of hooks:
 
-</CodeGroup>
+- **[Triggering hooks](/realtime/react-hooks/triggering)** - Trigger tasks from your frontend application
+- **[Realtime hooks](/realtime/react-hooks/realtime)** - Subscribe to runs, batches, and streams using real-time updates
+- **[Metadata hooks](/realtime/react-hooks/metadata)** - Subscribe to run metadata updates in React components
+- **[SWR hooks](#swr-hooks)** - Fetch data once and cache it using SWR
 
 ## SWR vs Realtime hooks
 
@@ -252,15 +72,6 @@ We offer two "styles" of hooks: SWR and Realtime. The SWR hooks use the [swr](ht
   we recommend using the Realtime hooks for most use-cases.
 </Note>
 
-## Available hooks
-
-We provide several categories of hooks:
-
-- **[Realtime hooks](/realtime/react-hooks/realtime)** - Subscribe to runs, batches, and streams using real-time updates
-- **[Metadata hooks](/realtime/react-hooks/metadata)** - Subscribe to run metadata updates in React components
-- **[Triggering hooks](/realtime/react-hooks/triggering)** - Trigger tasks from your frontend application
-- **[SWR hooks](#swr-hooks)** - Fetch data once and cache it using SWR
-
 ## SWR Hooks
 
 ### useRun