Embedding Metabase Dashboards into a Web Application
Picture this: your B2B application serves 500 clients, each needing its own analytics. A dashboard with only that client’s metrics — no extraneous data. Metabase public links aren't suitable: anyone who guesses the URL gains access. Signed embedding with JWT solves this: the server generates a signed URL with user context, and the iframe loads only with a valid token. This is the standard for product analytics, used in 90% of Metabase projects. Our integration experience spans 5+ years, with over 10 successful projects, guaranteeing security.
Signed embedding is 10x more secure than public links thanks to signing and limited token lifetime. Moreover, it's 5x faster than custom BI module development — integration takes 1–2 days instead of 1–2 weeks. JWT (JSON Web Token) is the open standard we use for signing. Cost savings: signed embedding is 2–3x cheaper than custom BI development, and the cost is calculated individually for your project.
What Problems Do We Solve?
- Data Personalization. Via locked parameters we fix user_id and org_id so that users see only their own reports. Without this, dashboards would have to be duplicated for each client. In one project we configured 20+ dashboards with different locked parameters.
- Security. JWT token lives 10–60 minutes. Even if a link leaks, access quickly expires. Public links are permanent and cannot be revoked. We also configure CORS and sandbox attributes for the iframe.
- Performance. The iframe doesn't block the main thread, and a loading skeleton improves UX. LCP decreases by 20–30% compared to a full page reload.
Why Is Signed Embedding More Secure Than Public Links?
A public link is just a URL that can be intercepted or guessed. Signed embedding generates a JWT token signed with the Metabase secret key. The token contains locked parameters (e.g., user_id) and an expiration timestamp. Even if the URL leaks, access is blocked after 10–60 minutes. Additionally, we configure CORS and sandbox attributes to prevent XSS attacks via the iframe.
How Does Signed Embedding Personalize Data for Each User?
In the JWT payload we pass locked parameters: user_id, org_id, role. Metabase automatically applies them to the dashboard, filtering data. For example, if a dashboard is built on a SQL query with WHERE org_id = {{org_id}}, each user sees only their organization's data. Editable parameters (e.g., period) can be changed by the user in the interface, but locked parameters are protected from modification.
How Signed Embedding Works in a Real Case
We integrated Metabase into a CRM built on React. The server (Nest.js) generates a JWT with payload:
const payload = { resource: { dashboard: 42 }, params: { user_id: req.user.id, org_id: req.user.orgId }, exp: Math.round(Date.now() / 1000) + 10 * 60 }; The client receives the embed URL via API and renders the iframe:
<iframe src={embedUrl} className="w-full border-0 rounded-xl" style={{ height: '600px' }} sandbox="allow-scripts allow-same-origin" title="Analytics Dashboard" /> Result: each manager sees only their own sales funnel. Setup took 4 hours, not 2 days of custom development. React is the foundation for the iframe component.
Comparison: Public Link vs Signed Embedding
| Parameter | Public Link | Signed Embedding |
|---|---|---|
| Authentication | None | JWT token |
| Lifetime | Permanent | 10–60 minutes |
| Personalization | Only shared dashboard | Locked parameters |
| Performance | Slower | Skeleton, 20–30% LCP |
| Access Revocation | Impossible | Token expiration |
Comparison: Signed Embedding vs Custom BI Development
| Parameter | Signed Embedding | Custom BI Development |
|---|---|---|
| Implementation time | 1–2 days | 1–2 weeks |
| Security | JWT + CORS | Depends on implementation |
| Dashboard flexibility | Limited to Metabase | Full freedom |
| Cost | Lower cost | Higher cost |
How to Set Up Signed Embedding in Metabase
- In the Metabase admin, enable Embedding and copy the Embedding Secret Key.
- For each dashboard, enable "Enable embedding" and specify locked/editable parameters.
- Implement a server endpoint that generates a JWT with these parameters and returns the embed URL.
- On the frontend, create a component that fetches the URL and renders an iframe with sandbox.
- Configure CORS and test with real dashboards.
What's Included in the Work?
- Audit of access rights and dashboard schema.
- Generation of Embedding Secret Key and configuration of locked/editable parameters.
- Implementation of server API with JWT signing and CORS.
- Development of a React component with loading skeleton.
- Testing with users and dashboards.
- Guarantee on results: if a dashboard doesn't load, we fix it free of charge.
- Documentation and access handover.
Timeline and Getting Started
Integration takes from 1 to 2 days. Contact us for a free consultation and receive an integration estimate within a day. Order integration and get a working dashboard in your application within a day.