Individual Modules Catalog
This guide is specific to Web SDK 2.0. If you are still using 1.x, you can find documentation here. Contact your Incode Representative for upgrade information and check if you are a candidate for this upgrade.
Full rollout to all clients still TBD.
The Incode Web SDK is composed of small, single-purpose modules. Each module ships independently and exposes (depending on the module) a web component, a headless Manager, or both.
This page is the complete catalog. For deep-dives, see the per-module reference pages linked below where they exist; otherwise consult Headless Mode for headless API patterns and Web Components for the consumer-element API surface.
New here? Most modules follow one of five implementation patterns (form-based, camera-capture, backend-process, document-signing, composite). Module Patterns documents each pattern's lifecycle once so per-module pages can stay focused on what's actually unique. Read that first if you're orienting on the SDK.
How to read this catalog
| Column | Meaning |
|---|---|
| Web component | If present, registered automatically when you import the UI subpath. Use as a custom element (e.g. <incode-phone>). |
| Headless manager | If present, the factory function for the module's headless API (subscribe to state, drive the state machine yourself, render any UI). |
| Core import | Where the module's TypeScript types and headless API live. |
| UI import | Side-effect import that registers the web component and lets you import its CSS. Empty when the module is headless-only. |
For a tour of how to combine these into a full integration, start with Getting Started.
Flow-backed standalone modules
Standalone modules can read their configuration from the active Flow. This lets a host render modules such as ID, Selfie, or Phone without copying their configuration into application code.
Flow configuration and the session theme are independent:
flowcontrols where standalone module configuration comes from and whether it is prefetched.themecontrols whether the session theme is fetched and applied.
ID followed by Selfie
The examples below preload one Flow, disable the session theme, and render the registered ID and Selfie web components directly in JSX. Both modules intentionally omit config.
React 19
React 19 passes function-valued custom element properties directly:
import { setup } from '@incodetech/web';
import '@incodetech/web/id';
import '@incodetech/web/selfie';
import { useEffect, useState } from 'react';
export function Verification() {
const [step, setStep] = useState('loading');
useEffect(() => {
void setup({
apiURL,
token,
flow: {
preload: true,
},
theme: false,
}).then(() => setStep('id'));
}, []);
if (step === 'id') {
return (
<incode-id
onFinish={() => setStep('selfie')}
onError={(error) => console.error('ID failed', error)}
/>
);
}
if (step === 'selfie') {
return (
<incode-selfie
onFinish={() => setStep('finished')}
onError={(error) => console.error('Selfie failed', error)}
/>
);
}
return null;
}React 18
React 18 renders custom elements directly, but function-valued properties must be assigned through refs:
import { setup } from '@incodetech/web';
import '@incodetech/web/id';
import '@incodetech/web/selfie';
import { useEffect, useRef, useState } from 'react';
function ID({ onFinish, onError }) {
const ref = useRef(null);
useEffect(() => {
const element = ref.current;
if (!element) {
return;
}
element.onFinish = onFinish;
element.onError = onError;
return () => {
element.onFinish = undefined;
element.onError = undefined;
};
}, [onError, onFinish]);
return <incode-id ref={ref} />;
}
function Selfie({ onFinish, onError }) {
const ref = useRef(null);
useEffect(() => {
const element = ref.current;
if (!element) {
return;
}
element.onFinish = onFinish;
element.onError = onError;
return () => {
element.onFinish = undefined;
element.onError = undefined;
};
}, [onError, onFinish]);
return <incode-selfie ref={ref} />;
}
export function Verification() {
const [step, setStep] = useState('loading');
useEffect(() => {
void setup({
apiURL,
token,
flow: {
preload: true,
},
theme: false,
}).then(() => setStep('id'));
}, []);
if (step === 'id') {
return (
<ID
onFinish={() => setStep('selfie')}
onError={(error) => console.error('ID failed', error)}
/>
);
}
if (step === 'selfie') {
return (
<Selfie
onFinish={() => setStep('finished')}
onError={(error) => console.error('Selfie failed', error)}
/>
);
}
return null;
}setup fetches Flow once and waits for it. ID reads the first ID module configuration from the cached Flow. Selfie later reads the first SELFIE configuration from the same cache, so mounting Selfie does not issue another Flow request. theme: false ensures that Flow configuration is used without changing the host application's colors, logo, subtitle, or footer.
The session token must belong to a Flow containing both ID and SELFIE. If either module is missing, that module reports an error instead of falling back to library defaults.
Setup options
| Setup option | Setup request | Supplied module config | Omitted module config |
|---|---|---|---|
Omit flow or use flow: {} | None | Used verbatim | Loaded from Flow |
flow: false | None | Used verbatim | Error |
flow: { preload: true } | Flow | Used verbatim | Loaded from cached Flow |
flow: { mergeConfig: true } | None | Merged over Flow on mount | Loaded from Flow |
flow: { preload: true, mergeConfig: true } | Flow | Merged over prefetched Flow | Loaded from cached Flow |
Omit theme or use theme: {} | None | Existing theme remains | Theme loads on mount |
theme: false | None | Session theme never applies | Session theme disabled |
theme: { preload: true } | Theme | Session theme applies in setup | Session theme applies |
Flow and theme requests are independent. For example, flow: { preload: true }, theme: false preloads module configuration without fetching or applying the session theme.
Override part of the Flow configuration
Enable merging when the Flow should provide defaults but the host needs to override selected fields. In React 19:
await setup({
apiURL,
token,
flow: {
preload: true,
mergeConfig: true,
},
theme: false,
});
<incode-selfie config={{ showTutorial: false }} />;Objects merge recursively, arrays are replaced, and defined local values including null win. Without mergeConfig: true, any supplied config is used verbatim and Flow is not consulted for that module.
Disable Flow configuration
Use a complete local config or a supported external manager when Flow-backed configuration is disabled. In React 19:
await setup({
apiURL,
token,
flow: false,
theme: false,
});
<incode-id config={localIdConfig} />;Rendering <incode-id /> in this mode reports Flow-backed module configuration is disabled; provide config or manager.
Standalone Flow resolution requires an active Flow session. A Workflow-only token cannot supply standalone Flow configuration. Modules rendered inside Flow or Workflow orchestration already receive authoritative configuration from their orchestrator and do not use this standalone fallback.
Direct Core setup supports the same flow option and semantics. The theme option belongs to Web setup because Core does not render or apply UI themes.
Identity capture
| Module | Web component | Headless manager | Core import | UI import |
|---|---|---|---|---|
| Selfie | <incode-selfie> | createSelfieManager | @incodetech/core/selfie | @incodetech/web/selfie |
| Video selfie | <incode-video-selfie> | createVideoSelfieRecordingManager | @incodetech/core/video-selfie | @incodetech/web/video-selfie |
| Personhood | — | createPersonhoodManager | @incodetech/core/personhood | — |
| ID document | <incode-id> | createIdCaptureManager | @incodetech/core/id | @incodetech/web/id |
| ID OCR | — | createIdOcrManager | @incodetech/core/id-ocr | — |
| Document capture | <incode-document-capture> | createDocumentCaptureManager | @incodetech/core/document-capture | @incodetech/web/document-capture |
| Document upload | — | createDocumentUploadManager | @incodetech/core/document-upload | — |
| Face match | <incode-face-match> | createFaceMatchManager | @incodetech/core/face-match | @incodetech/web/face-match |
- Selfie — face capture with ML-powered liveness detection. Supports single-frame, multi-modal, and video-liveness modes. Validates against masks, glasses, headwear, closed eyes, lighting. See Module: Selfie.
- Video selfie — selfie capture in a continuous-camera experience that records the session locally and uploads it alongside the capture. See import paths above; no dedicated reference page yet.
- Personhood — a passive liveness check that runs without an onboarding session and returns a verdict of its own:
human(whether a live person was present),confidence,evidenceId(the server-side record to reference later), andsignals. Because it is session-less, it does not participate in a Flow or Workflow — drivecreatePersonhoodManagerdirectly. The drop-in UI ships separately asincode-personhood-widget, which consumes this same core module. See import paths above; no dedicated reference page yet. - ID document — government ID, passport, and driver's-license capture with quality checks (blur, glare, perspective). See Module: ID.
- ID OCR — extracts structured data from a captured ID image (name, DOB, address, ID number, etc.). With
cpfOnly: true, or when<incode-flow>receivesuseCPF: true, it shows and validates only the CPF document number field. See Module: ID OCR. - Document capture — generic document capture (utility bills, lease agreements, tax docs) with multi-page support and file-picker fallback. See Module: Document Capture.
- Document upload — file-picker-only upload path for documents that can't be captured live (e.g., third ID). See Module: Document Upload.
- Face match — compares a captured selfie against the face on a previously captured ID and returns a match score. See Module: Face Match.
Contact verification
| Module | Web component | Headless manager | Core import | UI import |
|---|---|---|---|---|
| Phone | <incode-phone> | createPhoneManager | @incodetech/core/phone | @incodetech/web/phone |
<incode-email> | createEmailManager | @incodetech/core/email | @incodetech/web/email |
- Phone — phone-number capture with optional SMS OTP verification. See Module: Phone.
- Email — email capture with optional OTP verification. See Module: Email.
Compliance & consent
| Module | Web component | Headless manager | Core import | UI import |
|---|---|---|---|---|
| Consent | <incode-consent> | createConsentManager | @incodetech/core/consent | @incodetech/web/consent |
| Mandatory consent | — | createMandatoryConsentManager | @incodetech/core/mandatory-consent | — |
| Geolocation | <incode-geolocation> | createGeolocationManager | @incodetech/core/geolocation | @incodetech/web/geolocation |
| Antifraud | <incode-antifraud> | createAntifraudManager | @incodetech/core/antifraud | @incodetech/web/antifraud |
| Watchlist | — | createWatchlistManager | @incodetech/core/watchlist | — |
| Custom watchlist | — | createCustomWatchlistManager | @incodetech/core/custom-watchlist | — |
| Watchlist for business | — | createWatchlistForBusinessManager | @incodetech/core/watchlist-for-business | — |
| Government validation | — | createGovernmentValidationManager | @incodetech/core/government-validation | — |
| CURP validation | <incode-curp-validation> | createCurpValidationManager | @incodetech/core/curp-validation | @incodetech/web/curp-validation |
| Fiscal QR | <incode-fiscal-qr> | createFiscalQrManager | @incodetech/core/fiscal-qr | @incodetech/web/fiscal-qr |
- Consent — capture user consent with optional checkboxes for terms, privacy, marketing. See Module: Consent.
- Mandatory consent — strict consent flow that gates downstream modules until the user accepts. State and methods documented inline in Module: ID → Mandatory Consent State Properties.
- Geolocation — captures the user's coordinates with a permission prompt; useful for jurisdictional rules. See Module: Geolocation.
- Antifraud — runs antifraud signal collection in the background. See Module: Antifraud.
- Watchlist / Custom watchlist / Watchlist for business — sanctions, PEP, and custom-list screening. See Module: Watchlist, Module: Custom Watchlist, Module: Watchlist for Business.
- Government validation — validates submitted ID data against government registries (with optional OTP). See Module: Government Validation.
- CURP validation — validates Mexican CURP identity numbers (enter / confirm / generate). See Module: CURP Validation.
- Fiscal QR — scans a Mexican SAT fiscal QR code, resolves its URL, and submits the fiscal data for verification. See import paths above; no dedicated reference page yet.
Authentication & identity reuse
| Module | Web component | Headless manager | Core import | UI import |
|---|---|---|---|---|
| Authentication | — | createAuthenticationManager | @incodetech/core/authentication | — |
| Identity reuse | <incode-identity-reuse> | createIdentityReuseManager | @incodetech/core/identity-reuse | @incodetech/web/identity-reuse |
- Authentication — re-authenticate a returning user via fresh selfie capture matched against their stored biometric. Same camera-capture flow as Selfie. See Module: Authentication.
- Identity reuse — recognizes a returning user via face match against their existing on-file biometric record and lets them choose to reuse the existing identity. See Module: Identity Reuse.
Signing
| Module | Web component | Headless manager | Core import | UI import |
|---|---|---|---|---|
| Signature | <incode-signature> | createSignatureManager | @incodetech/core/signature | @incodetech/web/signature |
| Electronic signature | <incode-electronic-signature> | createElectronicSignatureManager | @incodetech/core/electronic-signature | @incodetech/web/electronic-signature |
| AE signature | <incode-ae-signature> | createAeSignatureManager | @incodetech/core/ae-signature | @incodetech/web/ae-signature |
| QE signature | <incode-qe-signature> | createQeSignatureManager | @incodetech/core/qe-signature | @incodetech/web/qe-signature |
- Signature — handwritten signature capture on a touch surface or mouse-driven canvas. See Module: Signature.
- Electronic signature, AE signature, QE signature — eIDAS-aligned signing flows. AE and QE are thin wrappers around Electronic Signature (same state machine, different consent keys). All three covered in Module: Electronic Signature.
Composite & orchestration
| Module | Web component | Headless manager | Core import | UI import |
|---|---|---|---|---|
| Flow (orchestrator) | <incode-flow> | createOrchestratedFlowManager, createFlowManager (legacy) | @incodetech/core/flow | @incodetech/web/flow |
| Workflow | <incode-workflow> | createWorkflowManager | @incodetech/core/workflow | @incodetech/web/workflow |
| eKYC | <incode-ekyc> | createEkycManager | @incodetech/core/ekyc | @incodetech/web/ekyc |
| eKYB | <incode-ekyb> | createEkybManager | @incodetech/core/ekyb | @incodetech/web/ekyb |
| Cross-document data match | <incode-cross-document-data-match> | createCrossDocumentDataMatchManager | @incodetech/core/cross-document-data-match | @incodetech/web/cross-document-data-match |
| Certificate issuance | <incode-certificate-issuance> | createCertificateIssuanceManager | @incodetech/core/certificate-issuance | @incodetech/web/certificate-issuance |
| Field comparison | <incode-field-comparison> | createFieldComparisonManager | @incodetech/core/field-comparison | @incodetech/web/field-comparison |
| Custom fields | — | createCustomFieldsManager | @incodetech/core/custom-fields | — |
| Dynamic forms | — | createDynamicFormsManager | @incodetech/core/dynamic-forms | — |
| Trust graph | — | createTrustGraphManager | @incodetech/core/trust-graph | — |
- Flow (orchestrator) — drives a dashboard-configured sequence of modules end-to-end. The default for most integrations.
createOrchestratedFlowManageris the modern API;createFlowManageris legacy and stays for back-compat. See IncodeFlow Component and Headless Mode → Orchestrated Flow Manager. - Workflow — server-driven multi-step workflows where step ordering and configuration come from the backend per session, including custom-module callbacks. See Module: Workflow.
- eKYC — Know Your Customer form module: collects identity verification data (name, DOB, address, etc.) with dashboard-driven field schema. See Module: eKYC.
- eKYB — Know Your Business form module: business name, address, tax ID, plus UBOs. Country-aware schema. See Module: eKYB.
- Cross-document data match — cross-references data across multiple captured documents to flag inconsistencies. See Module: Cross-Document Data Match.
- Certificate issuance — issues a digital certificate at the end of a verification flow: the user sets a protecting password, the backend issues the certificate, and the SDK offers it for download. See Module: Certificate Issuance.
- Field comparison — collects the user's first and last name and submits them for backend verification against the data already on file for the session. See Module: Field Comparison.
- Custom fields — collect arbitrary structured data (text, number, date, boolean) from a dashboard-defined schema. See Module: Custom Fields.
- Dynamic forms — server-driven multi-screen form module. Screen schema, fields, and validation rules come from the backend per session — useful for jurisdiction-specific questionnaires that change without an SDK release. Typically driven by
<incode-flow>(no public UI subpath); use the headless manager directly when you're stepping through forms outside the orchestrator. See Module: Dynamic Forms. - Trust graph — backend-only risk-graph analysis. The orchestrator renders an empty shell while the server runs the analysis; the module advances to
finishedautomatically once the backend reports done. No UI element, no config (TrustGraphConfig = Record<string, never>).
Utility
| Module | Web component | Headless manager | Core import | UI import |
|---|---|---|---|---|
| Home | — | createHomeManager | @incodetech/core/home | — |
| Redirect to mobile | <incode-redirect-to-mobile> | createRedirectToMobileManager | @incodetech/core/redirect-to-mobile | @incodetech/web/redirect-to-mobile |
- Home — the SDK's built-in home screen presented before a flow starts. Wired automatically by
<incode-flow>whenenableHome: true. See Module: Home. - Redirect to mobile — generates a QR code and a one-time URL that hands the user off from a desktop browser to their phone, where camera-bearing modules continue. See Module: Redirect to Mobile.
Helpers used by every integration
These aren't modules per se — they're SDK-wide helpers you'll hit on day one.
| Helper | Import | What it does |
|---|---|---|
setup | @incodetech/core | Configures the SDK (apiURL, token, optional WASM/i18n/UI options). Call before any module. |
createSession | @incodetech/core/session | Opens a verification session, returns a session token. Production: call from your backend. |
warmupWasm | @incodetech/core/wasm | Pre-warms the WASM ML pipelines (selfie, idCapture). Optional but reduces first-frame latency. See WASM Configuration. |
getRequiredWasmPipelines | @incodetech/core/flow | Given the orchestrator's resolved flow, returns just the pipelines needed (so you don't warm up models you won't use). |
subscribeEvent | @incodetech/core/events | Subscribes to the SDK's raw analytics event stream. See Event Callbacks. |
createFaceAvatar | @incodetech/core/avatar | Renders a cosmetic avatar over a camera stream, for hosts building their own capture screen. Display-only — it never feeds detection, quality, liveness, or upload. The bundled modules use it via selfieConcealmentOption; see Module: Selfie → Face concealment. |
createXxxManagerFromActor | @incodetech/core/extensibility | For advanced cases where you supply a pre-built XState actor (e.g., to mock services in tests or override actors in production). |
Per-module reference pages
Every module has a dedicated reference page covering its tag, properties, configuration, state machine, and API methods. Pages cross-reference Module Patterns for the shared lifecycle (load / subscribe / reset / stop and pattern-specific transitions) so they stay focused on what's module-specific.
Identity capture: Selfie · ID Capture · ID OCR · Document Capture · Document Upload · Face Match
Contact verification: Phone · Email
Compliance & consent: Consent · Geolocation · Antifraud · Watchlist · Custom Watchlist · Watchlist for Business · Government Validation · CURP Validation
Authentication & identity reuse: Authentication · Identity Reuse
Signing: Signature · Electronic Signature (covers AE / QE variants)
Composite & orchestration: IncodeFlow Component · Workflow · eKYC · eKYB · Cross-Document Data Match · Certificate Issuance · Custom Fields
Utility: Home · Redirect to Mobile
For niche fields not covered on a page, the TypeScript declarations shipped with each @incodetech/core/<name> subpath are authoritative — your editor's go-to-definition (or hover docs) takes you straight to them. If you need help, contact [email protected].
Updated 6 days ago
