Replacing the try passwordless authentication UI

During a FIDO2 authentication operation, the server tries to determine if your device has a FIDO2 registration. In some cases the server finds a registration, but it can't determine if the registration is on the current device or on a different device. In this case the App SDK uses the built-in Try Passwordless UI to inform the user with the one of following dialogs:

There are two ways to modify this user interface: you can either suppress its display or replace it.

Suppress the display of the try passwordless dialog

To suppress the display, pass an extension in authOpts when calling AdaptiveUI.getAuthenticationView().

var extension = {
    "id": SKIP_TRY_FIDO_EXT_ID,
    "data": "true",
    "fail_if_unknown": false
}
var extensions = [];
extensions.push(extension);
var authOpts = {
    "extensions": extensions,
    ...
}
var ui = new AdaptiveUI(appSdkConfig);
ui.getAuthenticationView(sessionData, null, authOpts);

Replace the try passwordless dialog

To replace these default dialogs with your own custom UI, your custom UI object must implement the ITryFidoUi interface. In addition, an object of the Digipass S3 default UI class is created by Digipass S3's TryFidoUiFactory. Therefore, you must define your own factory to create an object of your custom UI.

Take these steps to define your custom UI object and your custom factory:

Step 1. Create a custom object that implements your UI. For example, call this object SampleTryFidoUi.

Step 2: To satisfy the ITryFidoUi interface, define the following method in SampleTryFidoUi: openUI().

// ITryFidoUi implementation displays the confirmation UI
// to the user and returns the result of the user's action.
var SampleTryFidoUi = function(isTryHybrid) {
  this.openUI = function() {
    // The promise returned from this method should always resolve.
    return new Promise(function(resolve) {
      if(isTryHybrid) {
        // Present the confirmation UI to tell the user that a passkey
        // may be available on another device.
      } else {
        // Present the confirmation UI to tell the user that a passkey
        // may be available for their account.
      }
      // Get a reference to the confirmation button on the UI.
      var confirmButton = document.getElementById('try-passkey-confirm');
      confirmButton.addEventListener('click', function() {
        // Resolve with success.
        resolve(Outcome.SUCCESS);
      });
      // Get a reference to the cancellation button on the UI.
      var cancelButton = document.getElementById('try-passkey-cancel);
      cancelButton.addEventListener('click', function() {
        // Resolve with a canceled error.
        resolve(Outcome.CANCELED);
      });
    });
  }
}

Step 3: Define a new factory that implements the ITryFidoUiFactory interface. For example, call this new factory SampleTryFidoUiFactory. To satisfy the ITryFidoUiFactory interface, define the following methods in your class SampleTryFidoUiFactory: createTryFidoUi() and createTryHybridUi().

// ITryFidoUiFactory implementation creates the ITryFidoUi instance
var SampleTryFidoUiFactory = function() {
  this.createTryFidoUi = function() {
    // Create and return a new instance of the custom UI for Try FIDO case.
    return new SampleTryFidoUi(false);
  }
  this.createTryHybridUi = function() {
    // Create and return a new instance of the custom UI for Try Hybrid
    // case.
    return new SampleTryFidoUi(true);
  }
}

Step 4: Inside the controller, register the new factory so it is used when Try Passwordless authentication UI is needed.

TryFidoUiFactory.setInstance(new SampleTryFidoUiFactory());

Refer to the Client API Docs for the ITryFidoUi interface, the ITryFidoUiFactory interface, and the TryFidoUiFactory class for more details.

Working examples in Tutorial web app

• Refer to SampleTryFidoUi and SampleTryFidoUiFactory in the file js/samples.js for implementation details.

• Refer to the file js/Controller.js for use.