Replace Ably token requests with JWT signing

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>

Author: rainbowFi

components/Chat.tsx

@@ -11,7 +11,18 @@ export default function Chat() {
 
   useEffect(() => {
     const clientId = `ably-chat-demo-user-${Math.random().toString(36).substring(2, 10)}`;
-    const realtimeClient = new Ably.Realtime({ authUrl: `/api/auth?clientId=${clientId}`, clientId });
+    const realtimeClient = new Ably.Realtime({
+      authCallback: async (_tokenParams, callback) => {
+        try {
+          const response = await fetch(`/api/auth?clientId=${clientId}`);
+          const token = await response.text();
+          callback(null, token);
+        } catch (error) {
+          callback(error as Ably.ErrorInfo, null);
+        }
+      },
+      clientId,
+    });
     const ablyChatClient = new ChatClient(realtimeClient);
 
     setChatClient(ablyChatClient);

netlify/functions/auth.ts

@@ -1,7 +1,6 @@
-import Ably from "ably";
+import jwt from 'jsonwebtoken';
 import { HandlerEvent } from '@netlify/functions';
 
-
 export async function handler(event: HandlerEvent) {
   if (!process.env.ABLY_API_KEY) {
     console.error('Missing ABLY_API_KEY environment variable.')
@@ -13,16 +12,21 @@ export async function handler(event: HandlerEvent) {
   }
 
   const clientId = event.queryStringParameters?.['clientId'] || 'NO_CLIENT_ID_PROVIDED';
-  const client = new Ably.Rest(process.env.ABLY_API_KEY);
-  const tokenRequest = await client.auth.createTokenRequest({
-    capability: {
-      '[chat]*': ['*'],
-    },
-    clientId: clientId,
-  });
+  const [keyName, keySecret] = process.env.ABLY_API_KEY.split(':');
+
+  const now = Math.floor(Date.now() / 1000);
+  const claims = {
+    'x-ably-capability': JSON.stringify({ '*': ['*'] }),
+    'x-ably-clientId': clientId,
+    iat: now,
+    exp: now + 3600,
+  };
+
+  const token = jwt.sign(claims, keySecret, { algorithm: 'HS256', keyid: keyName });
+
   return {
     statusCode: 200,
-    headers: { 'content-type': 'application/json' },
-    body: JSON.stringify(tokenRequest)
+    headers: { 'content-type': 'application/jwt' },
+    body: token,
   }
 }