diff --git a/examples/auth-generate-jwt/javascript/src/config.ts b/examples/auth-generate-jwt/javascript/src/config.ts
new file mode 100644
index 0000000000..ce58979c72
--- /dev/null
+++ b/examples/auth-generate-jwt/javascript/src/config.ts
@@ -0,0 +1,3 @@
+export const config = {
+  AUTH_URL: import.meta.env.VITE_AUTH_JWT_URL as string,
+};
diff --git a/examples/auth-generate-jwt/javascript/src/script.ts b/examples/auth-generate-jwt/javascript/src/script.ts
index 8e22e7d33b..4b7b51edb1 100644
--- a/examples/auth-generate-jwt/javascript/src/script.ts
+++ b/examples/auth-generate-jwt/javascript/src/script.ts
@@ -1,5 +1,6 @@
 import * as Ably from 'ably';
 import './styles.css';
+import { config } from './config';
 
 const connectButton = document.querySelector('button') as HTMLButtonElement;
 
@@ -14,7 +15,7 @@ function handleConnect() {
     messageOne.textContent = '✓';
 
     const realtimeClient = new Ably.Realtime({
-      authUrl: 'http://localhost:3001/generate-jwt',
+      authUrl: config.AUTH_URL || 'http://localhost:3001/generate-jwt',
     });
 
     const messageTwo = document.getElementById('message-2');
diff --git a/examples/auth-generate-jwt/javascript/vite-env.d.ts b/examples/auth-generate-jwt/javascript/vite-env.d.ts
index 449e61aa75..ed602dc054 100644
--- a/examples/auth-generate-jwt/javascript/vite-env.d.ts
+++ b/examples/auth-generate-jwt/javascript/vite-env.d.ts
@@ -1,5 +1,6 @@
 interface ImportMetaEnv {
   readonly VITE_ABLY_KEY: string;
+  readonly VITE_AUTH_URL: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/auth-generate-jwt/react/src/App.tsx b/examples/auth-generate-jwt/react/src/App.tsx
index 110c1a55d9..8ed3fe2664 100644
--- a/examples/auth-generate-jwt/react/src/App.tsx
+++ b/examples/auth-generate-jwt/react/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import * as Ably from 'ably';
 import { AblyProvider, useConnectionStateListener } from 'ably/react';
 import './styles/styles.css';
+import { config } from './config';
 
 interface StatusMessage {
   id: number;
@@ -53,10 +54,28 @@ export default function App() {
   ]);
 
   const handleConnect = async () => {
-    // Navigate to authenticated page
-    window.location.href = '/authenticated';
+    // Update first message
+    setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === 1 ? { ...msg, success: true } : msg)));
+
+    // Initialize Ably client with JWT auth
+    const realtimeClient = new Ably.Realtime({
+      authUrl: config.AUTH_URL || 'http://localhost:3001/generate-jwt',
+    });
+
+    // Update second message
+    setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === 2 ? { ...msg, success: true } : msg)));
+
+    setClient(realtimeClient);
   };
 
+  if (client) {
+    return (
+      <AblyProvider client={client}>
+        <StatusMessages messages={messages} setMessages={setMessages} />
+      </AblyProvider>
+    );
+  }
+
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
       <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
diff --git a/examples/auth-generate-jwt/react/src/config.ts b/examples/auth-generate-jwt/react/src/config.ts
new file mode 100644
index 0000000000..ce58979c72
--- /dev/null
+++ b/examples/auth-generate-jwt/react/src/config.ts
@@ -0,0 +1,3 @@
+export const config = {
+  AUTH_URL: import.meta.env.VITE_AUTH_JWT_URL as string,
+};
diff --git a/examples/auth-generate-jwt/react/src/env.d.ts b/examples/auth-generate-jwt/react/src/env.d.ts
index 7421e8e743..ada17315d3 100644
--- a/examples/auth-generate-jwt/react/src/env.d.ts
+++ b/examples/auth-generate-jwt/react/src/env.d.ts
@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_ABLY_KEY: string;
+  readonly VITE_AUTH_JWT_URL: string;
 }
 
 interface ImportMeta {
diff --git a/examples/auth-request-token/javascript/src/config.ts b/examples/auth-request-token/javascript/src/config.ts
new file mode 100644
index 0000000000..651f0a42de
--- /dev/null
+++ b/examples/auth-request-token/javascript/src/config.ts
@@ -0,0 +1,3 @@
+export const config = {
+  AUTH_URL: import.meta.env.VITE_AUTH_TOKEN_URL as string,
+};
diff --git a/examples/auth-request-token/javascript/src/script.ts b/examples/auth-request-token/javascript/src/script.ts
index c7adc27b32..03a0ce5658 100644
--- a/examples/auth-request-token/javascript/src/script.ts
+++ b/examples/auth-request-token/javascript/src/script.ts
@@ -1,5 +1,6 @@
 import * as Ably from 'ably';
 import './styles.css';
+import { config } from './config';
 
 const connectButton = document.querySelector('button') as HTMLButtonElement;
 
@@ -14,7 +15,7 @@ function handleConnect() {
     messageOne.textContent = '✓';
 
     const realtimeClient = new Ably.Realtime({
-      authUrl: 'http://localhost:3001/request-token',
+      authUrl: config.AUTH_URL || 'http://localhost:3001/request-token',
     });
 
     const messageTwo = document.getElementById('message-2');
diff --git a/examples/auth-request-token/javascript/vite-env.d.ts b/examples/auth-request-token/javascript/vite-env.d.ts
index 449e61aa75..8affe3e165 100644
--- a/examples/auth-request-token/javascript/vite-env.d.ts
+++ b/examples/auth-request-token/javascript/vite-env.d.ts
@@ -1,5 +1,6 @@
 interface ImportMetaEnv {
   readonly VITE_ABLY_KEY: string;
+  readonly VITE_AUTH_TOKEN_URL: string;
   // Add other environment variables here if needed
 }
 
diff --git a/examples/auth-request-token/react/src/App.tsx b/examples/auth-request-token/react/src/App.tsx
index 9e7c99d768..489639569b 100644
--- a/examples/auth-request-token/react/src/App.tsx
+++ b/examples/auth-request-token/react/src/App.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import * as Ably from 'ably';
 import { AblyProvider, useConnectionStateListener } from 'ably/react';
 import './styles/styles.css';
+import { config } from './config';
 
 interface StatusMessage {
   id: number;
@@ -53,10 +54,28 @@ export default function App() {
   ]);
 
   const handleConnect = async () => {
-    // Navigate to authenticated page
-    window.location.href = '/authenticated';
+    // Update first message
+    setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === 1 ? { ...msg, success: true } : msg)));
+
+    // Initialize Ably client with token auth
+    const realtimeClient = new Ably.Realtime({
+      authUrl: config.AUTH_URL || 'http://localhost:3001/request-token',
+    });
+
+    // Update second message
+    setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === 2 ? { ...msg, success: true } : msg)));
+
+    setClient(realtimeClient);
   };
 
+  if (client) {
+    return (
+      <AblyProvider client={client}>
+        <StatusMessages messages={messages} setMessages={setMessages} />
+      </AblyProvider>
+    );
+  }
+
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
       <div className="bg-white shadow-md rounded-md p-8 w-[50%] flex flex-col">
diff --git a/examples/auth-request-token/react/src/config.ts b/examples/auth-request-token/react/src/config.ts
new file mode 100644
index 0000000000..651f0a42de
--- /dev/null
+++ b/examples/auth-request-token/react/src/config.ts
@@ -0,0 +1,3 @@
+export const config = {
+  AUTH_URL: import.meta.env.VITE_AUTH_TOKEN_URL as string,
+};
diff --git a/examples/auth-request-token/react/src/env.d.ts b/examples/auth-request-token/react/src/env.d.ts
index 7421e8e743..1fc76da9eb 100644
--- a/examples/auth-request-token/react/src/env.d.ts
+++ b/examples/auth-request-token/react/src/env.d.ts
@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_ABLY_KEY: string;
+  readonly VITE_AUTH_TOKEN_URL: string;
 }
 
 interface ImportMeta {
diff --git a/src/components/Examples/ExamplesRenderer.tsx b/src/components/Examples/ExamplesRenderer.tsx
index 2bfc0766e4..847190d81d 100644
--- a/src/components/Examples/ExamplesRenderer.tsx
+++ b/src/components/Examples/ExamplesRenderer.tsx
@@ -73,6 +73,8 @@ const ExamplesRenderer = ({
     Object.entries(files).forEach(([languageKey, languageFiles]) => {
       result[languageKey as LanguageKey] = updateAblyConnectionKey(languageFiles, apiKey, {
         NAME: getRandomChannelName(), // Use CHANNEL_NAME as env var key
+        AUTH_TOKEN_URL: process.env.VITE_AUTH_TOKEN_URL || '',
+        AUTH_JWT_URL: process.env.VITE_AUTH_JWT_URL || '',
       });
     });
     return result;
diff --git a/src/data/examples/index.ts b/src/data/examples/index.ts
index ce75f4d31a..67325443b8 100644
--- a/src/data/examples/index.ts
+++ b/src/data/examples/index.ts
@@ -3,6 +3,26 @@ import { Example } from './types';
 export const DEFAULT_EXAMPLE_LANGUAGES = ['javascript', 'react'];
 
 export const examples: Example[] = [
+  {
+    id: 'auth-generate-jwt',
+    name: 'Generate JWT',
+    description: 'Generate a JSON Web Token (JWT) for authenticating users.',
+    products: ['auth'],
+    layout: 'single-horizontal',
+    visibleFiles: ['src/script.ts', 'App.tsx', 'Chat.tsx', 'Home.tsx', 'index.tsx'],
+    metaTitle: `Build chat history with Ably's Chat SDK`,
+    metaDescription: `Implement chat room history with message persistence and replay. Learn how to store, retrieve, and sync past messages in realtime apps.`,
+  },
+  {
+    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',