caresome/filament-auth-designer

Transform Filament's default auth pages into stunning, brand-ready experiences

v1.0.0 2025-10-12 09:55 UTC

Requires

• php: ^8.2|^8.3|^8.4
• filament/filament: ^4.0
• illuminate/contracts: ^11.0||^12.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^3.0
• laravel/pint: ^1.14
• nunomaduro/collision: ^8.8
• orchestra/testbench: ^10.0.0||^9.0.0
• pestphp/pest: ^4.0
• pestphp/pest-plugin-arch: ^4.0
• pestphp/pest-plugin-laravel: ^4.0
• phpstan/extension-installer: ^1.4
• phpstan/phpstan-deprecation-rules: ^2.0
• phpstan/phpstan-phpunit: ^2.0
• spatie/laravel-ray: ^1.35

MIT

• Caresome

• Authentication
• laravel
• filament
• filament-plugin
• caresome
• auth-designer
• auth-pages

README

Transform Filament's default authentication pages into stunning, brand-ready experiences with customizable layouts, media backgrounds, and theme switching.

Note: This package is designed exclusively for Filament v4. For changes and updates, see the CHANGELOG.

Table of Contents

• Features
• Requirements
• Installation
• Quick Start
• Layout Types
• Media Configuration
• Theme Toggle
• Configuration Examples
• Troubleshooting
• Testing
• License

Features

• 🎨 Five Layout Types - None, Split, Overlay, Top Banner, and Side Panel layouts
• 🖼️ Media Backgrounds - Support for both images and videos with auto-detection
• 📐 Flexible Positioning - Place media on left or right side (Split/Panel layouts)
• 🌫️ Blur Effects - Configurable blur intensity (0-20) for Overlay layout
• 🌓 Theme Toggle - Built-in light/dark/system theme switcher
• 📍 Positionable Theme Toggle - Place theme switcher in any corner
• 🚪 Email Verification Logout - Easy account switching from verification page
• ⚡ Zero Configuration - Works out of the box with sensible defaults
• 🎯 Per-Page Configuration - Different layouts for login, registration, password reset, and email verification

Requirements

• PHP 8.2+
• Laravel 11.0 or 12.0
• Filament 4.0

Installation

composer require caresome/filament-auth-designer

Quick Start

Add to your Panel Provider (e.g., app/Providers/Filament/AdminPanelProvider.php):

use Caresome\FilamentAuthDesigner\AuthDesignerPlugin;
use Caresome\FilamentAuthDesigner\Enums\AuthLayout;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugin(
            AuthDesignerPlugin::make()
                ->login(
                    layout: AuthLayout::Overlay,
                    media: asset('assets/background.jpg')
                )
        );
}

Layout Types

Layout	Description	Media Position	Blur Support
None	Standard Filament page	N/A	No
Split	Side-by-side split screen	Left or Right	No
Overlay	Fullscreen background with centered form	Fullscreen	Yes (0-20)
Top	Banner at top, form below	Top	No
Panel	Fullscreen background with side panel	Left or Right	No

1. None (Default)

->login(layout: AuthLayout::None)

2. Split

use Caresome\FilamentAuthDesigner\Enums\MediaDirection;

->login(
    layout: AuthLayout::Split,
    media: asset('assets/image.jpg'),
    direction: MediaDirection::Right // or MediaDirection::Left
)

3. Overlay

->login(
    layout: AuthLayout::Overlay,
    media: asset('assets/image.jpg'),
    blur: 8 // Optional: 0-20, default is 0
)

4. Top

->login(
    layout: AuthLayout::Top,
    media: asset('assets/banner.jpg')
)

5. Panel

->login(
    layout: AuthLayout::Panel,
    media: asset('assets/image.jpg'),
    direction: MediaDirection::Left // or MediaDirection::Right
)

Media Configuration

Images

Supported formats: .jpg, .jpeg, .png, .webp, .gif, .svg

media: asset('assets/background.jpg')

Videos

Supported formats: .mp4, .webm, .mov, .ogg

Videos auto-play, loop continuously, and are muted by default.

media: asset('assets/video.mp4')

video-layout.mp4

Theme Toggle

Enable light/dark/system theme switcher:

use Caresome\FilamentAuthDesigner\Enums\ThemePosition;

->themeToggle() // Default: TopRight
->themeToggle(ThemePosition::BottomLeft) // Custom position

Available positions: TopRight, TopLeft, BottomRight, BottomLeft

Configuration Examples

Multiple Auth Pages

Configure each auth page independently:

AuthDesignerPlugin::make()
    ->login(
        layout: AuthLayout::Overlay,
        media: asset('assets/login-bg.jpg'),
        blur: 10
    )
    ->registration(
        layout: AuthLayout::Split,
        media: asset('assets/register-bg.jpg'),
        direction: MediaDirection::Left
    )
    ->passwordReset(
        layout: AuthLayout::Top,
        media: asset('assets/reset-banner.jpg')
    )
    ->emailVerification(
        layout: AuthLayout::Panel,
        media: asset('assets/verify-bg.jpg'),
        direction: MediaDirection::Right
    )
    ->themeToggle(ThemePosition::TopRight)

Available Methods

• ->login() - Login page
• ->registration() - Registration page
• ->passwordReset() - Password reset pages
• ->emailVerification() - Email verification page
• ->themeToggle() - Theme switcher (applies to all pages)

Troubleshooting

Images not displaying:

• Verify asset path: asset('path/to/image.jpg')
• Ensure files are in public/ directory
• Clear cache: php artisan cache:clear
• Check browser console for 404 errors

Layout not applying:

• Clear view cache: php artisan view:clear
• Verify enum usage: AuthLayout::Overlay (not string)
• Check plugin is registered in panel provider

Videos not auto-playing:

• Ensure format is supported (mp4, webm, mov, ogg)
• Check browser autoplay policies
• Test in different browsers

Blur effect not working:

• Only works with AuthLayout::Overlay
• Value must be between 0-20
• Some older browsers may not support backdrop-filter

Testing

composer test          # Run tests
composer analyse       # Run PHPStan
composer format        # Format code with Pint

License

The MIT License (MIT). Please see License File for more information.