# @okyc/react

> A button, an inline component and a hook around @okyc/web. SSR-safe.

Source: https://docs.okyc.stream/web/react

## Install

```bash
npm install @okyc/react @okyc/web
```

## Verify button

`OkycButton` asks your backend for a session only when the user clicks, then opens the flow (modal by default):

```jsx title="main.jsx"
function App() {
  const [status, setStatus] = useState('Not verified');
  return (
    <main style={{ fontFamily: 'system-ui', maxWidth: 480, margin: '64px auto' }}>
      <h1>Acme onboarding</h1>
      <p>Status: {status}</p>
      <OkycButton
        // Your backend creates the session and returns { clientToken, sessionUrl }.
        getClientToken={() => fetch('/api/kyc/session', { method: 'POST' }).then((r) => r.json())}
        {...flowHandlers(setStatus)}
      >
        Verify identity
      </OkycButton>
    </main>
  );
}
```

`getClientToken` must resolve to `{ clientToken, sessionUrl }` (or `sessionId`) — what your backend returns from
`sessions.create`. The button is disabled while the session is being created.

## Events

```jsx title="main.jsx"
// UX only — the webhook on your backend is the source of truth.
function flowHandlers(setStatus) {
  return {
    onStepStarted: (e) => console.debug('step started', e.step),
    onComplete: (e) => setStatus(`Submitted (${e.status}) — we'll confirm shortly`),
    onExit: () => setStatus('Closed before finishing'),
    onError: (e) => setStatus(`Error: ${e.code}`),
  };
}
```

The callbacks are the same as [`@okyc/web`](https://docs.okyc.stream/web/web-sdk.md#handle-events). Use them for UI; the
[webhook](https://docs.okyc.stream/backend/webhooks.md) is the decision.

## Inline and hook

| Export                                                               | Use                                                                                                                              |
| -------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `<OkycButton getClientToken mode verifyUrl locale theme …callbacks>` | Button that creates the session lazily and opens the flow.                                                                       |
| `<OkycInline clientToken sessionUrl …callbacks style className>`     | Embeds the flow in the page; re-mounts when the session changes.                                                                 |
| `useOkyc(options)` → `{ start, close, status }`                      | Imperative: `start(session \| () => Promise<session>)`. `status` is `idle`, `loading`, `open`, `completed`, `exited` or `error`. |

Nothing touches `window` until `start()` runs in the browser, so the components render on the server.