> Toden documentation. For the full index fetch /llms.txt. Every page is available as Markdown by appending .md to its URL. Identity verification uses /api/kyc, Risk Intelligence uses /api/v1; they are separate contracts with different error shapes. Never invent an endpoint, field or enum value: read the API reference page for the operation first.

# Quickstart: embed the SDK

> Install the React SDK, mount a published workflow with a publishable key, complete a sandbox verification, and read the result on your backend.

The SDK renders the whole verification flow (ID selection, document capture, liveness) inside your app and calls the API for you. This guide uses the React web SDK. React Native and Flutter follow the same shape; their guides are linked at the end.

**You will need:** a React 18 or later app, and a Toden account.

### Get a publishable key and a workflow ID

In the [console](https://console.toden.co), switch to **Sandbox**.

1. Open **Developers → API Keys** and create a **Publishable** key. It starts with `pk_test_`.
2. Open **Workflows** and copy the ID of a published workflow. It starts with `wf_`. New organisations start with a published **Identity verification** workflow.

A publishable key is safe in client code. It can start a verification and read its minimal status, and nothing else.

### Install the SDK

**`npm`**

```bash title="npm"
npm install @myazahq/kyc-sdk-react
```

**`pnpm`**

```bash title="pnpm"
pnpm add @myazahq/kyc-sdk-react
```

**`yarn`**

```bash title="yarn"
yarn add @myazahq/kyc-sdk-react
```

The package and component names still carry the earlier Myaza name. They are the current, supported packages.

### Mount the workflow

**`VerifyButton.tsx`**

```tsx title="VerifyButton.tsx"
"use client";

import { MyazaKYC } from "@myazahq/kyc-sdk-react";
import "@myazahq/kyc-sdk-react/styles.css";

export default function VerifyButton() {
  return (
    <MyazaKYC
      apiKey="pk_test_your_publishable_key"
      workflowId="wf_your_workflow_id"
      userId="user_42"
      userData={{ firstName: "Jane", lastName: "Doe" }}
      onSubmit={(submission) => {
        // Send the ID to your backend. The result is not ready yet.
        console.log("submitted", submission.verificationId);
      }}
      onError={(error) => console.error(error)}
    />
  );
}
```

* `userId` is your own reference for the customer. It links the verification to your records and comes back on every webhook.
* `userData` is the name you expect. It is compared with the name on the ID, which is what produces `dataMatch` in the result.
* The SDK reads the environment from the key prefix. There is no environment option to set.

### Run a sandbox verification

Start your app and press the button. Choose **Bank Verification Number (BVN)** and enter the test ID `00000000001`, then complete the selfie step. Sandbox accepts only [test IDs](/get-started/sandbox-testing).

`onSubmit` fires as soon as the customer finishes. That means the verification was **submitted**, not that it passed.

### Read the result on your backend

Send `submission.verificationId` to your server, then read the full result with a **secret** key:

```bash
curl "https://api.toden.co/api/kyc/verifications/VERIFICATION_ID" \
  -H "Authorization: Bearer $TODEN_SECRET_KEY"
```

In production, do not wait on this call from the browser. Register a [webhook](/integrate/webhooks/overview) and let your backend update the customer's state when the outcome arrives.

## What you should see

* The button opens the verification flow in a modal.
* After submitting, `onSubmit` logs a verification ID.
* The backend call returns `"status": "approved"` and `"checkStatus": "verified"` a few seconds later.

> **Warning**
>
> Never decide access from `onSubmit` or from anything else in the browser. A customer controls their own device. Decide on your backend, from the webhook or a secret-key read.

## Next steps

#### [React (web)](/integrate/sdks/react)

Every prop, theming and callbacks.

#### [React Native](/integrate/sdks/react-native)

Native liveness and NFC chip reading.

#### [Flutter](/integrate/sdks/flutter)

iOS and Android from one codebase.