Build your own integration UI with Rollout Link components

Rollout Link supports multiple levels of customization depending on how much of the authentication experience you want to own.

• Use <CredentialsManager /> when you want the full built-in credential management UI.
• Use <CredentialForm /> when you want a connector-specific experience that shows either the add flow or the connected credential.
• Use <AddCredentialForm /> when you only want to render the credential creation flow.
• Use useCredentials() when you want to fetch connected credentials and build your own list or state-driven UI.

CredentialForm

<CredentialForm /> is the best fit when you want a connector-specific component but still want Rollout to handle the credential lifecycle for that connector.

It will:

• render the add flow when no credential exists for the connector
• render the connected credential when one already exists
• support credential deletion

import { CredentialForm } from "@rollout/link-react";

function Rollout() {
  return (
    <CredentialForm appKey="lofty" />
  );
}

Useful props include:

• appKey
• plan
• entitiesToSync
• fieldOverrides
• showUserTermsLink
• onCredentialAdded
• onCredentialDeleted

AddCredentialForm

<AddCredentialForm /> renders only the connector-specific auth flow. It does not render a credential list, which makes it a better fit when your app already controls the surrounding UI and state.

import { AddCredentialForm } from "@rollout/link-react";

function Rollout() {
  return (
    <AddCredentialForm
      appKey="lofty"
      onCredentialAdded={({ id, appKey }) => {
        console.log("Credential added", id, appKey);
      }}
    />
  );
}

Useful props include:

• appKey
• plan
• entitiesToSync
• fieldOverrides
• showUserTermsLink
• onCredentialAdded

useCredentials

useCredentials() returns the authenticated user’s connected credentials together with loading, error, and refetch state.

Use it when you want to:

• render your own credential list
• gate UI based on whether a connector is already connected
• refresh your own state after adding or deleting credentials

import { useCredentials } from "@rollout/link-react";

function ConnectedCrms() {
  const { credentials, isLoading, refetch } = useCredentials();

  if (isLoading) return <div>Loading...</div>;

  const crmCredentials =
    credentials?.filter((credential) => credential.appKey === "follow-up-boss") ?? [];

  return (
    <div>
      <div>Connected credentials: {crmCredentials.length}</div>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}

The hook returns:

• credentials
• isLoading
• isFetching
• error
• refetch

Recommended pattern

Use <CredentialForm /> if you want the simplest custom integration card for a single connector.

Use <AddCredentialForm /> plus useCredentials() if you already maintain your own connected-account list elsewhere in your app.

Use <CredentialsManager /> if you want the least amount of custom work.