Invalid token specified React app on Embedding Apache Superset

Question

I want to embed Apache Superset to my React app.

In superset_config.py I added: FEATURE_FLAGS = {..., "EMBEDDED_SUPERSET": True}.

Embed dashboard->Settings->Allowed Domains: specified "http://localhost:3000"

Added "myUser" with roles: Public, Gamma.

In the react app folder I run: npm i @superset-ui/embedded-sdk.

App.js:

import { useEffect } from "react"
import { embedDashboard } from "@superset-ui/embedded-sdk"
import "./App.css"

function App() {
  const getToken = async () => {
return {
    "token": "token_Value"              //get from Insomnia
       }
    }
  useEffect(() => {
    const embed = async () => {
      await embedDashboard({
        id: "dashboardId", // given by the Superset embedding UI
        supersetDomain: "http://localhost:8088",
        mountPoint: document.getElementById("dashboard"), // html element in which iframe render
        fetchGuestToken: () => getToken(),
        dashboardUiConfig: {
          hideTitle: true,
          hideChartControls: true,
          hideTab: true,
        },
      })
    }
    if (document.getElementById("dashboard")) {
      embed()
    }
  }, [])

  return (
    <div className="App">
      <h1>How to Embed Superset Dashboard into React</h1>
      <div id="dashboard" />
    </div>
  )
}

export default App

Value of token for App.js get in Insomnia:

1. POST http://localhost:8088/api/v1/security/login

• JSON

{
     "username": "admin",
      "password": "admin",
      "provider": "db",
      "refresh": true
}

• header

Content-type application/json

• response

{
    "access_token": "access_token_Value",
    "refresh_token": "refresh_token_Value"
}

2. GET http://localhost:8088/api/v1/security/csrf_token

• header

Content-type application/json
Authorization "Bearer ${access_token_Value}"

• response

{
    "result": "csrf_token_value"
}

3. POST http://localhost:8088/api/v1/security/guest_token

• JSON

{
    "resources":
        [
            {
                "type": "dashboard",
                "id": "dashboardId"
            }
        ],
    "rls": [],
    "user": 
        {
            "username": "myUser.name",
            "first_name": "myUser.first",
            "last_name": "myUser.last"
        }
}

• header

Content-type application/json
X-CSRF-Token "csrf_token_value"
Authorization "Bearer ${access_token_Value}"

• response

{
    "token": "token_value" //set to App.js
}

When running npm start I get:

ERROR

Invalid token specified
./node_modules/jwt-decode/build/jwt-decode.esm.js
./node_modules/@superset-ui/embedded-sdk/lib/guestTokenRefresh.js

How fix error?

Answer 1

Reason of error: need to return not

const getToken = async () => {
return {
    "token": "token_Value"              //get from Insomnia
       }
    }

need to return

const getToken = async () => {
return "token_Value"              //get from Insomnia
    }