Disable auto-focus on email input in Universal Login

Product Feedback
, ,
1

Feature: Disable auto-focus on email input in Universal Login

Description: My main concern is to be able to remove the autofocus on the email input as I want to show the login without opening the keyboard or the autofill which automatically fills the email and password.

Use-case: I’m currently work with .NET MAUI and in iOS when the Safari browser is open, automatically the email input is focused. I would like to prevent this.

2

Hi @dzavala

Welcome to the Auth0 Community, and thank you for your feedback!

Dawid

3

The auto-focus is very annoying. The keyboard popping up hides the simpler Apple/Google login options, pushing most users to the more difficult, less-reliable option of email+password.

4

Agreed! Don’t hide social logins with the keyboard by thinking it’s easier for them to start typing when they could instead one-press be logged in!

5

Please add a switch for disable_autofocus !

But in the meantime, I got tired of waiting. I still didn’t want to maintain a custom login screen, so I found a hack:

Use the Management API with update:branding permission to post to <your-custom-domain>/api/v2/branding/templates/universal-login with the following HTML template. I started with the most basic sample template + a de-focus script on load.

The universal login styles apply as normal… except page background image! Strangely the page-background-image var is only available on a div wrapper with generated class names, missing when using a page template… so I had to manually add my background image.

You may get a slight focus/unfocus flicker, but it works. Reasonably robust as it doesn’t look for any auth0 element IDs, just de-focusses whatever is active.

<!DOCTYPE html>

{% assign resolved_dir = dir | default: “auto” %}

<html lang="{{locale}}" dir="{{resolved_dir}}">
  <head>
    {%- auth0:head -%}
  </head>

  <body class="_widget-auto-layout" style="background-image: url('https://<YOUR_IMAGE>'); background-size: cover; background-position: center; background-repeat: no-repeat;">
    {%- auth0:widget -%}

<script>
  window.addEventListener("load", function () {
    function blurActiveElement() {
      if (document.activeElement && document.activeElement.blur) {
        document.activeElement.blur();
      }
    }
    setTimeout(blurActiveElement, 0);
    setTimeout(blurActiveElement, 100);
    setTimeout(blurActiveElement, 300);
  });
</script>

</body>
</html>