@get-asset/sdk

AssetProvider

Wraps your app, configures the API client (base URL + access token), and stores the shared period (year and optional month) that every year-aware card defaults to. Required for any @get-asset/sdk or @get-asset/react compound to fetch.

import { AssetProvider } from "@get-asset/sdk";

Props

Prop	Type	Default	Description
`baseUrl`	`string`	`https://api.getasset.com`	Origin of the Asset API. Set once on the client; every subsequent fetch uses it. Override only when pointing at a staging or self-hosted instance.
`businessId`	`string`	`—`	Business whose financials you're displaying. Forwarded as the `business_id` path parameter on every request. Optional — omit it during flows that create a business (e.g. onboarding) and set it later with `setBusinessId`.
`accessToken`required	`string \| (businessId?: string) => Promise<string>`	—	Either a literal token string or an async function that returns one. The function form receives the current `businessId` (`undefined` when none is set) so it can mint a token scoped to that business. The provider keeps the latest token in a ref so every in-flight request picks up the current value.
`defaultYear`	`number`	`current calendar year`	Initial value for the shared `year` state.
`defaultMonth`	`number`	`—`	Initial value (1-12) for the shared `month` state. Omit for a whole-year period.
`children`required	`ReactNode`	—	Your app tree.

Access token

Pass either a literal token (e.g. when you've already exchanged one server-side and rendered it into the page) or a function that fetches one. The function form is re-invoked when accessToken changes, so you can rotate tokens without remounting the provider.

Static string — fine when the token is short-lived but already on the client:

<AssetProvider businessId={businessId} accessToken={accessToken}>
  {children}
</AssetProvider>

Async function — usually a fetch to a route that exchanges your client_id/client_secret server-side. Never put the secret in the browser.

<AssetProvider
  businessId={businessId}
  accessToken={() => fetch("/api/asset/token").then((r) => r.json()).then((j) => j.token)}
>
  {children}
</AssetProvider>

While the token resolves the provider renders null. Children only mount once a token is available, so downstream cards never make a request without one.

Year and month

Year-aware cards (RevenueCard, ExpensesCard, SnapshotCard, OperatingExpensesCard, and ProfitLossCard) read year and month from the provider when their own props are omitted. Per-prop precedence is:

Component prop set → use it.
Component prop omitted → fall back to the provider value.
month={null} on a component → explicit opt-out (whole-year range even if the provider has a month set).

<AssetProvider
  businessId={businessId}
  accessToken={() => fetchToken(businessId)}
  defaultYear={2026}
  defaultMonth={4}
>
  {/* All year-aware cards default to April 2026 vs March 2026. */}
  {children}
</AssetProvider>

With month set, summary cards compare that month against the previous month. Without a month, they compare the full year against the previous year. ProfitLossCardalways renders 12 months for the year and ignores the provider's month.

Per-card overrides

<AssetProvider defaultYear={2026} defaultMonth={4} {/* … */}>
  <AssetSnapshotCard />              {/* April 2026 vs March 2026 */}
  <AssetRevenueCard year={2025} />    {/* April 2025 vs March 2025 — month inherits from provider */}
  <AssetExpensesCard month={null} />  {/* whole 2026 vs 2025 — explicit opt-out */}
  <AssetProfitLossCard />             {/* 12 months of 2026 — month is ignored */}
</AssetProvider>

useAsset

The same context exposes setters so any child can drive the period for every card on the page. Mutating year or month triggers a re-fetch on every consuming card automatically.

import { useAsset } from "@get-asset/sdk";

function PeriodPicker() {
  const { year, month, setYear, setMonth } = useAsset();
  return (
    <div className="period-picker">
      <input
        type="number"
        value={year}
        onChange={(e) => setYear(Number(e.target.value))}
      />
      <select
        value={month ?? ""}
        onChange={(e) =>
          setMonth(e.target.value === "" ? null : Number(e.target.value))
        }
      >
        <option value="">Whole year</option>
        {Array.from({ length: 12 }, (_, i) => (
          <option key={i + 1} value={i + 1}>
            {i + 1}
          </option>
        ))}
      </select>
    </div>
  );
}

Returned config

useAsset() returns the same object the provider stores internally:

Prop	Type	Default	Description
`baseUrl`	`string`	—	API origin (echo of the prop).
`businessId`	`string`	—	Active business id, or `""` when none is set.
`token`	`string`	—	The currently-resolved access token.
`isAuthenticating`	`boolean`	—	True while the token is still being (re-)provisioned for the current `businessId` — e.g. right after `setBusinessId`. Gate business-scoped actions on it so a request never goes out under a stale token.
`year`	`number`	—	Current shared year.
`month`	`number \| null`	—	Current shared month (1-12) or null when the period is a whole year.
`setYear`	`(year: number) => void`	—	Update the shared year. Cards re-fetch.
`setMonth`	`(month: number \| null) => void`	—	Update the shared month. Pass a number (1-12) or `null` for a whole-year period.
`setBusinessId`	`(businessId: string \| null) => void`	—	Point the provider at a business. Changing it re-invokes the `accessToken` function with the new id to re-provision the token — used by flows like onboarding that create a business and then switch from a creation-scoped token to a business-scoped one.

Outside a provider — calling useAsset() throws. Wrap your app in AssetProvider first.