Getting Your Keys

You can generate two different API keys (one for Sandbox and another for Production), you should store the API keys immediately after generating them as they will no longer be viewable after leaving the page.

Install

With npm (link):

npm install --save @front-finance/link

With yarn:

yarn add @front-finance/link

Download the front-finance link library from Github

Getting Link Token

Link token should be obtained from the GET /api/v1/linktoken endpoint. Api reference for this request is available here. Request must be preformed from the server side because it requires the client secret. You will get the response in the following format:

{
  "content": {
    "linkToken": "{linktoken}"
  },
  "status": "ok",
  "message": ""
}

You can use linkToken value from this response to open the popup window with openLink method.

Generating connection method

import { createFrontConnection } from '@front-finance/link';

// ...

const frontConnection = createFrontConnection({
  clientId: '<Your Front Finance Client Id>',
  onBrokerConnected: (brokerData: FrontPayload) => {
    // use broker account data
  },
  onExit: (error?: string) => {
    if (error) {
      // handle error
    } else {
      // ...
    }
  }

Using connection to open auth link

To open authentication link provided by Mesh Integration API you need to call openLink method:

frontConnection.openLink(linkToken)

ℹ️ See full source code example at react-example/src/ui/Front.tsx

import {
  createFrontConnection,
  FrontConnection,
  FrontPayload
} from '@front-finance/link'

// ...

const [frontConnection, setFrontConnection] = useState<FrontConnection | null>(
  null
)

useEffect(() => {
  setFrontConnection(createFrontConnection(options))
}, [])

useEffect(() => {
  if (linkToken) {
    frontConnection?.openLink(linkToken)
  }
}, [frontConnection, linkToken])

return <></>

Getting integration access tokens

After successful authentication on the Link session, the popup will be closed and the broker tokens will be passed to the onBrokerConnected function. FrontConnection instance will check if URL contains query parameters, load broker tokens and fire the events..

Available Connection configuration options

ℹ️ See src/types/index.ts for exported types.

createFrontConnection arguments

keytypedescription
clientIdstringKeys from Dashboard page
onBrokerConnected(payload: FrontPayload) => voidCallback called when users connects their accounts
onExit((error?: string | undefined) => void) | undefinedCalled if connection not happened
onTransferFinished(payload: TransferFinishedPayload) => voidCallback called when a crypto transfer is executed
onEvent(payload: FrontEventType) => voidA callback function that is called when various events occur within the Mesh iframe
accessTokensIntegrationAccessToken[]An array of integration access tokens

createFrontConnection return value

keytypedescription
openLink(linkToken: string) => PromiseOpens the Link UI popup
closeLink() => voidCloses the Link UI popup
openPopup (OBSOLETE)(link: string) => Promise(OBSOLETE) Opens url in popup
closePopup (OBSOLETE)() => void(OBSOLETE) Closes the Link UI popup

Typescript support

TypeScript definitions for @front-finance/link are built into the npm package.

Front Link NPM

Front Typescript NPM

Front Link Github