@efobi/mono-connect

Mono Connect (this fork) is a modern, type-safe rewrite of the original Mono Connect widget, rebuilt as a lightweight, framework-agnostic TypeScript SDK.

This repository is a fork of the original @mono.co/connect.js with several improvements: full TypeScript types, Zod runtime validation, a simplified ESM-only build using tsdown, and a smaller runtime surface (no axios or webpack toolchain). It ships as ESM with bundled type declarations and is built with tsdown. All public types (ConnectOptions, ConnectEventName, SetupConfig, etc.) are exported from src/types.ts.

For accessing customer accounts and interacting with Mono's API (Identity, Transactions, Income, DirectPay) use the server-side Mono API.

Documentation

For complete information about Mono Connect, head to the docs.

Requirements

Node 18 or higher (uses the native fetch API).

Getting Started

1. Register on the Mono website and get your public and secret keys.
2. Setup a server to exchange tokens to access user financial data with your Mono secret key.

Installation

You can install the forked package using NPM or Yarn;

npm install @efobi/mono-connect

or

yarn add @efobi/mono-connect

Then import the default export into your project;

import Connect from '@efobi/mono-connect'

Usage

Click the links below for detailed examples on how to use connect.js with your favorite framework;

• React
• Angular
• Next.js

NOTE
The list above is not exhaustive, you can use this package in other frontend javascript frameworks.

Parameters

• key
• customer
• onSuccess
• onClose
• onLoad
• onEvent
• reference
• setupConfig

key

Required
This is your Mono public API key from the Mono dashboard.

new Connect({ key: 'mono_public_key', scope: 'auth' });

Customer

Required

// you can pass id of an existing mono customer
// const customer = { id: '611aa53041247f2801efb222' } // mono customer id

// or create a new mono customer
const customer = {
  name: 'Samuel Olumide',
  email: '[email protected]',
  identity: {
    type: 'bvn',
    number: '2323233239'
  },
}

new Connect({ 
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
});

onSuccess

Required This function is called when a user has successfully onboarded their account. It should take a single String argument containing the token that can be exchanged for an account id.

new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: (data) => {
    // in the case of authentication auth code is returned
    console.log("auth code", data.code);
    // in the case of direct debit payments
    // a charge object is return containing amount, transaction_reference, type...
    console.log("charge object", data);
  }
});

onClose

The optional closure is called when a user has specifically exited the Mono Connect flow (i.e. the widget is not visible to the user). It does not take any arguments.

new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("auth code", code),
  onClose: () => console.log("widget has been closed")
});

onLoad

This function is invoked the widget has been mounted unto the DOM. You can handle toggling your trigger button within this callback.

new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("auth code", code),
  onLoad: () => console.log("widget loaded successfully")
});

onEvent

This optional function is called when certain events in the Mono Connect flow have occurred, for example, when the user selected an institution. This enables your application to gain further insight into the Mono Connect onboarding flow.

See the data object below for details.

new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("auth code", code),
  onEvent: (eventName, data) => {
    console.log(eventName);
    console.log(data);
  }
});

What's changed (fork summary)

╭──────────────────────────────────────────────────────────╮
│  removed: connect.js · utils.js · webpack.config.js        │
│           axios · webpack toolchain                         │
╰──────────────────────────────────────────────────────────╯
                          │
                          ▼
╭──────────────────────────────────────────────────────────╮
│  src/index.ts    entry · exports + window.Connect global   │
│  src/connect.ts  Connect class · Zod validation · fetch    │
│  src/widget.ts   ConnectWidget · DOM/iframe (per-instance) │
│  src/types.ts    hand-written public types                 │
│  src/styles.ts   overlay/loader CSS                        │
╰──────────────────────────────────────────────────────────╯

• Tooling: webpack → tsdown (ESM, dts, treeshake, clean, esnext). ESM-only package with exports, types, sideEffects: false.
• Type-safety: full tsconfig.json you specified, incl. isolatedDeclarations, strict, verbatimModuleSyntax. tsc --noEmit passes.
• Runtime validation: Zod validates constructor options and setup() config (see src/connect.ts). Required keys and callback types are enforced at runtime.
• API preserved: new Connect({...}) with setup(), open(), close(), reauthorise(), fetchInstitutions(), plus default + named exports — existing React/Next/Angular examples still work.
• Native fetch replaces axios (zero runtime deps besides Zod).
• Bug fix: legacy code stored state on the prototype (shared across instances); the new ConnectWidget keeps per-instance state so multiple widgets can coexist.

reference

This optional string is used as a reference to the current instance of Mono Connect. It will be passed to the data object in all onEvent callbacks. It's recommended to pass a random string.

new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("auth code", code),
  reference: "some_random_string"
});

setupConfig

The selectedInstitution object is used as a way to load the Connect Widget directly to an institution login page. The Account Match feature allows you to verify that the account number provided by a customer matches the account number returned from their linked bank account.

const config = {
  selectedInstitution: {
    id: "5f2d08c060b92e2888287706", // the id of the institution to load
    auth_method: "internet_banking", // internet_banking or mobile_banking
    account_number: "02605538421" // the customer's account number
  },
  check_account_match: true
}

connect.setup(config);

API Reference

setup(config: object)

This method is used to load the widget onto the DOM, the widget remains hidden after invoking this function until the open() method is called.

It also allows an optional configuration object to be passed. When the setup method is called without a config object, the list of institutions will be displayed for a user to select from.

const connect = new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("code", code),
  onLoad: () => console.log("widget loaded successfully"),
  onClose: () => console.log("widget has been closed"),
  onEvent: (eventName, data) => {
    console.log(eventName);
    console.log(data);
  },
  reference: "random_string"
});

const config = {
  selectedInstitution: {
    id: "5f2d08c060b92e2888287706",
    auth_method: "internet_banking"
  }
}

connect.setup(config);

reauthorise(accountId: string)

This methods loads the reauth widget unto the DOM, the widget remains hidden after invoking this function until the open() method is called.

Re-authorisation of already authenticated accounts is done when MFA (Multi Factor Authentication) or 2FA is required by the institution or it has been setup by the user for security purposes before more data can be fetched from the account.

Fetching Account ID for previously linked account

You can fetch the Account ID of a linked account from the Mono dashboard or API.

Alternatively, make an API call to the Exchange Token Endpoint with the code from a successful linking and your mono application secret key. If successful, this will return an Account ID.

Sample request

curl --request POST \
  --url https://api.withmono.com/v2/accounts/auth \
  --header 'Content-Type: application/json' \
  --header 'accept: application/json' \
  --header 'mono-sec-key: your_secret_key' \
  --data '{"code":"string"}'

const connect = new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  onSuccess: ({code}) => console.log("code", code),
});
connect.reauthorise("account_xyz");

| Parameter | Type | Description | |:------------| :------- |:---------------------------------------------------| | accountId | string | Required. ID of the account to be reauthorised |

NOTE
the reauthorise method and setup method should be used separately. When used together, the last called method takes precedence.

open()

This method makes the widget visible to the user.

const connect = new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("code", code),
});

connect.setup();
connect.open();

close()

This method programmatically hides the widget after it's been opened.

const connect = new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("code", code),
});

connect.setup();
connect.open();

// this closes the widget 5seconds after it has been opened
setTimeout(() => connect.close(), 5000)

onEvent Callback

The onEvent callback returns two parameters, eventName a string containing the event name and data an object that contains event metadata.

const connect = new Connect({
  key: 'mono_public_key',
  scope: 'auth',
  data: { customer },
  onSuccess: ({code}) => console.log("code", code),
  onEvent: (eventName, data) => {
    if(eventName == "OPENED"){
      console.log("Widget opened");
    }else if(eventName == "INSTITUTION_SELECTED"){
      console.log("Selected institution: "+data.institution.name);
    }
    console.log(eventName)
    console.log(data)
  }
});

eventName

Event names correspond to the type key returned by the raw event data. Possible options are in the table below.

| Event Name | Description | | ----------- | ----------- | | OPENED | Triggered when the user opens the Connect Widget. | | EXIT | Triggered when the user closes the Connect Widget. | | INSTITUTION_SELECTED | Triggered when the user selects an institution. | | AUTH_METHOD_SWITCHED | Triggered when the user changes authentication method from internet to mobile banking, or vice versa. | | SUBMIT_CREDENTIALS | Triggered when the user presses Log in. | | ACCOUNT_LINKED | Triggered when the user successfully links their account. | | ACCOUNT_SELECTED | Triggered when the user selects a new account. | | ERROR | Triggered when the widget reports an error.|

data

The data object returned from the onEvent callback.

{
  "reference": "ref_code_passed", // emitted in all events
  "errorType": "ERORR_NAME", // emitted in ERROR
  "errorMessage": "An error occurred.", // emitted in ERORR
  "mfaType": "OTP", // emitted in SUBMIT_MFA
  "prevAuthMethod": "internet_banking", // emitted in AUTH_METHOD_SWITCHED
  "authMethod": "mobile_banking", // emitted in AUTH_METHOD_SWITCHED and INSTITUTION_SELECTED
  "pageName": "MFA", // emitted in EXIT
  "selectedAccountsCount": 2 // emitted in ACCOUNT_SELECTED
  "institution": { // emitted in ACCOUNT_LINKED and INSTITUTION_SELECTED
    "id": "66059eO033be88012",
    "name": "GTBank"
  },   
  "timestamp": 1234567890 // emitted in all events
}

Support

If you're having general trouble with Mono Connect.js or your Mono integration, please reach out to us at [email protected] or come chat with us on Slack. We're proud of our level of service, and we're more than happy to help you out with your integration to Mono.

Contributing

If you find any issue using this package please let us know by filing an issue right here.

If you would like to contribute to the Mono Connect.js, please make sure to read our contributor guidelines.

License

MIT for more information.