Apache Superset is a powerful business intelligence tool that allows users to create dashboards and visualize data effectively. In this guide, we will walk through the steps required to embed a Superset dashboard into a private website with authentication and Row-Level Security (RLS).<\/p>\n\n\n\n
Before starting, ensure you have:<\/p>\n\n\n\n
To embed Superset dashboards, update the Superset configuration file (superset_config.py) with the following settings:<\/p>\n\n\n\n This configuration enables the embedding feature, sets up CORS, and configures authentication for embedding.<\/p>\n\n\n\n In your React project, install the required packages:<\/p>\n\n\n\n To authenticate and fetch the required token for embedding, we will create a function that generates the guest token. This logic should be placed in the backend, not in the frontend, for security reasons.<\/p>\n\n\n\n Now, use the generated token to embed the Superset dashboard into your React application.<\/p>\n\n\n\n# Enable the embedded Superset feature<\/em>
FEATURE_FLAGS = {
“EMBEDDED_SUPERSET”: True
}
# Enable Cross-Origin Resource Sharing (CORS)<\/em>
ENABLE_CORS = True
CORS_OPTIONS = {
“supports_credentials”: True,
“allow_headers”: “*”,
“expose_headers”: “*”,
“resources”: “*”,
“origins”: [“http:\/\/localhost:3000”] # React URL or frontend URL<\/em>
}
# Dashboard Embedding Configuration<\/em>
GUEST_ROLE_NAME = “Gamma”
GUEST_TOKEN_JWT_SECRET = “PASTE_GENERATED_SECRET_HERE” # Replace with a secure secret<\/em>
GUEST_TOKEN_JWT_ALGO = “HS256”
GUEST_TOKEN_HEADER_NAME = “X-GuestToken”
GUEST_TOKEN_JWT_EXP_SECONDS = 300 # Token expiry time set to 5 minutes<\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\nStep 2: Installing Dependencies<\/strong><\/h2>\n\n\n\n
# Using npm<\/em>
npm install –save @superset-ui\/embedded-sdk axios
# OR using Yarn<\/em>
yarn add @superset-ui\/embedded-sdk axios<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\nStep 3: Generate an Authentication Token<\/strong><\/h2>\n\n\n\n
import<\/strong> axios from<\/strong> “axios”;
const<\/strong> supersetUrl = ‘http:\/\/YOUR_DASHBOARD_URL_HERE’; \/\/ Replace with your Superset URL<\/em>
const<\/strong> supersetApiUrl = `${supersetUrl}\/api\/v1\/security`;
const<\/strong> dashboardId = “EMBED_ID_HERE”; \/\/ Replace with actual dashboard ID<\/em>
const<\/strong> getToken = async<\/strong> (): Promise<string | null> => {
try<\/strong> {
\/\/ Step 1: Authenticate and get access token<\/em>
const<\/strong> loginBody = {
username: “YOUR_USERNAME_WITH_EMBED_N_DASHBOARD_PERMISSION”, \/\/ Use a dedicated user with limited permissions<\/em>
password: “YOUR_PASSWORD_WITH_EMBED_N_DASHBOARD_PERMISSION”,
provider: “db”,
refresh: true,
};
const<\/strong> loginResponse = await<\/strong> axios.post(`${supersetApiUrl}\/login`, loginBody, {
headers: { “Content-Type”: “application\/json” },
});
const<\/strong> accessToken = loginResponse.data.access_token;
console.log(“Access Token:”, accessToken);
\/\/ Step 2: Generate guest token for embedding<\/em>
const<\/strong> guestTokenBody = {
resources: [{ type<\/strong>: “dashboard”, id: dashboardId }],
rls: [], \/\/ Configure Row-Level Security if needed<\/em>
user: {
username: “report-viewer”,
first_name: “report-viewer”,
last_name: “report-viewer”,
},
};
const<\/strong> guestTokenResponse = await<\/strong> axios.post(`${supersetApiUrl}\/guest_token\/`, guestTokenBody, {
headers: {
“Content-Type”: “application\/json”,
Authorization: `Bearer ${accessToken}`,
},
});
return<\/strong> guestTokenResponse.data.token;
} catch<\/strong> (error) {
console.error(“Error fetching Superset token:”, error);
return<\/strong> null;
}
};<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\nStep 4: Embedding the Superset Dashboard in React<\/strong><\/h2>\n\n\n\n
import<\/strong> React, { useEffect } from “react”;
import<\/strong> { embedDashboard } from “@superset-ui\/embedded-sdk”;
import<\/strong> { Divider } from “@mui\/material”;
import<\/strong> { useTheme, useMediaQuery } from “@mui\/material”;
import<\/strong> { useSidebar } from “.\/sidebarcontext”;
const<\/strong> AdminDashboard: React.FC = () => {
const<\/strong> theme = useTheme();
const<\/strong> isMobile = useMediaQuery(theme.breakpoints.down(“sm”));
const<\/strong> { isOpen } = useSidebar();
const <\/strong>supersetUrl = <\/strong>‘http:\/\/YOUR_DASHBOARD_URL_HERE’ \/\/ Replace with your Superset URL<\/em>
const<\/strong> dashboardId = “EMBED_ID_HERE”; \/\/ Replace with actual dashboard ID<\/em>
useEffect(() => {
const<\/strong> embedSupersetDashboard = async<\/strong> () => {
const<\/strong> guestToken = await<\/strong> getToken();
if<\/strong> (!guestToken) {
console.error(“Failed to retrieve guest token.”);
return<\/strong>;
}
const<\/strong> container = document.getElementById(“superset-container”);
if<\/strong> (container) {
embedDashboard({
id: dashboardId,
supersetDomain: supersetUrl,
mountPoint: container, \/\/ The HTML element where the dashboard will be embedded<\/em>
fetchGuestToken: async<\/strong> () => guestToken, \/\/ Provide the generated token<\/em>
dashboardUiConfig: { hideTitle: true<\/strong> }, \/\/ Hide dashboard title<\/em>
});
} else<\/strong> {
console.error(“Superset container not found”);
}
};
embedSupersetDashboard();
}, []);
return<\/strong> (
<div>
{\/* Divider for mobile layout adjustments *\/<\/em>}
{isMobile && <Divider style={{ marginTop: isOpen ? “0.5rem” : “auto” }} \/>}
{\/* Container to embed Superset dashboard *\/<\/em>}
<div style={{ display: “flex”, marginLeft: “10px”, marginTop: “5px”, backgroundColor: “#f3f3f4”, width: “100%”, height: “100vh” }}>
<div id=”superset-container” style={{ width: “100%”, height: “100%” }} \/>
<\/div>
<\/div>
);
};
export<\/strong> default<\/strong> AdminDashboard;<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"