examples: update auth examples to use authCallback instead of authUrl

- auth-generate-jwt: Switch JavaScript and React clients to authCallback
- auth-request-token: Switch JavaScript and React clients to authCallback
- Fix ES module compatibility (__dirname) in both servers
- Change dotenv to load .env instead of .env.local
- Fix JWT response format (send as text, not JSON)

Author: GregHolmes

examples/auth-generate-jwt/javascript/src/script.ts

@@ -15,7 +15,15 @@ function handleConnect() {
     messageOne.textContent = '✓';
 
     const realtimeClient = new Ably.Realtime({
-      authUrl: config.AUTH_URL || 'http://localhost:3001/generate-jwt',
+      authCallback: async (_tokenParams, callback) => {
+        try {
+          const response = await fetch(config.AUTH_URL || 'http://localhost:3001/generate-jwt');
+          const token = await response.text();
+          callback(null, token);
+        } catch (error) {
+          callback(error instanceof Error ? error.message : String(error), null);
+        }
+      },
     });
 
     const messageTwo = document.getElementById('message-2');

examples/auth-generate-jwt/react/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import * as Ably from 'ably';
 import { AblyProvider, useConnectionStateListener } from 'ably/react';
 import './styles/styles.css';
@@ -59,7 +59,15 @@ export default function App() {
 
     // Initialize Ably client with JWT auth
     const realtimeClient = new Ably.Realtime({
-      authUrl: config.AUTH_URL || 'http://localhost:3001/generate-jwt',
+      authCallback: async (_tokenParams, callback) => {
+        try {
+          const response = await fetch(config.AUTH_URL || 'http://localhost:3001/generate-jwt');
+          const token = await response.text();
+          callback(null, token);
+        } catch (error) {
+          callback(error instanceof Error ? error.message : String(error), null);
+        }
+      },
     });
 
     // Update second message

examples/auth-generate-jwt/server/src/server.ts

@@ -1,9 +1,11 @@
 import express from 'express';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import dotenv from 'dotenv';
 import cors from 'cors';
 import crypto from 'crypto';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 dotenv.config({ path: path.resolve(__dirname, '../../../.env.local') });
 
 const app = express();
@@ -21,8 +23,6 @@ function base64urlEncode(str: string) {
 }
 
 app.get('/generate-jwt', async (_req, res) => {
-  console.log('1 - /generate-jwt endpoint called');
-
   const ablyApiKey = process.env.VITE_ABLY_KEY || '';
   const [apiKeyName, apiKeySecret] = ablyApiKey.split(':');
   try {
@@ -51,8 +51,7 @@ app.get('/generate-jwt', async (_req, res) => {
     const signature = base64urlEncode(hmac.digest('base64'));
     const ablyJwt = base64Header + '.' + base64Claims + '.' + signature;
 
-    console.log('2 - JWT generated: ', ablyJwt);
-    res.json(ablyJwt);
+    res.type('application/jwt').send(ablyJwt);
   } catch (error) {
     res.status(500).json({ error: 'Failed to generate token' });
   }

examples/auth-request-token/javascript/src/script.ts

@@ -15,7 +15,15 @@ function handleConnect() {
     messageOne.textContent = '✓';
 
     const realtimeClient = new Ably.Realtime({
-      authUrl: config.AUTH_URL || 'http://localhost:3001/request-token',
+      authCallback: async (_tokenParams, callback) => {
+        try {
+          const response = await fetch(config.AUTH_URL || 'http://localhost:3001/request-token');
+          const token = await response.text();
+          callback(null, token);
+        } catch (error) {
+          callback(error instanceof Error ? error.message : String(error), null);
+        }
+      },
     });
 
     const messageTwo = document.getElementById('message-2');

examples/auth-request-token/react/src/App.tsx

@@ -59,7 +59,15 @@ export default function App() {
 
     // Initialize Ably client with token auth
     const realtimeClient = new Ably.Realtime({
-      authUrl: config.AUTH_URL || 'http://localhost:3001/request-token',
+      authCallback: async (_tokenParams, callback) => {
+        try {
+          const response = await fetch(config.AUTH_URL || 'http://localhost:3001/request-token');
+          const token = await response.text();
+          callback(null, token);
+        } catch (error) {
+          callback(error instanceof Error ? error.message : String(error), null);
+        }
+      },
     });
 
     // Update second message

examples/auth-request-token/server/src/server.ts

@@ -1,9 +1,11 @@
 import express from 'express';
 import path from 'path';
+import { fileURLToPath } from 'url';
 import dotenv from 'dotenv';
 import cors from 'cors';
 import Ably from 'ably';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 dotenv.config({ path: path.resolve(__dirname, '../../../.env.local') });
 
 const app = express();
@@ -19,10 +21,8 @@ app.use(
 const ably = new Ably.Rest(process.env.VITE_ABLY_KEY || '');
 
 app.get('/request-token', async (_req, res) => {
-  console.log('1 - /request-token endpoint called');
   try {
     const tokenRequest = await ably.auth.requestToken({ clientId: 'example-client-id' });
-    console.log('2 - Token generated:', tokenRequest);
     res.json(tokenRequest);
   } catch (error) {
     res.status(500).json({ error: 'Failed to generate token' });

src/data/examples/index.ts

@@ -43,16 +43,6 @@ export const examples: Example[] = [
     metaTitle: `Authenticate with Ably Token`,
     metaDescription: `Learn how to request and use Ably Tokens for client authentication. Secure token-based auth for realtime applications.`,
   },
-  {
-    id: 'auth-request-token',
-    name: 'Request Token',
-    description: 'Request an Ably Token for authenticating users.',
-    products: ['auth'],
-    layout: 'single-horizontal',
-    visibleFiles: ['src/script.ts', 'App.tsx', 'Chat.tsx', 'Home.tsx', 'index.tsx'],
-    metaTitle: `Authenticate with Ably Token`,
-    metaDescription: `Learn how to request and use Ably Tokens for client authentication. Secure token-based auth for realtime applications.`,
-  },
   {
     id: 'chat-presence',
     name: 'Chat presence',