Overview
Client tokens separate trusted server credentials from untrusted frontend code.
Your backend authenticates the user using your own login/session system, then asks PulseGrid for a short-lived token describing that user's identifier and allowed channels. The browser receives only that token.
This is the recommended pattern for React, Vue, Angular, Vite, vanilla browser JavaScript and React Native/Expo-style clients.
Setup
1. Authenticate the user in your own backend.
2. Decide which PulseGrid channel slugs the user may access.
3. Create a short-lived token with identifier ID, optional label and allowed channels.
4. Return that token to the frontend.
5. Connect with pulsegrid/client.
6. Refresh the token through getToken when your backend issues a replacement.
7. Never send the project secret key to the client.
Code example
const token = await pg.tokens.create({
identifierId: "customer_123",
identifierLabel: "Customer 123",
allowedChannels: ["order-1042"],
expiresIn: 3600,
});import { connect } from "pulsegrid/client";
const room = await connect({
projectId: "YOUR_PROJECT_ID",
channel: "order-1042",
getToken: async () => {
const response = await fetch("/api/pulsegrid-token");
return response.json();
},
});
room.on("message", payload => console.log(payload));
room.send("Hello from the customer app");token = pg.tokens.create(
identifier_id="customer_123",
identifier_label="Customer 123",
allowed_channels=["order-1042"],
expires_in=3600,
)Notes
SDK 0.2.0 browser client supports reconnect, exponential backoff, heartbeat, token-refresh callbacks and an outgoing queue.
Client tokens are authorization credentials. Keep them short-lived and scope allowed_channels to what the user really needs.