Security launch docs (#19)
* documentation for --auth-type=web * documentation for twitter + github link
Myles Borins committed
Jul 26, 2022 at 12:07 UTC
b60bb4bd170da4a2a8544e54edfadbe016b37274
12 files changed
+103
-4
content/getting-started/managing-your-npm-user-account/managing-your-profile-settings.mdx
+54
-4
@@ -14,8 +14,8 @@ From the web, you can change the following user profile settings:
14
* Avatar
15
* Password
16
* Full name
17
-* GitHub user name
18
-* Twitter user name
17
+* Link GitHub Account
18
+* Link Twitter Account
19
* Email address added to package metadata
20
* Two-factor authentication status
21
@@ -27,6 +27,58 @@ From the web, you can change the following user profile settings:
27
28
<>{shared['account-settings'].image}</>
29
30
+### Linking you npm and GitHub accounts
31
+
32
+1. On the account settings page, you will find a button to link your GitHub account. Click that.
33
+
34
+ <Screenshot src="/getting-started/managing-your-npm-user-account/connect-github.png" alt="Screenshot of linking from Account Setting without any accounts linked" />
35
+
36
+2. If you are not currently logged in to GitHub you will be prompted to go through the authentication flow.
37
+
38
+ <Screenshot src="/getting-started/managing-your-npm-user-account/github-login.png" alt="GitHub login form" />
39
+
40
+3. After successfully logging in, or if you already had an active browser sessions, you will be prompted to "authorize npm account link", click the button.
41
+
42
+ <Screenshot src="/getting-started/managing-your-npm-user-account/github-authorize.png" alt="Landing page to authorize the installation of the npm account linking app" />
43
+
44
+4. You will be redirected to npm and the link will show as successful in your settings.
45
+
46
+ <Screenshot src="/getting-started/managing-your-npm-user-account/github-success.png" alt="Screenshot of linking from Account Setting with successfully linked GitHub account" />
47
+
48
+### Linking you npm and Twitter accounts
49
+
50
+1. On the account settings page, you will find a button to link your Twitter account. Click that.
51
+
52
+ <Screenshot src="/getting-started/managing-your-npm-user-account/connect-twitter.png" alt="Screenshot of linking from Account Setting without any accounts linked" />
53
+
54
+2. If you are not currently logged in to Twitter you will be prompted to go through the authentication flow. Click "Log in"
55
+
56
+ <Screenshot src="/getting-started/managing-your-npm-user-account/twitter-login.png" alt="Twitter login form" />
57
+
58
+3. After successfully logging in, or if you already had an active browser sessions, you will be prompted to "Authorize app", click the button.
59
+
60
+ <Screenshot src="/getting-started/managing-your-npm-user-account/twitter-authorize.png" alt="Landing page to authorize the installation of the npm account linking app" />
61
+
62
+4. You will be redirected to npm and the link will show as successful in your settings.
63
+
64
+ <Screenshot src="/getting-started/managing-your-npm-user-account/twitter-success.png" alt="Screenshot of linking from Account Setting with successfully linked Twitter account" />
65
+
66
+### Disconnecting your GitHub account from npm
67
+
68
+1. On the account settings page, you will find a button to disconnect your GitHub account. Click that.
69
+
70
+ <Screenshot src="/getting-started/managing-your-npm-user-account/github-disconnect.png" alt="Screenshot of linking from Account Setting with a cursor hovering over disconnect" />
71
+
72
+ _Note: Clicking disconnect will only disconnect the link from your npm account. You need to `revoke` permissions from your [GitHub app authorization settings](https://github.com/settings/apps/authorizations) to permanently remove the integration from your GitHub account_
73
+
74
+### Disconnecting your Twitter account from npm
75
+
76
+1. On the account settings page, you will find a button to disconnect your GitHub account. Click that.
77
+
78
+ <Screenshot src="/getting-started/managing-your-npm-user-account/twitter-disconnect.png" alt="Screenshot of linking from Account Setting with a cursor hovering over disconnect" />
79
+
80
+ _Note: Clicking disconnect will only disconnect the link from your npm account. You need to `revoke` permissions from your [Twitter connect apps management page](https://twitter.com/settings/connected_apps) to permanently remove the integration from your Twitter account_
81
+
82
## Managing user account profile settings from the command line
83
84
<Note>
@@ -54,8 +106,6 @@ From the CLI, you can change the following properties for your user account:
106
* `fullname`
107
* `homepage`
108
* `freenode`
57
-* `twitter`
58
-* `github`
109
* `password`
110
111
1. On the command line, type the following command, replacing `property` with the name of the property, and `value` with the new value:
content/getting-started/setting-up-your-npm-user-account/accessing-npm-using-2fa.mdx
+49
@@ -2,6 +2,7 @@
2
title: Accessing npm using two-factor authentication
3
redirect_from: [ /getting-started/using-two-factor-authentication ]
4
---
5
+import shared from '../../../src/shared.js'
6
7
## Sign in from the command line using security-key flow
8
@@ -32,4 +33,52 @@ redirect_from: [ /getting-started/using-two-factor-authentication ]
33
34
<Prompt>Enter one-time password:</Prompt>
35
36
+## Sign in from the command line using `--auth-type=web`
37
+
38
+npm 8.14.0 and higher support login flow through the browers. This will become the default behavior for the npm public registry in npm 9.
39
+
40
+### With an existing browser session
41
+
42
+1. On the command line, type the [`npm login --auth-type=web`][login] command.
43
+
44
+2. When prompted hit "ENTER" to open your browser to start the login flow or click the provided URL show in the command line.
45
+
46
+ ```
47
+ user@host:~$ npm login
48
+ npm notice Log in on https://registry.npmjs.org/
49
+ Authenticate your account at:
50
+ https://www.npmjs.com/login?next=/login/cli/b1a2f96a-ce09-4463-954c-c99f6773b922
51
+ Press ENTER to open in the browser...
52
+ ```
53
+
54
+3. Click on *Use security key* and follow the browser specific steps to authenticate.
55
+
56
+ <Screenshot src="/getting-started/setting-up-your-npm-user-account/2fa-use-security-key.png" alt="Screenshot showing security key prompt" />
57
+
58
+ _Note: If you have configured to use TOTP, you will see an TOTP prompt instead_
59
+
60
+### Without an existing browser session
61
+
62
+1. On the command line, type the [`npm login --auth-type=web`][login] command.
63
+
64
+2. When prompted hit "ENTER" to open your browser to start the login flow or click the provided URL show in the command line.
65
+
66
+ ```
67
+ user@host:~$ npm login
68
+ npm notice Log in on https://registry.npmjs.org/
69
+ Authenticate your account at:
70
+ https://www.npmjs.com/login?next=/login/cli/b1a2f96a-ce09-4463-954c-c99f6773b922
71
+ Press ENTER to open in the browser...
72
+ ```
73
+
74
+3. <>{shared['user-login'].text}</>
75
+
76
+ <>{shared['user-login'].image}</>
77
+
78
+4. Click on *Use security key* and follow the browser specific steps to authenticate.
79
+
80
+ <Screenshot src="/getting-started/setting-up-your-npm-user-account/2fa-use-security-key.png" alt="Screenshot showing security key prompt" />
81
+
82
+ _Note: If you have configured to use TOTP, you will see an TOTP prompt instead_
83
+
84
[login]: https://docs.npmjs.com/cli/adduser
\ No newline at end of file
static/getting-started/managing-your-npm-user-account/connect-github.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/connect-github.png differ
static/getting-started/managing-your-npm-user-account/connect-twitter.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/connect-twitter.png differ
static/getting-started/managing-your-npm-user-account/github-authorize.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/github-authorize.png differ
static/getting-started/managing-your-npm-user-account/github-disconnect.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/github-disconnect.png differ
static/getting-started/managing-your-npm-user-account/github-login.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/github-login.png differ
static/getting-started/managing-your-npm-user-account/github-success.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/github-success.png differ
static/getting-started/managing-your-npm-user-account/twitter-authorize.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/twitter-authorize.png differ
static/getting-started/managing-your-npm-user-account/twitter-disconnect.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/twitter-disconnect.png differ
static/getting-started/managing-your-npm-user-account/twitter-login.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/twitter-login.png differ
static/getting-started/managing-your-npm-user-account/twitter-success.png
Binary files /dev/null and b/static/getting-started/managing-your-npm-user-account/twitter-success.png differ