Architecting an elegant login experience in a multi-account world

Transcript

2. THE BEGINNING
3. THE BEGINNING
4. THE BEGINNING
5. USER LOGIN & CREATE WORKSPACE PROCESSES SUCCESS URL CREATE WORKSPACE WORKSPACE NAME CONFIRM EMAIL SIGNED IN EMAIL LOGIN URL CONFIRM EMAIL
6. THE SOLUTION CREATE WORKSPACE SIGNED IN (ALL ACCOUNTS) CONFIRM EMAIL
7. THE SOLUTION SSO TWO FACTOR AUTH ADMIN/GUEST SIGNED IN CREATE WORKSPACE CONFIRM EMAIL
8. THE SOLUTION SSO TWO FACTOR AUTH ADMIN/GUEST burritocrazy@gmail.com crazy4burritos@slack.com SIGNED IN CREATE WORKSPACE SSO TWO FACTOR AUTH ADMIN/GUEST CONFIRM EMAIL SIGNED IN CREATE WORKSPACE CONFIRM EMAIL
9. THE ANATOMY OF AN AUTH REQUEST CONFIRM EMAIL YES NO YES NO OPEN MULTI FACTOR AUTH YES NO OPEN PROMPT SIGN IN HAS ANY MFA ACCOUNTS? HAS MULTIPLE MFA ACCOUNTS? HAS ANY STANDARD AUTH ACCOUNTS? HAS PENDING AUTH WORKSPACES? OPEN PENDING AUTH SCREEN NO YES SHOW EMPTY STATE OPEN SLACK
10. THE SOLUTION CONFIRM EMAIL
11. THE SOLUTION SIGNED IN SIGNED IN
12. THE SOLUTION MULTI-FACTOR AUTH NO WORKSPACES EMPTY STATE & PENDING AUTH
13. THE SOLUTION MULTI-FACTOR AUTH NO WORKSPACES SHIP IT
14. THE PROBLEMS
15. OUR NORTH STAR % of users with one active account ~80%
16. THE ANATOMY OF AN AUTH REQUEST CONFIRM EMAIL YES NO YES NO OPEN MULTI FACTOR AUTH YES NO OPEN PROMPT SIGN IN HAS ANY MFA ACCOUNTS? HAS MULTIPLE MFA ACCOUNTS? HAS ANY STANDARD AUTH ACCOUNTS? HAS PENDING AUTH WORKSPACES? OPEN PENDING AUTH SCREEN NO YES SHOW EMPTY STATE OPEN SLACK
17. THE ANATOMY OF AN AUTH REQUEST CONFIRM EMAIL .YES. OPEN PROMPT SIGN IN HAS ANY ACCOUNTS? .NO. OPEN SLACK CONTAINS A STANDARD AUTH WORKSPACE? .YES. OPEN PENDING AUTH SCREEN .NO. HAS SINGLE ACCOUNT? NO WORKSPACE 
 SELECTION SCREEN
18. THE REDESIGN WORKSPACE 
 SELECTION SCREEN
19. THE REDESIGN UNAUTHED ACCOUNTS PROMPT SIGN IN
20. THE REDESIGN BEFORE AFTER TWO FACTOR AUTH
21. THE SLACK ARCHITECTURE FRAGMENT ACTIVITY View PRESENTER
 Presenter DATABASE Model NETWORK ACCOUNT MANAGER RxJava
22. THE SLACK ARCHITECTURE class LoginContract { interface Presenter : BasePresenter<View> public void fetchData(burritoId: String) } interface View : BaseView<Presenter> { public void displayData(burritos: Burritos) } }
23. THE SLACK ARCHITECTURE class Presenter { service.login() .subscribe(new Subscriber<LoginResult>>() { @Overridee Ppublicdvoid onError(Throwable throwable) { view.showError(); } @Override public void onNext(Workspace workspace) { view.loadData(result.data); } } });
24. TECHNICAL CHALLENGES @Override public void onNext(Workspace workspace) { if (workspace.exists()) {
 // open empty state
 } else if (workspace.isMfaRequired()) {
 // open MFA screen } else { // Open standard auth screen } }
25. TECHNICAL CHALLENGES sealed class FoundWorkspacesResult { class NoJoinableWorkspaces() : FoundWorkspacesResult() class SingleCurrentWorkspace() : FoundWorkspacesResult() class SingleOrg() : FoundWorkspacesResult())) class MultipleWorkspaces() : FoundWorkspacesResult() }
26. TECHNICAL CHALLENGES service.login())) .map { workspaces -> 
 when { workspace.exists()) -> NoJoinableWorkspaces())) workspace.size == 1 -> SingleCurrentWorkspace())) workspace.isEnterprise() -> SingleOrg())) else -> MultipleWorkspaces())) } }
27. THE REDESIGN .subscribe { foundWorkspacesResult ->> when (foundWorkspacesResult) { is NoJoinableWorkspaces ->> { view.openPendingInvitesActivity() } is SingleCurrentWorkspace ->> { view.joinWorkspace(JoinWorkspaceEvent.StandardAuth() } is SingleOrg ->> { view.openPromptSignInActivity() } is MultipleWorkspaces ->> { view.openWorkspaceSelectionActivity() } } }
28. THE REDESIGN @Override public void onError(Throwable e) {
 String errorCode = ((ApiError) e)).getErrorCode() 
 switch (errorCode) { case MULTI_FACTOR_REQUIRED: toggleErrorMessage(false); view.requireTwoFactorAuth(); break; }
29. THE REDESIGN onErrorReturn { response -> (response as ApiResponseError).let { when (it.errorCode) {
 ApiError.MULTI_FACTOR_REQUIRED -> MfaResult.MfaRequired())
 else -> MfaResult.Error(“Something went wrong!”) } } }
30. WHY IT MATTERS - know your customer - small amounts of friction add up to large pain points - good enough is never great - use Kotlin
31. THE END Thanks! @swolfand
32. THE SOLUTION