Skip to main content

Quick Start

Get a working credential connection flow running in under five minutes.

Prerequisites​

Option A — Drop-in Components​

The fastest path. The SDK renders everything — connector buttons, credential modals, OAuth flows, and toast notifications.

API pattern:

import {
  NexlaConnectProvider,
  NexlaThemeProvider,
  NexlaConnectButton,
} from '@nexla/react-sdk';

function App() {
  return (
    <NexlaConnectProvider
      serviceKey="YOUR_SERVICE_KEY"
      connectors={['CONNECTOR_KEY_1', 'CONNECTOR_KEY_2']}
      applicationId="YOUR_APPLICATION_ID"
      endUserId="YOUR_END_USER_ID"
    >
      <NexlaThemeProvider>
        <NexlaConnectButton connector="CONNECTOR_KEY_1" />
        <NexlaConnectButton connector="CONNECTOR_KEY_2" />
      </NexlaThemeProvider>
    </NexlaConnectProvider>
  );
}

Each button shows the connector logo, opens a credential modal on click, and handles OAuth automatically. Done.

Sample using environment variables (local development)
<NexlaConnectProvider
  serviceKey={import.meta.env.VITE_NEXLA_SERVICE_KEY}
  connectors={['asana_api', 'sf_api','gdrive']}
  applicationId={import.meta.env.VITE_NEXLA_APPLICATION_ID}
  endUserId={currentUser.id}
>
  <NexlaThemeProvider mode="light">
    <NexlaConnectButton connector="asana_api" />
    <NexlaConnectButton connector="sf_api" />
    <NexlaConnectButton connector="gdrive" />
  </NexlaThemeProvider>
</NexlaConnectProvider>

Option B — Headless​

You own the UI. The SDK provides hooks that manage state, API calls, and OAuth.

API pattern:

import { NexlaConnectProvider, useNexlaConnect } from '@nexla/react-sdk';

function App() {
  return (
    <NexlaConnectProvider
      serviceKey="YOUR_SERVICE_KEY"
      connectors={['CONNECTOR_KEY_1', 'CONNECTOR_KEY_2']}
      applicationId="YOUR_APPLICATION_ID"
      endUserId="YOUR_END_USER_ID"
    >
      <ConnectPage />
    </NexlaConnectProvider>
  );
}

function ConnectPage() {
  const { connectors, credentials, connect, connectingConnector, loading } = useNexlaConnect();

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      {connectors.map((c) => {
        const isConnected = credentials.some(
          (cred) => cred.vendor?.name === c.name
        );
        return (
          <div key={c.name}>
            <img src={c.small_logo} alt="" width={24} />
            <span>{c.display_name}</span>
            {isConnected ? (
              <span>Connected</span>
            ) : (
              <button
                onClick={() => connect(c.name)}
                disabled={connectingConnector === c.name}
              >
                {connectingConnector === c.name ? 'Connecting...' : 'Connect'}
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}

Next Steps​