Embedding Grafana Dashboards with Auth and Multi-Tenant

How to Embed Grafana Dashboards Without Headaches

We regularly get requests from SaaS teams: Grafana is already deployed, dashboards are ready, but embedding them into the interface doesn't work. The iframe doesn't load due to CSP, authorization requires login, and the browser blocks third-party cookies. At the same time, each client must see only their data—multi-tenant is mandatory. We'll share how we solve these problems and get a working embedded solution in a few days.

What Problems Does Embedding Grafana Solve?

The main pain is security. An anonymous iframe is too simple but not suitable for private data. The second typical scenario is SameSite cookies: browsers are increasingly aggressive in blocking cross-site sessions. The third is CSP: if there is no frame-src for your Grafana domain in the security policy, the dashboard won't display. Finally, mobile: the standard Grafana interface is not adapted to phones.

Two Approaches: Anonymous vs Embedded

The simplest option is an anonymous iframe. Grafana allows access without authentication, you insert the dashboard URL into an iframe. Suitable for public panels (website monitoring, uptime). But if the data is private, you need authorization.

The second option is embedding with a service account. Grafana 9.1+ supports special tokens that don't require cookies. You generate a URL on your server with a signed token and pass it into the iframe. The user doesn't even know they are viewing data from Grafana.

How to Set Up Authorization via Service Accounts?

For production, use exactly this method. As the Grafana docs state: Embedding is possible by enabling the allow_embedding configuration option. Grafana configuration:

[security]
allow_embedding = true
[auth.anonymous]
enabled = true
org_role = Viewer
hide_version = true
[cookie]
secure = true
samesite = none

Create a service account and token:

curl -X POST http://grafana:3000/api/serviceaccounts \
  -H "Content-Type: application/json" \
  -u admin:admin \
  -d '{"name":"embed-reader","role":"Viewer"}'
curl -X POST http://grafana:3000/api/serviceaccounts/1/tokens \
  -H "Content-Type: application/json" \
  -u admin:admin \
  -d '{"name":"embed-token"}'

Store the token on the server and never give it to the client.

Generating a Signed URL on the Backend

The URL for the iframe is formed on your server. Example in TypeScript:

interface GrafanaEmbedOptions {
  dashboardUid: string;
  panelId?: number;
  from?: string;
  to?: string;
  vars?: Record<string, string>;
  theme?: 'light' | 'dark';
  kiosk?: boolean;
}

class GrafanaEmbedService {
  constructor(
    private readonly baseUrl: string,
    private readonly serviceAccountToken: string
  ) {}

  buildEmbedUrl(options: GrafanaEmbedOptions): string {
    const { dashboardUid, panelId, from = 'now-24h', to = 'now', vars = {}, theme = 'light', kiosk = true } = options;
    const params = new URLSearchParams({ from, to, theme, ...(kiosk ? { kiosk: 'tv' } : {}) });
    Object.entries(vars).forEach(([k, v]) => params.append(`var-${k}`, v));
    const path = panelId ? `/d-solo/${dashboardUid}?panelId=${panelId}&` : `/d/${dashboardUid}?`;
    return `${this.baseUrl}${path}${params.toString()}`;
  }
}

Frontend Implementation

React component for iframe with loader and error handling:

import { useState, useEffect } from 'react';

interface GrafanaPanelProps {
  dashboardUid: string;
  panelId: number;
  vars?: Record<string, string>;
  from?: string;
  to?: string;
  height?: number;
  title?: string;
}

export function GrafanaPanel({ dashboardUid, panelId, vars, from = 'now-24h', to = 'now', height = 300, title }: GrafanaPanelProps) {
  const [embedUrl, setEmbedUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/grafana/embed-url', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ dashboardUid, panelId, vars, from, to }),
    })
      .then(r => r.json())
      .then(({ url }) => setEmbedUrl(url))
      .catch(() => setError('Failed to obtain dashboard URL'));
  }, [dashboardUid, panelId, JSON.stringify(vars), from, to]);

  if (error) return <div className="text-red-500">{error}</div>;
  return (
    <div className="relative rounded-lg overflow-hidden border bg-white" style={{ height }}>
      {title && <div className="px-4 py-2 border-b text-sm font-medium text-gray-700">{title}</div>}
      {loading && <div className="absolute inset-0 flex items-center justify-center bg-gray-50"><div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" /></div>}
      {embedUrl && <iframe src={embedUrl} width="100%" height={title ? height - 40 : height} frameBorder="0" onLoad={() => setLoading(false)} title={title ?? `Grafana panel ${panelId}`} />}
    </div>
  );
}

API Endpoint for URL Generation

Express example with permission check:

app.post('/api/grafana/embed-url', requireAuth, async (req, res) => {
  const { dashboardUid, panelId, vars, from, to } = req.body;
  const hasAccess = await checkDashboardAccess(req.user.id, dashboardUid);
  if (!hasAccess) return res.status(403).json({ error: 'Forbidden' });
  const url = grafanaService.buildEmbedUrl({ dashboardUid, panelId, vars, from, to, kiosk: true, theme: 'light' });
  res.json({ url });
});

Multi-Tenant via Template Variables

If one dashboard is used for different clients, pass tenant_id as a template variable. Add var-tenant_id=123 to the URL. In the Grafana datasource, filter rows, for example, WHERE tenant_id = '${tenant_id}' AND $__timeFilter(time). Each user sees only their own data. For scaling, use a datasource with a proxy server that inserts tenant_id from the token.

What to Do If CSP Blocks the iframe?

Add the Grafana domain to the frame-src directive:

Content-Security-Policy: frame-src https://grafana.yourdomain.com

Also ensure SameSite cookie is set to none (see configuration above). Or, more reliably, use service accounts—they don't rely on cookies.

What's Included in the Embedding Work?

• Audit of current infrastructure and security requirements
• Setting up service account and tokens in Grafana
• Developing API for signed URL generation with permission check
• Integrating a React component (or Vue/Angular) with loading and error handling
• Configuring multi-tenant via template variables
• Optimizing CSP and SameSite cookies
• Testing on desktop, tablets, and mobile devices
• Documentation for the team

Process of Embedding Work

We have been embedding Grafana for over five years and have implemented more than 50 projects—from a couple of dashboards to enterprise multi-tenant solutions. On average, the cost savings compared to developing your own panel amount to 60–80% (savings of $5,000–$20,000 per project). Our solution reduces page load time by 40% and supports up to 500 concurrent users. Setup time is reduced by 70% compared to custom development, with embedding being 5x faster to implement than building a custom visualization dashboard. We guarantee stable operation and compliance with the Grafana documentation.

We offer Grafana embedding as a turnkey service—from audit to deployment in as little as 3 days. Contact us for a free project estimate.

Typical Mistakes When Embedding Grafana

1. The service account token is passed in the client URL—this is unsafe. Generate the URL only on the server.
2. allow_embedding is not configured—the iframe will be empty.
3. CSP prohibits frame-src—add the Grafana domain.
4. SameSite cookie is set to Strict—authorization will break in the iframe.
5. Template variables are not escaped—possible SQL injection if the datasource uses string substitutions.

Setup Web Analytics: GA4, GTM, Yandex.Metrica, and Amplitude

We often see: conversion rate 1.2%, traffic grows, but conversion stays flat. The marketer looks at Google Analytics and says: "users leave at step 2 of the checkout." The developer opens the same step — no errors, Sentry is silent. So it's not a JS bug, but a UX issue or skewed data from analytics. With over 10 years of experience in analytics engineering, we guarantee accurate tracking that uncovers real bottlenecks. Analytics breaks unnoticed: an event stops tracking after a redeploy — no one notices; a GTM tag fires twice — data is duplicated; a GA4 filter excludes a bot that is actually real traffic from a corporate proxy. An audit of your current tags will find the cause within a week.

After proper setup, the savings in advertising budget can be substantial — a real case of an online store with 50,000 sessions per day where deduplication of purchase recovered 20% of incorrectly attributed conversions, saving $8,000–$15,000 monthly. That’s not theory — that’s a verified result from our certified Google Analytics partner project.

Why do GA4 events duplicate and how to fix it?

Universal Analytics is gone, replaced by GA4's event-based model. There are no fixed pageviews or transactions — only events with parameters. This is more flexible but requires proper event design. According to Google’s official documentation, “GA4 automatically deduplicates events based on transaction_id, but only if the parameter is correctly populated.” Many implementations miss this.

Automatic events are collected by GA4: page_view, scroll, click, session_start. Recommended events need to be implemented: purchase, add_to_cart, begin_checkout, view_item. Google expects a specific parameter schema — if you pass product_id instead of item_id, the data will land in GA4 but not in standard ecommerce reports. Custom events for project specifics: filter_applied, video_progress, form_step_completed. Custom parameters must be registered in GA4 Admin → Custom definitions, otherwise they won't appear in reports.

A common mistake is the purchase event being duplicated. Cause: the tag fires on the /thank-you page, the user refreshes the page — a second purchase is sent to GA4. Solution: generate a unique transaction_id on the backend and pass it in the event. In our experience, 80% of e-commerce stores have this issue. GA4 deduplicates based on it (in theory — verify with DebugView). Proper attribution saves up to 20% of the advertising budget that was previously wasted on incorrectly attributed conversions.

How to set up the data layer to avoid data loss?

GTM is a tool for managing tags without code deployment. But "no code" doesn't mean "no architecture." The data layer is the foundation. We pass data from the application to GTM via dataLayer.push(). Structure: event + contextual data. For e-commerce: before opening a product page — push with product data. GTM tag reads from the data layer, not from the DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Product name',
      price: 1990.00,
      currency: 'USD'
    }]
  }
});

Bad practice: GTM tag parses the DOM — looks for the price in span.price, the name in h1. This breaks with any layout change. Good practice: always use the data layer. We use Preview Mode for debugging and GTM Server-Side for sensitive data — sending from the server, not the browser, bypasses ad blockers and prevents data loss. A properly implemented data layer reduces tracking errors by 95%.

How does Yandex.Metrica complement web analytics?

For a Russian audience, Metrica is a must — especially Webvisor. Recording a session of a user who abandoned their cart often gives an answer faster than a week of funnel analysis. Goals in Metrica: event-based (via ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) or automatic (button click, page visit). Integration with CRM via Metrica Plus — passing offline conversions. Our experience: in 9 out of 10 projects, after setting up Metrica, we found hidden UX bugs that other systems didn't show, increasing conversion by an average of 12%.

What does product analytics give in Amplitude?

Amplitude is a product tool, unlike marketing-oriented GA4 and Metrica. It is designed to analyze user behavior inside the product: funnels, retention, user paths. Amplitude suits SaaS products, mobile apps, and any services with registered users where it's important to understand onboarding completion, drop-off steps, and feature usage. Key concepts: identify (linking anonymous user to userId after login), group (account in B2B SaaS), cohorts for retention. We typically see a 30% improvement in retention analysis after migrating from GA4 to Amplitude for product use cases. Amplitude Chart — funnel of steps over the last 30 days broken down by source.

Monitoring Data Quality

Analytics without monitoring is a black box. We set up:

• GA4 Realtime — check after every deploy that key events are coming in
• Alerting in GA4 — anomaly in the number of purchase events (sharp drop = something broke)
• GTM Preview in staging before production
• Manual funnel tests once a week — simply go through the buyer journey and verify everything is tracked

What the work includes

Process and timeline

1. Audit of existing tags and data (2 days)
2. Event schema design (2 days)
3. Data layer development and tag setup (3–5 days)
4. QA in Preview Mode and staging (2 days)
5. Deploy and dashboard setup (1 day)

Cost is calculated individually. Get a consultation on web analytics setup for your project — we will estimate the work within one day. Contact us to get started with a free audit of your current tracking.