Branding Customizations are Ignored for the Passkey Enrollment Screen

Overview

This article explains a potential cause for Branding customizations being ignored on the Passkey Enrollment screen but reflected on other screens, like the login screen.


Screen: passkey-enrollment

Applies To

  • Branding
  • Passkey

Cause

This is a known issue on some tenants that is being actively worked on by the Auth0 engineering team.

Steps to reproduce the issue:

  1. Create a new tenant
  2. Authentication > Authentication Profile > Select Identifier First > Select Save and Proceed.
  3. Authentication > Database > Username-Password-Authentication > Authentication Methods tab > Toggle on Passkey.
  4. Branding > Universal Login > Customize Company Logo and Primary Color and then Save.
  5. Sign up for a new user.
    1. Enter email and select Continue.
    2. /u/signup/passkeys screen is displayed <— Branding is reflected.
    3. Select Continue without passkey.
    4. Enter password and select Continue.
  6. Login for the user.
    1. Enter email and select Continue.
    2. Enter password and select Continue.
    3. /u/passkey-enrollment screen is displayed <— Branding is NOT reflected.

Solution

Page Templates can be used as a workaround until the root issue is resolved.

Follow these steps to customize a logo.

  1. Add the following lines within the tag of the html document in the Page Templates.
    #custom-prompt-logo {
     background-image: url('https://{path_for_the_logo}.png');
    }
    
  2. Update the Page Templates using Management API Set template for New Universal Login Experience endpoint: Set template for New Universal Login Experience
  3. Transition from the application to the login page with the custom domain. When logging in as a registered user, confirm that the logo is applied to the Passkey Enrollment screen.