Angular

Initialize Connect.js in an Angular component lifecycle and open it from the template.

Initialize Connect.js in ngOnInit, keep the instance on the component, and close it during teardown.

Account-linking component

import { Component, Input, OnDestroy, OnInit } from "@angular/core"
import Connect from "@mono.co/connect.js"

@Component({
  selector: "app-link-mono-account",
  templateUrl: "./link-mono-account.component.html"
})
export class LinkMonoAccountComponent implements OnInit, OnDestroy {
  @Input({ required: true }) customerId!: string

  private connect: any
  ready = false

  ngOnInit() {
    this.connect = new Connect({
      key: "PUBLIC_KEY",
      scope: "auth",
      data: {
        customer: { id: this.customerId }
      },
      onLoad: () => {
        this.ready = true
      },
      onSuccess: ({ code }) => this.exchangeCode(code),
      onClose: () => console.log("Connect closed")
    })

    this.connect.setup()
  }

  open() {
    this.connect?.open()
  }

  ngOnDestroy() {
    this.connect?.close()
  }

  private async exchangeCode(code: string) {
    const response = await fetch("/api/mono/exchange", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code })
    })

    if (!response.ok) {
      throw new Error("Could not complete Mono account linking")
    }
  }
}

The template opens the mounted widget only after onLoad marks it ready.

<button type="button" [disabled]="!ready" (click)="open()">
  {{ ready ? "Link a financial account" : "Loading account linking…" }}
</button>

Load PUBLIC_KEY from Angular’s browser-safe environment configuration. Do not add the Mono secret key to that configuration.

Reauthorization

For an existing linked account, replace setup() with reauthorise(accountId).

this.connect = new Connect({
  key: "PUBLIC_KEY",
  scope: "auth",
  onSuccess: ({ code }) => this.handleReauthorization(code)
})

this.connect.reauthorise(this.accountId)

The argument is the Mono account ID string. It is not an auth code or reauth token.

Angular-specific checks

• Initialize after Angular creates the component in the browser.
• Keep one SDK instance for the component lifetime.
• Tear down the mounted widget in ngOnDestroy.
• Route onSuccess data to a backend endpoint.
• Keep MONO_SECRET_KEY in the server environment only.

See Basic account linking for the full lifecycle and Troubleshooting for common failures.