Updated: February 21, 2022

Basic Authentication

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 2 fields).

E. Sign In Button

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

 

Basic authentication anatomy
Basic authentication anatomy

Behavior & Interaction

Sign In

Only when all text fields are filled in that the ‘Sign In’ Button will change states from disabled to enabled. Tapping on the enabled “Sign In” button will start 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

Adaptivity

Specifications

Compact

Regular