Budibase in iframe with Entra ID SSO - Authentication Issues

[gewubuntu]

Hi everyone,

I'm having trouble embedding a Budibase app within a React application using an iframe, while maintaining authentication via Entra ID (Azure Active Directory) SSO.

Here's my setup:

• React App: My main application, using Entra ID for authentication.
• Budibase App: A separate application built with Budibase, also using Entra ID for SSO (same tenant as the React app).
• Iframe: I'm embedding the Budibase app within the React app using an <iframe>.

The Problem:

When a user is logged into the React app (via Entra ID), the iframe containing the Budibase app fails to authenticate. The user is prompted to log in again within the iframe, even though they're already authenticated with the same Entra ID instance.

What I've Tried:

• I've confirmed that both the React app and Budibase app are correctly configured for Entra ID SSO individually. They work fine when accessed directly.
• I've checked the network requests and see that the cookies from the main React app context are not being sent with the iframe requests to the Budibase app.
• I've tried programmatically logging in to Budibase using the /api/global/auth/default/login route (sending the Entra ID token or relevant credentials) and then attempting to pass the resulting cookies to the iframe. However, even after a seemingly successful login via the API, the iframe still receives a 403 Forbidden error when trying to load the Budibase app. This suggests the cookies obtained from the API call are either not being correctly passed to the iframe, are insufficient for authentication within the iframe context, or are being rejected by Budibase for some reason when used in the iframe.

My Questions:

1. What's the recommended way to pass authentication from a parent application (React) to an embedded Budibase app in an iframe, when using Entra ID SSO? Given that my direct API login attempt is failing with a 403, I'm particularly interested in alternative, supported methods.
2. Is the postMessage API the best approach for this? If so, are there any Budibase-specific examples or best practices for implementing this? Specifically, how would I use the token received via postMessage to establish a session within the Budibase app? Would I need to use custom JavaScript components or the "Execute JavaScript" action?
3. Are there any SameSite cookie configurations I should be aware of that might be causing this issue? My React app and Budibase app are currently on different domains. I'm particularly interested in how SameSite interacts with the 403 error I'm seeing after the API login. Could the Budibase server be rejecting the cookies in the iframe context because of SameSite restrictions, even if they are technically present?
4. Could there be any Entra ID application registration settings (permissions, redirect URIs, etc.) that I need to adjust to allow cross-application SSO in this iframe scenario? Could the 403 error be related to Entra ID configuration, even though individual app logins work?
5. I have also read about creating a proxy server. Is this a possible option, or is overkill?
6. Is it secure/viable to pass an authentication token through the iframe's URL?
7. Why might the /api/global/auth/default/login route be returning a successful response, but the subsequent iframe request (with those cookies) be resulting in a 403? Are there specific headers, cookie attributes, or other factors within Budibase that might cause this behavior? Is there a different API endpoint I should be using for iframe authentication?

Any guidance or suggestions would be greatly appreciated!