Can't authenticate to get guest_token

[dawfunes]

I'm trying to get a guest_token, but it seems like my authentication token i get prior has already expired by the time i try to get the guest_token to embed a dashboard in a react page.
Here is my code:

import './App.css';
import axios from 'axios';
import { embedDashboard } from "@superset-ui/embedded-sdk";


const supersetUrl = 'http://localhost:8088'
const supersetApiUrl = supersetUrl + '/api/v1/security'
const dashboardId = "522b4480-cf6b-45f8-a361-97f27f929137" // replace with your dashboard id


function App() {
  getToken()
  return (
    <div className="App">
      <h1>Superset Dashboard</h1>
      <div id='superset-container'></div>
    </div>
  );
}

async function getToken() {
  // This uses admin creds to fetch the token
  const login_body = {
    "password": "admin",
    "provider": "db",
    "refresh": true,
    "username": "admin"
  };
  const login_headers = {
    "headers": {
      "Content-Type": "application/json",
    }
  }
  const login_response = await axios.post(supersetApiUrl + '/login', login_body, login_headers)
  const data = login_response.data
  const access_token = data['access_token']

  // Calling guest token
  const guest_token_body = JSON.stringify({
    "resources": [
      {
        "type": "dashboard",
        "id": dashboardId,
      }
    ],
    "rls": [{
      "clause":"",
    }],
    "user": {
      "username": "embed_user",
      "first_name": "embed",
      "last_name": "user",
    }
  });

  const guest_token_headers = {
    "headers": { 
      "Content-Type": "application/json",
      "Accept": "application/json",
      "Authorization": 'Bearer ' + access_token
    }
  }
  console.log('4. ' + access_token)
  // Calling guest token endpoint to get the guest_token
  await axios.post(supersetApiUrl + '/guest_token/', guest_token_body, guest_token_headers.headers).then(dt => {
    console.log(supersetApiUrl + '/guest_token/')
    console.log('5. ' + dt)
    console.log(dt)
    console.log(dt.data['token'])
    if (dt.data['token'] === undefined) {
      console.log('Error: No token found')
      return
    }
    embedDashboard({
      id: dashboardId,  // Use the id obtained from enabling embedding dashboard option
      supersetDomain: supersetUrl,
      mountPoint: document.getElementById("superset-container"), // html element in which iframe will be mounted to show the dashboard
      fetchGuestToken: () => dt.data['token'], // guest token obtained from the guest token endpoint
      dashboardUiConfig: { 
        // hideTitle: true,
        // hideTab:true
        filters:{
          expanded:true
        },
        urlParams:{
          standalone:3 // here you can add the url_params and there values
        }
      }
    });
  })

  var iframe = document.querySelector("iframe")
  if (iframe) {
    iframe.style.width = '100%'; // Set the width of the iframe
    iframe.style.minHeight = '100vw'; // Set the height of the iframe
  }

}

export default App;

With this, when trying to get the guest_token, i get back a html instead of said token. This html is the login site. @dosubot any ideas?

[dosubot[bot]]

To resolve the issue of receiving an HTML login page instead of a guest token, ensure the following steps are correctly implemented:

1. Activate the Feature Flag: Ensure that the EMBEDDED_SUPERSET feature flag is activated in your Superset configuration.

2. Set the JWT Secret: Make sure you have set a strong password in the configuration variable GUEST_TOKEN_JWT_SECRET in your Superset configuration file (config.py). This secret is crucial for signing the guest token.

3. Backend Authentication: Your backend must authenticate with the can_grant_guest_token permission to request a guest token from Superset's POST /security/guest_token endpoint. Ensure that the backend is correctly authenticated and has the necessary permissions ^[1].

4. Correct Guest Token Request: Verify that your backend is correctly making a POST request to /security/guest_token with the appropriate payload. The payload should specify the resources (e.g., dashboard ID) and any optional user attributes or Row Level Security (RLS) rules.

Example payload for requesting a guest token:

{
  "user": {
    "username": "embed_user",
    "first_name": "embed",
    "last_name": "user"
  },
  "resources": [{
    "type": "dashboard",
    "id": "522b4480-cf6b-45f8-a361-97f27f929137"
  }],
  "rls": [
    { "clause": "" }
  ]
}

5. Frontend Configuration: Ensure that your frontend is correctly configured to use the guest token. The fetchGuestToken function should correctly fetch the token from your backend.

Example frontend code:

import { embedDashboard } from "@superset-ui/embedded-sdk";

embedDashboard({
  id: "522b4480-cf6b-45f8-a361-97f27f929137",
  supersetDomain: "http://localhost:8088",
  mountPoint: document.getElementById("superset-container"),
  fetchGuestToken: () => dt.data['token'],
  dashboardUiConfig: {
      filters: {
          expanded: true,
      },
      urlParams: {
          standalone: 3,
      }
  }
});

6. Embedded Page Initialization: Ensure that the embedded page is correctly set up to receive messages and handle guest tokens. The Superset frontend code includes a message event listener that initializes the embedded page with the guest token. Make sure this setup is correctly implemented and that the guest token is being passed to the setupGuestClient function ^[2].

By ensuring these configurations and steps are correctly followed, you should be able to receive a guest token instead of an HTML login page.

To continue talking to Dosu, mention @dosu.

---

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

[dawfunes]

After doing all those steps, i still get the same result, nothing has changed, i still have the login page html as an answer instead of the token. Can it maybe have something to do with a version of superset or something similar?
@dosubot

[dosubot[bot]]

Yes, it's possible that the issue is related to a specific version of Superset. Changes to the guest token authentication process were introduced in a commit titled "embedded: Ensure guest token is passed to log endpoint**" (#20647). If you're using a version of Superset prior to this change, it might be worth updating to a version that includes this commit to ensure that the guest token is handled correctly ^[1].

To continue talking to Dosu, mention @dosu.

---

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

[dawfunes]

I am not using a version prior to that, i am in fact using version 3.1.1. May it have something to do with the calls not being in the same session? if so, how would you make it so both of them are?
@dosubot

[dosubot[bot]]

To ensure that the authentication and guest token requests are made within the same session in Superset version 3.1.1, you can use the SupersetClientClass to manage authentication and token handling. Here's how you can achieve this:

1. Initialize the Superset Client: Use the SupersetClientClass to initialize the client with the necessary configuration, including the guest token if available.

2. Ensure Authentication: Before making any requests, ensure that the client is authenticated by calling the init() method. This method will handle the CSRF token retrieval and ensure that the session is authenticated. The ensureAuth method is automatically called before every request to verify authentication.

3. Use Guest Token: If a guest token is provided, it will be included in the request headers automatically.

Here is a code snippet demonstrating these steps:

import { SupersetClientClass } from '@superset-ui/core';

// Initialize the client with necessary configuration
const client = new SupersetClientClass({
  protocol: 'https:',
  host: 'your-host',
  guestToken: 'your-guest-token', // Optional: provide guest token if available
  guestTokenHeaderName: 'guestTokenHeader', // Optional: specify the header name for the guest token
});

// Ensure the client is authenticated
await client.init();

// Now you can make requests, and the client will handle authentication and guest token automatically
await client.get({ url: 'your-api-endpoint' });

This setup ensures that both authentication and guest token requests are managed within the same session, leveraging the SupersetClientClass to handle the necessary token management and request configuration ^[1].

To continue talking to Dosu, mention @dosu.

---

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

[dawfunes]

Now it is saying that im missing the csrf token, do i also need it? if so, how do i implement it?
@dosubot

[dosubot[bot]]

To resolve the missing CSRF token error, you need to ensure that the SupersetClientClass is initialized with a CSRF token. You can achieve this by calling the getCSRFToken method, which fetches the CSRF token and sets it in the headers for subsequent requests. Here's how you can do it:

import SupersetClientClass from 'path-to-superset-client-class';

// Initialize the Superset client
const supersetClient = new SupersetClientClass({
  // other configurations
});

// Fetch and set the CSRF token
supersetClient.getCSRFToken().then(() => {
  // Now you can make authenticated requests
  supersetClient.post({
    endpoint: '/your-endpoint',
    body: JSON.stringify({ /* your payload */ }),
  }).then(response => {
    // handle response
  }).catch(error => {
    // handle error
  });
}).catch(error => {
  console.error('Failed to fetch CSRF token:', error);
});

Make sure to replace 'path-to-superset-client-class' with the actual path to your SupersetClientClass module. The getCSRFToken method makes a GET request to the endpoint api/v1/security/csrf_token/ to retrieve the CSRF token and sets it in the headers as X-CSRFToken ^[1].

To continue talking to Dosu, mention @dosu.

---

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