📌 Overview

Smart Screen Lock (PIN & Auto-Lock) is a lightweight security component for OutSystems Reactive applications. It automatically locks the screen after user inactivity and requires the user to enter a PIN to unlock. The lock persists even after a browser refresh, ensuring sensitive information stays protected at all times.

This component is ideal for applications in HR, Finance, Healthcare, Admin Dashboards, and anywhere sensitive information is displayed.

🚀 Try Now

A live demo is available to test the component’s functionality.

🔗 Try Now: (Your Forge Try Now URL will appear automatically once uploaded)

Demo Credentials:

• Username: test@gmail.com

• Password: Test@123

🛠 Installation & Setup

1. Install the Component

Download the component from Forge and add it to your OutSystems environment.

2. Drag the Block into Your Screen

From the Toolbox:
Interface → UI Flows → SmartScreenLock → Blocks → ScreenLockBlock
Drag it into the screen where you want to enable the lock.

3. Set Block Input Parameters

The block provides the following inputs:

Example:

• PINCode → "1234"

• LockTimeout → 1 (locks after 1 minute of inactivity)

⚙️ How It Works

🔒 Auto-Lock Behavior

• A countdown timer begins on page load.

• Any user activity (mouse movement, keyboard press, touch) resets the timer.

• When inactivity exceeds the timeout, the screen locks and the PIN overlay appears.

🔁 Lock Persistence

• If the user reloads the page while the lock is active, the screen remains locked.

• The user must enter their PIN to unlock again.

🔓 Unlocking

• User enters the PIN → if correct, screen unlocks.

• Incorrect PIN resets the input box.

🎨 Styling

The component includes a modern overlay with fade-in/out animation.
You may override its CSS classes to customize colors, alignment, or input styling.

Key classes:

• .lock-overlay

• .lock-card

• .pin-input

🧪 Testing Tips

• Set LockTimeout = 1 during testing.

• Refresh the browser → lock should remain active.

• Test inside Chrome/Edge for accurate inactivity tracking.

🔐 Security Notes 

• The PIN is not stored on the client.
  It is securely stored in your application’s database and passed only as a parameter to the block.

• The component does not store or cache the PIN inside the browser.
  It is used only for the unlock comparison on the client side during the active session.

• For increased security, you may optionally store a hashed version of the PIN in the database and compare using a server-side validation pattern, but this is not required for typical use cases.

• No external APIs, cookies, or browser storage contain the PIN value.

• The auto-lock mechanism is stored only as a session state (sessionStorage) to maintain the locked state during refresh — not the PIN.

📦 Included Artifacts

• Reusable Block (Reactive)

• Smart Screen Lock JS Engine

• Overlay UI + CSS

• Demo Module with login & example screen