Documentation
incode.com
  1. SDK Reference
  2. Incode WebSDK 2.0 Reference
  3. Reference

TypeScript Types

📘

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 SDK is written in TypeScript and provides full type definitions.

Importing Types

import type { FlowConfig } from '@incodetech/web/flow';
import type { FinishStatus } from '@incodetech/core/flow';
import type {
  PhoneConfig,
  PhoneState,
  PhoneManager,
} from '@incodetech/core/phone';
import type {
  EmailConfig,
  EmailState,
  EmailManager,
} from '@incodetech/core/email';
import type {
  SelfieConfig,
  SelfieState,
  SelfieManager,
} from '@incodetech/core/selfie';
import type {
  IdCaptureConfig,
  IdCaptureState,
  IdCaptureManager,
} from '@incodetech/core/id';

Each module's @incodetech/core/<name> subpath ships the canonical types — Config, State, and Manager for headless usage. Per-module deep-dives (Module: Selfie, Module: ID, Module: Phone, Module: Email) cover the property-level breakdowns; the rest of this page focuses on patterns and SDK-wide types.

Web Component Element Types

The SDK augments HTMLElementTagNameMap for <incode-flow> and <incode-workflow> so that document.createElement('incode-flow') and document.querySelector('incode-flow') return a fully typed element with .config, .onFinish, and .onError properties:

import '@incodetech/web/flow'; // registers the custom element + brings the type augmentation

const flow = document.createElement('incode-flow');
flow.config = {
  // ✅ typed as FlowConfig
  token: 'session-token',
  lang: 'en-US',
  enableHome: true,
};
flow.onFinish = (result) => {
  // ✅ result typed as FinishStatus | undefined
  console.log(result?.action);
};
flow.onError = (error, code) => {
  // ✅ error: string | undefined, code: number | undefined
  console.error(error, code);
};

Other module elements (<incode-selfie>, <incode-phone>, <incode-email>, <incode-id>, etc.) are registered as plain HTMLElement instances with attribute-based config. Set their .config and event handlers via property assignment exactly as above; you'll just need to cast or rely on the HTMLElement baseline. The full tag catalog lives in Web Components.

Configuration Types

Per-module config types (PhoneConfig, EmailConfig, SelfieConfig, IdCaptureConfig, FlowConfig, etc.) are documented in their respective deep-dive pages with full property tables. Import them from @incodetech/core/<module> (or @incodetech/web/flow for FlowConfig). Your editor's go-to-definition (or hover docs) takes you straight to the canonical declarations.

The remaining types in this section are SDK-wide and don't belong on a single module page.

WarmupConfig

type WasmPipeline = 'selfie' | 'idCapture';

type WarmupConfig = {
  wasmPath: string;          // Path to .wasm binary
  glueCodePath: string;      // Path to JS glue code
  wasmSimdPath?: string;     // SIMD-optimized variant (falls back to wasmPath)
  useSimd?: boolean;         // Default: true
  pipelines?: WasmPipeline[]; // Default: ['selfie', 'idCapture']
  modelsBasePath?: string;   // Default: derived from wasmPath
  pipelineModels?: Partial<Record<WasmPipeline, string[]>>;
};

SessionInitOptions

type SessionInitOptions = {
  /** Custom hosting app name for fingerprint */
  hostingApp?: string;
  /** Abort signal for cancellation */
  signal?: AbortSignal;
};

SessionInitResult

type SessionInitResult = {
  features: Features;
  disableIpify: boolean;
  fingerprintSuccess: boolean;
};

Features

type FeatureName = 
  | 'VIDEO_SELFIE_V2' 
  | 'USE_CLIENT_GLARE' 
  | 'USE_OPEN_VIDU' 
  | 'DISABLE_IPIFY';

type FeatureConfig = {
  enabled: boolean;
  feature: FeatureName;
  config?: number | string;
};

type Features = {
  features?: FeatureConfig[];
  sessionIdentifier: string;
};

SpinnerConfig

type SpinnerSize = 'small' | 'medium' | 'large';

type SpinnerConfig = {
  /** Custom title text (overrides default) */
  title?: string;
  /** Custom subtitle text (overrides default) */
  subtitle?: string;
  /** Size of the spinner icon (default: 'medium') */
  size?: SpinnerSize;
};

State Types

Every module's state is a discriminated union keyed on status. PhoneState is shown here as the canonical example; the same pattern applies to EmailState, SelfieState, IdCaptureState, and FlowState. Per-module pages list each state with its full property shape.

type PhoneState =
  | { status: 'idle' }
  | { status: 'loadingPrefill' }
  | {
      status: 'inputting';
      countryCode: string;
      phonePrefix: string;
      phoneError?: string;
    }
  | { status: 'submitting' }
  | { status: 'sendingInitialOtp' }
  | { status: 'resendingOtp' }
  | {
      status: 'awaitingOtp';
      resendTimer: number;
      canResend: boolean;
      attemptsRemaining: number;
    }
  | { status: 'verifyingOtp'; resendTimer: number; canResend: boolean }
  | {
      status: 'otpError';
      otpError: string;
      attemptsRemaining: number;
      resendTimer: number;
      canResend: boolean;
    }
  | { status: 'finished' } // terminal success state
  | { status: 'error'; error: string };

Using Discriminated Unions

function handleState(state: PhoneState) {
  switch (state.status) {
    case 'inputting':
      // TypeScript knows state.countryCode exists here
      console.log(state.countryCode);
      break;
    case 'awaitingOtp':
      // TypeScript knows state.resendTimer exists here
      console.log(state.resendTimer);
      break;
  }
}

Completion Result

The result delivered to the IncodeFlow onFinish callback (and to your code via the getFinishStatus helper) is FinishStatus, exported from @incodetech/core/flow:

import type { FinishStatus } from '@incodetech/core/flow';

// type FinishStatus = {
//   redirectionUrl: string;
//   action: 'approved' | 'rejected' | 'none';
//   scoreStatus: 'OK' | 'WARN' | 'MANUAL_OK' | 'FAIL' | 'UNKNOWN' | 'MANUAL_FAIL';
// };

Manager Types

Every headless manager exposes the same shape:

type Manager<TState> = {
  getState(): TState;
  subscribe(listener: (state: TState) => void): () => void;
  // module-specific methods (e.g. setPhoneNumber, submitOtp, capture, retryCapture, ...)
  load(): void;
  reset(): void;
  stop(): void;
};

The module-specific method set is the actionable API. See each module's per-page deep-dive for the full table:

Or import the manager type directly: import type { PhoneManager } from '@incodetech/core/phone' (and equivalents for EmailManager, SelfieManager, IdCaptureManager).

See Also