[Feature Request] Support a pre-filled email address

Is your feature request related to a problem? Please describe.

In my landing page, I have a simple form where people can enter their email address and sign up. I want to take them to a separate page to complete the sign up using firebaseui. As a result, I need a way to pre-fill the email address for the EmailAuthProvider.

FYI, other users may go directly to my sign up page and will enter the email address manually.

Describe the solution you’d like

An additional option in signInOptions that allows me to specify an email address.

Describe alternatives you’ve considered

I currently solve this by setting the value of the “email” input in the uiShown callback. This works ok, but feels brittle as it relies on the name of the form field remaining constant over time.

It also has a visual problem if the user removes focus from the email field without editing it. In that case, the label will drop down and obscure the text (presumably because the input doesn’t consider it has been dirtied?).

[aheimlich]

The solution only works if you use email as the only sign-in option. If you provide multiple options, the approach doesn’t work as the email field is not available when uiShown is called.

People using multiple sign-in options can use this:

      uiShown: () => {
        const container = document.getElementsByClassName(
          "login-button-container"
        )[0];
        // Options for the observer (which mutations to observe)
        const config = { childList: true, subtree: true };

        // Callback function to execute when mutations are observed
        const callback = () => {
          const emailInput = container.querySelector("#ui-sign-in-email-input");

          if (emailInput) {
            emailInput.value = '[e-mail]';
            emailInput.readOnly = true;
          }
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);

        // Start observing the target node for configured mutations
        observer.observe(container, config);
      },

I found a uiChanged callback, but it’s not documented anywhere. So, I’d be hesitant to use it.

There’s also firebaseui.auth.AuthUI.prototype.startWithSignInHint, but that’s not publically exposed right now (are there any plans for this?)

[xil222]

@arickuter sorry, not yet. I’ll look onto this when I get time.