Consumer App Auth UX�Best practices for simple and secure sign-in and sign-up
Steven Soneff
Product Manager - Google Identity Platform�sso@google.com
Google | SIMux | Proprietary & Confidential
Password?
Username?
Google | SIMux | Proprietary & Confidential
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Duck by Christopher T. Howlett from the Noun Project
Auth UX is complex.
Did I use that?
Still have password...
Do I need to click this?
Yes, but which?
Still need this...
54%
Bad UX
=
Bad conversion
Principles of Auth UX�
Ask at the right time
Go identifier first
Make sign-up easy
Keep people signed-in
Link existing accounts
Don’t build it yourself!
Ask at the right time
Sign-in screens scare people away.
Pandora
I just want to try it out!
Really? Why?
Is it worth it?
What is this app?
Ask at the right time
First show what your app does
Captain Train?
Ask at the right time
First show what your app does
Let user try things before signing up
Hotels.com
Ask at the right time
First show what your app does
Let user try things before signing up
Explain why account creation is useful
Guardian?
Go identifier first
People are easily confused.
Did I use this?
Let me try my email...
Yes, but which?
Do I have one?
Not sure?
Go identifier first
Merge sign-in and sign-up�don’t duplicate UI!
Go identifier first
Merge sign-in and sign-up
Ask for identifier first�email address, phone number, etc.S
Eventbrite
Go identifier first
Merge sign-in and sign-up
Ask for identifier first
Steer to sign-up or sign-in intelligently e.g. with an identity provider, with password, etc.
Make sign-up easy
Every step adds friction.
Wego
Type this twice...
Do you really need it?
Why ask upfront?
Hate giving this!
Ah! More!
Why not auto-populate?
Make sign-up easy
Use APIs to fill info�Account Choosers, Google / Facebook Login, �Smart Lock HintRequest
Alibaba
Make sign-up easy
Use APIs to fill info
Ask for info only when needed�don’t ask for social or payment info upfront!
Doodle
Make sign-up easy
Use APIs to fill info
Ask for info only when needed
Minimize typing, avoid duplicates�search “why the confirm password field must die”
Make sign-up easy
Use APIs to fill info
Ask for info only when you need it
Minimize typing, avoid duplicates
Defer password creation�e.g. email user to set password later
Evernote
Hi,��Welcome to Food!
You can set a password here later, if you need it.
Thanks,
The Team
Keep people signed-in
Signing back in shouldn’t be hard.
Quora
Screw it, I give up.
Keep people signed-in
Sign existing users in automatically�e.g. Smart Lock, Facebook / Google Sign-In APIs
Keep people signed-in
Sign existing users in automatically
Use identifier to tell user how to sign-in�if user doesn’t have a password, let them know!
NYTimes
Keep people signed-in
Sign existing users in automatically
Use identifier to tell user how to sign-in
Manage and refresh sessions�e.g. user OAuth 2.0 access/refresh tokens
TBD
Link existing accounts
Duplicate accounts suck.
Error message
What’ll happen here?
What about my old account?
Which one last time...
Can I sign up again?
Now I have multiple accounts!
Link existing accounts
Check identifiers for existing accounts�don’t create a duplicate account!
Link existing accounts
Check identifiers for existing accounts
Help user link accounts securely�Facebook is not authoritative email provider
NYTimes
Link existing accounts
Check identifiers for existing accounts
Help user link accounts securely
Key on ID (not email / phone number)�user’s Google/Facebook email/phone number may change
Don’t build it yourself!
It will only lead to trouble.
Diagram
Ahhhh!
Don’t build it yourself
Avoid handling user passwords�you’ll get hacked eventually!
Don’t build it yourself
Avoid handling user passwords
Use (authoritative) identify providers�go passwordless!
GitKit screenshot
Don’t build it yourself
Avoid password DB toxic waste dump
Use (authoritative) identify providers
Leave it to the professionals!
let’s try it out!
Now do it a couple more times
Keep updated and in good working order
LOCs written per platform
>5k
>3k
>8k
Firebase
Auth + UI
LOCs needed per platform
5
>5k
>8k
7
>3k
7
Customizable UI: Theming
https://github.com/firebase/FirebaseUI-iOS
https://github.com/firebase/FirebaseUI-Android
FirebaseUI Auth
Managed authentication backend
6 sign-in methods, anonymous accounts
Client SDKs for Android, iOS and Web
Server SDKs for NodeJS, Java
Console for setup and user management
Firebase Auth
Principles of Auth UX�
Ask at the right time
Go identifier first
Make sign-up easy
Keep people signed-in
Link existing accounts
Don’t build it yourself!
Thank You!
Steven Soneff
sso@google.com
developers.google.com/identity
Smart Lock for Passwords
Firebase
Auth
Google �Sign-In
Go identifier first
Merge sign-in vs sign-up
Ask user for their email address, phone number, username, etc. first!
Intelligently steer them to create account, or sign in the right way (with IDP, password, SSO provider, etc.)
See last year’s CIS talk.
One-tap sign-up
Make it easy to sign up
Get basic info first with IDP or account chooser / hint selector
Ask for additional information incrementally
Don’t let user type stuff in manually :/
Defer password creation or generate a password!?
Keep users signed-in
Sign-in users with existing accounts automatically
Check when app starts: use IDP SDKs, Credential Management / Keychain APIs
Trigger the right flow based on saved info (IDP auth, u/p session set-up, SSO, etc)
Use session management to keep user signed-in! (access / refresh tokens)
Link existing accounts
Check identifiers for existing accounts
Help user (securely) link to an existing account
Use sub (not email / phone number) when available!
Don’t build it yourself
Password DB in a toxic waste dump.
IDP integration is tricky: security, account linking, recovery, etc.
Use an off-the-shelf solution instead of building something from scratch!
e.g. Firebase Auth, Auth0, AccountKit, etc.