Show login with username and password by default

[bobbui]

Is your feature request related to a problem? Please describe. Can firebase UI web be configured to show a login form with username, password? Right now it only show login with email button and user need to click on that button and enter the email and navigate to another form which is really inconvenient.

Describe the solution you'd like Show login with username and password by default

[bojeil-google]

Hey @thangbn, FirebaseUI is powered by Firebase Auth and Firebase Auth does not natively support sign-in with username and password (only email and password). In general, there are a lot of benefits to having the user's email mainly related to account recovery. Otherwise without that, a user who forgot their password or had their account hijacked will be unable to recover it.

That said, feel free to file an official feature request for that feature.

[bobbui]

@bojeil-google hi what i meant by username is actually email

[bojeil-google]

I think if you are only supporting email/password, then when you render firebaseui, just pass the firebase.auth.EmailAuthProvider.PROVIDER_ID sign in option and you should immediately see the email input field if I recall correctly (without the nascar screen showing with just one button). If that is not the case, please share the code you are using to render the sign-in UI.

[bobbui]

@bojeil-google I used firebase.auth.EmailAuthProvider.PROVIDER_ID but end up get only a single button this is the option i used:

const uiConfig = {
    signInFlow: 'popup',
    // signInFlow: 'redirect',
    signInSuccessUrl: '/',
    callbacks: {
        signInSuccessWithAuthResult: function (authResult, redirectUrl) {
            console.log(authResult);
            console.log(redirectUrl);
            return false;
        },
    },
    'credentialHelper': 'none',
    signInOptions: [
        {
            provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
            signInMethod: firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD
        },
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    ]
};

[bojeil-google]

Based on your signInOptions, you should see 5 buttons to sign in with email, Google, Facebook, GitHub and Twitter. We always show the "sign-in with email" button on the nascar screen when other buttons are available. We only skip that when no other providers are enabled.

[bobbui]

@bojeil-google good to know, thanks

[agrohs]

This would be ideal from a UX standpoint to be able to allow the Email/Password screen to show by default above the "nascar buttons". It would save an extra click and improve the customer's experience.

Something similar to below (with any added login buttons below 'Log In W/ Google')

Is there any way to do this today that I'm missing?

[Nyariki]

Any updates on this?

[shc023]

Also looking for a similar solution. We originally attempted to do a combination of:

1. firebaseui with only the email provider,
2. custom buttons below that programmatically triggers popup sign-ins,

which looked & worked fine for the common case.

However, we later realized in the case that user already have an account created with the Google provider, and then tries to sign in using the email form - Firebaseui is supposed to display an UI that basically says "You already have an account, sign in with Google instead", but instead it would break because when it attempts to generate the federatedSignIn template, it can't find providerConfigs for the Google provider (since in our firebaseui config we only specified EmailAuthProvider).

In such a case, the UI would actually appear blank and have no logs, because the exception is caught but not reported back.

I haven't located the uncompiled source-code, but from the inspector, the code that error'ed is this:

    function Tk(a, b) {
      a = a || {};
      a = a.ga;
      return D(a.rb ? a.rb : b.ib[a.providerId] ? "" + b.ib[a.providerId] : 0 == ("" + a.providerId).indexOf("saml.") ? ("" + a.providerId).substring(5) : 0 == ("" + a.providerId).indexOf("oidc.") ? ("" + a.providerId).substring(5) : "" + a.providerId);
    }

where a.ga in a = a.ga is roughly equivalent to templateData_.providerConfigs and it's null, so a.rb throws an exception in the line after.

Anyway, yes it would be nice to be able to show the form out of the box, since that's what the conventional UI looks like.

---

Update: I did find a work-around. It's hacky but it kinda works.

// in "options.callbacks"
        uiShown: () => {
          document.querySelector('.firebaseui-idp-password').click();
        }

[patricebender]

This would be ideal from a UX standpoint to be able to allow the Email/Password screen to show by default above the "nascar buttons". It would save an extra click and improve the customer's experience.

Something similar to below (with any added login buttons below 'Log In W/ Google')

Is there any way to do this today that I'm missing?

Hi, this is exactly what I want. Are there any updates?