Replacing the authentication UI

The App SDK provides a built-in UI that allows the user to select a method during Adaptive Authentication. This is implemented as a View that first prompts for the username, and then allows the user to select authentication methods. When using Sign-in flow, the App SDK displays this UI:

After the user taps Next, the AppSDK displays the following screen. The App SDK presents options based on the authentication methods that are available for that user.

This authentication 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 AuthenticationController (Controller), which responds to the user input from your UI and calls the internal SDK functions (Model) to trigger the required functionality such as displaying candidate authentication sequences or performing authentication with a method in the sequence. The AuthenticationController calls back to your view to show the updates.

During initialization of your application, call AdaptiveAuthenticationUIFactory.setInstance() to provide the factory with an instance of your custom implementation of the AdaptiveAuthenticationUIFactory base class.

The following diagram illustrates the MVC flow when your app calls enable(AutoStart.SIGN_IN).

The steps in this diagram are described below:

1. Your application calls the AdaptiveUI.getAuthenticationView() to obtain the instance of your custom BaseAdaptiveAuthenticationView implementation.

2. The App SDK calls the createView() method of your custom AdaptiveAuthenticationUIFactory implementation to get the instance of your custom BaseAdaptiveAuthenticationView implementation and return it to your app.

3. Your application calls the BaseAdaptiveAuthenticationView.show() method on the obtained View.

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

5. The Controller calls the Live Data's showSignInPage().

6. The Live Data object calls your View's showSignInPage().

7. Your View shows a form with a username input field.

8. The user enters their user ID.

9. Your View calls the Controller's startAuthentication() and passes in the username.

10. The Controller calls the Server to get the list of authentication methods for the user.

11. The Controller calls the Live Data's setMethods() with the list of authentication methods.

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

13. Your View displays the list of authentication methods.

14. The user selects a method.

15. Your View calls the Controller's doAuthenticate() with the selected method.

16. The Controller triggers the selected authentication method.

17. On completion of the authentication, the Controller calls the Live Data's onOperationCompleted().

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

If you use the transaction flow, then your implementation of BaseAdaptiveAuthenticationView must implement the showModal() and closeModal() methods. This is because AdaptiveUI.transact() uses a modal flow for authentication.

Refer to the Client API Docs for the AuthenticationController and AdaptiveAuthenticationUIFactory classes and the BaseAdaptiveAuthenticationView and IAuthenticationLiveData interfaces for more details.

Working examples in Tutorial web app

• Refer to the SampleAdaptiveAuthenticationUIFactory and SampleAdaptiveAuthenticationView classes in the file js/samples.js for implementation.

• Refer to initialize() in js/Controller.js for usage.