Customization

Customization

Customize the ByteAuth QR component to match your application’s design.

Publishing Assets

Publish Views

php artisan vendor:publish --tag=byteauth-views

This creates views in resources/views/vendor/byteauth/:

• livewire/qr-login.blade.php - The main QR component
• components/qr-code.blade.php - The QR code display
• components/loading.blade.php - Loading spinner

Publish Config

php artisan vendor:publish --tag=byteauth-config

Creates config/byteauth.php for configuration customization.

Styling the Component

CSS Custom Properties

The component uses CSS custom properties for easy theming:

:root {
  --byteauth-primary: #ec0401;
  --byteauth-background: #ffffff;
  --byteauth-text: #1a1a1a;
  --byteauth-text-muted: #666666;
  --byteauth-border: #e5e5e5;
  --byteauth-border-radius: 12px;
  --byteauth-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --byteauth-background: #1a1a1a;
    --byteauth-text: #ffffff;
    --byteauth-text-muted: #888888;
    --byteauth-border: #333333;
  }
}

Component Classes

Apply custom classes to the component:

<livewire:byteauth-qr-login
    class="my-custom-qr"
    wrapper-class="qr-wrapper"
/>

.my-custom-qr {
  padding: 2rem;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  border-radius: 16px;
}

.qr-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

Tailwind CSS

If using Tailwind, apply utility classes directly:

<div class="bg-gray-900 p-8 rounded-2xl shadow-2xl">
    <livewire:byteauth-qr-login />
</div>

Custom View Template

After publishing views, edit resources/views/vendor/byteauth/livewire/qr-login.blade.php:

<div
    class="byteauth-container {{ $containerClass ?? '' }}"
    wire:poll.{{ $pollInterval }}s="checkStatus"
>
    {{-- Header --}}
    @if($showHeader)
    <div class="byteauth-header">
        <h3>{{ $title ?? 'Login with ByteVault' }}</h3>
        <p>{{ $subtitle ?? 'Scan the QR code with your ByteVault app' }}</p>
    </div>
    @endif

    {{-- QR Code --}}
    <div class="byteauth-qr-wrapper">
        @if($loading)
            <div class="byteauth-loading">
                <svg class="animate-spin" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none" />
                </svg>
                <span>Generating...</span>
            </div>
        @elseif($error)
            <div class="byteauth-error">
                <svg viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                </svg>
                <span>{{ $error }}</span>
                <button wire:click="refresh">Try Again</button>
            </div>
        @else
            <div class="byteauth-qr" wire:key="{{ $sessionId }}">
                {!! $qrCode !!}
            </div>
            <div class="byteauth-refresh-timer">
                Refreshes in <span x-data="{ seconds: {{ $refreshInterval }} }" x-text="seconds"></span>s
            </div>
        @endif
    </div>

    {{-- Footer --}}
    @if($showFooter)
    <div class="byteauth-footer">
        <p>Don't have ByteVault?</p>
        <a href="https://bytefederal.com/bytevault" target="_blank">
            Download App
        </a>
    </div>
    @endif

    {{-- Status Messages --}}
    @if($status === 'authenticated')
    <div class="byteauth-success">
        <svg viewBox="0 0 24 24">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
        </svg>
        <span>Authenticated! Redirecting...</span>
    </div>
    @endif
</div>

@push('styles')
<style>
    .byteauth-container {
        /* Your custom styles */
    }
</style>
@endpush

Custom QR Code Styling

QR Code Colors

Customize QR code colors via config:

config/byteauth.php

'qr' => [
    'size' => 200,
    'margin' => 2,
    'foreground' => '#000000',
    'background' => '#ffffff',
    'error_correction' => 'M', // L, M, Q, H
],

QR Code with Logo

Add your logo to the QR code center:

config/byteauth.php

'qr' => [
    'logo' => public_path('images/logo.png'),
    'logo_size' => 50,
],

Caution

Adding a logo reduces QR code readability. Use error correction level ‘H’ (high) when adding logos.

Animation Customization

Loading Animation

.byteauth-loading svg {
    animation: spin 1s linear infinite;
    color: var(--byteauth-primary);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

Success Animation

.byteauth-success {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

QR Refresh Animation

.byteauth-qr {
    transition: opacity 0.3s ease;
}

.byteauth-qr.refreshing {
    opacity: 0.5;
}

Custom Events

JavaScript Callbacks

<livewire:byteauth-qr-login />

<script>
    document.addEventListener('livewire:initialized', () => {
        Livewire.on('byteauth:authenticated', (data) => {
            // Custom success handling
            showSuccessToast('Welcome back!');
            trackEvent('login_success', { method: 'byteauth' });
        });

        Livewire.on('byteauth:error', (data) => {
            // Custom error handling
            showErrorToast(data.message);
            trackEvent('login_error', { error: data.code });
        });

        Livewire.on('byteauth:qr-refreshed', () => {
            // Track QR refreshes
            console.log('QR code refreshed');
        });
    });
</script>

Alpine.js Integration

<div x-data="byteAuthHandler()">
    <livewire:byteauth-qr-login
        @authenticated="handleAuth($event.detail)"
    />
</div>

<script>
    function byteAuthHandler() {
        return {
            handleAuth(data) {
                // Access user data
                console.log('User:', data.user);

                // Custom redirect with delay
                setTimeout(() => {
                    window.location.href = '/dashboard';
                }, 1000);
            }
        }
    }
</script>

Internationalization

Language Files

Publish and customize language files:

php artisan vendor:publish --tag=byteauth-lang

Edit resources/lang/vendor/byteauth/en/messages.php:

return [
    'scan_to_login' => 'Scan to sign in',
    'scan_to_register' => 'Scan to create account',
    'loading' => 'Preparing...',
    'success' => 'Success! Redirecting...',
    'error_expired' => 'Session expired. Please refresh.',
    'error_invalid' => 'Authentication failed. Please try again.',
    'download_app' => 'Get ByteVault',
    'refresh_in' => 'Refreshes in :seconds seconds',
];

Multiple Languages

resources/lang/vendor/byteauth/es/messages.php

return [
    'scan_to_login' => 'Escanea para iniciar sesión',
    'loading' => 'Preparando...',
    // ...
];

Redirect Customization

Dynamic Redirects

config/byteauth.php

'redirects' => [
    'after_login' => function ($user) {
        if ($user->isAdmin()) {
            return '/admin/dashboard';
        }
        return '/dashboard';
    },
    'after_register' => '/onboarding',
],

Per-Component Redirect

<livewire:byteauth-qr-login redirect-url="{{ $intendedUrl ?? '/dashboard' }}" />

Next Steps

• Review the API reference
• Handle error codes
• Security best practices