React SDK flow

Embed Refold’s connect experience directly in your React app, no redirect, no UI to build.

The React SDK flow drops Refold’s prebuilt connect component into your React app. You wrap your integration UI in a <Provider> and render a <Config> component; the customer connects and configures in an in-app modal, with no redirect to an external page.

It’s the low-effort, in-product option: you get prebuilt components that handle connection status, OAuth, config fields, and workflow toggles, while keeping the whole flow inside your application.

This flow needs a linked account and a session token in place first. Both are created on your backend and documented on the Overview. Never expose your API key in the browser.

When to use it

Choose the React SDK flow when:

• You have a React app and want the connect experience embedded in-product.
• You want prebuilt components, not a fully custom UI, <Config> renders connection status, fields, and workflow toggles for you.
• You don’t want a redirect to an externally hosted page.

For a no-code option with no React, use the Hosted flow. For a fully bespoke UI, build your own.

How it works

1. Install the SDK

   Install the React SDK alongside the underlying JavaScript SDK.

   npm install --save @cobaltio/react-cobalt-js @cobaltio/cobalt-js@^8
   
2. Wrap your app in the Provider

   Pass your customer’s session token to <Provider>. Place it high enough in the tree to cover every component that renders <Config>.

   import { Provider, Config } from "@cobaltio/react-cobalt-js";
   
   function Integrations({ sessionToken }) {
     return (
       <Provider sessionToken={sessionToken}>
         {/* your integration UI */}
       </Provider>
     );
   }
   
3. Render the Config component

   Render <Config> with the app’s slug, typically inside a modal. It only renders when slug is set, so you can mount it on demand.

   <Config
     slug="hubspot"          // app slug: required
     id="user_config_123"    // optional config id; defaults to the linked account id
     labels={{}}             // optional dynamic labels for Map v2 fields
     style={{                // optional container style overrides
       borderRadius: 8,
       maxWidth: 450,
     }}
   />
   

The <Config> component handles the whole experience: connection status, initiating OAuth, rendering your config fields, and saving the customer’s choices.

See the React SDK reference for every <Provider> and <Config> prop, a complete example, and troubleshooting.

Session tokens expire after 24 hours. Fetch a new token for each customer session and update the <Provider>.

Next steps

React SDK reference

Every prop on <Provider> and <Config>, with examples.

Config fields

What the customer configures inside the component.

Custom styling

Style the <Config> component to match your brand.

Connection status

Check whether a customer’s account is connected.