Add @speechmatics/auth package for JWT creation

.github/workflows/ci.yml

@@ -31,3 +31,5 @@ jobs:
         run: "pnpm lint:check && pnpm format:check"
       - name: Test
         run: pnpm -r test
+        env:
+          API_KEY: ${{ secrets.API_KEY }}

examples/nextjs/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@speechmatics/flow-client-react": "workspace:*",
     "@speechmatics/browser-audio-input-react": "workspace:*",
+    "@speechmatics/auth": "workspace:*",
     "@picocss/pico": "^2.0.6",
     "next": "15.0.1",
     "react": "19.0.0-rc-69d4b800-20241021",

examples/nextjs/src/app/actions.ts

@@ -0,0 +1,12 @@
+'use server';
+
+import { createSpeechmaticsJWT } from '@speechmatics/auth';
+
+export async function getJWT() {
+  const apiKey = process.env.API_KEY;
+  if (!apiKey) {
+    throw new Error('Please set the API_KEY environment variable');
+  }
+
+  return createSpeechmaticsJWT({ type: 'flow', apiKey, ttl: 60 });
+}

examples/nextjs/src/app/flow/Component.tsx

@@ -12,12 +12,11 @@ import { Status } from './Status';
 import { ErrorFallback } from '../../lib/components/ErrorFallback';
 import { OutputView } from './OutputView';
 import { useFlow, useFlowEventListener } from '@speechmatics/flow-client-react';
+import { getJWT } from '../actions';
 
 export default function Component({
-  jwt,
   personas,
 }: {
-  jwt: string;
   personas: Record<string, { name: string }>;
 }) {
   const { startConversation, sendAudio, endConversation } = useFlow();
@@ -47,8 +46,12 @@ export default function Component({
     }: { personaId: string; deviceId?: string }) => {
       try {
         setLoading(true);
+
+        const jwt = await getJWT();
+
         const audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
         setAudioContext(audioContext);
+
         await startConversation(jwt, {
           config: {
             template_id: personaId,
@@ -60,13 +63,14 @@ export default function Component({
             sample_rate: SAMPLE_RATE,
           },
         });
+
         const mediaStream = await startRecording(audioContext, deviceId);
         setMediaStream(mediaStream);
       } finally {
         setLoading(false);
       }
     },
-    [startConversation, jwt, startRecording],
+    [startConversation, startRecording],
   );
 
   const stopSession = useCallback(async () => {

examples/nextjs/src/app/flow/page.tsx

@@ -1,16 +1,12 @@
-import { fetchCredentials } from '@/lib/fetch-credentials';
-import Component from './Component';
 import { fetchPersonas, FlowProvider } from '@speechmatics/flow-client-react';
+import Component from './Component';
 
 export default async function Home() {
-  // Credentials here are being fetched when rendering the server component.
-  // You could instead define an API action to request it on the fly.
-  const creds = await fetchCredentials();
   const personas = await fetchPersonas();
 
   return (
     <FlowProvider appId="nextjs-example">
-      <Component jwt={creds.key_value} personas={personas} />
+      <Component personas={personas} />
     </FlowProvider>
   );
 }

examples/nodejs/batch-example.ts

@@ -1,3 +1,13 @@
+/**
+ * This file showcases the batch-client package being used in NodeJS.
+ *
+ * It will connect to the batch API and transcribe a file.
+ * To run this example, you will need to have a Speechmatics API key,
+ * which can be generated from the Speechmatics Portal: https://portal.speechmatics.com/api-keys
+ *
+ * NOTE: This script is run as an ES Module via tsx, letting us use top-level await.
+ * The library also works with CommonJS, but the code would need to be wrapped in an async function.
+ */
 import { BatchClient } from '@speechmatics/batch-client';
 import { openAsBlob } from 'node:fs';
 import dotenv from 'dotenv';
@@ -13,26 +23,31 @@ const client = new BatchClient({ apiKey, appId: 'nodeJS-example' });
 
 console.log('Sending file for transcription...');
 
-(async () => {
-  const blob = await openAsBlob('./example.wav');
-  const file = new File([blob], 'example.wav');
-
-  const response = await client.transcribe(
-    file,
-    {
-      transcription_config: {
-        language: 'en',
-      },
+const blob = await openAsBlob('./example.wav');
+const file = new File([blob], 'example.wav');
+
+const response = await client.transcribe(
+  // You can pass a File object...
+  file,
+  // ...or this:
+  // { data: blob, fileName: 'example.wav' },
+  // ...or this:
+  // {
+  //   url: 'https://github.com/speechmatics/speechmatics-js-sdk/raw/7e0083b830421541091730455f875be2a1984dc6/examples/nodejs/example.wav',
+  // },
+  {
+    transcription_config: {
+      language: 'en',
     },
-    'json-v2',
-  );
-
-  console.log('Transcription finished!');
-
-  console.log(
-    // Transcripts can be strings when the 'txt' format is chosen
-    typeof response === 'string'
-      ? response
-      : response.results.map((r) => r.alternatives?.[0].content).join(' '),
-  );
-})();
+  },
+  'json-v2',
+);
+
+console.log('Transcription finished!');
+
+console.log(
+  // Transcripts can be strings when the 'txt' format is chosen
+  typeof response === 'string'
+    ? response
+    : response.results.map((r) => r.alternatives?.[0].content).join(' '),
+);

examples/nodejs/package.json

@@ -3,20 +3,18 @@
   "version": "1.0.0",
   "private": "true",
   "description": "NodeJS examples showcasing the Speechmatics JS SDK",
-  "main": "index.js",
+  "type": "module",
   "scripts": {
-    "run:batch": "tsx batch-example.ts",
-    "run:real-time-file": "tsx real-time-file-example.ts"
+    "run:batch": "node --import tsx/esm batch-example.ts",
+    "run:real-time-file": "node --import tsx/esm real-time-file-example.ts"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
     "@speechmatics/batch-client": "workspace:*",
     "@speechmatics/real-time-client": "workspace:*",
+    "@speechmatics/auth": "workspace:*",
     "dotenv": "^16.4.5"
-  },
-  "devDependencies": {
-    "tsx": "^4.19.0"
   }
 }

examples/nodejs/real-time-file-example.ts

@@ -1,33 +1,27 @@
+/**
+ * This file showcases the real-time-client package being used in NodeJS.
+ *
+ * It will connect to the real-time API and transcribe a file in real-time.
+ * To run this example, you will need to have a Speechmatics API key,
+ * which can be generated from the Speechmatics Portal: https://portal.speechmatics.com/api-keys
+ *
+ * NOTE: This script is run as an ES Module via tsx, letting us use top-level await.
+ * The library also works with CommonJS, but the code would need to be wrapped in an async function.
+ */
 import { RealtimeClient } from '@speechmatics/real-time-client';
 import fs from 'node:fs';
-import path from 'node:path';
 import dotenv from 'dotenv';
+import { createSpeechmaticsJWT } from '@speechmatics/auth';
 
 dotenv.config();
 
-const client = new RealtimeClient();
-
-async function fetchJWT(): Promise<string> {
-  const apiKey = process.env.API_KEY;
-  if (!apiKey) {
-    throw new Error('Please set API_KEY in .env file');
-  }
-  const resp = await fetch('https://mp.speechmatics.com/v1/api_keys?type=rt', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${process.env.API_KEY}`,
-    },
-    body: JSON.stringify({
-      ttl: 3600,
-    }),
-  });
-  if (!resp.ok) {
-    throw new Error('Bad response from API', { cause: resp });
-  }
-  return (await resp.json()).key_value;
+const apiKey = process.env.API_KEY;
+if (!apiKey) {
+  throw new Error('Please set the API_KEY environment variable');
 }
 
+const client = new RealtimeClient();
+
 let finalText = '';
 
 client.addEventListener('receiveMessage', ({ data }) => {
@@ -46,30 +40,29 @@ client.addEventListener('receiveMessage', ({ data }) => {
   }
 });
 
-(async () => {
-  const jwt = await fetchJWT();
+const jwt = await createSpeechmaticsJWT({
+  type: 'rt',
+  apiKey,
+  ttl: 60, // 1 minute
+});
 
-  const fileStream = fs.createReadStream(
-    path.join(__dirname, './example.wav'),
-    {
-      highWaterMark: 4096, //avoid sending faster than realtime
-    },
-  );
+const fileStream = fs.createReadStream('./example.wav', {
+  highWaterMark: 4096, //avoid sending faster than realtime
+});
 
-  await client.start(jwt, {
-    transcription_config: {
-      language: 'en',
-      enable_partials: true,
-    },
-  });
+await client.start(jwt, {
+  transcription_config: {
+    language: 'en',
+    enable_partials: true,
+  },
+});
 
-  //send it
-  fileStream.on('data', (sample) => {
-    client.sendAudio(sample);
-  });
+//send it
+fileStream.on('data', (sample) => {
+  client.sendAudio(sample);
+});
 
-  //end the session
-  fileStream.on('end', () => {
-    client.stopRecognition();
-  });
-})();
+//end the session
+fileStream.on('end', () => {
+  client.stopRecognition();
+});

package.json

@@ -8,7 +8,6 @@
     "clean:deps": "rm -rf node_modules && pnpm -r exec rm -rf node_modules",
     "clean:builds": "pnpm -r exec rm -rf dist",
     "clean": "pnpm clean:deps && pnpm clean:builds",
-
     "format": "biome format --write .",
     "lint": "biome lint --write .",
 
@@ -30,6 +29,7 @@
     "rollup": "^4.21.2",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-esbuild": "^6.1.1",
+    "tsx": "^4.19.0",
     "typescript": "^5.5.4"
   }
 }

packages/auth/README.md

@@ -0,0 +1,71 @@
+# Speechmatics authentication 🔑
+
+Library for managing authentication with Speechmatics APIs
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Installation
+
+```sh
+npm i @speechmatics/auth
+```
+
+## Usage
+
+```typescript
+import { RealtimeClient } from '@speechmatics/real-time-client';
+import { createSpeechmaticsJWT } from '@speechmatics/auth';
+
+const client = new RealtimeClient();
+
+client.addEventListener('receiveMessage', ({ data }) => {
+  // Handle transcription messages
+});
+
+async function transcribeFileRealtime () {
+  const jwt = await createSpeechmaticsJWT({
+    type: 'rt',
+    apiKey,
+    ttl: 60, // 1 minute
+  });
+
+  const fileStream = fs.createReadStream(
+    path.join(__dirname, './example.wav'),
+    {
+      highWaterMark: 4096, //avoid sending faster than realtime
+    },
+  );
+
+  await client.start(jwt, {
+    transcription_config: {
+      language: 'en',
+      enable_partials: true,
+    },
+  });
+
+  //send it
+  fileStream.on('data', (sample) => {
+    client.sendAudio(sample);
+  });
+
+  //end the session
+  fileStream.on('end', () => {
+    client.stopRecognition();
+  });
+}
+
+transcribeFileRealtime();
+```
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request for any changes.
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.