Embedding Superset dashboards in your React application

5 min readJun 28, 2022

Superset is a no-code web-based interface for building charts quickly. It supports wide range of database and visualizations to showcase your data. Dashboard embedding enables you to embed a Superset dashboard into your own application via an iframe.

Embedded Dashboards provide a way to bring insightful data analytics directly into your web application.

The Embedded SDK allows you to embed superset dashboards into your own web app, using your app’s authentication.

Embedding is done by inserting an iframe, containing a Superset page, into the host application. There should be no need to log in to an integrated dashboard if the user is already logged in to the Host App.

Goals

Access Superset graphs on React app
Add multi-tenancy support to Embedded Dashboard
Use RLS for access control

Pre-requisite

Docker or Docker Compose
Working React-based app along with its Back-end

Install superset using docker

Install the latest version of superset using given command.

docker run -d -e SUPERSET_FEATURE_EMBEDDED_SUPERSET="true" -v ~/react-app/superset/superset_config_docker.py:/app/pythonpath/superset_config.py -p 8088:8088 --name superset apache/superset

Install superset using docker-compose

Create a docker-compose.yaml file for superset service as shown below. Use docker-compose upcommand to start the container.

version: '2.3'
services:
  superset:
    image: apache/superset:latest
    init: true
    ports:
      - "8088:8088"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    networks:
      - react-app-network
    volumes:
      - ./superset/superset_config_docker.py:/app/pythonpath/superset_config.py
    environment:
      - SQLALCHEMY_DATABASE_URI='postgresql://postgres:postgres@db:5432/superset'
      - SUPERSET_FEATURE_EMBEDDED_SUPERSET='true'

Create an admin user and initialise superset using the below commands:

docker exec -it superset superset fab create-admin  --username admin --firstname Superset --lastname Admin --email admin@superset.com  --password admindocker exec -it superset superset db upgradedocker exec -it superset superset init

Superset config

We will be using the below superset config. The most important part is we enable the EMBEDDED_SUPERSET feature flag.

superset_config.py

SESSION_COOKIE_SAMESITE = None
ENABLE_PROXY_FIX = True
PUBLIC_ROLE_LIKE_GAMMA = True
FEATURE_FLAGS = {
    "EMBEDDED_SUPERSET": True
}
SQLALCHEMY_DATABASE_URI = 'postgresql://postgres:postgres@db:5432/superset'

CORS_OPTIONS = {
  'supports_credentials': True,
  'allow_headers': ['*'],
  'resources':['*'],
  'origins': ['http://localhost:8088', 'http://localhost:8888']
}

Create superset chart and Dashboard

Once the docker image is up, you can login to Superset and create:

Superset users
Superset Dashboards
Superset Charts within the Dashboard

Generate Embedded dashboard uuid

To ensure that the dashboard is accessible from our react app, we need to first enable the “embedded” support feature in the super set config.

Once done, dashboards will then need to be configured to be embedded, and your app will need to use an Embedded Dashboard UUID. That UUID can be found through the dashboard’s embed configuration screen as shown below.

Make sure you enter the proper host:port of the Client App. Our dashboard is now ready to be embedded in our Client App.

Create New user with role

To allow access to the Embedded Dashboard it is recommended to create a new user. Use the following parameters when creating the user. The important part is to give the following roles: [Public, Gamma]

Interacting with Embedded Dashboard Superset APIs

API to get JWT access token

Before we can make API calls to interact with Superset, we first need an JWT access token. Here we are using the admin user to get an access/request token. For further calls we will be using the “access_token”. Kindly save it for later use.

/api/v1/security/login

API to get guest token

Once we have the access token, we need a guest_token (https://github.com/apache/superset/pull/17517) that will be used specially for embedded dashboard authentication.

We have decided to call this a “guest token” rather than an “embed token” because it could conceivably have future uses beyond viewing embedded dashboards.

/api/v1/security/guest_token/

RLS filter for Embedded Dashboard

RLS rules enables one to exert a more fine-grained control over what user can query and view specific data in selected datasets. Eg. in a multi-tenant application, the Superset charts should show only the data that belongs to the authenticated user. This level of control is possible using RLS filters.

RLS rules are specified at token creation time by the service account, and apply to all queries made against an analytics database by the guest user authenticated with that token. If a guest_token is created using no RLS clause, no filtering on the original query will be done and all the data will be displayed in the charts.

In this example we have created an RLS filter for the customer_id=4

{
"user": {"username": "myAppUser", "first_name": "MyApp User", "last_name": "MyApp User"}, "resources":[{"type": "dashboard", "id": "0f0c12de-6bf7-48e0-be5e-27e8a08c67de"}],"rls":[{"clause": "customer_id=4"}]
}

Client app (React) side code

Below is a snippet of code that needs to be run on the client side to “embedded” the superset dashboard. The dashboard will be embedded in an iframe which should be available in the DOM.

import { embedDashboard } from "@superset-ui/embedded-sdk";const token = await fetchGuestTokenFromBackend(config);embedDashboard({
    id: "abcede-ghifj-xyz",  // given by the Superset embedding UI
    supersetDomain: "https://localhost:8088",
    mountPoint: document.getElementById("superset-container"), // html element in which iframe render
    fetchGuestToken: () => token,
    dashboardUiConfig: { hideTitle: true }
});

Please refer to the flow diagram above for the implementation of fetchGuestTokenFromBackend

Important Note

If the RLS filtering doesn't work, make sure there is no other logged-in user from the same browser. We had both the Superset admin tool and our React App open on the same browser and the RLS filters were not working for some reason. After logging out from the superset admin tool, the RLS filters from React app started working.