ACUL-based Universal Login cannot be embedded in an iframe due to enforced X-Frame-Options: deny

Get Help
,
1

Hi,

We are building a payments SDK that requires embedding the Universal Login page inside an iframe. We have implemented our login screens using ACUL (Advanced Customizations for Universal Login) with @auth0/auth0-acul-react (v1.0.0).

The Problem

When our application attempts to load the Universal Login page inside an iframe, the browser refuses to render it due to the following HTTP response header being enforced by Auth0’s server:

X-Frame-Options: deny
Content-Security-Policy: frame-ancestors ‘none’

We have confirmed via Auth0’s official documentation that this header is always enforced for New Universal Login (including ACUL) and cannot be disabled:

“The following action is not required if you are using the New Universal Login Experience because those headers are always set in that case.”

Source: Clickjacking Protection for Universal Login Change - Auth0 Docs

Questions

  1. Is there any existing solution or workaround that allows ACUL-based Universal Login to be loaded inside an iframe?
  2. We have also submitted a feature request on GitHub: [Feature Request] Allow ACUL-based Universal Login to be embedded in an iframe · Issue #336 · auth0/universal-login · GitHub Issues · auth0/universal-login · GitHub

We have considered loginWithPopup() and loginWithRedirect() but neither are suitable for our embedded payments SDK use case — popup is unreliable on mobile browsers, and redirect breaks the embedded experience entirely.

We are quite stuck on this and it is currently blocking our development progress. If anyone has faced a similar issue or has any insights — even partial ones — we would truly appreciate your input. Any help, no matter how small, goes a long way. Thank you so much in advance for taking the time to read and respond! :folded_hands:

Any help would be greatly appreciated. Thanks!