I have a frontend developed in ReactJS, and a JAVA REST API as backend. Users authenticate and a JWT Token is used in subsequent requests. One feature we are trying to implement is to embed a Grafana Dashboard within the ReactJS frontend. The Grafana dashboard was developed to be as generic as possible. Some Variables are set in the dashboard: 2 variables get the value from URL querystring (GUID of the logged-in user from the ReactJS, and the other gets a GUID corresponding to the data section to filter data). The dashboard will then filter data using both variables. There is also a 3rd variable which is a dropdownlist that filters its value according to the GUID of the 2nd variable: it will fetch data from DB filtering by the Section GUID (hierarquical data, so to say). This works fine on Grafana as long as there is an authenticated Grafana user. My problem is that after sharing externally the dashboard and implementing the URL into the ReactJS application, even though Grafana was setup to allow anonymous access, the dashboard fails:

• it will not get values from URL
• it will not show query variables and the dropdownlists to filter
• data will not be fetched

The goal is to have a generic dashboard able to get data correspondig to the GUIDs set in the URL, making the dashboard available for every user in the ReactJS application.

Why does the dashboard ignore the URL querystring set in the IFrame address? Why doesn't this work unless if there is an active session in Grafana? if I authenticate in Grafana on the same browser where the ReactJS application is running, everything works, which makes me suspect that the issue is a missing cookie used by Grafana after user authentication... I wonder if anyone has a solution for this?

greatly appreciate your help!