scriptoshi / livewire-otp-auth
OTP authentication for Laravel with Livewire
Requires
- php: ^8.2
- illuminate/database: ^12.0
- illuminate/notifications: ^12.0
- illuminate/support: ^12.0
- livewire/flux: ^2.0
- livewire/livewire: ^3.0
README
A simple and easy-to-use OTP (One-Time Password) Email authentication package for Laravel 12 using Livewire 3.
Features
- OTP-based authentication for your Laravel application
- Simple email-based verification
- Support for login, registration, and email validation flows
- Rate limiting for OTP requests
- Customizable expiration times
- Responsive UI with live input validation using Flux components
- Easy integration with existing Laravel applications
Requirements
- PHP 8.2+
- Laravel 12.x
- Livewire 3.x
- Flux 2.x
Installation
You can install the package via composer:
composer require scriptoshi/livewire-otp-auth
This will automatically install Livewire and Flux if they're not already in your project.
After installing the package, you need to run the migrations:
php artisan migrate
This will add the necessary columns to your users table.
Configuration
You can publish the configuration file:
php artisan vendor:publish --tag=livewire-otp-auth
This will create a livewire-otp-auth.php
file in your config
directory. You can modify the following settings:
- expiration_time: How long an OTP is valid for in minutes (default: 10)
- otp_length: The length of the OTP code (default: 6)
- resend_cooldown: Cooldown time in seconds before a user can request another OTP (default: 60)
- rate_limit_attempts: Number of OTP attempts before rate limiting is applied (default: 5)
- rate_limit_duration: Duration in minutes for which rate limiting is applied (default: 5)
Usage
1. Add the trait to your User model
First, add the HasOtpAuth
trait to your User model:
use Scriptoshi\LivewireOtpAuth\Traits\HasOtpAuth; class User extends Authenticatable { use HasOtpAuth; // ... }
2. Make sure Flux is properly set up
If you haven't already set up Flux in your project, follow the official Flux documentation to make sure it's properly configured.
3. Add the component to your views
You can now add the OTP authentication component to your views:
<livewire:otp-auth />
By default, this will use the login
type and the request
step. You can customize this by passing parameters:
<livewire:otp-auth type="register" />
Available types:
login
: For existing users (default)register
: For new users (requires a name field)validate
: For validating emails of logged-in users
4. Customizing the UI
If you want to customize the UI, you can publish the views:
php artisan vendor:publish --tag=livewire-otp-auth
Then you can edit the views in resources/views/vendor/livewire-otp-auth
.
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-otp-auth/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-otp-auth/resources/views/**/*.blade.php'; /* Rest of your CSS file */
6. Flux Components
This package uses Flux components to provide a consistent and beautiful UI. The components include:
flux:input
- Used for email and name inputsflux:button
- Used for action buttons
These components automatically inherit your application's theme and styling, providing a seamless integration with your Laravel application.
Routes
The package automatically registers a route for verifying OTPs via email links:
GET /otp/verify/{code}
This route is named otp.verify
and can be used to verify OTPs sent via email.
License
The MIT License (MIT). Please see License File for more information.