Vipps Authentication Screen
Component Detail
Description
Initiates and displays the Vipps Login OAuth flow. Handles the redirect to the Vipps app or Vipps web, monitors the deep-link callback, and shows loading and error states during the authentication handshake.
vipps-auth-screen
Summaries
The Vipps Authentication Screen enables frictionless user onboarding by leveraging Vipps — Norway's most widely adopted mobile payment and identity platform with over 4 million users. By integrating Vipps Login, the product eliminates the need for manual form-based registration, reducing drop-off rates during sign-up and lowering the barrier to first use. Users authenticate with a single tap using an app they already trust, driving higher conversion rates and reducing support costs tied to forgotten passwords or failed registrations. This investment directly improves customer acquisition efficiency and positions the product competitively in the Norwegian market where Vipps adoption is near-universal.
This component carries medium complexity and depends on two external services: the Vipps Auth Service and the Deep Link Handler. Delivery requires completing the OAuth app registration with Vipps MobilePay, configuring the deep-link URL scheme in both iOS and Android manifests, and coordinating with the backend team to validate the OAuth callback token server-side. Testing must cover happy path, network timeout, user cancellation, and the Vipps app not installed scenarios. Plan for a QA cycle on real devices since the Vipps redirect relies on OS-level URL scheme resolution that cannot be fully emulated.
Budget two to three days for integration and one additional day for device testing across iOS and Android.
This Flutter widget orchestrates the Vipps OAuth 2.0 PKCE flow entirely on the mobile client. On mount, `initVippsLogin()` constructs the authorization URL and launches it via the OS URL scheme to open the Vipps app or fall back to the web flow. The `deep-link-handler` dependency intercepts the redirect URI callback and routes the resulting URI to `onVippsCallback(Uri)`, which extracts the authorization code and delegates token exchange to `vipps-auth-service`. State transitions — loading, error, success — are managed internally and rendered via `showLoadingState()`, `showErrorState()`, and `showSuccessState()`.
Ensure the deep-link scheme is registered in `AndroidManifest.xml` and `Info.plist`. Handle the edge case where the Vipps app is not installed by falling back to the web redirect. The component interacts with the `user` data model post-authentication to persist the retrieved personnummer.
Responsibilities
- Launch Vipps OAuth redirect and open Vipps app via URL scheme
- Display loading indicator while awaiting Vipps callback
- Show error state with retry option on auth failure
- Confirm personnummer retrieval success to the user
Interfaces
build(BuildContext)
initVippsLogin()
onVippsCallback(Uri)
showLoadingState()
showErrorState(String message)
showSuccessState()
Relationships
Dependencies (2)
Components this component depends on