Filament Otp Input Laravel Package

Getting Started

Install the package with Composer, then make sure Filament’s assets are refreshed if the OTP field does not render correctly:

composer require mokhosh/filament-otp-input
php artisan filament:assets
php artisan optimize:clear

Start by reading the package README, then inspect the component class and Blade view in src/ and resources/views/. At v1.0.0 this is the initial release, so the README is the authoritative source for the exact component namespace and supported fluent methods.

The first practical use case is a Filament verification form: add an OTP field, submit it to a Livewire action, and validate the code server-side before marking the user/email/phone as verified.

use Mokhosh\FilamentOtpInput\Forms\Components\OtpInput; // confirm namespace from README

OtpInput::make('otp')
    ->label('Verification code')
    ->length(6)
    ->required();

Treat the field as an input widget only. The real verification logic should live in your application action or service.

Implementation Patterns

Use the OTP input as part of a small verification workflow rather than as a standalone security mechanism:

1. User requests a code.
2. Application generates a short-lived OTP, stores a hash plus expiry/attempt metadata.
3. Filament form displays the OTP field.
4. Submission action validates format, checks the hash, enforces expiry and attempt limits, then clears the OTP.
5. Resend action is throttled and invalidates or rotates the previous code.

A typical Filament form field setup:

OtpInput::make('otp')
    ->label('One-time code')
    ->length(6)
    ->required()
    ->rules(['digits:6']);

Pair the field with explicit actions:

use Filament\Forms\Components\Actions\Action;

Action::make('sendOtp')
    ->label('Send code')
    ->action(fn () => $this->sendOtp());

Action::make('verifyOtp')
    ->label('Verify')
    ->action(fn () => $this->verifyOtp());

Implementation tips:

• Keep OTP state in a dedicated Livewire property and clear it after success or expiry.
• Validate length on both the component and server side; do not let the widget’s visual length be the only constraint.
• Use digits: rules when the code is numeric, or a regex rule if the package supports alphanumeric codes.
• Store OTPs hashed, with expires_at, attempts, and last_sent_at fields.
• Add resend cooldowns and maximum verification attempts.
• Use the OTP flow for login 2FA, email/phone verification, password reset confirmation, or sensitive-action confirmation.
• If the form is multi-step or conditionally rendered, give the field a stable wire:key to avoid Livewire state issues.

Gotchas and Tips

• v1.0.0 is an initial release. Pin it with ^1.0 and review the changelog before upgrading, especially once the public API expands.
• The OTP input component is not a security boundary. Always verify the submitted code server-side against a stored hash, expiry, and attempt count.
• If the field renders without styling or JavaScript, re-run php artisan filament:assets and clear cached views/config.
• Ensure the configured OTP length matches your validation rule. A six-box input with a four-digit validation rule will produce confusing failures.
• Test mobile paste and autofill behavior in a real browser. OTP fields often need autocomplete="one-time-code" or inputmode="numeric" support; check whether the package exposes those options or whether you need to customize the view.
• Do not log OTP values or include them in exception messages.
• If you customize the Blade view, publish it only if necessary and keep track of upstream changes. Prefer extending or wrapping the component over forking the view.
• Use Livewire tests for validation/submission logic and browser-level tests for paste, autofill, focus movement, and resend behavior.
• Clear the OTP field and rotate the stored code after failed attempts or resend requests to avoid replay and stale-code issues.