Firebaseui-web: Display email and password input boxes with buttons to sign in with google and facebook

[finppp]

Is it currently possible to display the inputs for email and password signin, with a button for 'sign in with Facebook' and 'sign in with Google'?

Looking for something somewhat similar to this: https://www.pinkbike.com/user/login/

Thanks

[TMSCH]

Hi @finppp, this is currently not possible.
We don't want to have directly the email and password fields apparent as the current flow behaves differently. The user is first prompted to enter their email address, and then FirebaseUI detects whether the email already exists or is a new one, and displays accordingly the sign up form or the sign in form.

[finppp]

Ok, thank you for the info

[mhuebert]

I am currently dealing with real-world complaints because the current flow is counterintuitive for many users. It is very different from how most popular websites operate - eg/ facebook.com or twitter.com.

It also requires unnecessary clicking, for users who would enter an email/password. (Faster to have an autofocused email input display immediately on login/registration pages, which you can see on both Twitter and Facebook.)

These concerns could be addressed (pending further UX tests) by

1. The option to display the email/password flow at the same time as provider buttons,
2. The option to enter directly into the email/password flow at the 'sign-in' or 'create account' phase, making clear to the user what stage they are at.

[bojeil-google]

I don't see how an auto focused email/password is faster than a single click on a provider sign in button. Facebook and Twitter display that input because you have to provide the email and password to sign to Facebook/Twitter.

I see the value and merits in having an identifier first flow (ask email first). firebaseUI has chosen the provider first flow as it is the recommended flow on mobile devices and we want to minimize the need for developer to type in their email address. I will relay your request for an identifier first flow to the relevant folks.

[finppp]

I have also gone through testing and have received feedback from people:
-not understanding what 'login with email' means
-requesting a similar flow to twitter

[mhuebert]

An auto-focused email field is faster for those who use email/password, because you can just start typing your email address, instead of clicking on a button first. It is also not slower for those who wish to sign in with another provider.

Firebase Auth provides first-class support for email/password authentication, and FirebaseUI's readme describes it as providing 'best-practices' on mobile devices _and_ websites.

On websites, the 'provider-first' flow is not a well-known or commonly used pattern. Among Alexa's top 25 websites in the US, _all_ websites which offer both email/password and provider authentication display an email form and provider buttons on their registration screens:

Netflix (10): https://www.netflix.com/de-en/login
Imgur (11): https://imgur.com/register?redirect=http%3A%2F%2Fimgur.com%2F
Instagram (13): https://www.instagram.com
ESPN (16): http://www.espn.com/
Twitch (23): https://www.twitch.tv/
Pinterest (25): https://www.pinterest.com/

Those not listed only offer an email/password option.

Unless/until these norms shift, I think we should support a UX that will be intuitive for typical users. Anecdotally, I am currently unable to turn on Google sign-in for my largest project, because my most important customers don't like the UX and don't want to confuse their users. (By only using email auth, we can show an email field immediately, which users can make sense of; as soon as we enable another provider, that familiarity will go away.)