Replacing the Non-FIDO Registration UI

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

Default OTP 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 use your own UI, you need to provide your own implementation of this view. Your view (View or Fragment in the sequence diagram below) responds to user input by calling the NNLRegistrationController (Controller) functions to trigger the required functionality such as registering a non-FIDO authenticator (Model). The NNLRegistrationController uses Live Data to call back to your view so it can show the updates.

To provide your own UI:

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

Important: 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 following code in your Fragment so that the Controller notifies your Fragment when it needs to update its list of authentication methods:

• Implement your own ViewController class, extending the NNLBaseAdaptiveRegViewController class and adopting the NNLIRegistrationLiveData protocol.

• Implement your own ViewController factory, adopting the NNLIAdaptiveRegUIFactory protocol. For example, call it SampleAdaptiveRegUIFactory.

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

The following diagram illustrates the MVC flow when the user adds an authentication method. The yellow boxes represent your code.

The steps in this diagram are described below:

1. Your application calls NNLAdaptiveUI.getRegistrationView().

2. NNLAdaptiveUI calls the createViewController() method of your custom NNLIAdaptiveRegUIFactory implementation to obtain the instance of your custom NNLBaseAdaptiveRegViewController class.

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

4. Once your View is initialized, it calls onRefresh() from class NNLRegistrationController.

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. The Live Data object calls your View's setMethods() with the list.

8. Your View displays the list of authenticators.

9. The user selects an authenticator to add.

10. Your View 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. The Live Data object calls your View's onOperationCompleted().

Refer to the Client API Docs for the NNLIRegistrationLiveData and NNLIAdaptiveRegUIFactory protocols and the NNLRegistrationController and NNLBaseAdaptiveRegViewController classes for more details.

Working Examples in Tutorial App

• Refer to files SampleAdaptiveRegViewController.swift and SampleAdaptiveRegCell.swift for implementation.

• Refer to RegisterViewController.swift file for usage.