Email and Password Login
Feature Detail
Description
Standard credential-based authentication allowing users to log in with an email address and password. This is the baseline authentication method available to all organizations and all roles in the initial MVP phase. Must include proper error handling, accessible form fields meeting WCAG 2.2 AA contrast and label requirements, and integrate with Supabase Auth as the backend. Password visibility toggle and keyboard-aware layout are expected for mobile usability.
Analysis
Provides a universally accessible login path for all users regardless of technical sophistication, ensuring no user is blocked from the app during rollout phases before BankID/Vipps is available.
Uses Supabase Auth email/password flow. AppTextField and AppButton design system components. Form state managed via BLoC or Riverpod. WCAG 2.2 AA compliance required on all form elements.
Components (203)
Shared Components
These components are reused across multiple features
User Interface (59)
Service Layer (52)
Data Layer (33)
Infrastructure (54)
User Stories (24)
As a As a Peer Mentor (Likeperson)
I want I want the app to check that my email address is in a valid format before sending my login request
So that So that I get immediate feedback if I have made a typo in my email, rather than waiting for a server round-trip to tell me something is wrong
- Given the email field contains 'notanemail', When the user taps the sign-in button, Then inline validation displays 'Please enter a valid email address' adjacent to the email field and no network request is made
- Given the email field is completely empty, When the user taps sign in, Then the error 'Email address is required' is shown for the email field
- Given the password field is empty, When the user taps sign in, Then the error 'Password is required' is shown for the password field
- +2 more
As a As a Coordinator
I want I want the app to check that my email address is in a valid format before sending my login request
So that So that I get immediate feedback if I have made a typo in my email, rather than waiting for a server round-trip to tell me something is wrong
- Given the email field contains 'notanemail', When the user taps the sign-in button, Then inline validation displays 'Please enter a valid email address' adjacent to the email field and no network request is made
- Given the email field is completely empty, When the user taps sign in, Then the error 'Email address is required' is shown for the email field
- Given the password field is empty, When the user taps sign in, Then the error 'Password is required' is shown for the password field
- +2 more
As a As a Organization Administrator
I want I want the app to check that my email address is in a valid format before sending my login request
So that So that I get immediate feedback if I have made a typo in my email, rather than waiting for a server round-trip to tell me something is wrong
- Given the email field contains 'notanemail', When the user taps the sign-in button, Then inline validation displays 'Please enter a valid email address' adjacent to the email field and no network request is made
- Given the email field is completely empty, When the user taps sign in, Then the error 'Email address is required' is shown for the email field
- Given the password field is empty, When the user taps sign in, Then the error 'Password is required' is shown for the password field
- +2 more
As a As a Peer Mentor (Likeperson)
I want I want to toggle the visibility of the password I am typing
So that So that I can verify I have typed my password correctly before submitting, reducing failed login attempts
- Given the login form is visible, When the user looks at the password field, Then an eye icon toggle button is visible on the right side of the field
- Given the password is hidden (default), When the user taps the eye icon, Then the password text becomes visible and the icon changes to indicate it can be hidden again
- Given the password is visible, When the user taps the eye icon again, Then the password text is hidden and the icon reverts
- +2 more
As a As a Peer Mentor (Likeperson)
I want I want to see a clear, plain-language error message when my login fails
So that So that I understand what went wrong and know what action to take next without feeling confused or locked out
- Given incorrect credentials are submitted, When authentication fails, Then the message 'Incorrect email or password. Please try again.' is displayed prominently below the form
- Given a network timeout occurs during login, When the request fails, Then the message 'Unable to connect. Check your internet connection and try again.' is shown
- Given a screen reader is active and an error appears, When the error is rendered, Then the screen reader announces the error text automatically without requiring the user to navigate to it
- +2 more
As a As a Peer Mentor (Likeperson)
I want I want the login form fields to remain visible and reachable while the software keyboard is open
So that So that I can see what I am typing without scrolling awkwardly or having the submit button hidden behind the keyboard
- Given the login screen is displayed on an iPhone SE (small viewport), When the user taps the password field and the keyboard opens, Then the password field and sign-in button are both visible above the keyboard without manual scrolling
- Given the keyboard is open and the user fills in both fields, When the user taps sign in, Then the button is tappable and is not hidden behind the keyboard
- Given the user submits the form (e.g. by pressing the keyboard's return key), When the keyboard dismisses, Then the layout returns to its original state without visual glitches
- +2 more
As a As a Peer Mentor (Likeperson)
I want I want the app to offer biometric login (Face ID or fingerprint) after I have successfully logged in once with my email and password
So that So that subsequent logins are fast and effortless, enabling me to open the app quickly in real-world situations between peer support interactions
- Given a successful first email/password login on a biometric-capable device, When the user reaches the home screen, Then a prompt appears offering to enable Face ID or fingerprint login for future sessions
- Given the user accepts biometric setup, When they next open the app with a valid stored session, Then the biometric prompt is shown instead of the login form
- Given biometric authentication succeeds, When the session is resumed, Then the user is navigated to the home screen within 1 second
- +3 more
As a As a Coordinator
I want I want to toggle the visibility of the password I am typing
So that So that I can verify I have typed my password correctly before submitting, reducing failed login attempts
- Given the login form is visible, When the user looks at the password field, Then an eye icon toggle button is visible on the right side of the field
- Given the password is hidden (default), When the user taps the eye icon, Then the password text becomes visible and the icon changes to indicate it can be hidden again
- Given the password is visible, When the user taps the eye icon again, Then the password text is hidden and the icon reverts
- +2 more
As a As a Coordinator
I want I want to see a clear, plain-language error message when my login fails
So that So that I understand what went wrong and know what action to take next without feeling confused or locked out
- Given incorrect credentials are submitted, When authentication fails, Then the message 'Incorrect email or password. Please try again.' is displayed prominently below the form
- Given a network timeout occurs during login, When the request fails, Then the message 'Unable to connect. Check your internet connection and try again.' is shown
- Given a screen reader is active and an error appears, When the error is rendered, Then the screen reader announces the error text automatically without requiring the user to navigate to it
- +2 more
As a As a Coordinator
I want I want the login form fields to remain visible and reachable while the software keyboard is open
So that So that I can see what I am typing without scrolling awkwardly or having the submit button hidden behind the keyboard
- Given the login screen is displayed on an iPhone SE (small viewport), When the user taps the password field and the keyboard opens, Then the password field and sign-in button are both visible above the keyboard without manual scrolling
- Given the keyboard is open and the user fills in both fields, When the user taps sign in, Then the button is tappable and is not hidden behind the keyboard
- Given the user submits the form (e.g. by pressing the keyboard's return key), When the keyboard dismisses, Then the layout returns to its original state without visual glitches
- +2 more
As a As a Coordinator
I want I want the app to offer biometric login (Face ID or fingerprint) after I have successfully logged in once with my email and password
So that So that subsequent logins are fast and effortless, enabling me to open the app quickly in real-world situations between peer support interactions
- Given a successful first email/password login on a biometric-capable device, When the user reaches the home screen, Then a prompt appears offering to enable Face ID or fingerprint login for future sessions
- Given the user accepts biometric setup, When they next open the app with a valid stored session, Then the biometric prompt is shown instead of the login form
- Given biometric authentication succeeds, When the session is resumed, Then the user is navigated to the home screen within 1 second
- +3 more
As a As a Organization Administrator
I want I want to toggle the visibility of the password I am typing
So that So that I can verify I have typed my password correctly before submitting, reducing failed login attempts
- Given the login form is visible, When the user looks at the password field, Then an eye icon toggle button is visible on the right side of the field
- Given the password is hidden (default), When the user taps the eye icon, Then the password text becomes visible and the icon changes to indicate it can be hidden again
- Given the password is visible, When the user taps the eye icon again, Then the password text is hidden and the icon reverts
- +2 more
As a As a Organization Administrator
I want I want to see a clear, plain-language error message when my login fails
So that So that I understand what went wrong and know what action to take next without feeling confused or locked out
- Given incorrect credentials are submitted, When authentication fails, Then the message 'Incorrect email or password. Please try again.' is displayed prominently below the form
- Given a network timeout occurs during login, When the request fails, Then the message 'Unable to connect. Check your internet connection and try again.' is shown
- Given a screen reader is active and an error appears, When the error is rendered, Then the screen reader announces the error text automatically without requiring the user to navigate to it
- +2 more
As a As a Organization Administrator
I want I want the login form fields to remain visible and reachable while the software keyboard is open
So that So that I can see what I am typing without scrolling awkwardly or having the submit button hidden behind the keyboard
- Given the login screen is displayed on an iPhone SE (small viewport), When the user taps the password field and the keyboard opens, Then the password field and sign-in button are both visible above the keyboard without manual scrolling
- Given the keyboard is open and the user fills in both fields, When the user taps sign in, Then the button is tappable and is not hidden behind the keyboard
- Given the user submits the form (e.g. by pressing the keyboard's return key), When the keyboard dismisses, Then the layout returns to its original state without visual glitches
- +2 more
As a As a Organization Administrator
I want I want the app to offer biometric login (Face ID or fingerprint) after I have successfully logged in once with my email and password
So that So that subsequent logins are fast and effortless, enabling me to open the app quickly in real-world situations between peer support interactions
- Given a successful first email/password login on a biometric-capable device, When the user reaches the home screen, Then a prompt appears offering to enable Face ID or fingerprint login for future sessions
- Given the user accepts biometric setup, When they next open the app with a valid stored session, Then the biometric prompt is shown instead of the login form
- Given biometric authentication succeeds, When the session is resumed, Then the user is navigated to the home screen within 1 second
- +3 more
As a As a Peer Mentor (Likeperson)
I want I want to sign in to the app using my email address and password
So that So that I can access my activity registration tools, contact list, and reporting features securely
- Given the app is launched and no session exists, When the user navigates past org selection, Then the login screen is displayed with email and password fields and a sign-in button
- Given the login screen is visible, When the user taps the password field, Then the keyboard appears and the form scrolls so the password field remains visible above the keyboard
- Given valid credentials are entered, When the user taps sign in, Then the app authenticates via Supabase Auth and navigates to the peer mentor home screen within 3 seconds
- +3 more
As a As a Peer Mentor (Likeperson)
I want I want the app to remember that I am logged in when I close and reopen it
So that So that I do not need to re-enter my credentials every time I want to register an activity, which would make the app too cumbersome to use regularly
- Given the user has successfully logged in, When the user closes the app completely and reopens it, Then the app navigates directly to the peer mentor home screen without showing the login form
- Given a stored session token exists, When the app launches, Then the session manager validates the token with Supabase before routing the user, completing within 1 second on a normal connection
- Given the stored token has expired, When the app launches, Then the user is redirected to the login screen with the message 'Your session has expired. Please sign in again.'
- +2 more
As a As a Peer Mentor (Likeperson)
I want I want to complete the email and password login flow using only a screen reader (VoiceOver or TalkBack)
So that So that I can authenticate independently without sighted assistance, as required by users with visual impairments
- Given VoiceOver is enabled and the login screen is displayed, When the user swipes right to navigate, Then focus moves in order: organisation name header → email field → password field → visibility toggle → sign-in button
- Given focus is on the email field, When VoiceOver reads it, Then the announcement includes the label 'Email address', the field role 'text field', and any current value
- Given focus is on the password field, When VoiceOver reads it, Then the announcement includes the label 'Password' and the role 'secure text field'
- +3 more
As a As a Coordinator
I want I want to sign in to the app using my email address and password
So that So that I can access my activity registration tools, contact list, and reporting features securely
- Given the app is launched and no session exists, When the user navigates past org selection, Then the login screen is displayed with email and password fields and a sign-in button
- Given the login screen is visible, When the user taps the password field, Then the keyboard appears and the form scrolls so the password field remains visible above the keyboard
- Given valid credentials are entered, When the user taps sign in, Then the app authenticates via Supabase Auth and navigates to the peer mentor home screen within 3 seconds
- +3 more
As a As a Coordinator
I want I want the app to remember that I am logged in when I close and reopen it
So that So that I do not need to re-enter my credentials every time I want to register an activity, which would make the app too cumbersome to use regularly
- Given the user has successfully logged in, When the user closes the app completely and reopens it, Then the app navigates directly to the peer mentor home screen without showing the login form
- Given a stored session token exists, When the app launches, Then the session manager validates the token with Supabase before routing the user, completing within 1 second on a normal connection
- Given the stored token has expired, When the app launches, Then the user is redirected to the login screen with the message 'Your session has expired. Please sign in again.'
- +2 more
As a As a Coordinator
I want I want to complete the email and password login flow using only a screen reader (VoiceOver or TalkBack)
So that So that I can authenticate independently without sighted assistance, as required by users with visual impairments
- Given VoiceOver is enabled and the login screen is displayed, When the user swipes right to navigate, Then focus moves in order: organisation name header → email field → password field → visibility toggle → sign-in button
- Given focus is on the email field, When VoiceOver reads it, Then the announcement includes the label 'Email address', the field role 'text field', and any current value
- Given focus is on the password field, When VoiceOver reads it, Then the announcement includes the label 'Password' and the role 'secure text field'
- +3 more
As a As a Organization Administrator
I want I want to sign in to the app using my email address and password
So that So that I can access my activity registration tools, contact list, and reporting features securely
- Given the app is launched and no session exists, When the user navigates past org selection, Then the login screen is displayed with email and password fields and a sign-in button
- Given the login screen is visible, When the user taps the password field, Then the keyboard appears and the form scrolls so the password field remains visible above the keyboard
- Given valid credentials are entered, When the user taps sign in, Then the app authenticates via Supabase Auth and navigates to the peer mentor home screen within 3 seconds
- +3 more
As a As a Organization Administrator
I want I want the app to remember that I am logged in when I close and reopen it
So that So that I do not need to re-enter my credentials every time I want to register an activity, which would make the app too cumbersome to use regularly
- Given the user has successfully logged in, When the user closes the app completely and reopens it, Then the app navigates directly to the peer mentor home screen without showing the login form
- Given a stored session token exists, When the app launches, Then the session manager validates the token with Supabase before routing the user, completing within 1 second on a normal connection
- Given the stored token has expired, When the app launches, Then the user is redirected to the login screen with the message 'Your session has expired. Please sign in again.'
- +2 more
As a As a Organization Administrator
I want I want to complete the email and password login flow using only a screen reader (VoiceOver or TalkBack)
So that So that I can authenticate independently without sighted assistance, as required by users with visual impairments
- Given VoiceOver is enabled and the login screen is displayed, When the user swipes right to navigate, Then focus moves in order: organisation name header → email field → password field → visibility toggle → sign-in button
- Given focus is on the email field, When VoiceOver reads it, Then the announcement includes the label 'Email address', the field role 'text field', and any current value
- Given focus is on the password field, When VoiceOver reads it, Then the announcement includes the label 'Password' and the role 'secure text field'
- +3 more