Skip to main content
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
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.