Me: Two-Step: Allow users to 'Switch to a New Device'

[hoverduck]

Currently:
When a user gets a new mobile device they must 'disable' and 'enable' 2fa in order to switch phones. That flow is not intuitive to a user. They may not understand that disabling is required. They may (just maybe) continue carrying around their old phone just for auth. They may disable and never re-enable.

Hopefully:
We can implement a 'switch to a different device' option that allows users to 'update' their 2fa settings without disabling 2fa.

Comment:
Hi all,

I've been playing with Google and Dropbox 2FA switching / editing mechanism — Facebook and Twitter have slightly different flow and depend on their mobile apps — and the simplest approach, IMO, is Dropbox. When 2FA is enabled in Dropbox, user can edit the 2FA setting. The 2FA edit screen and flow are basically the same as initial setup of 2FA — user chooses how to retrieve the verification code (sms or app).

UI proposal

Using the same edit pattern as Dropbox allows us to reuse existing security-2fa-setup component. Followings show how 2FA edit applied in Calypso:

1. When 2FA is enabled, the edit button appears in Two-Step Authentication card inlined with disable button.
   
2. Clicking edit will reveals edit progress which basically the same as initial setup.
   

Any thought for the UI?

Code consideration

The TwoStep component renders Security2faDisable when user has 2FA enabled. The Security2faDisable renders the status of 2FA setting and components related to 2FA disabling processes. Now edit 2FA setting flow is introduced. The name Security2faDisable doesn't fit to the context anymore as edit and disable buttons are rendered in the same component. I propose the name Security2faEdit. Basically the disable related functions stay the same, it only introduces new state — editing. This state is used to indicate whether to prompt disabling section or editing section.

When state editing is true, Security2faEdit uses 2FA setup component, Security2faSetup, that renders screenshot no. 2. From there, we need to adjust Security2faSetup component to bypass initial-setup state by introducing new prop initialStep.

Todos

• Implement Security2faEdit. This component replaces Security2faDisable.

• Allows opt-in step state in Security2faSetup by introducing new prop initialStep. The initial state of step should be this.props.initialStep || 'initial-setup'. Another new prop is onCancelSetup — which allows Security2faEdit to get back to initial state rather than to Security2faSetup's initial-setup step.

• Import styles, in assets/stylesheets/_components.scss, from Security2faEdit and remove styles from Security2faDisable.

• Update READMEs mentioning Security2faDisable component — replaces it with Security2faEdit.

• Update TwoStep component to change the child component to Security2faEdit instead of Security2faDisable.

• The REST API endpoints /me/two-step/app-auth-setup/ always returns error if current user's 2FA is enabled with JSON response:

  {
     "_headers": {
         "Content-Type": "application/json",
         "Date": "Sun, 31 May 2015 15:39:21 GMT"
     },
     "error": "two_step_already_enabled",
     "message": "Two factor authentication is already enabled for the current user.",
     "name": "TwoStepAlreadyEnabledError",
     "statusCode": 400
  }

  I believe this is intended — from wpcom-undocumented and two-step-authorization it seems no function exposed to deal with updating 2FA settings.

[lancewillett]

This came up in an internal discussion today:

Someone noted that while some other services like Google give you to option to change devices, WP.com makes you completely disable 2FA which leaves your account temporarily less secure and invalidates your backup codes. Any plans to introduce the “Change “Device” functionality?

[stale]

This issue has been marked as stale because it hasn't been updated in a while. It will be closed in a week.
If you would like it to remain open, can you please you comment below and see what you can do to get things moving with this issue?
Thanks! 🙏

[simison]

Still an issue.

Here's an example from Google for some inspiration:

"Change phone" is suuuper clear and simple. :-) "Change device" would probably be better, though.

[stale]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.

[simison]

Still an issue:

A bit clearer today now with a link to https://en.support.wordpress.com/security/two-step-authentication/#moving-to-a-new-device

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.