Magic Login Page: option to log in with password is hard to find

[supernovia]

Quick summary

If a user needs to login with a username and password after using a magic link in the past, they struggle to find the login form.

The "Login" page shows an option to email a magic link, OR connect with a number of other services, which will typically create a new account instead of letting the user log connect a service with their existing account.

Only "Connect with Email" will show the form, and that's a counterintuitive option, since people usually want the login form if they've lost access to their email or if they have multiple accounts:

Could we have "OR" show a login form instead? And if we need to show social login options, can we only show the ones that actually work with the account so people don't accidentally create new accounts?

Steps to reproduce

1. Log out of WordPress.com using a test account
2. Click login and choose to email a magic link
3. Log in with the magic link
4. Log out again. Now pretend you're a user who doesn't have access to email currently.
5. Go back to Login and try logging in with the username and password.
6. If you're up for it, try logging in with one of the alternate non-email option mentioned; notice you get a new account instead. This can be bewildering for users who are just trying to log in and update their email address, especially if the new account has the email address they want to use 🙃

What you expected to happen

I expect a login form to be easy to find.

What actually happened

It's not easy to find, and people can accidentally create new accounts under various social logins instead, which causes more confusion.

Impact

Some

Available workarounds?

Yes, difficult to implement

If the above answer is "Yes...", outline the workaround.

I say "difficult" because users have a hard time guessing and end up reaching out to support through new accounts or social media; support will sometimes send a link to https://wordpress.com/wp-login.php?no_calypso . Or the user may realize they need to click the continue with email option, which is not intuitive if they are trying to log in without accessing their email.

Platform (Simple and/or Atomic)

No response

Logs or notes

This is an enhancement that borders on a bug, and affects quite a few users, so I'm marking it as high priority.

[supernovia]

Issue raised by a Twitter user.

NONE of these options lets me login to my main website

9220936-zd-a8c

But I'm sure other users run into this too; try searching for https://wordpress.com/wp-login.php?no_calypso

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9220936-zen

[valterlorran]

Hey @supernovia, thanks for this report! I was able to reproduce it and indeed we should fix it. It's a good option to update the text to "Continue with email or username". @fditrapani, can you chime in on this, please?

[StevenDufresne]

In regards to not finding the form, I wonder if it would be best to not "remember" login link usage as a first step.

It's most likely used for quick, temporary account access and the user would have not used Social Logins to create their account.

Secondly, we teach the user that it's #4` in the "or" list when they use it the first time (or when sessions expire) and then remove it from the list on subsequent trips. That is unexpected. It should always appear in the same place.

The same problem exists with the other social logins. I use Google at position #1 in the list, the next time, it's no longer in the list. It's on the left, in blue, which at a glance, looks like the original email/password form continue button.

[fditrapani]

Thanks for the ping @valterlorran. I'm not too familiar with this area but from what's been described already, it looks like we've over complicated this with trying to be too smart. I agree with @StevenDufresne that keeping the options in the same order makes more sense.

I like @supernovia's suggestion of showing an email password field on the left and the other options on the right.

Another approach that appears to be more common place now is that you start by providing your email first, and then we show you any relevant options.

[supernovia]

Yay, thanks for fixing this!