Need Better Customization Options for Passwordless Email (OTP) Flow with Universal Login and Lock Widget

Get Help
,
1

Hi Auth0 Community,

I’m currently implementing passwordless authentication using email and OTP in my application. Here’s the setup and the challenges I’m facing:

What I’ve Done:

  • Enabled Passwordless authentication with email (OTP) in my Auth0 dashboard.
  • Went to Branding > Universal Login and selected the Lock (passwordless) template under the Login tab.
  • Enabled the Custom Login Page toggle and used the Lock (passwordless) widget as recommended.
  • Customized the template as much as possible within the provided HTML/CSS and Lock widget options.

Current Experience:

  • The Lock (passwordless) widget offers only limited customization for branding and layout.
  • I’m unable to fully match the login page’s appearance to my application’s design or provide a seamless user experience.
  • The customization options (mainly through CSS) are not sufficient for my needs, and editing the widget’s UI feels restrictive.
  • The warning “One or more pages are using custom HTML to override the Universal Login experience” appears, which I understand is expected, but it highlights the lack of flexibility in the current setup.

What I Want:

  • More flexible and advanced customization options for the passwordless email (OTP) flow when using Universal Login and the Lock (passwordless) widget.
  • Ability to easily modify the layout, UI components, and overall appearance to better match my app’s branding—ideally without having to build a completely custom UI from scratch.
  • Guidance or roadmap information on whether Auth0 plans to improve customization for passwordless flows in the Universal Login (especially the New Experience).

Questions:

  1. Are there any recommended approaches or best practices for achieving a more custom/branded experience with the Lock (passwordless) widget?
  2. Is there a way to extend or override more of the Lock widget’s UI components?
  3. Are there plans to bring better passwordless customization to the New Universal Login experience?

Any advice, workarounds, or updates would be greatly appreciated!

Thanks in advance.

3

Hi @pitchwithai,

Welcome to the Auth0 Community!

For deep customization of the passwordless flow, the recommended approach is to use the New Universal Login experience, instead of the Classic Lock widget. This is Auth0’s modern, recommended approach and is designed to solve the exact branding and customization challenges you’re facing. To make the switch, disable the “Custom Login Page” toggle and select the Universal Login experience under Branding > Universal Login > Advanced options. You can customize the Universal Login experience by going to Branding > Universal Login > Customization options

If the New Universal Login still doesn’t offer the granular control you need, the final option is to build your own login UI from scratch using the Auth0.js library.

You create your own HTML form and use Auth0.js to call Auth0’s authentication APIs. You would call the $passwordlessStart()$ method to trigger the OTP email and then exchange the OTP for tokens using passwordlessLogin(). This gives you 100% control over the UI/UX but requires significantly more development effort. You are responsible for building and maintaining the entire user interface, including state management and error handling. This is generally only recommended when branding requirements are exceptionally strict.

If you have any other questions, feel free to reach out.

Have a good one,
Vlad

4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.