Taking a web app to mobile isn't just about making it responsive. It's about tapping into the OS.
Today, I expanded the native iOS capabilities of my Serverless Financial Agent using Capacitor.
The Auth Flow: Face ID + PIN
Relying solely on AWS Cognito for every app open is slow and ruins the mobile experience. I already had a local PIN system, but typing a PIN is tedious.
I integrated the NativeBiometricAuthPlugin to trigger Face ID. If Face ID succeeds, the local session unlocks. If it fails (or the user cancels), it seamlessly falls back to the local PIN. Zero-trust security without the friction.
The Data Flow: React to WidgetKit
I wanted my users to see their "Spending Overview" directly on their iOS Home Screen.
The challenge? React (running in a WebView via Capacitor) cannot talk to an iOS Widget (written in Swift).
The solution was an Apple App Group.
I created a shared directory: group.com.quiklygroup.duromoney.
I built a custom native plugin. When my React app receives new financial data from my AWS Lambda backend, it sends a snapshot to the plugin, which writes it to the App Group. The native iOS widget then reads that snapshot and updates the Home Screen.
The Permission Strategy
I also restructured the onboarding. I intentionally delay asking for Push Notification and Face ID permissions until after the user has logged in and seen their financial dashboard. If you ask for permissions before showing value, users will deny them.
Build the backend for scale, but design the frontend for humans.
Top comments (1)
App Groups is the right move for bridging Capacitor and WidgetKit. Face ID with PIN fallback is also solid UX, especially to avoid Cognito delays on startup.
Main risk is sync drift if the widget reads stale snapshots. Are you batching updates or writing on every change?