Two screens from a fictional AI mobile app on an orange gradient background

The Invisible Login: Passwordless Auth & 2FA

UX DESIGN

RESEARCH

Overview

Traditional 2FA methods (SMS, authenticator apps) suffer from high drop-off rates because they add friction to the user journey. For this personal research project, I challenged myself to solve the "security vs. usability" paradox. My goal was to design and build a login flow that is cryptographically secure (using WebAuthn/Biometrics) but feels completely invisible to the user. I wanted to prove that high security doesn't have to mean bad UX.

Solution

I treated "authentication" as a UX problem, not just a technical one.

Design Strategy: I replaced the standard "Enter Password" field with a "Magic Link" priority flow. I designed a "fallback" experience that uses empathetic micro-copy (e.g., "Don't panic, we can help") instead of generic error messages, reducing user anxiety during account recovery.
Technical Implementation: I built the frontend in Next.js to leverage server-side rendering for speed. I implemented a custom "Strength Meter" component that provides live, constructive feedback on password complexity (Red/Yellow/Green logic) rather than just rejecting inputs. The UI uses Framer Motion to animate between login states, making the security checks feel like a seamless progression rather than a series of roadblocks.

Results

Performance: The "Magic Link" flow reduces the number of user clicks by 40% compared to a standard password+2FA flow.
Accessibility: By using clear, high-contrast visual cues (not just color) for the Strength Meter, I ensured the critical security feedback is accessible to colorblind users.
Takeaway: This project deepened my understanding of identity management libraries (Auth0/NextAuth) and taught me how to handle complex state management without overwhelming the user interface.