Task #558
open
Implement Phone Number Login → OTP Verification → PIN Setup Flow (Frontend Integration)
0%
Description
Description:
Integrate the new authentication flow using the backend APIs provided.
User should enter their phone number, receive & enter OTP, configure a secure PIN, confirm it, and then be redirected to the home page after successful authentication.
This task covers frontend integration only — backend endpoints are ready.
User Flow:
- Phone Number Screen
User enters phone number
Clicks Send OTP
On success → redirect to OTP Screen
- OTP Screen
Show OTP input (4 digits)
Show Resend OTP button with 60 sec cooldown
If OTP valid → redirect to Set PIN Screen
- Set PIN Screen
User enters PIN (4 digits)
On success → redirect to Confirm PIN Screen
- Confirm PIN Screen
User re-enters the same PIN
On success → redirect to Home Page
Acceptance Criteria:
Phone Number Screen
Validate number format
Successful OTP request triggers OTP screen navigation
Error handling for invalid number or server errors
OTP Screen
OTP 4-digit input implemented
Resend OTP disabled for 60 seconds
Countdown displayed
Resend OTP triggers backend call
Successful OTP verification navigates to Set PIN screen
Incorrect OTP displays proper error
PIN Setup Screen
PIN must be digits only
PIN must meet required length
Successful set PIN → navigates to confirm PIN
Confirm PIN Screen
Must match the initially entered PIN
On success,
Navigate to home page
General
All errors handled gracefully
API failures show user-friendly messages
Loading states for each API call
Updated by