Embed superset in react

[sundar68]

Bug description

This is superset_config.py

# Flask-WTF flag for CSRF
WTF_CSRF_ENABLED = False
# Add endpoints that need to be exempt from CSRF protection
WTF_CSRF_EXEMPT_LIST = []
# A CSRF token that expires in 1 year
WTF_CSRF_TIME_LIMIT = 60 * 60 * 24 * 365
#AUTH_ROLE_PUBLIC = 'Public'
#ENABLE_CORS = True
# Set this API key to enable Mapbox visualizations
MAPBOX_API_KEY = ''

FEATURE_FLAGS = {'DASHBOARD_CROSS_FILTERS' : True, "EMBEDDABLE_CHARTS": True, "EMBEDDED_SUPERSET": True}

SESSION_COOKIE_SAMESITE = None
PUBLIC_ROLE_LIKE_GAMMA = True
ENABLE_PROXY_FIX = True
OVERRIDE_HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}
ALLOW_ORIGINS = ['http://localhost:3010']

# Cross Origin Config
ENABLE_CORS = True
CORS_OPTIONS = {
    'supports_credentials': True,
    'allow_headers': ['*'],
    'resources':['*'],
    'origins': ALLOW_ORIGINS
}

This is react code

function Superset() {

    async function fetchAccessToken() {
        try {
          const body = {
            username: "test",
            password: "test",
            provider: "db",
            refresh: true,
          }
      
          const response = await fetch(
            "http://domain:8088/api/v1/security/login",
            {
              method: "POST",
              body: JSON.stringify(body),
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
      
          const jsonResponse = await response.json()
          return jsonResponse?.access_token
        } catch (e) {
          console.error(error)
        }
      }
    
    async function fetchGuestToken() {
        const accessToken = await fetchAccessToken();
        console.log({accessToken})
        try {
          const body = {
            resources: [
              {
                type: "dashboard",
                id: "id",
              },
            ],
            rls: [],
            user: {
              username: "test",
              first_name: "test",
              last_name: "Test",
            },
          }
          const response = await fetch(
            "http://domain:8088/api/v1/security/guest_token/",
            {
              method: "POST",
              body: JSON.stringify(body),
              headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${accessToken}`,
              },
            }
          )
          const jsonResponse = await response.json()
          return jsonResponse?.token
        } catch (error) {
          console.error(error)
        }
      }

      const getToken = async () => {
        const token = await fetchGuestToken()
        return json(token)
      }

    useEffect(() => {
        const embed = async () => {
          await embedDashboard({
            id: "id", // given by the Superset embedding UI
            supersetDomain: "http://domain:8088",
            mountPoint: document.getElementById("dashboard"), // html element in which iframe render
            fetchGuestToken: () => getToken(),
            dashboardUiConfig: {
              hideTitle: true
            },
            debug: true
          })
        }
        if (document.getElementById("dashboard")) {
          embed()
        }
      }, [])
    
    return (
        <>
            <div id="dashboard"></div>
        </>
    )
}

Tokens are getting generated, but superset is staying on loading page

How to reproduce the bug

You can reproduce by adding same code

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.
• 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.

[rusackas]

Moving this to a discussion, since it seems to be a configuration and host app development question, rather than a bug with core Superset. You can also try the #embedded channel on Superset Slack if you'd like.

[msollanych-tt]

Same issue here. I suspect that the SESSION_COOKIE_SAMESITE setting is not wired up.