Skip to main content

​
Overview

The @databite/connect package provides React components and hooks for integrating Databite connectors into your web applications with seamless authentication flows. It includes pre-built UI components, form handling, and flow integration.

​
Installation

npm install @databite/connect @databite/types
Peer Dependencies: 
npm install react react-dom typescript

​
Example

Use the modal to authenticate and create a connection via your server. 
import React, { useState } from "react";
import { ConnectModal } from "@databite/connect";

export default function Page() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Connect to Service</button>
      <ConnectModal
        open={open}
        onOpenChange={setOpen}
        integrationId="your-integration-id"
        baseUrl={process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001"}
        onAuthSuccess={async (integration, connectionConfig) => {
          await fetch("/api/save-connection", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              integrationId: integration.id,
              connectionConfig,
            }),
          });
        }}
        onAuthError={(e) => console.error(e)}
      />
    </>
  );
}