Replacing the FIDO registration UI

The App SDK provides a default UI for FIDO2 registration implemented as a view.

This registration uses the Model-View-Controller (MVC) architecture, which makes it easy to replace the UI without having to reimplement the core logic. To provide your own UI, you need to provide your own implementation of the view. Your view (View or Fragment in the sequence diagram below) uses the FidoRegistrationController (Controller) class, which responds to the user input from your UI and calls the internal SDK functions (Model) to trigger the required functionality such as registering an authenticator. The FidoRegistrationController uses Live Data to call back to your view to show the updates.

To provide your own UI:

• Define your own custom View class, which implements both the BaseFidoRegistrationView and the IFidoRegistrationLiveData interfaces.

• Define your own UI factory, which is a subclass of the FidoRegistrationUIFactory. For example, call it SampleFidoRegUIFactory.

• Initialize the SDK to use your custom UI factory by making the following call: FidoRegistrationUIFactory.setInstance(new SampleFidoRegUIFactory())

The following diagram illustrates the MVC flow when the user registers a FIDO authentication method. The yellow boxes represent your code. Note that this flow starts after the initialization step: FidoRegistrationUIFactory.setInstance(new SampleFidoRegUIFactory()).

The steps in this diagram are described below:

1. Your application calls the AppSdk.getFidoRegistrationView() to obtain the instance of your custom BaseFidoRegistrationView implementation.

2. The App SDK calls the createView() method of your custom FidoRegistrationUIFactory implementation to obtain the instance of your custom BaseFidoRegistrationView implementation.

3. Your application calls the show() method of your custom BaseFidoRegistrationView implementation, which displays your View.

4. Once your View is initialized, your View calls the Registration Controller's onRefresh().

5. The Controller calls the Server to get the list of authenticators for the user.

6. The Controller calls the Live Data's setMethods() with the list of authenticators.

7. The Live Data object calls your View's setMethods() with the list.

8. Your View displays the list of authentication methods.

9. The user selects a method to register.

10. Your View calls the Controller's onRegister() with the selected method.

11. The Controller performs the registration on the selected authentication method.

12. On completion of the registration, the Controller calls the Live Data's onOperationCompleted().

13. The Live Data object calls your View's onOperationCompleted().

Refer to the Client API Docs for the FidoRegistrationController and FidoRegistrationUIFactory classes and the BaseFidoRegistrationView and IFidoRegistrationLiveData interfaces for more details.

Working examples in Tutorial web app

• Refer to the SampleFidoRegistrationUIFactory and SampleFidoRegistrationView classes in the file js/samples.js for implementation.

• Refer to initialize() and showFidoRegistrationFragment() in the file js/Controller.js for usage.