fix: enable multi-user chat with unique client IDs and message styling#16
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
rainbowFi
force-pushed
the
fix/multi-user-chat
branch
from
9906c62 to
510ba99
Compare
rainbowFi
force-pushed
the
fix/multi-user-chat
branch
from
510ba99 to
7e491c8
Compare
splindsay-92
requested changes
Apr 20, 2026
splindsay-92
left a comment
splindsay-92
left a comment
Collaborator
There was a problem hiding this comment.
Just some minor changes here please :)
| const tokenRequestData = await client.auth.createTokenRequest({ | ||
| clientId: 'ably-nextjs-demo', | ||
| }); | ||
| const tokenRequestData = await client.auth.createTokenRequest({ clientId }); |
Collaborator
There was a problem hiding this comment.
We should actually avoid ably token generation, instead preferring JWTs. As an example, see
|
|
||
| useEffect(() => { | ||
| const realtimeClient = new Ably.Realtime({ authUrl: '/api' }); | ||
| const clientId = `ably-chat-demo-user-${Math.random().toString(36).substring(2, 10)}`; |
Collaborator
There was a problem hiding this comment.
The PR description suggests clientId's are generated with crypto.randomUUID(), can we update the PR description please :)
rainbowFi
force-pushed
the
fix/multi-user-chat
branch
from
cfcabb5 to
8360c8c
Compare
…message styling Generate a unique client ID per token request instead of using a hardcoded value, so each browser tab gets its own identity. Distinguish sent vs received messages in the UI by comparing message.clientId against the current user's client ID and applying right-aligned styling for sent messages. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
useChatClient() now returns { clientId } instead of the full client
object.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Previously the auth route minted a new clientId via crypto.randomUUID() on every token request, so a user's identity changed on every token refresh and their own messages stopped being recognised as theirs. The browser now generates a clientId once per mount and passes it to /api as a query param. Matches the pattern used in nextjs-chat-app-netlify. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Lost inadvertently in 98d1291. The comment documents why the route opts out of Vercel's caching. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace createTokenRequest with signed JWTs as recommended by the Chat SDK. The route handler now signs claims with HS256 and returns application/jwt, and the client uses authCallback to consume it. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rainbowFi
force-pushed
the
fix/multi-user-chat
branch
from
c1ec4ea to
165b702
Compare
3 tasks
splindsay-92
requested changes
Apr 21, 2026
splindsay-92
left a comment
splindsay-92
left a comment
Collaborator
There was a problem hiding this comment.
Just one tiny comment, should be a quick fix :)
|
|
||
| const now = Math.floor(Date.now() / 1000); | ||
| const claims = { | ||
| 'x-ably-capability': JSON.stringify({ '*': ['*'] }), |
Collaborator
There was a problem hiding this comment.
Same here, can we set this to something like ({ 'chat:*': ['*'] }) please
Narrow the token capability from '*' (all channels) to 'chat-demo:*' which matches the Chat SDK's channel naming pattern for this room. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rainbowFi
added a commit
to ably-labs/nextjs-chat-app-netlify
that referenced
this pull request
Apr 22, 2026
Switch from Ably SDK's createTokenRequest to direct JWT signing using the jsonwebtoken library, matching the pattern in ably-labs/NextJS-chat-app#16 and the Chat SDK docs. - Auth function now signs a JWT with the Ably key secret instead of instantiating an Ably.Rest client - Chat component uses authCallback instead of authUrl to pass the JWT token string directly to the Ably realtime client Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
clientId: 'ably-nextjs-demo'in the token endpoint with a randomly generated ID per browser session so each tab gets a unique Ably identityBuilds on #15. See
BUG-BRIEFING.mdfor the full diagnosis.Test plan
http://localhost:3000in two browser tabs🤖 Generated with Claude Code