Replacing the Non-FIDO Registration UI

The App SDK provides a default UI for registering OTP and Photo ID authentication methods implemented as a Fragment.

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 use your own UI, you need to provide your own implementation of this Fragment. Your fragment (View or Fragment in the sequence diagram below) responds to user input by calling the RegistrationController (Controller) functions to trigger the required functionality such as registering a non-FIDO authenticator (Model). The RegistrationController calls back to your Fragment to show the updates.

To provide your own UI:

• Implement your own custom Fragment class that extends the BaseAdaptiveRegFragment class.

For your Fragment to receive notifications from the Registration Controller, the App SDK provides class RegistrationViewModel. This class is called Registration Live Data in the diagram below. Include the following code in your Fragment so that the Controller notifies your Fragment when it needs to update its list of authentication methods:

mModel = ViewModelProvider(this).get(RegistrationViewModel::class.java)

• Implement your own custom factory extending the AdaptiveRegUIFactory class. For example, call it SampleAdaptiveRegUIFactory.

• Initialize the SDK to use your custom UI factory by making the following call: AdaptiveRegUIFactory.setInstance(SampleAdaptiveRegUIFactory())

The following diagram illustrates the MVC flow when the user registers a method.

The steps in this diagram are described below:

1. Your application calls AdaptiveUI.getRegistrationFragment().

2. AdaptiveUI calls the createFragment() method of your custom AdaptiveRegUIFactory to obtain the instance of your custom BaseAdaptiveRegFragment class.

3. Your application shows the instance of BaseAdaptiveRegFragment it just obtained.

4. Once your Fragment is initialized, it calls onRefresh() from class RegistrationController.

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

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

7. When Live Data’s setMethods() is called, the observer on your Fragment is notified and the observer’s callback function is called.

8. Your Fragment displays the list of authenticators.

9. The user selects an authenticator to add.

10. Your Fragment calls the Registration Controller's onAdd() with the selected authenticator.

11. The Registration Controller performs the registration on the selected authenticator.

12. The Registration Controller calls the Live Data's onOperationCompleted().

13. When Live Data’s onOperationCompleted() is called, the observer on your Fragment is notified and the observer’s callback function is called.

Refer to the Client API Docs for the BaseAdaptiveRegFragment, AdaptiveUI, AdaptiveRegUIFactory, RegistrationController, RegistrationViewModel classes for more details.

Working Example in Tutorial App

• Refer to file SampleAdaptiveRegFragment.kt and SampleAdaptiveRegUIFactory.kt for an example implementation.