Livewire Component

Livewire QR Component

The ByteAuth Laravel SDK includes a ready-to-use Livewire component for displaying the authentication QR code.

Basic Usage

Add the component to any Blade template:

<livewire:byteauth-qr-login />

That’s it! The component handles:

Generating QR codes with cryptographic challenges
Refreshing the QR every 30 seconds
Polling for authentication status
Redirecting on successful login

Full Page Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - {{ config('app.name') }}</title>
    @livewireStyles
</head>
<body>
    <div class="login-container">
        <h1>Welcome Back</h1>
        <p>Scan with ByteVault to log in</p>

        <livewire:byteauth-qr-login />

        <p class="help-text">
            Don't have ByteVault?
            <a href="https://bytefederal.com/bytevault">Download it here</a>
        </p>
    </div>

    @livewireScripts
</body>
</html>

Component Props

Customize the component with props:

<livewire:byteauth-qr-login
    :size="250"
    :refresh-interval="30"
    :poll-interval="5"
    :show-loading="true"
    :show-instructions="true"
    redirect-url="/dashboard"
    mode="login"
/>

Available Props

Prop	Type	Default	Description
`size`	integer	`200`	QR code size in pixels
`refresh-interval`	integer	`30`	QR refresh interval in seconds
`poll-interval`	integer	`5`	Status polling interval in seconds
`show-loading`	boolean	`true`	Show loading spinner while generating QR
`show-instructions`	boolean	`true`	Show “Scan with ByteVault” text
`redirect-url`	string	`null`	Override default redirect URL
`mode`	string	`'login'`	`'login'` or `'register'`

Listening for Events

The component emits events you can listen to:

<livewire:byteauth-qr-login
    @authenticated="handleAuth"
    @failed="handleError"
/>

<script>
    function handleAuth(event) {
        console.log('User authenticated:', event.detail.user);
        // Custom redirect or action
    }

    function handleError(event) {
        console.error('Authentication failed:', event.detail.error);
        // Show error message
    }
</script>

Available Events

Event	Payload	Description
`authenticated`	`{ user, session_id }`	User successfully authenticated
`registered`	`{ user, session_id }`	New user registered
`failed`	`{ error, code }`	Authentication failed
`qr-refreshed`	`{ session_id }`	QR code was refreshed
`expired`	`{ session_id }`	Session expired

Component in Alpine.js

For more control, use with Alpine.js:

<div x-data="{ authenticated: false, user: null }">
    <template x-if="!authenticated">
        <div>
            <livewire:byteauth-qr-login
                @authenticated="authenticated = true; user = $event.detail.user"
            />
        </div>
    </template>

    <template x-if="authenticated">
        <div>
            <h2>Welcome!</h2>
            <p x-text="'Logged in as: ' + user.public_key.substring(0, 16) + '...'"></p>
            <a href="/dashboard">Go to Dashboard</a>
        </div>
    </template>
</div>

Display ByteAuth alongside a password form:

<div class="login-page">
    <div class="login-options">
        <!-- Traditional Form -->
        <div class="password-login">
            <h3>Login with Password</h3>
            <form method="POST" action="/login">
                @csrf
                <input type="email" name="email" placeholder="Email">
                <input type="password" name="password" placeholder="Password">
                <button type="submit">Sign In</button>
            </form>
        </div>

        <div class="divider">
            <span>or</span>
        </div>

        <!-- ByteAuth QR -->
        <div class="byteauth-login">
            <h3>Login with ByteVault</h3>
            <livewire:byteauth-qr-login :show-instructions="false" />
            <p>Scan to login instantly</p>
        </div>
    </div>
</div>

Registration Mode

For user registration flows:

<livewire:byteauth-qr-login mode="register" redirect-url="/onboarding" />

In registration mode:

New public keys create new user accounts
Existing public keys are rejected with an error
The registered event is emitted instead of authenticated

Customizing the Component

Publishing Views

Publish the component views to customize the HTML:

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

This creates resources/views/vendor/byteauth/livewire/qr-login.blade.php.

Custom Component

Create your own component extending the base:

<?php

namespace App\Livewire;

use ByteFederal\ByteAuthLaravel\Livewire\QRLogin;

class CustomQRLogin extends QRLogin
{
    public function render()
    {
        return view('livewire.custom-qr-login', [
            'qrCode' => $this->qrCode,
            'sessionId' => $this->sessionId,
            'status' => $this->status,
        ]);
    }

    protected function onAuthenticated($user)
    {
        // Custom logic after authentication
        parent::onAuthenticated($user);
    }
}

Handling Errors

Display errors gracefully:

<div x-data="{ error: null }">
    <livewire:byteauth-qr-login
        @failed="error = $event.detail.error"
    />

    <template x-if="error">
        <div class="error-message" x-text="error"></div>
    </template>
</div>