Replacing the authentication UI

The App SDK provides a default UI for the Sign-in flow. This is implemented as a View that first prompts for the username and then allows the user to select authentication methods. The sign-in page looks like this:

The method selection page looks like this:

This authentication flow 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 NNLAuthenticationController (Controller) functions to trigger the required functionality such as displaying candidate authentication sequences or performing the authentication (Model). The NNLAuthenticationController calls back to your View through the Live Data to show the updates.

To replace the Authentication UI:

• Implement your own custom View class, extending NNLBaseAdaptiveAuthenticationViewController and also adopting the IAuthenticationLiveData protocol..

  Note: If you want to customize only the sign-in page and not the method selection page, your own custom View class should extend NNLBaseLoginViewController instead of extending NNLBaseAdaptiveAuthenticationViewController.

• Implement your own custom UI factory, adopting the IAuthenticationUIFactory protocol. For example, call it SampleAuthenticationUIFactory.

• Initialize the SDK to use your custom UI factory by making the following call:
  

  NNLAuthenticationUIFactory.setInstance(SampleAuthenticationUIFactory())

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

The steps in this diagram are described below:

1. Your application calls NNLAdaptiveUI.getAuthenticationView().

2. The SDK calls your UI factory's createAuthenticationViewController() method.

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

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

5. The Authentication Controller calls your View's showSignInPage() via Live Data.

6. Your View shows a form with a username input field. NNLBaseAdaptiveAuthenticationViewController calls the createUsernameViewController() function from your SampleAuthenticationUIFactory to get the sign-in page.

7. The user enters their username.

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

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

10. If there are methods to display, the Controller calls the Live Data's setMethods() with the list of authentication methods.

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

12. Your View displays the list of authentication methods.

13. The user selects a method.

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

15. The Controller triggers the selected authentication method.

16. On completion of the authentication, the Controller calls your View's onOperationCompleted() via Live Data.

Refer to the Client API Docs for the IAuthenticationLiveData and IAuthenticationUIFactory protocols, and the NNLAuthenticationController and NNLBaseLoginViewController classes for more details.

Working examples in Tutorial app

• Refer to files SampleAdaptiveAuthViewController.swift and SampleMethodSelectionUITableViewCell.swift for an example implementation.

• Refer to SideMenuViewController.swift file for use.