Skip to content

Commit

Permalink
docs: update Connect article grammar, typos, consistency (#1560)
Browse files Browse the repository at this point in the history 
* Update authenticate-users-with-connect.md: Grammar, Typos, consistency

Update authenticate-users-with-connect.md: Grammar, Typos, consistency

* Update authenticate-users-with-connect.md

tweaked a few things; otherwise LGTM

---------

Co-authored-by: max-crawford <[email protected]>
  • Loading branch information
@saralab @max-crawford
saralab and max-crawford authored Oct 5, 2023
1 parent a462d23 commit 7bcaa93
Showing 1 changed file with 28 additions and 28 deletions.
56 changes: 28 additions & 28 deletions docs/feature-guides/authenticate-users-with-connect.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ This guide explains how to connect to users' wallets and authenticate users with

## Installing Dependency

To install the `@stacks/connect` package in your JavaScript/TypeScript project run:
To install the `@stacks/connect` package in your JavaScript/TypeScript project, run:

```
npm install @stacks/connect
```

## Authentication

Authentication provides a way for users to identify themselves to an app while retaining complete control over their credentials and personal details. It can be integrated alone or used in conjunction with [transaction signing](/build-apps/transaction-signing) and [data storage](/build-apps/data-storage), for which it is a prerequisite.
Authentication allows users to identify themselves in an app while retaining complete control over their credentials and personal details. This package can be integrated alone or used in conjunction with [transaction signing](/build-apps/transaction-signing) and [data storage](/build-apps/data-storage). The authentication package is a prerequisite for using these latter two packages.

Users who register for your app can subsequently authenticate to any other app with support for the [Blockchain Naming System](https://docs.stacks.co/build-apps/references/bns) and vice versa.

Expand All @@ -45,11 +45,11 @@ Apps may request any of the following scopes:
| Scope | Definition |
| -------------- | ------------------------------------------------------------------------------- |
| `store_write` | Read and write data to the user's Gaia hub in an app-specific storage bucket. |
| `publish_data` | Publish data so other users of the app can discover and interact with the user. |
| `publish_data` | Publish data so other app users can discover and interact with the user. |

The default scopes are `['store_write']` if no `scopes` array is provided when initializing the `appConfig` object.

We recommend you initiate the `userSession` object just once in your app then reference it using imports where needed.
We recommend you initiate the `userSession` object just once in your app and then reference it using imports where needed.

### Initiate Authentication Flow

Expand Down Expand Up @@ -83,13 +83,13 @@ function authenticate() {

![Popup displayed by showConnect function](/img/todos-get-started.png)

The `showConnect` function accepts a number of properties within a parameter object such as:
The `showConnect` function accepts a several properties within a parameter object, such as:

- The app's `name` and `icon`: provided as strings comprising the `appDetails` object property.
- The `redirectTo` string: used to provide a URL to which the user should be redirected upon successful authentication. The `onFinish` callback serves a similar purpose by handling successful authentication within a context of a popup window.
- The app's `name` and `icon` are provided as strings comprising the `appDetails` object property.
- The `redirectTo` string is used to provide a URL to which the user should be redirected upon successful authentication. The `onFinish` callback serves a similar purpose by handling successful authentication within the context of a popup window.
- The `userSession` object initiated above.

Once the user selects the button presented in this popup, they are passed to the Stacks Wallet for authenticator with the `authRequest` token as a GET parameter. From there they can confirm authentication and generate a new _Secret Key_ or Stacks identity before doing so, as needed before coming back to the app.
Once the user selects the button in this popup, they are passed to the Stacks Wallet for authenticator with the `authRequest` token as a GET parameter. From there, they can confirm authentication and generate a new _Secret Key_ or Stacks identity before doing so, as needed, before coming back to the app.

### Handle Pending Authentication

Expand All @@ -112,14 +112,14 @@ window.onload = function () {
};
```

The `isSignInPending` method of the `userSession` object is used to detect whether the user needs to handle a pending authentication state upon page load.
The `isSignInPending` method of the `userSession` object detects whether the user needs to handle a pending authentication state upon page load.

The `handlePendingSignIn` method is then used to handle that state, returning a `userData` object with all the data needed to save the user's information into their session.

The authenticated state can later be detected by the `isUserSignedIn` method in case any particular handling is needed then.
The authenticated state can later be detected by the `isUserSignedIn` method in case any particular handling is needed.

:::note
It's especially important to implement `handlePendingSignIn` within the context of mobile apps.
It's essential to implement `handlePendingSignIn` within the context of mobile apps.
:::

If the user has indeed confirmed authentication in the context of a popup window, the authenticator will resolve the pending authentication state automatically with the app within the parent window.
Expand All @@ -130,68 +130,68 @@ It will then trigger the `onFinish` function provided above, which can be used s

### How It Works

The authentication flow with Stacks is similar to the typical client-server flow used by centralized sign in services (for example, OAuth). However, with Stacks the authentication flow happens entirely client-side.
The authentication flow with Stacks is similar to the typical client-server flow used by centralized sign in services (for example, OAuth). However, with Stacks, the authentication flow happens entirely client-side.

An app and authenticator, such as [the Stacks Wallet](https://www.hiro.so/wallet/install-web), communicate during the authentication flow by passing back and forth two tokens. The requesting app sends the authenticator an `authRequest` token. Once a user approves authentication, the authenticator responds to the app with an `authResponse` token.

These tokens are are based on [a JSON Web Token (JWT) standard](https://tools.ietf.org/html/rfc7519) with additional support for the `secp256k1` curve used by Bitcoin and many other cryptocurrencies. They are passed via URL query strings.
These tokens are based on [a JSON Web Token (JWT) standard](https://tools.ietf.org/html/rfc7519) with additional support for the `secp256k1` curve used by Bitcoin and many other cryptocurrencies. They are passed via URL query strings.

See the [`authRequest`](#authrequest-payload-schema) and [`authResponse`](#authresponse-payload-schema) payload schemas below for more details about what data they contain.

When a user chooses to authenticate an app, it sends the `authRequest` token to the authenticator via a URL query string with an equally named parameter:

`https://wallet.hiro.so/...?authRequest=j902120cn829n1jnvoa...`

When the authenticator receives the request, it generates an `authResponse` token for the app using an _ephemeral transit key_ . The ephemeral transit key is just used for the particular instance of the app, in this case, to sign the `authRequest`.
When the authenticator receives the request, it generates an `authResponse` token for the app using an _ephemeral transit key_ . The ephemeral transit key is just used for the particular instance of the app, to sign the `authRequest`.

The app stores the ephemeral transit key during request generation. The public portion of the transit key is passed in the `authRequest` token. The authenticator uses the public portion of the key to encrypt an _app private key_ which is returned via the `authResponse`.
The app stores the ephemeral transit key during request generation. The public portion of the transit key is passed in the `authRequest` token. The authenticator uses the public portion of the key to encrypt an _app private key_ , which is returned via the `authResponse`.

The authenticator generates the app private key from the user's _identity address private key_ and the app's domain. The app private key serves three functions:
The authenticator generates the app private key from the user's _identity address private key_ , and the app's domain. The app's private key serves three functions:

1. It is used to create credentials that give the app access to a storage bucket in the user's Gaia hub
2. It is used in the end-to-end encryption of files stored for the app in the user's Gaia storage.
3. It serves as a cryptographic secret that apps can use to perform other cryptographic functions.
3. It is a cryptographic secret that apps can use to perform other cryptographic functions.

Finally, the app private key is deterministic, meaning that the same private key will always be generated for a given Stacks address and domain.

The first two of these functions are particularly relevant to [data storage with Stacks.js](/build-apps/data-storage).
The first two functions are particularly relevant to [data storage with Stacks.js](/build-apps/data-storage).

[Learn more about keypairs](#key-pairs) used by authentication.

### Key Pairs

Authentication with Stacks makes extensive use of public key cryptography generally and ECDSA with the `secp256k1` curve in particular.
Authentication with Stacks makes extensive use of public key cryptography and ECDSA with the `secp256k1` curve in particular.

The following sections describe the three public-private key pairs used, including how they're generated, where they're used and to whom private keys are disclosed.

#### Transit Private Key

The transit private is an ephemeral key that is used to encrypt secrets that
The transit private is an ephemeral key used to encrypt secrets that
need to be passed from the authenticator to the app during the
authentication process. It is randomly generated by the app at the beginning of
the authentication response.

The public key that corresponds to the transit private key is stored in a single
The public key corresponding to the transit private key is stored in a single
element array in the `public_keys` key of the authentication request token. The
authenticator encrypts secret data such as the app private key using this
authenticator encrypts secret data such as the app's private key using this
public key and sends it back to the app when the user signs in to the app. The
transit private key signs the app authentication request.

#### Identity Address Private Key

The identity address private key is derived from the user's keychain phrase and
is the private key of the Stacks username that the user chooses to use to sign in
to the app. It is a secret owned by the user and never leaves the user's
is the private key of the Stacks username the user chooses to use to sign in
to the app. It is a secret the user owns and never leaves the user's
instance of the authenticator.

This private key signs the authentication response token for an app to indicate that the user approves sign in to that app.
This private key signs the authentication response token for an app to indicate that the user approves signing in to that app.

#### App Private Key

The app private key is an app-specific private key that is generated from the
The app private key is an app-specific private key generated from the
user's identity address private key using the `domain_name` as input.

The app private key is securely shared with the app on each authentication, encrypted by the authenticator with the transit public key. Because the transit key is only stored on the client side, this prevents a man-in-the-middle attack where a server or internet provider could potentially snoop on the app private key.
The app private key is securely shared with the app on each authentication, encrypted by the authenticator with the transit public key. Because the transit key is only stored on the client side, this prevents a man-in-the-middle attack where a server or internet provider could snoop on the app private key.

### `authRequest` Payload Schema

Expand Down Expand Up @@ -240,7 +240,7 @@ To decode a token and see what data it holds:
2. Navigate to [jwt.io](https://jwt.io/).
3. Paste the full token there.

The output should look similar to below:
The output should look similar to the below:

```json
{
Expand Down

0 comments on commit 7bcaa93

Please sign in to comment.