scriptoshi / livewire-siwe
Sign in with Ethereum integration for Laravel using Livewire
Requires
- php: ^8.2
- illuminate/support: ^12.0
- kornrunner/keccak: ^1.0
- livewire/livewire: ^3.0
- simplito/elliptic-php: ^1.0
Requires (Dev)
- orchestra/testbench: ^10.0
- phpunit/phpunit: ^11.0
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
- 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(); });
- 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.