DEV Community

Eric Rodríguez
Eric Rodríguez

Posted on

Day 85: Building a Secure App Lock in React with PBKDF2

Authentication gets you into the application, but what happens when a user leaves their laptop open? When building financial tools, an unattended screen is a critical vulnerability.

Today, I added a Local App Lock to my Serverless Financial Agent. While AWS Cognito handles the primary session, this new layer acts as a local inactivity shield.

The Cryptography Layer
A 4-digit PIN is easy to brute-force if stored poorly. I ensured the PIN is never saved in plain text. Instead, I used the native Web Crypto API. The application generates a random salt and hashes the PIN using the PBKDF2 algorithm with SHA-256. Only pinHash and pinSalt live in localStorage, keeping the device secure.

Idle Detection
I built an event listener hook that tracks pointer movements, key presses, and touch events. If the user is inactive for 10 minutes, the financial dashboard is immediately obscured by the lock screen. It also tracks the visibilitychange event, measuring the exact elapsed time when the tab is running in the background.

The "Forgot PIN" Failsafe
If a user forgets their local PIN, there is no simple "reset link." For maximum security, clicking "Forgot PIN" instantly clears the local App Lock state and executes a hard sign-out via the AWS Amplify SDK. The user must fully re-authenticate with their Cognito credentials and create a brand new PIN from scratch.

Frontend security is about defense in depth. Never trust local storage with plain text secrets, even if it is just a simple 4-digit PIN.

Top comments (0)