Smart Screen Lock (PIN & Auto-Lock) is a lightweight security/ privacy component for OutSystems Reactive applications.It automatically locks the screen after a period of inactivity and requires a PIN to unlock.
In version 2.0, the component now uses secure PIN hashing (SHA-256), ensuring that the raw PIN is never stored or exposed on the client. The lock persists even after a browser refresh, keeping sensitive data protected at all times.
Ideal for HR, Finance, Healthcare, Admin portals, internal dashboards, and any application where confidential information must remain hidden when a user steps away.
A live demo is available:
Try Now Credentials:
Username: test@gmail.com
Password: Test@123
(The Try Now link will be automatically generated after Forge approval.)
Download and install the component into your environment.
In Service Studio:Interface → UI Flows → SmartScreenLock → Blocks → ScreenLockBlock
Drop it inside the screen you want to protect.
PINHash: "ef92b778bafe..." (SHA-256 hex)
"ef92b778bafe..."
LockTimeout: 1 (screen locks after 1 minute of inactivity)
1
Your app needs two simple server actions:
✔ SaveUserLockSettings
Used in your configuration screen where the user sets a new PIN.
Flow:
User types a new PIN in the config screen.
A small JavaScript function on the screen converts the PIN into a SHA-256 hash.
Only the hashed PIN (PINHash) and TimeoutMinutes are sent to the server and stored in the database.
The raw PIN is never stored in the database.
🔐 Note: Hashing is done on the client side using JavaScript (SHA-256), and only the resulting hash is persisted on the server.
✔ GetUserLockSettings
When loading a protected screen:
Fetch PINHash and TimeoutMinutes from the database.
PINHash
TimeoutMinutes
Pass them into the Smart Screen Lock block as:
PINHash → Block.PINHash
LockTimeout → Block.LockTimeout
LockTimeout
The client-side logic then:
Takes the user’s input PIN,
Hashes it again in JavaScript (SHA-256),
Compares it with PINHash passed from the server.
Timer begins as soon as the screen loads.
Any user activity (mouse move, key press, touch) resets the timer.
After timeout, the screen locks automatically.
The lock state is stored using browser sessionStorage.So even if the user refreshes the tab, the screen remains locked until correct PIN is entered.
sessionStorage
User enters PIN
JS computes: sha256(userInput)
sha256(userInput)
Compares against PINHash from server
If match → unlock
If wrong → error message
Raw PIN is not stored, not returned from DB, and never visible in client code.
The component includes:
Full-screen overlay
PIN input
Unlock button
Smooth fade animation
You may customize styling using CSS overrides:
.lock-overlay
.lock-card
.pin-input
.unlock-btn
Set timeout to 1 minute during testing.
Save settings → lock should activate after the timeout.
Refresh the screen → lock should remain visible.
Enter correct PIN → unlock.
Enter wrong PIN → error message.
PIN is stored only as SHA-256 hash in DB.
Raw PIN is never sent back to client screens.
Unlock logic compares hashes, not plain values.
The lock is a UX privacy layer, not a replacement for full authentication.
For stronger requirements, v3.0 will include optional server-side PIN validation.
Reusable Lock Block
Client-side lock engine (JavaScript)
UI overlay + CSS
SHA-256 hash comparison
Demo application
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.
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:
Download the component from Forge and add it to your OutSystems environment.
From the Toolbox:Interface → UI Flows → SmartScreenLock → Blocks → ScreenLockBlockDrag it into the screen where you want to enable the lock.
Interface → UI Flows → SmartScreenLock → Blocks → ScreenLockBlock
The block provides the following inputs:
"1234"
"5698"
5
10
PINCode → "1234"
LockTimeout → 1 (locks after 1 minute of inactivity)
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.
If the user reloads the page while the lock is active, the screen remains locked.
The user must enter their PIN to unlock again.
User enters the PIN → if correct, screen unlocks.
Incorrect PIN resets the input box.
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:
Set LockTimeout = 1 during testing.
Refresh the browser → lock should remain active.
Test inside Chrome/Edge for accurate inactivity tracking.
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.
Reusable Block (Reactive)
Smart Screen Lock JS Engine
Overlay UI + CSS
Demo Module with login & example screen