Smart Screen Lock (PIN & Auto-Lock) is a reusable security component designed for OutSystems Reactive applications. It provides an additional protection layer by automatically locking the screen after a period of user inactivity and requiring a PIN to unlock access. This ensures that sensitive information remains secure even if a user steps away from their device or leaves a browser tab open.

This component is ideal for applications in finance, HR, healthcare, operations, analytics, and any module where confidential or personal data must be safeguarded.

Key Features

• PIN-based Authentication
  Users must enter a PIN to unlock the screen and continue their session.

• Auto-Lock on Inactivity
  The screen locks automatically after a configurable timeout (e.g., 1 minute, 5 minutes, etc.).

• Survives Page Refresh
  Even if the user refreshes the browser, the locked state remains active until the correct PIN is entered.

• Activity Tracking
  The lock timer resets on keyboard activity, mouse movement, and touch gestures.

• Smooth Lock/Unlock Animation
  Comes with a modern overlay animation for a professional user experience.

• Lightweight & Client-Side
  Works fully on the client, with no external APIs or dependencies.

• Easy to Integrate
  Drop the block into any screen, pass the PIN and timeout settings, and you're ready to go.

Use Cases

• Financial dashboards displaying sensitive KPIs

• HR systems showing personal employee data

• Healthcare apps with medical records

• Admin or management consoles

• Any application where screens should auto-lock when unattended

How It Works

The component tracks user activity and triggers the lock overlay after the specified inactivity timeout. A secure PIN entry screen then appears, requiring the user to unlock the interface before continuing. The lock state is stored using browser session storage, ensuring that the screen remains locked even if the page is refreshed.