ably · jamiehenson · Apr 3, 2025 · Mar 19, 2025 · jamiehenson · Apr 1, 2025
diff --git a/examples/.env.example b/examples/.env.example
@@ -1,2 +1 @@
-VITE_PUBLIC_ABLY_KEY=
-NEXT_PUBLIC_ABLY_KEY=
+VITE_ABLY_KEY=
diff --git a/examples/auth-generate-jwt/javascript/README.md b/examples/auth-generate-jwt/javascript/README.md
@@ -54,7 +54,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -72,4 +72,4 @@ yarn run auth-generate-jwt-server
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/auth-generate-jwt/javascript/postcss.config.ts b/examples/auth-generate-jwt/javascript/postcss.config.ts
diff --git a/examples/auth-generate-jwt/javascript/tailwind.config.ts b/examples/auth-generate-jwt/javascript/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 
 const config: Config = {
   ...baseConfig,
+  content: ['./src/**/*.{js,ts,tsx}', './index.html'],
 };
 
 export default config;
diff --git a/examples/auth-generate-jwt/javascript/vite-env.d.ts b/examples/auth-generate-jwt/javascript/vite-env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMetaEnv {
-  readonly VITE_PUBLIC_ABLY_KEY: string;
+  readonly VITE_ABLY_KEY: string;
   // Add other environment variables here if needed
 }
 

diff --git a/examples/auth-generate-jwt/javascript/vite.config.ts b/examples/auth-generate-jwt/javascript/vite.config.ts
@@ -1,10 +1,7 @@
-import baseConfig from '../../vite.config';
 import { defineConfig } from 'vite';
-import dotenv from 'dotenv';
-import path from 'path';
-
-dotenv.config({ path: path.resolve(__dirname, '../../.env.local') });
+import baseConfig from '../../vite.config';
 
 export default defineConfig({
   ...baseConfig,
+  envDir: '../../',
 });
diff --git a/examples/auth-generate-jwt/react/README.md b/examples/auth-generate-jwt/react/README.md
@@ -54,7 +54,7 @@ cd /examples/
 mv .env.example .env.local
 ```
 
-7. In `.env.local` update the value of `VITE_PUBLIC_ABLY_KEY` to be your Ably API key.
+7. In `.env.local` update the value of `VITE_ABLY_KEY` to be your Ably API key.
 
 8. Install dependencies:
 
@@ -72,4 +72,4 @@ yarn run auth-generate-jwt-server
 
 ## Open in CodeSandbox
 
-In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_PUBLIC_ABLY_KEY` variable to use your Ably API key.
+In CodeSandbox, rename the `.env.example` file to `.env.local` and update the value of your `VITE_ABLY_KEY` variable to use your Ably API key.
diff --git a/examples/auth-generate-jwt/react/index.html b/examples/auth-generate-jwt/react/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ably Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/auth-generate-jwt/react/next.config.ts b/examples/auth-generate-jwt/react/next.config.ts
diff --git a/examples/auth-generate-jwt/react/package.json b/examples/auth-generate-jwt/react/package.json
@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
     "lint": "next lint"
   }
 }
diff --git a/examples/auth-generate-jwt/react/postcss.config.ts b/examples/auth-generate-jwt/react/postcss.config.ts
diff --git a/examples/auth-generate-jwt/react/src/App.tsx b/examples/auth-generate-jwt/react/src/App.tsx
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react';
+import * as Ably from 'ably';
+import { AblyProvider, useConnectionStateListener } from 'ably/react';
+import './styles/styles.css';
+
+interface StatusMessage {
+  id: number;
+  success: boolean;
+  message: string;
+}
+
+interface StatusMessagesProps {
+  messages: StatusMessage[];
+  setMessages: React.Dispatch<React.SetStateAction<StatusMessage[]>>;
+}
+
+const StatusMessages = ({ messages, setMessages }: StatusMessagesProps) => {
+  useConnectionStateListener((stateChange) => {
+    if (stateChange.current === 'connected') {
+      setMessages((prevMessages) => prevMessages.map((msg) => (msg.id === 3 ? { ...msg, success: true } : msg)));
+    }
+  });
+
+  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">
+        <div className="flex-grow text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
+          <p className="mb-8">The Ably client has been successfully initialized.</p>
+        </div>
+
+        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
+          {messages.map((msg) => (
+            <div key={msg.id} className="flex items-center gap-2">
+              <span>
+                {msg.success ? <span className="text-green-500">✓</span> : <span className="text-red-500">✗</span>}
+              </span>
+              {msg.message}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function App() {
+  const [client, setClient] = useState<Ably.Realtime | null>(null);
+  const [messages, setMessages] = useState<StatusMessage[]>([
+    { id: 1, success: false, message: 'Client requests JWT from server' },
+    { id: 2, success: false, message: 'Client initializes connection to Ably with generated JWT' },
+    { id: 3, success: false, message: 'Client is connected' },
+  ]);
+
+  const handleConnect = async () => {
+    // Navigate to authenticated page
+    window.location.href = '/authenticated';
+  };
+
+  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">
+        <div className="flex-grow text-center">
+          <h1 className="text-2xl font-bold mb-4">Authentication to Ably with a JWT</h1>
+          <p>Press the Connect button to initialize the client:</p>
+          <button onClick={handleConnect} className="uk-btn uk-btn-md uk-btn-primary mb-4 rounded">
+            Connect
+          </button>
+        </div>
+
+        <div className="mt-4 text-left text-sm h-40 overflow-y-auto">
+          {messages.map((msg, index) => (
+            <div key={msg.id} className="flex items-center gap-2">
+              <span>
+                {msg.success ? <span className="text-green-500">✓</span> : <span className="text-red-500">✗</span>}
+              </span>
+              {msg.message}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/auth-generate-jwt/react/src/app/authenticated/page.tsx b/examples/auth-generate-jwt/react/src/app/authenticated/page.tsx
diff --git a/examples/auth-generate-jwt/react/src/app/layout.tsx b/examples/auth-generate-jwt/react/src/app/layout.tsx
diff --git a/examples/auth-generate-jwt/react/src/app/page.tsx b/examples/auth-generate-jwt/react/src/app/page.tsx
diff --git a/examples/auth-generate-jwt/react/src/env.d.ts b/examples/auth-generate-jwt/react/src/env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ABLY_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/examples/auth-generate-jwt/react/src/index.tsx b/examples/auth-generate-jwt/react/src/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/...auth-generate-jwt/react/styles/styles.css → ...-generate-jwt/react/src/styles/styles.css b/...auth-generate-jwt/react/styles/styles.css → ...-generate-jwt/react/src/styles/styles.css