Authentication Method Selector Screen
Component Detail
Description
Screen presented after organization selection that lets the user choose between BankID, Vipps, or email/password login. Renders method cards with logos and short descriptions of each option, guiding the user toward the appropriate auth flow.
auth-method-selector-screen
Summaries
Authentication is the first real interaction a user has with the product after selecting their organization, and a confusing or untrustworthy login screen creates immediate churn. By presenting BankID, Vipps, and email/password as clearly labeled options with familiar logos and concise benefit descriptions, this screen builds confidence and steers users toward the authentication method that matches their context. For Norwegian users, BankID and Vipps represent established national identity standards, and offering them signals compliance, security, and professionalism. Reducing authentication friction at this decision point lowers abandonment before users ever reach core product value, directly protecting activation rates.
Supporting multiple auth methods also reduces organizational risk by avoiding dependency on a single provider.
The screen itself is low complexity — a UI-only routing screen — but its readiness is gated on two upstream service dependencies: bankid-auth-service and vipps-auth-service. End-to-end testing of this screen cannot be completed until both services are integrated and returning valid responses in the test environment. Schedule this screen's QA phase to align with those service milestones, not the UI completion date. The email/password path can be tested independently and earlier.
Design assets — BankID and Vipps logos — must be licensed and provided by the client or sourced from official brand guidelines before visual QA. Risk is low if service dependencies are tracked; risk escalates if service integration slips close to release and this screen's testing window compresses.
A Flutter StatelessWidget or StatefulWidget screen that renders a vertical list of AuthMethod cards, each containing a logo, title, and short description string. Navigation is handled via callback pattern (onMethodSelected(AuthMethod)) to keep routing logic in the parent navigator rather than coupling the screen to specific routes. navigateToBankId(), navigateToVipps(), and navigateToEmailLogin() are convenience delegates that resolve the correct named route or push the appropriate screen onto the Navigator stack. The screen consumes bankid-auth-service and vipps-auth-service only for availability checks or deep-link configuration — it does not itself perform authentication.
Auth method availability per organization should be passed in as constructor parameters or via a BLoC/provider so the screen remains stateless and testable. Localization strings for method descriptions must be externalized to the app's l10n layer.
Responsibilities
- Display available authentication methods for the selected organization
- Navigate to the chosen authentication flow
- Show informational copy about BankID and Vipps benefits
Interfaces
build(BuildContext)
onMethodSelected(AuthMethod)
navigateToBankId()
navigateToVipps()
navigateToEmailLogin()
Relationships
Dependencies (2)
Components this component depends on
Used Integrations (2)
External integrations and APIs this component relies on