How to expose the MAPBOX_API_KEY to a frontend plugin?

[jf-codestryke]

Hello,
I'm currently working on several superset frontend (visualisation) plugins I created using yeoman. I'm running it in a custom fork of superset v6.0.0.
For one of the plugins, I have a map where I use mapbox. I'm greatly struggling with how I should expose the MAPBOX_API_KEY from the .env to the frontend, I tried following this thread: #36591 (with the CustomViz class and everything) but it seems like these classes are never actually called when communicating with the API.

This is the Viz class I used:

class TrafficFlowViz(BaseViz):
    viz_type = "custom-map"

    def get_data(self, df):
        return {
            "data": df.to_dict(orient="records"),
            "mapboxApiKey": config["MAPBOX_API_KEY"],
        }

The key matches the one set in MainPreset.js as well, but I do not know what to do futher, my transformProps.ts in the plugin does not register it at all.

import { ChartProps } from "@superset-ui/core";

export default function transformProps(chartProps: ChartProps) {
  const { width, height, queriesData } = chartProps;
  const mapboxApiKey = queriesData?.[0]?.mapboxApiKey;

  console.log("QUERIES DATA:", chartProps);

  return {
    data: queriesData[0]?.data ?? [],
    width,
    height,
    mapboxApiKey,
  };
}

Is there a newer / better / working way on how to handle this with superset v6.0.0. Surely hard coding it in the frontend of the plugin is not the desired solution.

[dosubot[bot]]

Hi @jf-codestryke! I'm Dosu and I’m helping the superset team.

@jf-codestryke The issue is likely that your custom Viz class isn't actually being used in the data flow. In Superset v6, if your plugin is using the newer chart data API (/api/v1/chart/data), the legacy BaseViz subclass may not be invoked at all — which would explain why mapboxApiKey never appears in queriesData.

Here's how the built-in mapbox plugins do it: the key gets injected by the backend Viz class into the data payload, and then the frontend accesses it at queriesData[0].data.mapboxApiKey [1]. Note the .data property — in your transformProps you're accessing queriesData?.[0]?.mapboxApiKey but it should be queriesData?.[0]?.data?.mapboxApiKey.

That said, the real problem is likely that your Viz class isn't being called. There are two alternative approaches that may work better for you:

Option 1: Use FRONTEND_CONF_KEYS (simplest)

In your superset_config.py, whitelist the key so it's available in bootstrap data [2]:

FRONTEND_CONF_KEYS = [
    "MAPBOX_API_KEY",
]

Then in your plugin's transformProps.ts, access it via bootstrap data [3]:

import { getBootstrapData } from 'src/utils/getBootstrapData';

export default function transformProps(chartProps: ChartProps) {
  const { width, height, queriesData } = chartProps;
  const bootstrapData = getBootstrapData();
  const mapboxApiKey = bootstrapData.common?.conf?.MAPBOX_API_KEY;

  return {
    data: queriesData[0]?.data ?? [],
    width,
    height,
    mapboxApiKey,
  };
}

Option 2: Use COMMON_BOOTSTRAP_OVERRIDES_FUNC [4]

# superset_config.py
def custom_bootstrap_overrides(bootstrap_data):
    return {
        "mapbox_api_key": app.config["MAPBOX_API_KEY"],
    }

COMMON_BOOTSTRAP_OVERRIDES_FUNC = custom_bootstrap_overrides

Then access bootstrapData.common.mapbox_api_key in the frontend.

The bootstrap data approach avoids needing a custom Viz class entirely and is the most practical path for a custom plugin where you control superset_config.py. The payload-based Viz class approach is what built-in plugins use [5], but it requires that Viz class to actually be invoked in the request pipeline, which can be tricky to wire up correctly for custom plugins.

To reply, just mention @dosu.

---

Docs are dead. Just use Dosu.

[jf-codestryke]

Just to be sure: The superset_config.py is the one under docker/pythonpath_dev/, right?

[dosubot[bot]]

Yes, that's correct — docker/pythonpath_dev/superset_config.py is the config file used for local Docker-based development. It's picked up because docker/pythonpath_dev/ is on the PYTHONPATH in the dev Docker setup, and Superset automatically searches for a module named superset_config on the PYTHONPATH [1].

That's where you'd add your FRONTEND_CONF_KEYS setting. Just note that the file also tries to import superset_config_docker.py at the end as an optional override layer [2], so if you have one of those, make sure it doesn't override your changes.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[jf-codestryke]

Sadly this does not work, the key is still undefined. Is there anything else that needs to be changed in the config.py?

[dosubot[bot]]

I apologize for the misleading suggestion earlier — I dug deeper and found that FRONTEND_CONF_KEYS is actually a hardcoded tuple in superset/views/base.py [1], not a configurable setting in superset_config.py. Setting it in your config will have no effect since the code reads the tuple directly from views/base.py.

Here's what should actually work — use COMMON_BOOTSTRAP_OVERRIDES_FUNC instead. This is a configurable hook in superset_config.py that lets you inject custom values into the bootstrap data [2] [3].

In your docker/pythonpath_dev/superset_config.py:

COMMON_BOOTSTRAP_OVERRIDES_FUNC = lambda data: {
    "mapbox_api_key": MAPBOX_API_KEY,
}

Make sure MAPBOX_API_KEY is also set (either as an env var or directly in the config). Then in your plugin:

function getBootstrapData() {
  const appContainer = document.getElementById('app');
  const dataBootstrap = appContainer?.getAttribute('data-bootstrap');
  return dataBootstrap ? JSON.parse(dataBootstrap) : {};
}

const mapboxApiKey = getBootstrapData()?.common?.mapbox_api_key;

Note the path is common.mapbox_api_key (not common.conf.mapbox_api_key) because COMMON_BOOTSTRAP_OVERRIDES_FUNC merges directly into the common bootstrap object [3]. Also, the result is cached for 60 seconds [4], so after changing the config you may need to restart the server and do a hard refresh.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.