Refresh embedded dahboard getting logiut supersetapp and embedded dasboard geeting forbidded

[Kranthi32]

Bug description

I created a user and assaigned public ,gama role.i am new to this plz shpport

Superset config below first time loadijng second tine refresh supersetapp logs out and embedded dashboard 403

FEATURE_FLAGS = {"ALERT_REPORTS": True,"EMBEDDED_SUPERSET": True}
ALERT_REPORTS_NOTIFICATION_DRY_RUN = True
WEBDRIVER_BASEURL = "http://superset:8088/"

WEBDRIVER_BASEURL_USER_FRIENDLY = WEBDRIVER_BASEURL
SQLLAB_CTAS_NO_LIMIT = True

WTF_CSRF_ENABLED = False

ENABLE_CORS = True
ALLOW_CORS = True

CORS Enabling
CORS_OPTIONS = {
"supports_credentials": True,
"allow_headers": "",
"expose_headers": "",
"resources": "*",
"origins": ["http://localhost:3000","http://localhost:8088"]
}

OVERRIDE_HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}
TALISMAN_ENABLED = False

GUEST_ROLE_NAME = "Gamma"

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

3.9

Node version

16

Browser

Chrome

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem. #32906
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

I found some similar discussions that might be relevant to your issue:

1. Don't work "Edit chart" in Embedded dashboard - This discussion is still open and might provide insights into issues with embedded dashboards ^[1].

2. Issues embedding dashboard in public website - This is another open discussion that could be related to your problem with embedding dashboards ^[2].

Regarding your issue with the 403 Forbidden error and logout on refresh, here are some points to consider:

1. 403 Forbidden Error: This can occur due to missing dashboardID in the form_data object. Ensure that the dashboardID is included in the form_data object to avoid permission errors ^[3].

2. Session Management: Superset uses guest tokens for session management in embedded dashboards. If there's an issue with the guest token, it can lead to session interruptions and 401 errors. Ensure that the guest token is generated correctly ^[4].

3. Role Configuration: The GUEST_ROLE_NAME is set to "Gamma". Ensure that the "Gamma" role has the necessary permissions to access the embedded dashboards. Missing permissions can lead to access issues ^[5].

4. CORS Configuration: Your CORS_OPTIONS seem to be set up to allow requests from specific origins. Ensure that these settings are correct and that the domains from which you are accessing the dashboard are included ^[6].

5. CSRF Protection: Disabling CSRF protection (WTF_CSRF_ENABLED = False) can lead to security vulnerabilities. It's generally recommended to keep this enabled in production environments ^[7].

Review these points and adjust your configuration accordingly to resolve the issues with your embedded dashboard.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[Kranthi32]

I created user settings -) list of users -) role public

Another user gama role

2 running react application dashboard showing
3 immediately superset app logging out
4 after refresh my react app showing guest token issue first time perfectly loading
5 again i login into superset app. And react applivation chats loading.

Is it need loginto superset application every time?

Please support i am new to this

i added react code like this

my react application

"use client";

import React, { useEffect } from "react";
import axios from "axios";
import { embedDashboard } from "@superset-ui/embedded-sdk";

const supersetUrl = "http://localhost:8088/";
const supersetApiUrl = ${supersetUrl}/api/v1/security;
const dashboardId = "af70a229-7d8e-4917-8ce3-795ca257fa85";

const DashboardPage = () => {
useEffect(() => {
async function getToken() {
try {
const loginBody = {
password: "admin",
provider: "db",
refresh: true,
username: "sracharts",
};
const { data } = await axios.post(
${supersetApiUrl}/login,
loginBody,
{ headers: { "Content-Type": "application/json" }, withCredentials: true, }
);
const accessToken = data.access_token;
console.log("Access Token:", accessToken);

/*** Step 2: Fetch Guest Token ***/
const guestTokenBody = JSON.stringify({
  resources: [{ type: "dashboard", id: dashboardId }],
  rls: [{"clause": "customer_id=4"}],
  user: { username: "sracharts", first_name: "Sra", last_name: "Application" },
});

const guestTokenResponse = await axios.post(
  `${supersetApiUrl}/guest_token/`,
  guestTokenBody,
  { headers: { "Content-Type": "application/json", Authorization: `Bearer ${accessToken}` },  withCredentials: true, }
);
const guestToken = guestTokenResponse.data.token;
console.log("Guest Token:", guestToken);

/*** Step 3: Embed Dashboard ***/
const mountPoint = document.getElementById("superset-container");
if (!mountPoint) {
  console.error("Error: mountPoint is null.");
  return;
}

console.log('mount points')

embedDashboard({
  id: dashboardId,
  supersetDomain: supersetUrl,
  mountPoint,
  fetchGuestToken: () => guestToken,
  dashboardUiConfig: {
    filters: { expanded: true },
    urlParams: { standalone: 3 },
  },
  
});

/*** Step 4: Adjust Iframe Styles ***/
setTimeout(() => {
  const iframe = document.querySelector("iframe");

  if (iframe) {
    iframe.style.width = "100%";
    iframe.style.minHeight = "100vh";
  }
}, 1000);

} catch (error) {
console.error("Error fetching token:", error);
}
}

getToken();
}, []);