README

A Laravel Livewire package for authenticating users with Ethereum wallets using the SIWE (Sign In With Ethereum) protocol.

Features

• Easy integration with Laravel's authentication system
• Secure verification of Ethereum signatures
• Automatic user creation based on wallet address
• Configurable redirect URLs and Ethereum chain IDs
• Customizable user registration data

Requirements

• PHP 8.2 or higher
• Laravel 12.x
• Livewire 3.x
• AppKit Project ID from reown.xyz

Installation

1. Install the package via composer:

composer require scriptoshi/livewire-siwe

2. (OPTIONAL) Publish the package assets and configuration:

php artisan vendor:publish --tag=livewire-siwe-config
php artisan vendor:publish --tag=livewire-siwe-migrations

3. Run the migrations:

php artisan migrate

This will add an address column to your users table for storing Ethereum wallet addresses.

4. Install the required JavaScript dependencies:

npm install @reown/appkit @reown/appkit-adapter-ethers @reown/appkit-siwe

5. Configure Tailwind CSS

To ensure that Tailwind CSS properly processes the component styles, add this package to your content sources in your CSS file (typically resources/css/app.css):

/* Add this line with your other @source directives */
@source '../../vendor/scriptoshi/livewire-siwe/resources/views/**/*.blade.php';

For example, your CSS file might look similar to this:

@import "tailwindcss";

@source "../views";
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/scriptoshi/livewire-siwe/resources/views/**/*.blade.php';

/* Rest of your CSS file */

Configuration

After publishing the package assets, you can find the configuration file at config/livewire-siwe.php. You need to set your AppKit project ID and other configuration options:

// In your .env file
#https://cloud.reown.com/
APPKIT_PROJECT_ID=your-appkit-project-id
SIWE_CHAIN_ID=1 # Ethereum Mainnet
SIWE_REDIRECT_URL=dashboard

Usage

Once installed, you can use the SIWE login component in your Blade views:

<livewire:siwe-auth />

JavaScript Setup

1. Import the SIWE module in your resources/js/app.js file:

// Import the SIWE module
import { createSiwe } from "../../vendor/scriptoshi/livewire-siwe/resources/js/siwe.js";

// Initialize SIWE when the document is loaded
document.addEventListener("DOMContentLoaded", function () {
    createSiwe();
});

1. Include your app.js in your layout:

@vite(['resources/js/app.js'])

That's it! The SIWE functionality will be available on pages where the component is used.

Customizing User Registration

You can customize how users are registered by defining a callback in your AppServiceProvider:

// In AppServiceProvider.php
public function boot()
{
    config(['livewire-siwe.user_data_callback' => function ($address, $userData) {
        // Customize user data here
        $userData['name'] = 'ETH User: ' . substr($address, 0, 6);
        return $userData;
    }]);
}

License

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