Download the PHP package tuhin-su/livewire-swal without Composer

Laravel & Livewire 3+ SweetAlert2 Helpers

A simple, reusable global SweetAlert2 integration for Laravel and Livewire 3 with clean, secure, one-line PHP wrappers.

Features

• Zero-Configuration Installation: SweetAlert2 CDN and the JavaScript event wrapper are automatically injected into your application's HTML pages, with no NPM or Vite compilation needed out-of-the-box.
• Small Top-Corner Toasts: swalToastSuccess, swalToastWarning, swalToastError
• Larger Modal Dialogs: swalFireSuccess, swalFireWarning, swalFireError
• Confirm Modals: swalConfirm
• Generic Input Prompts: swalTakeInput (captures user input and sends it back to PHP)
• Password Prompts: swalPromptPassword
• One-Call Password Verification: swalVerifyCurrentUserPassword (prompts for the password, verifies it securely on the server via Hash::check, and automatically dispatches success/failure events)
• Secure Cryptographically Signed Actions: swalSecureAction (forces multi-step confirmations & password prompts on the client and executes target methods internally on the server using cryptographically signed payloads, completely preventing client-side bypasses)

Requirements

• Laravel 10 or 11+
• Livewire 3+

Installation & Setup

Choose between the two installation methods depending on your project architecture:

Option A: Zero-Configuration (Recommended & Default)

Use this option if you want the package to work instantly without running build tools, installing NPM packages, or modifying layout files.

1. Install via Composer:

   That's it! The package automatically injects the SweetAlert2 CDN and the event wrapper into the closing </body> tag of all HTML pages.

   [!TIP] Self-Hosting / Customizing SWAL CDN: By default, SweetAlert2 is loaded via jsDelivr CDN. If you want to host it yourself locally or use a custom CDN URL, publish the config file using php artisan vendor:publish --tag=laravel-swal-config and edit the swal_cdn key in config/laravel-swal.php. Set it to false or null if you already load SweetAlert2 separately in your layouts.

2. Use the Trait in your Livewire Component:

Option B: Manual Asset Compilation (NPM + Vite)

Use this option if you prefer to compile the assets locally, bundle SweetAlert2 inside your custom built assets, avoid CDNs, or customize the frontend JavaScript logic.

1. Install via Composer:

2. Publish Configuration & Assets: Run the publish command to copy files into your application's resources directory:

   This will create:

   • Config file at config/laravel-swal.php
   • JS wrapper file at resources/js/vendor/laravel-swal/swal.js

3. Disable Auto-Injection: Open config/laravel-swal.php and set auto_inject to false to disable the middleware CDN injection:

4. Install SweetAlert2 via NPM:

5. Register Wrapper in JavaScript: Import SweetAlert2 and register the helper script in your resources/js/app.js (or Vite entrypoint):

   Make sure your layout contains your Vite directive: @vite(['resources/css/app.css', 'resources/js/app.js']).

6. Use the Trait in your Livewire Component:

Helper Methods

1. Toasts (Small, Top-End)

Example

You can pass extra SweetAlert2 options to override defaults:

2. Modals (Larger Dialogs)

Example

3. Confirm Modal

Triggers a confirmation prompt and dispatches a Livewire event upon acceptance.

Example

Listen for it in your component using the #[On] attribute:

4. Generic Input Prompts

Prompt the user for a value and return it to a Livewire event listener.

Example

In your listener, access the value via $payload['value']:

5. Password Prompt Preset

A wrapper around swalTakeInput preset for secure password fields.

Example

6. Verify Current User Password Flow

Prompts for the password, verifies it against the authenticated user's current password (using Hash::check), shows an automated feedback toast, and dispatches true/false events.

Secure Actions (Bypass Prevention & Multi-Step Verification)

Standard event-driven flows (like swalConfirm) are dispatched to the frontend and rely on the client to send a follow-up event back to the server to trigger the final action. A malicious user can open the browser console and manually dispatch the target event (e.g. Livewire.dispatch('users.delete', { id: 5 })), completely bypassing any frontend SweetAlert confirmation.

To solve this, the library provides a secure cryptographically signed action system:

1. Server-side Signature: The server-side trait encrypts the target method name and its parameters into a secure payload signed using your application key (APP_KEY). This payload includes safety constraints like expiration timestamp, user session ID, and component class validation.
2. Multi-Step Client Prompts: The client receives this encrypted payload and sequentially prompts the user (e.g. first confirmation, then password verification) depending on your options.
3. Internal Server-side Execution: When confirmed, the client dispatches the encrypted payload back to the server. The server decrypts it, validates all constraints (e.g. session matching and time validity), checks the password, and calls the target method directly on the component instance.

Important Security Rule: Define your target execution methods as protected or private (e.g., protected function deleteUser($id)). Since Livewire only exposes public methods to the frontend, clients cannot invoke the method directly under any circumstances. The only entry point is the secure decryption handler in the trait.

Usage

Call $this->swalSecureAction from your component:

Direct JS Invocation (Triggering from Frontend)

Sometimes you may want to trigger a secure verification directly from custom Javascript, Alpine.js, or an inline onclick handler in your Blade template, rather than dispatching it from a Livewire PHP method call.

You can achieve this in two steps:

1. Generate the Encrypted Token: Call swalGenerateSecureActionPayload() on the server side (e.g. inside render() or mount, and pass it to your view).
2. Execute in JavaScript: Call window.swalExecuteSecureAction(payload, requirePassword, options) directly in your template.

Example

In your Livewire Component (PHP):

In your Blade Template (HTML/JS):

Full Multi-Step Example

First, trigger the secure action flow when a user clicks a button:

JavaScript-only Usage

All SweetAlert2 helpers are bound to the global window object and can be called directly in your custom frontend JavaScript (e.g. within Blade script tags, Alpine.js handlers, or custom assets):

1. Trigger Toasts (Small, Top-End)

2. Trigger Modals (Larger Center Dialogs)

3. Ask for Confirmation (Returns Promise)

Returns a promise that resolves to true (if confirmed) or false (if cancelled):

4. Prompt for Text Input (Returns Promise)

Returns a promise that resolves to the entered string, or null if the user cancelled the dialog:

5. Prompt for Password (Returns Promise)

Returns a promise that resolves to the entered password string, or null if cancelled:

Component-Targeted Events (thenEventTo)

Use thenEventTo to target specific Livewire components by their component name instead of broadcasting the event globally:

Security Notes

1. Password Prompts: Plaintext passwords are sent back to the Livewire component for verification via Livewire event payloads. Always ensure your application is running over HTTPS to secure this transmission, and prevent logging of sensitive request/event bodies.
2. Centralization: Keep SweetAlert2 logic centralized to prevent inline JS script execution issues and maintain a strong Content Security Policy (CSP).