Account recovery improvement (#31)
Monish C Mohan committed
Oct 25, 2022 at 16:32 UTC
459e2832a3525a23ac8c70b37ea3a794e6fbe1b4
8 files changed
+123
-14
content/getting-started/setting-up-your-npm-user-account/configuring-two-factor-authentication.mdx
+32
-3
@@ -69,7 +69,7 @@ For more information on supported 2FA methods, see "[About two-factor authentica
69
<Screenshot src="/getting-started/setting-up-your-npm-user-account/recovery-code.png" alt="Screenshot showing the Recovery Code page" />
70
71
72
- _Recovery codes are the only way to recover your account if you lose access to your second factor device. Each code can be used only once. You can [view and regenerate your recovery code][viewing-and-regenerating-recovery-code] from your 2FA settings page._
72
+ _Recovery codes are the only way to ensure you can recover your account if you lose access to your second factor device. Each code can be used only once. You can [view and regenerate your recovery code][viewing-and-regenerating-recovery-code] from your 2FA settings page. For secondary account recovery options, see "[Configuring account recovery options][configuring-account-recovery-options]."_
73
74
8. Click **Go back to settings** after confirming that you have saved your codes.
75
@@ -191,6 +191,32 @@ npm unpublish [<@scope>/]<pkg>[@<version>] --otp=123456
191
192
<Prompt>Enter one-time password from your authenticator: <PromptReply>123456</PromptReply></Prompt>
193
194
+## Configuring account recovery options
195
+
196
+When you enable 2FA on your npm user account, we strongly recommend you link your GitHub and/or Twitter accounts to your npm user account. In the event you lose access to your 2FA device and recovery codes, these linked accounts can be used to verify your identity and expedite the recovery of your npm account.
197
+
198
+1. <>{shared['user-login'].text}</>
199
+
200
+ <>{shared['user-login'].image}</>
201
+
202
+2. <>{shared['account-settings'].text}</>
203
+
204
+ <>{shared['account-settings'].image}</>
205
+
206
+3. To [link your GitHub][advanced-github-setup] account, on the account settings page, under "Linked Accounts & Recovery Option", click **Link with GitHub**.
207
+
208
+ <Screenshot src="/getting-started/setting-up-your-npm-user-account/link-github-account.png" alt="Screenshot showing Link GitHub account button" />
209
+
210
+4. On the authorization page, verify all information looks correct. Then click **Authorize npm account link**.
211
+
212
+5. To [link your Twitter][advanced-twitter-setup] account, on the account settings page, under "Linked Accounts & Recovery Option", click **Link with Twitter**.
213
+
214
+ <Screenshot src="/getting-started/setting-up-your-npm-user-account/link-twitter-account.png" alt="Screenshot showing Link Twitter account button" />
215
+
216
+6. On the authorization page, verify all information looks correct. Then click **Authorize app**.
217
+
218
+The Twitter or GitHub account is now linked to your npm account. To remove the link to either account, you can click the **Remove** button next to the account you want to remove from your npm account.
219
+
220
## Resolving TOTP errors
221
222
If you are entering what seems to be a valid [TOTP][totp] but you see an error, be sure that you are using the correct authenticator account. If you have multiple authenticator accounts, using an TOTP from the wrong account will cause an error.
@@ -199,7 +225,7 @@ Also, when you reset two-factor authentication after it has been disabled, the a
225
226
[about-two-factor-authentication]: /about-two-factor-authentication
227
[authorization-and-writes]: /about-two-factor-authentication#authorization-and-writes
202
-[login]: https://docs.npmjs.com/cli/adduser
228
+[login]: /cli/adduser
229
[recovering-your-2fa-enabled-account]: /recovering-your-2fa-enabled-account
230
[can-i-use]: https://caniuse.com/#search=webauthn
231
[viewing-and-regenerating-recovery-code]: /recovering-your-2fa-enabled-account#viewing-and-regenerating-recovery-code
@@ -214,4 +240,7 @@ Also, when you reset two-factor authentication after it has been disabled, the a
240
[face-id]: https://support.apple.com/en-us/HT208108
241
[yubikey]: https://www.yubico.com/
242
[thetis]: https://thetis.io/
217
-[feitian]: https://www.ftsafe.com/
\ No newline at end of file
243
+[feitian]: https://www.ftsafe.com/
244
+[configuring-account-recovery-options]: /configuring-two-factor-authentication#configuring-account-recovery-options
245
+[advanced-github-setup]:managing-your-profile-settings#linking-your-npm-and-github-accounts
246
+[advanced-twitter-setup]: /managing-your-profile-settings#linking-your-npm-and-twitter-accounts
content/getting-started/setting-up-your-npm-user-account/receiving-a-one-time-password-over-email.mdx
+23
@@ -24,3 +24,26 @@ For your security, npm may require additional verification to allow you to log i
24
## Enabling two-factor authentication
25
26
To avoid this additional login step, with a one-time password sent to you via e-mail, you can configure [two-factor authentication with a device](/configuring-two-factor-authentication) (2FA) instead.
27
+
28
+## Unable to access email
29
+
30
+If you are unable to access the email linked to your npm account, you can submit a support ticket to reset this email address.
31
+
32
+1. <>{shared['user-login'].text}</>
33
+
34
+ <>{shared['user-login'].image}</>
35
+
36
+2. Under the "Login Verification" form, click **Try recovering your account**.
37
+
38
+3. <>{shared['start-account-recovery'].text}</>
39
+
40
+ <>{shared['start-account-recovery'].image}</>
41
+
42
+4. <>{shared['support-ticket-form'].text}</>
43
+
44
+ * <>{shared['enter-email-address'].text}</>
45
+ * In the **How can we help?** section, select **Reset my email**.
46
+ * <>{shared['support-ticket-other'].text}</>
47
+ <>{shared['connect-to-accounts'].text}</>
48
+
49
+5. <>{shared['submit-support-ticket'].text}</>
\ No newline at end of file
content/getting-started/setting-up-your-npm-user-account/recovering-your-2fa-enabled-account.mdx
+38
-10
@@ -15,19 +15,19 @@ If you have misplaced the device that provided second-factor authentication, you
15
16
<>{shared['user-login'].image}</>
17
18
-3. Click on "Use recovery code" from the next screen
18
+3. <>{shared['use-recovery-code'].text}</>
19
20
- <Screenshot src="/getting-started/setting-up-your-npm-user-account/recovery-code-link.png" alt="Screenshot showing Security Key prompt with a link to navigate to the recovery code input screen" />
20
+ <>{shared['use-recovery-code'].image}</>
21
22
_Note: If you have configured to use TOTP, you will see an TOTP prompt instead_
23
24
-4. Enter an unused recovery code in the "Use a Recovery Code" prompt
24
+4. Enter an unused recovery code in the "Use a Recovery Code" prompt.
25
26
<Screenshot src="/getting-started/setting-up-your-npm-user-account/user-a-recovery-code.png" alt="Screenshot showing use a recovery code prompt with an input box to enter the recovery code" />
27
28
5. You are now logged into npm.
29
30
-5. Follow the steps mentioned in "[Removing 2FA on the web][removing-2fa-on-the-web]" to disable 2FA
30
+6. (Optional) To disable 2FA, see "[Disabling 2FA][removing-2fa-on-the-web]".
31
32
### Using recovery code from the command line
33
@@ -35,7 +35,7 @@ If you have misplaced the device that provided second-factor authentication, you
35
36
2. If you are logged out on the command line, log in using `npm login` command with your username and npm password.
37
38
-5. Enter an unused recovery code when you see this prompt:
38
+3. Enter an unused recovery code when you see this prompt:
39
40
<Prompt>Enter one-time password:</Prompt>
41
@@ -49,9 +49,9 @@ If you have misplaced the device that provided second-factor authentication, you
49
50
<Prompt>Enter one-time password:</Prompt>
51
52
-5. npm will confirm that two-factor authentication has been disabled.
52
+6. npm will confirm that two-factor authentication has been disabled.
53
54
-6. Follow the steps outlined in "[Configuring two-factor authentication][configuring-two-factor-authentication]" to re-enable 2FA and generate new recovery codes.
54
+7. Follow the steps outlined in "[Configuring two-factor authentication][configuring-two-factor-authentication]" to re-enable 2FA and generate new recovery codes.
55
56
<Note>
57
@@ -81,7 +81,7 @@ If you are using a [time-based one-time password (TOTP)][totp] mobile app and wa
81
82
<Screenshot src="/getting-started/setting-up-your-npm-user-account/2fa-modify.png" alt="Screenshot showing Modify 2FA button" />
83
84
-4. Click "Manage Recovery Codes'' to view your recovery codes
84
+4. Click "Manage Recovery Codes" to view your recovery codes.
85
86
<Screenshot src="/getting-started/setting-up-your-npm-user-account/view-recovery-codes.png" alt="Screenshot showing existing recovery codes and a button to generate set of recovery codes" />
87
@@ -89,12 +89,40 @@ If you are using a [time-based one-time password (TOTP)][totp] mobile app and wa
89
90
## Misplaced recovery codes
91
92
-If you have misplaced both the device that provided second-factor authentication and your recovery codes, we may be unable to help you recover your account. If you have any questions, please [contact npm Support][contact-support].
92
+If you have misplaced both your 2FA device and your recovery codes, you can contact our support team to attempt to recover your account. Provide as much information as possible to help us expedite the request faster.
93
+
94
+1. <>{shared['user-login'].text}</>
95
+
96
+ <>{shared['user-login'].image}</>
97
+
98
+2. <>{shared['use-recovery-code'].text}</>
99
+
100
+ <>{shared['use-recovery-code'].image}</>
101
+
102
+3. Under the "Use a Recovery Code" form, click **Try recovering your account**.
103
+
104
+4. <>{shared['start-account-recovery'].text}</>
105
+
106
+ <>{shared['start-account-recovery'].image}</>
107
+
108
+5. If you have access to your registered email, enter the one-time password sent to your email in the **One-Time Password** field, then click **Verify Email Address**.
109
+_If you do not have access to your registered email, select **Skip email verification** at the bottom of the form._
110
+
111
+6. <>{shared['support-ticket-form'].text}</>
112
+
113
+ * <>{shared['enter-email-address'].text}</>
114
+ * In the **How can we help?** section, select **Reset my two-factor authentication (2FA)**.
115
+ * <>{shared['support-ticket-other'].text}</>
116
+ <>{shared['connect-to-accounts'].text}</>
117
+
118
+ <Screenshot src="/getting-started/setting-up-your-npm-user-account/recover-account.png" alt="Screenshot showing existing recovery codes and a button to generate set of recovery codes" />
119
+
120
+7. <>{shared['submit-support-ticket'].text}</>
121
122
[contact-support]: https://www.npmjs.com/support
123
[configuring-two-factor-authentication]: /configuring-two-factor-authentication
124
[setup-recovery-codes]: /configuring-two-factor-authentication#enabling-2fa-on-the-web
97
-[removing-2fa-on-the-web]: /configuring-two-factor-authentication#removing-2fa-on-the-web
125
+[removing-2fa-on-the-web]: /configuring-two-factor-authentication#disabling-2fa
126
[using-recovery-code-on-the-web]: /recovering-your-2fa-enabled-account#using-recovery-code-on-the-web
127
[viewing-and-regenerating-recovery-code]: #viewing-and-regenerating-recovery-code
128
[totp]: https://en.wikipedia.org/wiki/Time-based_one-time_password
src/shared.js
+30
-1
@@ -5,7 +5,7 @@ import {Note, Screenshot} from 'theme';
5
const shared = {
6
/* User login */
7
'user-login': {
8
- 'text': (<><Link href="https://www.npmjs.com/login">Log in</Link> to npm with your user account.</>),
8
+ 'text': (<>On the npm "<Link href="https://www.npmjs.com/login">Sign In</Link>" page, enter your account details and click <strong>Sign In</strong>.</>),
9
'image': (<Screenshot src="/shared/user-login.png" alt="Screenshot of npm login dialog" />)
10
},
11
'contact-support': {
@@ -22,6 +22,35 @@ const shared = {
22
'text': (<>In the upper right corner of the page, click your profile picture, then click <strong>Account</strong>.</>),
23
'image': (<Screenshot src="/shared/account-settings.png" alt="Screenshot of account settings selection in user menu" />)
24
},
25
+ 'start-account-recovery': {
26
+ 'text': (<>On the "Request an Account Recovery" page, click <strong>Start Account Recovery</strong>.</>),
27
+ 'image': (<Screenshot src="/getting-started/setting-up-your-npm-user-account/request-account-recovery.png" alt="Screenshot showing account recovery page" />)
28
+ },
29
+ 'use-recovery-code': {
30
+ 'text': (<>On the "Two-Factor Authentication" page, click <strong>Use a recovery code or request a reset</strong>.</>),
31
+ 'image': (<Screenshot src="/getting-started/setting-up-your-npm-user-account/recovery-code-link.png" alt="Screenshot showing Security Key prompt with a link to navigate to the recovery code input screen" />)
32
+ },
33
+ 'support-ticket-form': {
34
+ 'text': (<>In the "Open a Support Ticket" form, enter the following information:</>),
35
+ },
36
+ 'enter-email-address': {
37
+ 'text': (<>In the <strong>Email</strong> field, enter an email address where our support team can contact you.</>),
38
+ },
39
+ 'support-ticket-other': {
40
+ 'text': (<>If you need help with anything else, in the <strong>How can we help?</strong> section, select <strong>Other</strong> and enter more information in the <strong>Additional Details</strong> field.</>),
41
+ },
42
+ 'connect-to-accounts': {
43
+ 'text': (<>
44
+ <ul>
45
+ <li>If you have previously linked a GitHub account to your npm account, select <strong>Connect to GitHub</strong>. This will help our support team verify your account.</li>
46
+ <li>If you have previously linked a Twitter account to your npm account, select <strong>Connect to Twitter</strong>. This will help our support team verify your account.</li>
47
+ </ul>
48
+ </>
49
+ ),
50
+ },
51
+ 'submit-support-ticket': {
52
+ 'text': (<>At the bottom of the form, click <strong>Submit Support Ticket</strong>.</>),
53
+ },
54
55
/* Billing */
56
'billing-creditcard-form': {
static/getting-started/setting-up-your-npm-user-account/link-github-account.png
Binary files /dev/null and b/static/getting-started/setting-up-your-npm-user-account/link-github-account.png differ
static/getting-started/setting-up-your-npm-user-account/link-twitter-account.png
Binary files /dev/null and b/static/getting-started/setting-up-your-npm-user-account/link-twitter-account.png differ
static/getting-started/setting-up-your-npm-user-account/recover-account.png
Binary files /dev/null and b/static/getting-started/setting-up-your-npm-user-account/recover-account.png differ
static/getting-started/setting-up-your-npm-user-account/request-account-recovery.png
Binary files /dev/null and b/static/getting-started/setting-up-your-npm-user-account/request-account-recovery.png differ