@trade-it/react

@trade-it/react

React SDK for embedding Trade It connect and trade experiences directly inside your app.

Use this package when you want to:

• open the Trade It connect flow in a modal
• open prefilled trade flows in a modal
• keep users on your site while they connect brokerages and place trades
• prefill simple, bracket-exit, and multi-leg options orders with typed configuration

Install

npm i @trade-it/react

Documentation

Full integration guides, examples, and API references:

• React SDK Overview
• Authentication
• Portal · Connection mode
• Place Trades
• SDK Enums Reference

Notes

• Use the Trade It skill to have your AI agent integrate Trade It: npx skills add trade-it-inc/skills --skill trade-it-skill

Trade It Portal

Your backend calls POST /api/portal: use Basic client credentials with oauth_options to select Onboarding mode, or the user’s Bearer access token without oauth_options to select Connection mode. Pass the returned URL to openConnect. Your backend supplies a registered redirect_uri on the embedding website’s origin. Include oauth_options.email_hint to start with an email code, or omit it to offer Google, Apple, X, Discord, and email sign-in. Users can switch methods; social sign-in opens a popup and returns to the same portal. Trade It explains access, authenticates the user, and opens brokerage connection inside the same iframe. Your backend can optionally supply connect_options.brokerage_code or connect_options.brokerage_filter when creating the portal URL, using the same behavior as a connect session.

const tradeIt = useTradeIt({
  onAuthorization: async authorization => {
    const response = await fetch('/api/tradeit/complete', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(authorization),
    });
    if (!response.ok) throw new Error('Could not save Trade It access');
  },
});

tradeIt.openConnect({ launch: { mode: 'connect', url: onboardingUrl } });

onAuthorization receives { code, state, issuer }; resolve it only after your authenticated backend validates the attempt and saves the OAuth tokens. Rejection is reported inside the iframe. Brokerage connection starts immediately, and automatic closure waits for the callback. Credential events do not go to the generic onEvent callback.

See the Onboarding mode guide for the server endpoints, PKCE/state validation, and account ownership rules. The same SDK method opens subsequent connections without another authorization event. Standard redirect OAuth remains available for custom sign-in experiences.

Releasing

Add notes under Unreleased in CHANGELOG.md and commit your changes first. From the repository root, prepare a release with:

npm run release:minor --workspace=@trade-it/react

Use release:major or release:patch for other increments. The script versions the changelog, bumps the package and lockfile, then creates a commit and a package-specific tag. When releasing core too, prepare core first so React includes its updated dependency.

To release both SDK packages together, use npm run release:sdk:minor (or major / patch) from the root. Push the commits and tags, then use the existing SDK publish workflow or npm run publish:sdk. Release preparation does not build, publish, or push.