Chore: Update package deps and correct token generation

- Update TypeScript configuration to support `react-jsx`.
- Add `"use client"` directive to React pages for client-side rendering.
- Update dependencies in `package-lock.json`, including `ably`, `eslint`, and `next.js` versions.
- Refactor Next.js configuration: replace `domains` with `remotePatterns` for image handling and adjust server package settings.
-Updated token generation to use the preferred JWT method.

Author: splindsay-92

app/authentication/page.tsx

@@ -2,6 +2,8 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
+'use client'
+
 import React from "react";
 import "../global.css";
 import dynamic from 'next/dynamic';

app/history/page.tsx

@@ -2,6 +2,8 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
+'use client'
+
 import React from "react";
 import "../global.css";
 import dynamic from 'next/dynamic';

app/presence/page.tsx

@@ -2,6 +2,8 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
+'use client'
+
 import React from "react";
 import "../global.css";
 import dynamic from 'next/dynamic';

app/pub-sub/page.tsx

@@ -2,6 +2,8 @@
  * Warning: Opening too many live preview tabs will slow down performance.
  * We recommend closing them after you're done.
  */
+'use client'
+
 import React from "react";
 import "../global.css";
 import dynamic from 'next/dynamic';

app/token/route.ts

@@ -1,13 +1,13 @@
 import { NextRequest, NextResponse } from 'next/server'
-import * as Ably from "ably";
+import jwt from 'jsonwebtoken';
 
 export async function POST(req: Request) {
   if (!process.env.ABLY_API_KEY) {
     return NextResponse.json({ errorMessage: `Missing ABLY_API_KEY environment variable.
         If you're running locally, please ensure you have a ./.env file with a value for ABLY_API_KEY=your-key.
-        If you're running in Netlify, make sure you've configured env variable ABLY_API_KEY. 
+        If you're running in Netlify, make sure you've configured env variable ABLY_API_KEY.
         Please see README.md for more details on configuring your Ably API Key.`,
-      },{ 
+      },{
         status: 500,
         headers: new Headers({
           "content-type": "application/json"
@@ -16,8 +16,38 @@ export async function POST(req: Request) {
   }
 
   const clientId = ( (await req.formData()).get('clientId')?.toString() ) || process.env.DEFAULT_CLIENT_ID || "NO_CLIENT_ID";
-  const client = new Ably.Rest(process.env.ABLY_API_KEY);
-  const tokenRequestData = await client.auth.createTokenRequest({ clientId: clientId });
-  console.log(tokenRequestData)
-  return NextResponse.json(tokenRequestData)
+
+  // Parse the API key to extract keyName and keySecret
+  // Ably API key format: appId.keyId:keySecret
+  const apiKey = process.env.ABLY_API_KEY;
+  const [keyName, keySecret] = apiKey.split(':');
+
+  if (!keyName || !keySecret) {
+    return NextResponse.json({
+      errorMessage: 'Invalid ABLY_API_KEY format. Expected format: appId.keyId:keySecret'
+    }, {
+      status: 500,
+      headers: new Headers({
+        "content-type": "application/json"
+      })
+    });
+  }
+
+  // Create JWT claims
+  const currentTime = Math.floor(Date.now() / 1000);
+  const claims = {
+    'x-ably-capability': JSON.stringify({ '*': ['*'] }), // Full capabilities - adjust as needed
+    'x-ably-clientId': clientId,
+    'iat': currentTime,
+    'exp': currentTime + 3600 // Token expires in 1 hour
+  };
+
+  // Sign the JWT with the key secret
+  const token = jwt.sign(claims, keySecret, {
+    keyid: keyName,
+    algorithm: 'HS256'
+  });
+
+  console.log('Generated JWT token for client:', clientId);
+  return NextResponse.json(token);
 }

next.config.js

@@ -4,14 +4,16 @@ const nextConfig = {
   // useEffect with no dependencies to ensure the function
   // is only run once and only run on the client.
   reactStrictMode: false,
-  swcMinify: true,
   images: {
     dangerouslyAllowSVG: true,
-    domains: ['static.ably.dev'],
-  },
-  experimental: {
-    serverComponentsExternalPackages: ['ably'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'static.ably.dev',
+      },
+    ],
   },
+  serverExternalPackages: ['ably'],
 };
 
 module.exports = nextConfig;