Authentication

VIDTREO uses API keys to authenticate requests. This guide explains how to obtain and securely configure your API key.

Obtaining Your API Key

# Coming soon
vidtreo keys create --name "my-app"

Environment Configuration

Vite / React

Create a .env file in your project root:

VITE_VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

Use it in your component:

<VidtreoRecorder
  apiKey={import.meta.env.VITE_VIDTREO_API_KEY}
/>

Next.js

For server components, add to .env.local:

VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

For client components, prefix with NEXT_PUBLIC_:

NEXT_PUBLIC_VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

<VidtreoRecorder
  apiKey={process.env.NEXT_PUBLIC_VIDTREO_API_KEY}
/>

Node.js / Backend

VIDTREO_API_KEY=vt_live_xxxxxxxxxxxxxxxxxxxx

const apiKey = process.env.VIDTREO_API_KEY;

API Key Types

Security Best Practices

Do's ✅

• Use environment variables — Never hardcode API keys
• Use different keys for development and production
• Restrict key permissions in the dashboard
• Rotate keys regularly especially if compromised
• Use .gitignore to exclude .env files

Don'ts ❌

• Never commit API keys to version control
• Never expose keys in client-side JavaScript without restrictions
• Don't share keys between projects
• Don't use production keys for development

Domain Restrictions

For additional security, you can restrict API keys to specific domains:

1. Go to Dashboard → API Keys
2. Select your key
3. Add allowed domains (e.g., myapp.com, *.myapp.com)

Requests from other domains will be rejected.

Rate Limits

Troubleshooting

Invalid API Key

Error: Invalid API key provided

Solutions:

• Verify the key is correctly copied (no extra spaces)
• Check if the key is for the correct environment (live vs test)
• Ensure the key hasn't been revoked

Domain Not Allowed

Error: Domain not allowed for this API key

Solutions:

• Add your domain to the allowed list in the dashboard
• For local development, add localhost to allowed domains

Key Expired

Error: API key has expired

Solutions:

• Generate a new API key from the dashboard
• Update your environment variables with the new key

Proxy Configuration (SSR)

For server-side rendering applications, you may want to proxy API requests to avoid exposing your API key:

// api/vidtreo-proxy.ts (Next.js API Route)
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const response = await fetch('https://core.vidtreo.com' + req.url, {
    method: req.method,
    headers: {
      'Authorization': `Bearer ${process.env.VIDTREO_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: req.method !== 'GET' ? JSON.stringify(req.body) : undefined,
  });

  const data = await response.json();
  res.status(response.status).json(data);
}

Then configure the SDK to use your proxy:

<VidtreoRecorder
  apiKey="proxied" // Any non-empty value
  backendUrl="/api/vidtreo-proxy"
/>

Next Steps

• Quick Start — Record your first video
• React Integration — Set up the React component
• Configuration — Explore all options