Implementing a Screen Lock Feature in CodeIgniter 4: Enhancing Security with a PIN System

 

Introduction

In today’s digital world, security is more important than ever. Whether you're working on a sensitive project or simply want to add an extra layer of protection, implementing a screen lock feature in your application can be a great way to enhance security. In CodeIgniter 4, this can be achieved by integrating a PIN-based screen lock system that activates after a period of inactivity or on demand. This guide will walk you through the steps to implement a secure screen lock feature in your CodeIgniter 4 application, helping you protect user data and ensure peace of mind.

Why a Screen Lock Feature is Important

A screen lock feature provides an additional security layer, especially in environments where multiple users might access the same machine or where sensitive information needs to be protected from prying eyes. By requiring a PIN to unlock the screen, you ensure that only authorized users can regain access to the application after a period of inactivity.

• Enhanced Security: Protects against unauthorized access during periods of inactivity.
• User Convenience: Allows users to secure their session without logging out entirely.
• Data Protection: Ensures sensitive information remains secure even if the user steps away.

Setting Up the Screen Lock Feature in CodeIgniter 4

1. Create the Lock Screen Model

First, create a model to handle the storage and verification of the user's PIN. This model will interact with your employees table, where the PIN is stored.

php

namespace App\Models;

use CodeIgniter\Model;

class EmployeeModel extends Model
{
    protected $table = 'employees';
    protected $allowedFields = ['username', 'email', 'password', 'pin'];
}

2. Implement the Screen Lock Trigger

The screen lock should activate after a period of inactivity or via a manual trigger. This can be done using JavaScript to detect user inactivity and redirect to the lock screen.

• JavaScript for Auto-Lock:

javascript

let lockTimer;
document.addEventListener('mousemove', resetTimer);
document.addEventListener('keypress', resetTimer);

function resetTimer() {
    clearTimeout(lockTimer);
    lockTimer = setTimeout(lockScreen, 300000); // 5 minutes
}

function lockScreen() {
    window.location.href = '/lock';
}

• Manual Lock Trigger: Add a button or link in your application that users can click to lock the screen manually.

html

<a href="/lock" class="btn btn-secondary">Lock Screen</a>

3. Design the Lock Screen View

The lock screen is where users will enter their PIN to unlock the application. Create a simple view for this.

• Lock Screen View (HTML):

php

public function lock()
{
    echo view('lock_screen');
}

public function unlock()
{
    $pin = $this->request->getVar('pin');
    $employee = $this->employeeModel->find(session()->get('employee_id'));

    if ($employee['pin'] === $pin) {
        return redirect()->to('/dashboard');
    }

    return redirect()->back()->with('error', 'Invalid PIN.');
}

• Lock Screen HTML:

html

<form action="/unlock" method="post">
    <div class="form-group">
        <label for="pin">Enter PIN:</label>
        <input type="password" name="pin" id="pin" class="form-control" required>
    </div>
    <button type="submit" class="btn btn-primary">Unlock</button>
</form>

4. Handling PIN Verification

Ensure that the PIN entered by the user matches the one stored in the database. If the PIN is correct, redirect the user back to the dashboard; otherwise, show an error message.

php

public function unlock()
{
    $pin = $this->request->getVar('pin');
    $employee = $this->employeeModel->find(session()->get('employee_id'));

    if ($employee['pin'] === $pin) {
        return redirect()->to('/dashboard');
    }

    return redirect()->back()->with('error', 'Invalid PIN.');
}

Testing and Final Touches

After implementing the screen lock feature, thoroughly test it to ensure it works as expected. Make sure the screen locks after the specified inactivity period and that the PIN verification process is secure and user-friendly.

• Test Scenarios:
  • Test the auto-lock feature by leaving the application idle for the set time.
  • Test the manual lock feature by clicking the lock screen button.
  • Enter correct and incorrect PINs to verify the unlocking process.

Conclusion

Adding a screen lock feature with a PIN system in CodeIgniter 4 is an effective way to enhance the security of your application. By following the steps outlined in this guide, you can implement a secure and user-friendly screen lock that protects sensitive data and gives users peace of mind. Remember, security is an ongoing process, so continually review and improve your application's security features to stay ahead of potential threats.