> ## Documentation Index
> Fetch the complete documentation index at: https://sammydocs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Mono Connect.js

> Link financial accounts or start payment flows with the Connect.js browser SDK.

Connect.js opens Mono's hosted Connect widget inside your web application. The widget handles institution selection, credentials, multi-factor authentication, account selection, and flow events. Your application controls when the widget opens and what happens after it succeeds.

<Info>
  This independent guide reflects `@mono.co/connect.js` 2.2.0. For production decisions, use Mono's [official financial data documentation](https://docs.mono.co/docs/financial-data/overview) and the [Connect.js source](https://github.com/withmono/connect.js).
</Info>

## Choose a flow

<CardGroup cols={2}>
  <Card title="Link an account" icon="link" href="/content/quickstart">
    Open the widget, receive an auth code, and exchange it for an account ID on your backend.
  </Card>

  <Card title="Reauthorize an account" icon="rotate" href="/content/sdk/connect-js/usage/reauthorization">
    Reconnect a previously linked account by passing its Mono account ID to `reauthorise()`.
  </Card>

  <Card title="Start a payment flow" icon="credit-card" href="/content/sdk/connect-js/usage/direct-debit">
    Configure the widget with the payments scope and payment data.
  </Card>

  <Card title="Use a framework" icon="code" href="/content/sdk/connect-js/frameworks/react">
    Follow browser-lifecycle examples for React, Angular, and Next.js.
  </Card>
</CardGroup>

## Install

```bash theme={null}
npm install @mono.co/connect.js
```

The package README lists Node.js 10 or later as its minimum requirement.

## Minimal account-linking example

The account-linking path requires a public key, `auth` scope, customer data, and a success callback. Call `setup()` before `open()`.

```javascript theme={null}
import Connect from "@mono.co/connect.js"

const connect = new Connect({
  key: "PUBLIC_KEY",
  scope: "auth",
  data: {
    customer: {
      name: "Ada Lovelace",
      email: "ada@example.com"
    }
  },
  onSuccess: ({ code }) => {
    // Send the short-lived code to your backend.
    fetch("/api/mono/exchange", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code })
    })
  },
  onClose: () => console.log("Connect closed")
})

connect.setup()

document
  .querySelector("#link-account")
  .addEventListener("click", () => connect.open())
```

## Keep the trust boundary clear

| Runs in the browser                     | Runs on your backend               |
| --------------------------------------- | ---------------------------------- |
| Public key                              | Mono secret key                    |
| Connect.js widget                       | Auth-code exchange                 |
| Customer input passed to the widget     | Account ID storage                 |
| `onSuccess` receives a short-lived code | Mono API requests for account data |

<Warning>
  Never place `MONO_SECRET_KEY` in browser code, a public environment variable, or the Connect configuration. Send the auth code to your backend and exchange it there.
</Warning>

## SDK lifecycle

```text theme={null}
create Connect instance
        ↓
setup() or reauthorise(accountId)
        ↓
open()
        ↓
onEvent(eventName, data)
        ↓
onSuccess(result) or onClose()
```

For a copy-paste implementation including the backend exchange, continue to the [Quickstart](/content/quickstart). For compact facts intended for humans and agents, use the [Integration contract](/content/sdk/connect-js/reference/integration-contract).

## Version and evidence

See [Source and scope](/content/source-and-scope) for the exact package version, source commit, verification date, and precedence rules used by this guide.