Updated: April 13, 2023

Basic Authentication

FUIBasicAuthenticationScreen

Intro

The basic authentication pattern is used for general authentication purposes.

Basic authentication examples
Basic authentication examples

Anatomy

A. Navigation Bar

The navigation bar includes a “Cancel” button for users to exit the authentication.

B. Body Title

The body title should be a concise label that describes the authentication step.

C. Body Text

The body text should detail how to properly complete the authentication step.

D. Text Input Fields

The text input fields are set by the admins and developers (can be more than two fields).

E. Sign In Button

Used to complete the authentication step and start the information verification process.

 

Basic authentication anatomy
Basic authentication anatomy

Behavior and Interaction

Sign In

Once all text fields are filled in, the “Sign In” button changes states from disabled to enabled. Tapping on the enabled “Sign In” button starts the information verification process.

Example of sign in
Example of sign in

Authentication

Information Verification

Feedback banner with “Verifying Information…” label as the system is verifying information inputted in text fields.

Failed Sign In

Feedback banner with “Sign In Failed” label to alert user that sign in attempt has failed.

Example of authentication
Example of authentication

Adaptive Design

Authentication screen on compact and regular width devices
Authentication screen on compact and regular width devices

Resources

Development: Basic Authentication