Fluxui Devices Laravel Package

Getting Started

1. Prerequisites Check Verify your project meets requirements:

   php -v  # PHP 8.2+
   composer show laravel/framework  # Laravel 11/12
   composer show livewire/livewire  # Livewire 3/4
   

2. Install Dependencies

   composer require diego-ninja/laravel-devices agenticmorf/fluxui-devices
   

3. Configure Core Package Add HasDevices trait to your User model:

   use Ninja\DeviceTracker\Traits\HasDevices;
   
   class User extends Authenticatable {
       use HasDevices;
   }
   

4. First Integration Add the device manager to your settings page:

   <livewire:fluxui-devices.device-manager />
   

   Publish views if customization is needed:

   php artisan vendor:publish --tag=fluxui-devices-views
   

5. Verify Setup Visit the device management route (default: /settings/devices) and confirm:

   • Device list appears with icons
   • Current device is highlighted
   • Password confirmation works for sign-out actions

Implementation Patterns

Component Integration Workflow

1. Settings Page Structure

   <!-- resources/views/settings.blade.php -->
   <div class="space-y-8">
       <x-fluxui-devices.device-manager />
       <x-fluxui-devices.session-manager />
   </div>
   

2. Conditional Rendering Use Livewire's can() method to show/hide components:

   public function render() {
       return view('livewire.fluxui-devices.device-manager')
           ->can('manage-devices');
   }
   

3. Custom Action Handling Extend the component's logic via wire:model:

   <button wire:click="signOutDevice({{ $device->id }})"
           wire:loading.attr="disabled">
       Sign Out
   </button>
   

4. Volt Component Integration For custom Volt components, extend the base classes:

   // app/Livewire/ExtendedDeviceManager.php
   use ChrisThompsonTLDR\FluxuiDevices\Livewire\DeviceManager;
   
   class ExtendedDeviceManager extends DeviceManager {
       public function customAction() {
           // Your logic
       }
   }
   

Common Integration Patterns

• Authentication Guard Integration

  // app/Providers/AuthServiceProvider.php
  public function boot() {
      Gate::define('manage-devices', function ($user) {
          return $user->can('manage-devices');
      });
  }
  

• Event Listeners Listen for device/session events:

  // app/Listeners/DeviceActivityListener.php
  public function handle(DeviceCreated $event) {
      // Log or notify about new device
  }
  

• API Integration For headless setups, use the underlying package's API:

  $devices = auth()->user()->devices()->get();
  

Gotchas and Tips

Common Pitfalls

1. Missing Action Message Component

   • Error: Flash messages don't appear after actions
   • Fix: Publish or create the action-message component (see docs)

2. Route Conflict

   • Error: 404 when accessing /settings/devices
   • Fix: Publish and configure config/devices.php:

     'device_route' => 'account/security/devices',
     

3. Volt Component Loading Issues

   • Error: Blank screen or JS errors
   • Fix: Ensure livewire/volt is properly installed and configured

4. Device Icon Display Problems

   • Error: Device icons not showing
   • Fix: Publish views to get custom Lucide icons:

     php artisan vendor:publish --tag=fluxui-devices-views
     

Debugging Tips

• Check Device Tracking Verify devices are being recorded:

  dd(auth()->user()->devices()->latest()->take(5)->get());
  

• Livewire Logs Enable Livewire logging in config/livewire.php:

  'log' => env('LIVEWIRE_LOG', true),
  

• Volt Debugging Use Volt's built-in inspector:

  // In your component
  public function render() {
      return view('livewire.fluxui-devices.device-manager')
          ->withDebug(true);
  }
  

Performance Considerations

1. Eager Loading Optimize device queries:

   // In your component class
   public function getDevicesProperty() {
       return $this->user->devices()
           ->with('browser', 'platform')
           ->latest()
           ->get();
   }
   

2. Pagination For users with many devices:

   <livewire:fluxui-devices.device-manager :per-page="20" />
   

3. Caching Cache device lists if rarely changed:

   public function getDevicesProperty() {
       return Cache::remember('user-devices-'.$this->user->id, now()->addHours(1), function() {
           return $this->user->devices()->get();
       });
   }
   

Extension Points

1. Custom Device Actions Extend the component to add custom buttons:

   // app/Livewire/CustomDeviceManager.php
   public function customAction(Device $device) {
       // Your logic
       $this->dispatch('device-custom-action', device: $device);
   }
   

2. Session Status Customization Override status badges:

   @props(['status'])
   
   @switch($status)
       @case('active')
           <span class="bg-green-100 text-green-800">Active</span>
       @break
       <!-- Add more cases -->
   @endswitch
   

3. Location Service Integration Enhance location display:

   public function getLocationProperty() {
       return geoip($this->session->ip()) ?: 'Unknown';
   }
   

4. Two-Factor Integration Combine with Laravel Fortify:

   @auth
       <div class="space-y-4">
           <x-fluxui-devices.device-manager />
           <x-fluxui-devices.session-manager />
           @if(auth()->user()->hasTwoFactorEnabled())
               <x-fluxui-devices.two-factor-manager />
           @endif
       </div>
   @endauth
   

Configuration Quirks

1. Route Caching After changing device_route, clear route cache:

   php artisan route:clear
   

2. Middleware Conflicts Ensure the route has proper middleware:

   Route::middleware(['auth:sanctum', 'verified'])->group(function() {
       Route::get('/settings/devices', [DeviceController::class, 'index']);
   });
   

3. Volt Asset Loading If Volt assets fail to load, check:

   npm run dev  # or build
   php artisan optimize:clear
   

4. Timezone Handling Device timestamps use the user's timezone. Set it explicitly:

   $this->user->forceFill(['timezone' => 'America/New_York'])->save();