Use the package root for the Ovok client and @ovok/core/next/react for the provider and hooks. Keep the provider and hook consumers in the client component tree.

Use the package root for the Ovok client and @ovok/core/next/react for the provider and hooks. Keep the provider and hook consumers in the client component tree.

'use client';

import { useState, type PropsWithChildren } from 'react';
import { Ovok } from '@ovok/core';
import { OvokProvider, useSession } from '@ovok/core/next/react';

function SessionStatus() {
  const { data, loading, error, refetch } = useSession();

  if (loading) return <p>Loading session…</p>;
  if (error) return <button onClick={refetch}>Retry</button>;

  return <p>{data?.profile.reference ?? 'No active session'}</p>;
}

export function AppProviders({ children }: PropsWithChildren) {
  const [client] = useState(() => new Ovok({
    baseUrl: 'https://api.sandbox.ovok.com',
    tenantCode: 'your-tenant',
  }));

  return <OvokProvider client={client}>{children}</OvokProvider>;
}

useSession() returns data, loading, isRefreshing, isStale, error, and refetch. useSearch() and useResource() read FHIR resources. useOvokQuery() and useOvokMutation() provide request and mutation state for other workflows.

Keep user-specific server clients request-scoped. Never send a machine clientSecret to browser code. The API remains responsible for authentication, project membership, and authorization.

See React integration and the complete API reference for the available React surface.

React applications