Documentation Index
Fetch the complete documentation index at: https://mintlify.com/AssemblyAI/realtime-transcription-browser-js-example/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The application uses temporary tokens instead of exposing your AssemblyAI API key directly in the browser. This security model protects your credentials while enabling client-side real-time transcription.Why Temporary Tokens?
Exposing API keys in browser JavaScript creates serious security risks:Security Risks of Client-Side API Keys
- Keys are visible in browser DevTools and page source
- Keys can be extracted and used by unauthorized parties
- Compromised keys require rotation and updating all deployments
- No way to revoke access for individual users or sessions
- Time-Limited Access: Tokens expire automatically (configurable from 1 to 600 seconds)
- Single-Use: Each browser session gets a fresh token
- Revocable: Expired tokens are immediately invalid
- Zero Key Exposure: Your API key never leaves the server
Server-Side Token Generation
The Express server generates tokens using AssemblyAI’s token endpoint:tokenGenerator.js
The API key is stored in the
.env file and accessed via process.env.ASSEMBLYAI_API_KEY. It’s sent to AssemblyAI’s token endpoint but never transmitted to the browser.Token Expiration
Tokens are generated with a configurable expiration time:server.js
This example uses a 60-second expiration. The maximum allowed value is 600 seconds (10 minutes). Choose a duration that balances security with user experience.
Choosing an Expiration Time
- Short durations (60-120s): Better security, but may interrupt long conversations
- Medium durations (180-300s): Good balance for most use cases
- Long durations (300-600s): Better UX, but tokens are valid longer if leaked
Client-Side Token Usage
The browser requests a token before establishing the WebSocket connection:index.js
The token is passed as a query parameter in the WebSocket URL. AssemblyAI validates the token when the connection is established.
Token Lifecycle
Token Validation
AssemblyAI validates tokens when:- WebSocket Connection: Token is checked when the connection is established
- During Streaming: If a token expires mid-session, the connection is closed
If a connection is closed due to token expiration, the
ws.onclose handler will fire. The application would need to request a new token and reconnect.Error Handling
The token generation endpoint includes error handling:server.js
- Invalid API Key: Check that your
.envfile contains the correct key - Network Issues: AssemblyAI’s token endpoint may be unreachable
- Rate Limiting: Too many token requests in a short time
Security Best Practices
Environment Variables
The.env file should contain your AssemblyAI API key:
.env
Get your API key from the AssemblyAI dashboard. Never share or commit this key.
Token Request Flow
- User Clicks Record: Triggers the
run()function - Client Requests Token:
fetch("http://localhost:8000/token") - Server Validates Request: Express endpoint receives the request
- Server Generates Token: Calls AssemblyAI’s token API with your API key
- Server Returns Token: Sends token back to client as JSON
- Client Connects: Uses token in WebSocket URL to connect to AssemblyAI
This flow ensures your API key is only used server-side, where it’s protected from client-side extraction.