Passing authenticated user into Superset iFrame with Keycloak

[kerem-coemert]

Hello,

I use KeyCloak as my auth provider, and as such implemented the required changes to my local Superset repo by adjusting the superset_config.py, and adding client_secret.json and keycloak_security_manager.py, as explained in the docs and also this arcticle.

Now when I docker compose up the docker-compose.yml and access the superset frontend from its default 8088 port, I indeed get the Keycloak Login page instead of Superset's, and can login and see my dashboards with the Gemma role.

I also have a SvelteKit based frontend project, in which I would like to embed the entire Superset frontend as an iframe. In this case I do not want to embed a specific dashboard (hence embedded-sdk is not useful to me), but rather I would like the embedded iframe to include the entire /welcome/home route, so the user can navigate between multiple dashboards potentially.

I also authenticate to this frontend using keycloak-js, and am able to get an authenticated token. My problem is now that I need to pass the user that authenticated through my frontend, so that when I navigate to the page with the superset iframe, I wouldn't see neither superset's native login page, or the Keycloak login page since the user has already logged in from my frontend. Later on I want to map keycloak users to specific superset roles, such that I can configure which dashboards can be seen by which users. How can I do that?

I was initially passing the jwt guest token that I generate in the frontend using the same GUEST_TOKEN_JWT_SECRET as I have in the Superset config in various ways. So for example the url that the iframe receives was:

const token = jwt.sign(payload, env.SUPERSET_GUEST_TOKEN_JWT_SECRET, {
		algorithm: 'HS256'
	})
const url: string = `${env.SUPERSET_FRONTEND_URL}/login?guest_token=${token}&next=/&standalone=true`

but would this work now that I do not have a guest login but rather login through keycloak? And that I also want to be able to see a list of dashboards, not just one.

Thank you :)

[dosubot[bot]]

To achieve your goal of embedding the entire Superset frontend in an iframe without encountering the Superset or Keycloak login pages, and to map Keycloak users to specific Superset roles, you can follow these steps:

1. Use Keycloak for Authentication: Since you are already using Keycloak for authentication in your SvelteKit frontend, ensure that your Superset instance is configured to use Keycloak as the identity provider. This involves setting up the keycloak_security_manager.py and configuring superset_config.py to use OpenID Connect with Keycloak.

2. Session Management: When a user logs in through your SvelteKit frontend, you should manage the session such that the authentication state is shared with the Superset iframe. This can be done by ensuring that the Keycloak session is valid and accessible when the iframe is loaded.

3. Avoiding the Login Page: To bypass the login page in the Superset iframe, you can use the Keycloak session token to authenticate the user directly. This might involve customizing the Superset login flow to accept a Keycloak token and establish a session without showing the login page.

4. Role Mapping: You can map Keycloak users to specific Superset roles using the AUTH_ROLES_MAPPING configuration in Superset. This allows you to assign roles based on Keycloak group memberships or claims. For example:

   AUTH_ROLES_MAPPING = {
     "keycloak_group_name": ["SupersetRole"],
   }

5. Guest Token Consideration: The Guest Token feature is typically used for embedding specific dashboards and might not be suitable for your use case where you want to embed the entire Superset frontend. Since you are using Keycloak for authentication, focus on ensuring that the Keycloak session is recognized by Superset.

By following these steps, you should be able to embed the Superset frontend in your SvelteKit application without encountering login pages, while also controlling access to dashboards based on user roles.

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}

[kerem-coemert]

@dosu should manage the session such that the authentication state is shared with the Superset iframe
Write a svelte snippet to pass the authentication state into the iframe.

[dosubot[bot]]

Could you provide more details on how you are currently managing authentication in your SvelteKit application? Specifically, how are you handling the Keycloak session and token management? This information will help in crafting a Svelte snippet that effectively passes the authentication state to the iframe.

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}

[kerem-coemert]

@dosu

keycloak = new Keycloak({
			url: KEYCLOAK_CONFIG['auth-server-url'],
			realm: KEYCLOAK_CONFIG.realm,
			clientId: KEYCLOAK_CONFIG.resource
		})

		keycloak
			.init({
				onLoad: 'check-sso',
				pkceMethod: 'S256',
				checkLoginIframe: false
			})
			.then((authenticated) => {
				isAuthenticated = authenticated
				if (!authenticated) {
					// If not authenticated, redirect to Keycloak’s login page.
					keycloak.login()
				} else {
					console.log('User authenticated via Keycloak.')
					// at this point I can call `jwt.verify()` on the token with the keycloak public key to get the decoded payload that has the user information.

[dosubot[bot]]

To pass the authentication state into the iframe, you can append the Keycloak token to the iframe's URL as a query parameter. Here's a Svelte snippet to achieve this:

<script>
  import { onMount } from 'svelte';
  import Keycloak from 'keycloak-js';

  let iframeSrc = '';

  const keycloak = new Keycloak({
    url: KEYCLOAK_CONFIG['auth-server-url'],
    realm: KEYCLOAK_CONFIG.realm,
    clientId: KEYCLOAK_CONFIG.resource
  });

  onMount(() => {
    keycloak.init({
      onLoad: 'check-sso',
      pkceMethod: 'S256',
      checkLoginIframe: false
    }).then(authenticated => {
      if (authenticated) {
        console.log('User authenticated via Keycloak.');
        // Get the token
        const token = keycloak.token;
        // Set the iframe source with the token as a query parameter
        iframeSrc = `${env.SUPERSET_FRONTEND_URL}/?token=${token}`;
      } else {
        keycloak.login();
      }
    });
  });
</script>

<iframe src={iframeSrc} width="100%" height="600px"></iframe>

This snippet initializes Keycloak, checks if the user is authenticated, and if so, appends the Keycloak token to the iframe's URL. Ensure your Superset instance is configured to accept and validate this token for seamless authentication.

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}