Fabra Connect

Fabra Connect is a UI component that your users will interact with in order to setup their data source connections and start syncing data into your system.

To get started with Fabra Connect, follow the steps below.

​

High-Level Overview

Here are the steps to add Fabra Connect into your application:

1. Create a link_token by calling the Create Link Token endpoint
2. Use the Fabra Connect SDK to initialize Fabra Connect with the link_token

​

Create a Link Token

In your backend, set up a POST request to initialize a Connect session and get a link_token from Fabra's Create Link Token endpoint.

Make sure to include the end_customer_id, which identifies the customer in your own system. When Fabra performs a sync for this customer, it will include this ID in every row that it loads into your system.

You'll want to create an endpoint in your backend to perform this creation on demand. Here's an example of how that would look in a Node backend:

app.post("/link-token", async (req, res) => {
  const response = await fetch("https://api.fabra.io/link_token", {
    method: "POST",
    headers: {
      "X-API-KEY": process.env.FABRA_API_KEY,
    },
    body: JSON.stringify({end_customer_id: "abcd-1234-efgh-5678"})
  });

  const body = await response.json();
  res.send({ link_token: body.link_token });
});

​

Initialize Fabra Connect

• React
• Vue
• Angular

npm install --save @fabra/react-fabra-connect

import React from "react";
import { useFabraConnect } from "@fabra/react-fabra-connect";

const App = () => {
  const { open } = useFabraConnect(); // Can pass optional `customTheme` object here
  const linkToken = fetchLinkToken(); // Use the API you created in Step 1 here

  return (
    <button onClick={() => open(linkToken)}>
      Open Fabra Connect
    </button>
  );
};

​

Styling

Fabra currently supports customizing the color used in the Fabra Connect component. To do so, just pass in an object when calling useFabraConnect:

const { open } = useFabraConnect({
  customTheme:{
    colors: {
      primary: {
        base: #805AD5, // Primary color for buttons, graphics, etc.
        hover: #553C9A, // Hover color for buttons and links
        text: #FFFFFF, // The font color on top of the primary color
      }
    }
  }
});