> ## Documentation Index
> Fetch the complete documentation index at: https://developer.keverd.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React SDK

> KeverdProvider and hooks for React

# React SDK

## Install

```bash theme={null}
npm install @keverdjs/react
```

## Provider

```tsx theme={null}
import { KeverdProvider } from '@keverdjs/react';

export function App() {
  return (
    <KeverdProvider apiKey={import.meta.env.VITE_KEVERD_PUBLIC_KEY}>
      <YourApp />
    </KeverdProvider>
  );
}
```

Use `kv_pk_…` only. Provider prepares the SDK; collection starts when a hook runs.

## `useKeverd()` (UI convenience)

```tsx theme={null}
import { useKeverd } from '@keverdjs/react';

function Checkout() {
  const { deviceId, riskScore, isLoading, error } = useKeverd();
  if (isLoading) return <p>Identifying device…</p>;
  if (error) return <p>{error.message}</p>;
  return (
    <div>
      <p>Device: {deviceId}</p>
      <p>Risk: {riskScore}</p>
    </div>
  );
}
```

## `useKeverdVisitorData()` (send event to backend)

```tsx theme={null}
import { useKeverdVisitorData } from '@keverdjs/react';

export function LoginForm() {
  const { getData, isLoading } = useKeverdVisitorData({ immediate: false });

  async function onSubmit(form: { email: string; password: string }) {
    const visitor = await getData();
    await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: form.email,
        password: form.password,
        eventId: visitor.requestId,
      }),
    });
  }
}
```

<Warning>
  Client `riskScore` is not enough for enforcement. Backend must call **`verify(eventId)`** and branch on **`action`**.
</Warning>

## Next

[Server verify (Node) →](/server/node)