Passkeys screen layout issue

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

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

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

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