Why do many sites now put username+password entry on different pages?

The reason your username and password are on different pages is to handle federated identities. Take a typical saas product. Initially you build your own login username and password. As you grow your users ask to login using gmail, LinkedIn or Microsoft so they don’t have to remember multiple usernames and passwords. If you enable third party login it means you have to redirect the site to the third party login page to authenticate.

To accomodate that you design your page so the user first enters username. In your system you check based on email who the identity provider is and redirect to that login journey.

For e.g. if Microsoft you redirect to Microsoft login page to authenticate.

If successful the third party login provider will send you back to your app with a JWT. In your app you check if the JWT is valid - if so allow access.

On first entering email on login, If your login provider is your own app, you redirect to your own login password page.

SAML, single sign on, 2FA confirmation, etc.

For example, I don't know what login method a user would be using (our own password? or redirect them to their corporate's auth portal) until they enter their email.

I'd like to mention that bitwarden seems to handle that rather well (the browser extension at) on the sites I tried. (Backblaze and google login for example)

If it's done properly, it shouldn't mess with password managers. The trick to doing it properly is to put a hidden password field on the first screen so the password manager can still fill it in. If the page sees them both filled in, it knows it's not dealing with a federated identity situation and can just log the user in.

Other services show both the username/password but send requests to the server as the user types their email address and take away the password field if it's an email associated with an SSO domain. I believe this is how Dropbox does it (could be remembering wrong).

I don't do this myself, but I did consider doing it, because to some degree it simplifies work flow in the login process.

By way of background I should point out that logins can be a Lot more complicated than just "enter login and password" and critically the complexity may be different per user.

For example some users have 2FA turned on, so we need to collect user name, password And say SMS code. This is the very tip of the iceberg.

So identifying the user first can make it easier to then determine which path to follow.

Ultimately I didn't go this route because AJAX can be used to get the user-name when entered. However it can then get complicated when the user name and password are entered and the login button clicked at the same time (like by a password manager).

So multi-step input is easier to code.

I thought the original intent was to help prevent phishing. If you have to enter you username on the initial page, the subsequent page could then present you with your profile picture and name. That would then condition the user to look for it. I have no evidence to validate that, but just how I thought it was designed to work.

All of the other comments seem to have much more logical explanations, like SSO and OAuth options.

evernote.com shows the username field, and you have to click "continue" and it has some dumb slow animation that reveals the password field. If you get your password wrong, the screen freezes for a few seconds, then the password field disappears and the reveal animation happens again, now with the "Incorrect password" message.

Maybe they really want people to use their app.

https://security.stackexchange.com/a/85180