> **Warning:** This page documents deprecated v3 subscribe patterns. For the current v4
> APIs, see /docs-markdown/reference/typescript/v4/realtime/subscribing.
> For archived v3 concepts, see
> /docs-markdown/reference/typescript/v3/realtime.

### Subscribing

To subscribe to data on the client (browser), you'll need to create a subscription token and use the `subscribe()` function which also requires `channel` and `topic` to be specified.

Your application uses the Inngest SDK to create a token, which is then used by the subscribe function to connect to the Inngest WebSocket server.

### Create a subscription token

Subscription tokens are required to securely establish a connection to the Inngest WebSocket server.

Your application must create tokens on the server and pass them to the client. You can create a new endpoint to generate a token, ensuring that the user is authorized to subscribe to a given channel and topics.

Here's an example of a server endpoint that creates a token, scoped to a user's channel and specific topics.

```ts {{ title: "Next.js - Server action" }}
// ex. /app/actions/get-subscribe-token.ts
"use server";

import { inngest } from "@/inngest/client";
// See the "Typed channels (recommended)" section above for more details:
import { userChannel } from "@/inngest/functions/helloWorld";
import { getSubscriptionToken, Realtime } from "@inngest/realtime";
import { getSession } from "@/app/lib/session"; // this could be any auth provider

export type UserChannelToken = Realtime.Token<typeof userChannel, ["ai"]>;

export async function fetchRealtimeSubscriptionToken(): Promise<UserChannelToken> {
  const { userId } = await getSession();

  // This creates a token using the Inngest API that is bound to the channel and topic:
  const token = await getSubscriptionToken(inngest, {
    channel: `user:${userId}`,
    topics: ["ai"],
  });

  return token;
}
```

```ts {{ title: "Express" }}
import { inngest } from "./inngest/client";
import { getSubscriptionToken } from "@inngest/realtime";
import { getSession } from "src/session"; // this could be any auth provider

app.post("/api/get-subscribe-token", async (req, res) => {
  const { userId } = getSession(req)

  // This creates a token using the Inngest API that is bound to the channel and topic:
  const token = await getSubscriptionToken(inngest, {
    channel: `user:${userId}`,
    topics: ["ai"],
  })

  res.json({ token })
})
```

```py {{ title: "Python - Fast API" }}
@app.get("/api/get_subscription_token")
async def get_realtime_token():
# Here, you can get params from the request to;
user_id = session["user_id"]
# - Authorize what the user is allowed to subscribe to
# - Allow the client to specify what topics they want to subscribe to
return await realtime.get_subscription_token(
    client=inngest_client,
    channel=f"user:{user_id}",
    topics=["messages"],
)
```

### Subscribe to a channel

Once you have a token, you can subscribe to a channel by calling the `subscribe` function with the token. You can also subscribe using the `useInngestSubscription` React hook. Read more about the [archived v3 React hook docs here](/docs-markdown/reference/typescript/v3/realtime/react-hooks).

```ts {{ title: "React hook - useInngestSubscription()" }}
// ex: ./app/page.tsx
"use client";

// ℹ️ Import the hook from the hooks sub-package:
import { useInngestSubscription } from "@inngest/realtime/hooks";
import { useState } from "react";
import { fetchRealtimeSubscriptionToken } from "./actions";

export default function Home() {
  // The hook automatically fetches the token from the server.
  // The server checks that the user is authorized to subscribe to
  // the channel and topic, then returns a token:
  const { data, error, freshData, state, latestData } = useInngestSubscription({
    refreshToken: fetchRealtimeSubscriptionToken,
  });

  return (
    <div>
      {data.map((message, i) => (
        <div key={i}>{message.data}</div>
      ))}
    </div>
  );
}
```

```ts {{ title: "Basic subscribe" }}
import { subscribe } from "@inngest/realtime";

// The server checks that the user is authorized to subscribe to
// the channel and topic, then returns a token:
const { token } = await fetch("/api/get-subscribe-token", {
  method: "POST",
  credentials: "include",
}).then(res => res.json());

// The token is bound to the channel and topic, so we can
// subscribe to the channel and topic:
const stream = await subscribe(token);

for await (const message of stream) {
  console.log(message)
}
```

That's all you need to do to subscribe to a channel from the client!