scriptoshi/livewire-siwe

Sign in with Ethereum integration for Laravel using Livewire

1.0.5 2025-03-14 17:33 UTC

This package is auto-updated.

Last update: 2025-03-14 17:34:26 UTC


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.