A minimal Next.js example showing how to securely embed Lightdash dashboards.

1. Install dependencies

   npm install

2. Configure environment (copy .env.local.example to .env.local)

   LIGHTDASH_EMBED_SECRET=your-secret-key
   LIGHTDASH_PROJECT_UUID=your-project-uuid
   LIGHTDASH_BASE_URL=https://analytics.lightdash.cloud

3. Run the app

   npm run dev

• Generates JWT on the server (secret never exposed to frontend)
• Includes user attributes for data filtering
• Sets permissions based on user role

• Fetches embed URL from backend
• Displays dashboard in iframe

The JWT generation happens in /api/embed-token/route.ts:

const tokenData = {
 content: {
 type: 'dashboard',
 projectUuid: projectUuid,
 dashboardUuid: 'your-dashboard-uuid',
 canExportCsv: true,
 // ... other permissions
 },
 user: {
 externalId: user.id,
 email: user.email
 },
 userAttributes: {
 partner_id: user.partnerId // Used for row-level filtering
 }
};
const token = jwt.sign(tokenData, embedSecret, { expiresIn: '1 hour' });

• Replace mock user data with your real authentication
• Store embed secret securely (e.g., AWS Secrets Manager)
• Configure Lightdash to allow your domain for embedding
• For local testing with HTTPS, use ngrok: ngrok http 3000