Login and Authentication

Objective

This section defines the minimum requirements for the login and two-factor authentication (2FA) flow, ensuring secure, clear, and accessible access to the sales environment, based on UX best practices and data protection standards.

Insights

• Authentication structure should be compatible with offline contexts (e.g., reconnection handling, secure caching) where applicable.

• This flow must comply with security regulations required for proximity-based payments via NFC (e.g., PCI MPoC).

---

Login Screen with Empty Fields

01 - Email and password fields

Must appear empty with clear placeholders (e.g., [e-mail], Password123@)

Mandatory:

The “Login” button must only be enabled when both fields are correctly completed.

Recommended:

Include a “Forgot your password?” link for recovery.

---

Login Screen with Credentials Filled

02 - “Login” button (enabled)

Must be visually highlighted. Tapping it initiates sending a verification code to the registered email.

Mandatory:

Provide immediate visual feedback when the button is tapped (e.g., loading animation).

Recommended:

Include a confirmation cue (visual or audio) after login attempt.

---

Two-Factor Authentication (2FA) Code Entry

03 - Security info message

Must inform the user that a verification code has been sent to their email, partially masked (us****@email.com)

04 - Code input fields (6 digits)

Must support auto-advance on input and visual feedback per digit.

Mandatory:

Show countdown timer to resend the code (e.g., “Resend code in 00:30”)

Recommended:

Automatically validate the code once all digits are entered.

---

Code Fully Entered

05 - Complete 2FA code

Must automatically enable the “Login” button once all digits are valid

Mandatory:

After code validation, user must be redirected to the sales environment.

Recommended:

Use smooth visual transitions to reinforce successful authentication.

---

Access to Sales Environment

Show the sales home screen. This screen must display:

• Vendor name and photo

• Search bar

• Product list with name, category, price, stock

• Bottom navigation bar with visible sections: Home, Cart, Charge, User

Mandatory:

Navigation is only accessible after full credential + code validation.

Recommended:

Customize this screen with relevant info based on vendor profile.

Each component and user experience of the sales screen will be discussed in more detail in the next session.

---

Mandatory Messages

• When the code is incorrect:

  Invalid code. Please check the number sent to your email and try again.

• When the code expires:

  Code expired. Please request a new one to continue.

---

Expected Behaviors

• The app must provide visual and/or audio feedback at each stage.

• The “Login” button must respect validation logic.

• Two-factor authentication is mandatory before accessing the sales system.

• Sensitive data (email, password) must be handled with masking and encryption, in accordance with LGPD and PCI standards.