Skip to navigation

Quickstart: embed the SDK

Run the verification flow inside your own React app.

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.

1

Get a publishable key and a workflow ID

In the console, 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.

2

Install the SDK

npm install @myazahq/kyc-sdk-react

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

3

Mount the workflow

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.
4

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.

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

5

Read the result on your backend

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

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 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.

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