Web Components

After you have added Regula IDV Web Components to your project, you can use them to initialize the integration, connect to the Platform, prepare a workflow, and start a verification session in the browser.

This page walks through the typical setup flow for <idv-flow> and IdvIntegrationService.

If you have not installed the components yet, see Installation first.

Setup

The setup process involves four steps: Initialize → Configure → Prepare → Start.

Initialize

import { IdvIntegrationService } from '@regulaforensics/idv-capture-web';
import { FaceIdv } from '@regulaforensics/idv-face';
import { DocumentIdv } from '@regulaforensics/idv-document';

const service = new IdvIntegrationService();

// Event listener
service.eventListener = (event) => console.log(event);

// Initialize modules
const initResult = await service.initialize({
  modulesConfig: { docreader: { devLicense: 'yourBase64license' } }, // For development use only. Do not use it in production.
  includedModules: [FaceIdv, DocumentIdv],
});

if (initResult.error) {
  console.error(initResult.error);
}

Configure

Use credentials, API key, or token URL.

With username/password

const configureResult = await service.configure({
  baseUrl: 'https://your.host.com',
  userName: '',
  password: '',
});

With API key

const configureResult = await service.configure({
  baseUrl: 'https://your.host.com',
  apiKey: 'yourApiKey',
  ttl: 86400, // Optional. Default is 86400 seconds (24h). You can set a custom TTL in seconds.
});

With token URL

const configureResult = await service.configure({
  url: 'your-token-url',
});

Prepare Workflow

const prepareResult = await service.prepareWorkflow({
  workflowId: 'your_workflow_id',
});

// Error handling
if (prepareResult.error) {
  console.error(prepareResult.error);
}

Start Workflow

const metadata = { anyMetadata: 'Any Metadata' };
const locale = 'en-us';

const startWorkflowResult = await service.startWorkflow({
  locale,
  metadata,
});

// Error handling
if (startWorkflowResult.error) {
  console.error(startWorkflowResult.error);
}

console.log('WORKFLOW FINISHED:', startWorkflowResult);

Events

You can subscribe to service events such as status updates, errors, and workflow progress by assigning a listener:

const service = new IdvIntegrationService();

// Define your listener
service.eventListener = (event) => {
    console.log('Event received:', event);
};

Configuration

Setters

Setter	Description
`nonce`	Sets a CSP nonce for `<style>` tags.
`sessionRestoreMode`	Restores a session if the page reloads. `false` by default.

const service = new IdvIntegrationService();
service.nonce = 'nonceId';
service.sessionRestoreMode = true;

Getters

Getter	Description
`version`	Returns the version of the component.

const service = new IdvIntegrationService();
console.log(service.version);

Methods

Method	Description	Type	Notes
`initialize(config: InitConfig)`	Initializes the service. Returns error if initialization fails.	`async initialize(config: InitConfig): Promise<{ error?: BaseInitializationError }>`	Call this first before any other method.
`configure(config)`	Configures the service with credentials, API key, or token.	`async configure(config: CredentialConnectionConfig \| TokenConnectionConfig \| ApiKeyConnectionConfig): Promise<ConfigureCompletion \| TokenConfigureCompletion>`	Required before preparing a workflow.
`getWorkFlows(params?)`	Returns a list of available workflows.	`async getWorkFlows(params?: WorkflowListRequest): Promise<WorkflowListCompletion>`	Useful for dynamically displaying workflows to users.
`prepareWorkflow({ workflowId })`	Prepares the service for the given workflow. Checks module and step compatibility.	`async prepareWorkflow({ workflowId }: { workflowId: string }): Promise<PrepareWorkflowCompletion>`	Must be called after configure. Validates workflow and modules.
`startWorkflow(config?)`	Starts the workflow. Show the web component before running and remove it after completion.	`async startWorkflow(config?: StartWorkflowConfig): Promise<WorkflowCompletion>`	Display the component before calling. Pass locale/metadata if needed.
`deinitialize()`	Deinitializes the service. Run `initialize` again to restart. Recommended after completing work.	`async deinitialize(): Promise<DeinitializeCompletion>`	Clean up resources after finishing a workflow. Use `initialize` to start again.

Examples

You can find examples of using the components on the Samples page.