Reactor uses JWT-based authentication to connect your application to AI models running on our cloud infrastructure.
Step 1: Get Your API Key
Obtain an API key from the Reactor Dashboard. Your API key will look like rk_....
Keep your API key secure. Never expose it in client-side code in production. The fetchInsecureJwtToken function is named this way to remind you that client-side API keys can be extracted from your code.
Step 2: Fetch a JWT Token
Use the fetchInsecureJwtToken helper to exchange your API key for a JWT token:
import { fetchInsecureJwtToken } from "@reactor-team/js-sdk";
const apiKey = "rk_your_api_key_here";
const jwtToken = await fetchInsecureJwtToken(apiKey);
Step 3: Connect to a Model
Pass the JWT token to ReactorProvider:import { useState, useEffect } from "react";
import {
ReactorProvider,
ReactorView,
fetchInsecureJwtToken,
} from "@reactor-team/js-sdk";
function App() {
const [jwtToken, setJwtToken] = useState<string | null>(null);
const apiKey = process.env.NEXT_PUBLIC_API_KEY!;
useEffect(() => {
fetchInsecureJwtToken(apiKey)
.then(setJwtToken)
.catch(console.error);
}, [apiKey]);
if (!jwtToken) return <div>Authenticating...</div>;
return (
<ReactorProvider modelName="livecore" jwtToken={jwtToken}>
<ReactorView />
</ReactorProvider>
);
}
Pass the JWT token to the connect() method:import { Reactor, fetchInsecureJwtToken } from "@reactor-team/js-sdk";
const apiKey = "rk_your_api_key_here";
// Fetch JWT
const jwtToken = await fetchInsecureJwtToken(apiKey);
// Create Reactor instance
const reactor = new Reactor({
modelName: "livecore",
});
// Connect with JWT token
await reactor.connect(jwtToken);
Complete Example
Here’s a complete React example with error handling:
import { useState, useEffect } from "react";
import {
ReactorProvider,
ReactorView,
useReactor,
fetchInsecureJwtToken,
} from "@reactor-team/js-sdk";
function VideoPlayer() {
const { status, connect, disconnect } = useReactor((state) => ({
status: state.status,
connect: state.connect,
disconnect: state.disconnect,
}));
return (
<div>
<ReactorView className="w-full aspect-video" videoObjectFit="cover" />
<p>Status: {status}</p>
{status === "disconnected" ? (
<button onClick={connect}>Connect</button>
) : (
<button onClick={disconnect}>Disconnect</button>
)}
</div>
);
}
export default function App() {
const [jwtToken, setJwtToken] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const apiKey = process.env.NEXT_PUBLIC_API_KEY!;
useEffect(() => {
fetchInsecureJwtToken(apiKey)
.then(setJwtToken)
.catch((err) => setError(err.message));
}, [apiKey]);
if (error) return <div>Authentication failed: {error}</div>;
if (!jwtToken) return <div>Authenticating...</div>;
return (
<ReactorProvider modelName="livecore" jwtToken={jwtToken}>
<VideoPlayer />
</ReactorProvider>
);
}
Environment Variables
We recommend using environment variables for your API configuration:
# .env.local
NEXT_PUBLIC_API_KEY=rk_your_api_key_here
const apiKey = process.env.NEXT_PUBLIC_API_KEY;
Environment variables prefixed with NEXT_PUBLIC_ are exposed to the browser. For maximum security in production, consider implementing a backend endpoint that fetches the JWT token server-side.
