# TypeScript Types

<WebSDK2 />

The SDK is written in TypeScript and provides full type definitions.

## Importing Types

```typescript
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](doc:web-sdk-2-module-selfie-1), [Module: ID](doc:web-sdk-2-module-id-capture), [Module: Phone](doc:web-sdk-2-module-phone), [Module: Email](doc:web-sdk-2-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:

```typescript
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](doc:web-sdk-2-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

```typescript
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

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

### SessionInitResult

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

### Features

```typescript
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

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

```typescript
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

```typescript
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`:

```typescript
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:

```typescript
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:

* [Module: Selfie § API Methods](doc:web-sdk-2-module-selfie-1#api-methods)
* [Module: ID § API Methods](doc:web-sdk-2-module-id-capture#api-methods)
* [Module: Phone § API Methods](doc:web-sdk-2-module-phone#api-methods)
* [Module: Email § API Methods](doc:web-sdk-2-module-email#api-methods)

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

## See Also

* [API Reference](doc:web-sdk-2-reference): Full API documentation
* [Headless Mode](doc:web-sdk-2-headless-mode): Using managers