How to Automatically Secure Your Livewire 4 Components From Client-Side Tampering

Livewire Secure Properties 🔒

👉 View on GitHub: janecodelife/livewire-secure-properties

An elegant, zero-configuration security package for Laravel Livewire 4 that automatically locks all public component properties from client-side manipulation, unless explicitly marked as unlocked.

✅ Auto-lock properties

✅ Zero configuration

✅ Protects against client-side tampering

✅ Unlock specific properties with #[Unlocked]

✅ Supports Livewire 4 (Single & Multiple File)

Requirements

• Livewire ^4.0

Installation

You can install the package via composer:

composer require janecodelife/livewire-secure-properties

Enter fullscreen mode Exit fullscreen mode

Usage

1. Single File Components (SFC)

If you are using Livewire 4’s native Single File Components layout, you can safely use the #[Unlocked] attribute inside the anonymous class block:

<?php

use Livewire\Component;
use JaneCodeLife\LivewireSecureProperties\Unlocked;

new class extends Component {
    // ✅ Secured: Locked by default, any client-side update will throw a Security Violation exception
    public string $role = 'admin';

    // 🔓 UNLOCKED: Updatable from client side via wire:model or client-side requests
    #[Unlocked]
    public string $name = 'Jane Joe';
};
?>

<div>
    <input type="text" wire:model.live="name">
    <p>Name: {{ $name }}</p>
    <!-- This would securely block any client-side update attempts -->
    <input type="text" wire:model.live="role">
    <p>Role: {{ $role }}</p>
</div>

Enter fullscreen mode Exit fullscreen mode

2. Multiple File Components (Class-based)

<?php
use Livewire\Component;
use JaneCodeLife\LivewireSecureProperties\Unlocked;

class UserProfile extends Component
{
    // ✅ Secured: Locked by default, any client-side update will throw a Security Violation exception
    public string $role = 'admin';

    // 🔓 UNLOCKED: Updatable from client side via wire:model or client-side requests
    #[Unlocked]
    public string $name = 'Jane Joe';

    public function render()
    {
        return view('livewire.user-profile');
    }
}

Enter fullscreen mode Exit fullscreen mode

Configuration

If you need to disable the package globally during specific environments (e.g., local debugging), you can add this environment variable to your .env file:

LIVEWIRE_SECURE_PROPERTIES_ENABLED=false

Enter fullscreen mode Exit fullscreen mode

💖 Support

☕☕☕☕ Support me by coffee via USDT ☕☕☕☕

• Network: TRX Tron (TRC20)
• Address: TAFFjBP39Z86weL5dDU1A2251VrgPprDUj

Upcoming 🚀 (Stay Tuned!)

The Ultimate Neovim Config for Modern Web & Laravel Devs ⚡

I am currently cooking a comprehensive guide and boilerplate configuration on How to turn Neovim into a (Powerful) IDE explicitly optimized for:

• Backend & Frameworks: PHP (Intelephense) & Full Laravel & Livewire Integration (With Preformance)
• Frontend & Tooling: HTML, CSS, JavaScript, TypeScript, and Livewire SFCs
• Speed: Blazing fast autocompletion, lightning-speed code navigation, and fuzzy finding.