[Feature Request] Support a pre-filled email address

[dmjones]

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?).

[wti806]

@dmjones This is a reasonable use case we would like to support in future. We will look into it and keep you posted. Thanks!

[j4velin]

@dmjones could you share your code? I'm trying the same thing, but this:

uiShown: function() {
    document.getElementById('loader').style.display = 'none';
    var mailField = document.getElementsByName('email')[0];
    console.log("mailField: ", mailField);

always give "mailField: undefined" on the console :(

[bhr]

@j4velin Here's how I made it work:

const modifyLoginUI = () => {
    const emailInputField = document.getElementById('ui-sign-in-email-input');
    const userEmail = 'user@email'
    if (userEmail && userEmail !== undefined) {
      emailInputField?.setAttribute('value', userEmail);
    }
  };

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.

[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 = 'user@email.com';
            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?)

[arickuter]

Any update on this feature? I am in need of this now :)

[xil222]

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

[arickuter]

Awesome! Thanks @xil222

[tirthb]

This worked for me for web UI:

uiShown: function() {
                    // The widget is rendered.
                    // Hide the loader.
                    document.getElementById('loader').style.display = 'none';

                    const emailInput = document.getElementsByClassName(
                    "firebaseui-id-email"
                    )[0];

                    if (email) {
                        emailInput.value = email;
                        emailInput.readOnly = true;
                    }

                }

[mdavo6]

Just to add to the previous responses. If others are running into the same problem with label obscuring the text I was able to resolve the issue with the label dropping down by adding an is-dirty class to parent of the email input field.

const email = 'test@email.com';
const emailInputField = document.getElementById('ui-sign-in-email-input');
emailInputField?.setAttribute('value', email);
emailInputField?.parentElement?.classList.add('is-dirty');