Page MenuHomePhabricator

Compare our login popup to other sites
Closed, ResolvedPublic

Assigned To
Authored By
matmarex
Jun 3 2024, 4:58 PM
Referenced Files
F55410363: image.png
Jun 17 2024, 5:42 PM
F55410365: image.png
Jun 17 2024, 5:42 PM
F55410360: image.png
Jun 17 2024, 5:42 PM
F55410356: image.png
Jun 17 2024, 5:42 PM
F55410354: image.png
Jun 17 2024, 5:42 PM
F55410346: image.png
Jun 17 2024, 5:42 PM
F55410315: image.png
Jun 17 2024, 5:42 PM
F55410300: image.png
Jun 17 2024, 5:42 PM

Description

Some other websites use a login popup similar to what we're planning to use for T364941.

For example:

We should have a look at them and see if they do anything better than we do.

More examples would be handy. I tried about a dozen of websites that use various providers (e.g. log in via Facebook, GitHub, etc.), but although they all seem to use the kind of design that would work in a popup, the websites integrating them perform a top-level navigation.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Some examples which use popup for social login: Uber, Reddit, Twitter, TikTok, LinkedIn, Pinterest.

FWIW Google's OAuth client library (which supports popup and top-level redirect mode) says "Key Point: For the best balance of usability and security using the Popup mode UX flow with Authorization code model is recommended."
They don't elaborate so I'm not sure whether they consider the redirect mode less usable or less secure. (I guess at a minumum it would be less usable from the developer's POV, since you need to implement a redirection target in your web app, while the popup can be handled entirely via the client library.)

We probably won't use the popup approach in the end, so I will cut this investigation short, but I wanted to note what I have already learned. I had a closer look at https://archive.org/donate and the two popup auth providers available there. Observations:

PayPal will fall back to an iframe interface when the browser blocks popups completely. It's interesting that they're not worried about the security of it (maybe it's rare enough to block cookies that it's not worth worrying about, but then it's interesting that they bothered implementing a fallback). Google will not, instead it fall backs to a top-level navigation.

Google Pay prefers using the Payment Request API, which is not supported by Firefox, and results in a different kind of popup (it's a separate browser window, but it's "attached" to the parent window like an alert() modal dialog). This is neat, but this API is not an option for us.

image.png (3,456×2,160 px, 711 KB)

I really liked the design of PayPal's backdrop in case the user loses the popup window. It shows a clear modal overlay that provides a fallback experience (…although it didn't work for me), and is designed with "soft" borders so that they don't have to worry about aligning the popup closely with it.

image.png (3,456×2,160 px, 990 KB)
image.png (3,456×2,160 px, 1 MB)

Google Pay just dims the whole page with a modal overlay, and brings the popup window to the front when the overlay is clicked. This doesn't seem that intuitive to me.

Lastly, both PayPal and Google Pay are able to detect when the user closes the popup window, and exit out of the modal backdrop on the parent window. We should definitely add this feature if we ever come back to this.

For the other websites, I took a few screenshots for reference. Some of these integrations aren't very good looking.

Most of them also neglect to close the login popup when the user leaves the login page without logging in, which was quite annoying for me when testing, but it's also not a good user experience.

Website ↓Auth provider →GoogleAppleOther
https://archive.org/donate
image.png (3,456×2,160 px, 896 KB)
image.png (3,456×2,160 px, 689 KB)
PayPal:
image.png (3,456×2,160 px, 990 KB)
https://www.reddit.com/
image.png (3,456×2,160 px, 1 MB)
image.png (3,456×2,160 px, 1 MB)
image.png (3,456×2,160 px, 979 KB)
https://uber.com/
image.png (3,456×2,160 px, 263 KB)
image.png (3,456×2,160 px, 282 KB)
image.png (3,456×2,160 px, 315 KB)
https://twitter.com/
image.png (3,456×2,160 px, 326 KB)
image.png (3,456×2,160 px, 379 KB)
image.png (3,456×2,160 px, 391 KB)
https://tiktok.com/
image.png (3,456×2,160 px, 3 MB)
image.png (3,456×2,160 px, 3 MB)
image.png (3,456×2,160 px, 2 MB)
Facebook: doesn't work. Twitter:
image.png (3,456×2,160 px, 2 MB)
https://linkedin.com/
image.png (3,456×2,160 px, 305 KB)
image.png (3,456×2,160 px, 306 KB)
image.png (3,456×2,160 px, 338 KB)
https://pinterest.com/
image.png (3,456×2,160 px, 3 MB)
image.png (3,456×2,160 px, 3 MB)
Facebook:
image.png (3,456×2,160 px, 2 MB)

I also did a bit of competitive analysis as a part of our design decision brief.

I'm going to expand on this just a bit further and then I'll add my examples inline instead of Google Slides for reference here as well!