🔐 Widget Testing with API Key Flow

Test the production-ready API key authentication flow for widget token generation

📋 How It Works

1. Admin generates API Key
→
2. Backend uses API Key
→
3. Get Widget Token
→
4. Load Widget

🔧 Step 1: Generate API Key (Admin Only)

First, you need to generate an API key for your organization. This is done through the admin API:

🔑 Step 2: Use API Key to Get Widget Token

Now use the API key to generate a widget token (this simulates what your backend would do):

🚀 Step 3: Load Widget with Token

Finally, use the widget token to load the widget:

💡 Demo Shortcut

For quick testing, you can use your admin JWT token directly:

📖 Example Backend Implementation

Here's how your backend would implement this flow:

// Node.js Express Example app.get('/api/widget-config', async (req, res) => { // Get widget token using your API key const response = await fetch('http://localhost:15002/api/widget/tokens', { method: 'POST', headers: { 'Authorization': `Bearer ${process.env.WIDGET_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ user: req.user ? { id: req.user.id, email: req.user.email, name: req.user.name } : undefined }) }); const { token } = await response.json(); // Send token to frontend res.json({ widgetToken: token, orgId: process.env.ORG_ID }); });