---
title: "Replacing the OTP method UI for Web"
slug: "dpo-replace-web-app-sdk-ui-for-otp-method"
updated: 2026-10-27T20:13:31Z
published: 2026-10-27T20:13:31Z
canonical: "docs.onespan.com/dpo-replace-web-app-sdk-ui-for-otp-method"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onespan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Replacing the OTP method UI for Web

The App SDK provides a default UI for OTP registration and authentication that implements the IOtpLiveData interface.

![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/Screenshot 2026-02-24 at 1.54.11 PM.png?sv=2026-02-06&spr=https&st=2026-10-29T03%3A00%3A26Z&se=2026-10-29T04%3A00%3A26Z&sr=c&sp=r&sig=roAsk6edp1ZC7MX1t6P5SR6t3TYCL4iNOXl%2FwHkrTQI%3D)

The object that displays your custom UI must also implement the IOtpLiveData interface. In addition, an object of DigipassONE's default UI is created by DigipassONE's MethodUIFactory. Therefore, you must define your own factory to create an object for your custom UI.

The following steps take you through defining your custom UI and your custom factory.

**Step 1**: Create a custom object that displays your UI. For example, call it SampleOtpUI.

**Step 2**: Define the following four functions in your custom UI object: onConfirmIdentifier(), onGetCode(), onFinish(), and onGetIdentifier(). These function definitions ensure that your class implements the IOtpLiveData interface.

**Step 3**: Define a new factory to replace MethodUIFactory. For example, call this new factory SampleMethodUIFactory. Define your new factory to override the createMethodUI() function from MethodUIFactory.

```javascript
var SampleMethodUIFactory = function() {
  // Store the reference to the current factory.
  var prevMethodUIFactory = MethodUIFactory.getInstance();
  // function definitions to implement IOtpLiveData
  this.createMethodUI = function(methodType, extras, sessionData) {
    if(methodType === AdaptiveType.SMS || 
       methodType=== AdaptiveType.EMAIL){
      // Create default methodUI.
      var otpMethodUI = new OtpMethodUI(extras, sessionData);
      // Create sample UI and pass the methodUI as controller.
      var otpLiveData = new SampleOtpUI(otpMethodUI);
      // Tell the methodUI to use the sample UI.
      otpMethodUI.setLiveData(otpLiveData);
      return otpMethodUI;
    }
    // Otherwise call the previous factory
    return prevMethodUIFactory.createMethodUI(methodType, extras, sessionData);
  }
}
```

**Step 4**: When you create an instance of your SampleMethodUIFactory, store it in the MethodUIFactory instance.

```javascript
MethodUIFactory.setInstance(new SampleMethodUIFactory());
```

Refer to the [Client API Docs](/dpoa/docs/s3suite94-web-client-api-docs-1) for the IOtpLiveData interface for more details.

#### Working examples in Tutorial web app

- Refer to the SampleOtpUI class in the file js/samples.js for implementation of IOtpLiveData interface.
- Refer to SampleMethodUIFactory class in js/Controller.js for usage.

Formerly known as Digipass S3.