Passkeys screen layout issue

Get Help
,
1

We are seeing a layout issue only on the Passkey Enrollment screen. The “Create a passkey” button overlaps the content below it, making the UI appear broken. The normal login/signup screens render correctly.

We reproduced this across multiple browsers, and the issue appears specific to the hosted passkey screen.

Looks like this was already reported in Passkey Screen UI issue

Screenshot 2026-06-24 at 4.48.02 PM
Screenshot 2026-06-24 at 4.48.02 PM862×1358 91.3 KB

We are not using a custom Universal Login template, just the basic branding customizations.

3

I’ve enabled this in a different tenant and we have the same issue there as well

Screenshot 2026-06-24 at 5.03.18 PM
Screenshot 2026-06-24 at 5.03.18 PM842×1344 87.9 KB

4

Hi @lucho

Welcome to the Auth0 Community!

As far as I have investigated, this appears to be a reported bug caused by the Social Buttons being set to “Top” and no changes (like CSS) are causing this.

[OFFICIAL WORKAROUND]

  • Option 1: Switching the Social Buttons Layout to “Bottom” → this is recommended if you do not have a specific use case where your login screen needs to display the social login buttons on top of the user inputs.
  • Options 2: Instead of switching Social Buttons Layout to “Bottom,” you can use a page template workaround to correct the layout while keeping socials at the top. You can add the following to the Universal Login page template temporarily:
<!DOCTYPE html>
{% assign resolved_dir = dir | default: "auto" %}
<html lang="{{locale}}" dir="{{resolved_dir}}">
  <head>
    {%- auth0:head -%}
    {% if prompt.screen.name == "passkey-enrollment" %}
    <style>
      form[data-form-primary="true"] { order: 1; }
      div:has(> .passkey-begin-button) { order: 2; }
      div:has(> form[data-form-secondary="true"]),
      div:has(> a[href*="signup/identifier"]) { order: 3; }
    </style>
    {% endif %}
  </head>
  <body class="_widget-auto-layout">
    {%- auth0:widget -%}
  </body>

This ensures the correct ordering on the passkey enrollment screen without impacting your chosen layout.

Let me know if you have any other questions.

Kind Regards,
Nik

5

Thank you for the quick answer!

Is there any timeline on when the bug will be fixed? We don’t use page templates in all our environments, and I prefer how the social buttons look with “Top” alignment, so it would be great to be able to keep that.

6

Unfortunately, there is no ETA that I can provide on this matter. The provided material above is the only official solution for this specific issue at this time. I am sorry for the discomfort this has caused and I understand it can interfere with other requirements!

Kind Regards,
Nik