Quick start

This quickstart covers integrating Tesouro’s React components with widget-token authentication. Calling the REST API directly from your backend and owning the UI yourself? Follow the Server-side quickstart instead.

Get your credentials

Your client ID, client secret, and widget secret are provided by Tesouro during onboarding. To request access, have your designated team lead submit an access request.

Set up a widget token endpoint

Embedded components authenticate users via short-lived, user-scoped widget tokens. Your backend exposes an endpoint that receives { userId, userEmail } and returns { widgetToken }, encrypted using your TESOURO_WIDGET_SECRET.See the full implementation in the React integration guide.

Wrap your app and drop in a component

import { EmbeddedProvider, BalancesWidget } from '@tesouro/embedded-components-react';

export default function DashboardPage() {
  return (
    <EmbeddedProvider
      userId={currentUser.id}
      userEmail={currentUser.email}
      widgetTokenRefreshUrl="/api/widget-token"
    >
      <BalancesWidget />
    </EmbeddedProvider>
  );
}

Prefer a framework-agnostic approach? Use the web components option instead.

Next steps

React integration guide — full EmbeddedProvider setup, NavigationAdapter, and style overrides
Browse all components — onboarding, balances, transfers, and more
Authentication — learn about available auth methods

Overview React

⌘I

Getting started

Authentication

Organizations

Users

Bank account applications

Bank accounts

Webhooks

Money movement

Transactions

Embedded components

White-label

Next steps

​Next steps

Next steps