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. We strongly recommend upgrading - contact your Incode Representative for upgrade information.

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

Updated 21 days ago