Lightdash Embed Demo

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

Setup

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

How It Works

Backend (/api/embed-token)

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

Frontend (/app/page.tsx)

• Fetches embed URL from backend
• Displays dashboard in iframe

Key Code

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' });

Production Tips

• 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