Filament - Using Phone Instead of Email - With Vonage SMS

For this example, the authentication system uses phone numbers and SMS OTPs via Vonage.

The User Model is updated to store phone and OTP-related fields. The native Laravel MustVerifyEmail is enabled but some methods are overwritten to use phone instead of email.

app/Models/User.php:

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Filament\Panel;
use Illuminate\Notifications\Notification;
use Filament\Models\Contracts\FilamentUser;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
 
class User extends Authenticatable implements MustVerifyEmail, FilamentUser
{
    use HasFactory, Notifiable;
 
    protected $fillable = [
        'name',
        'phone',
        'password',
        'verified_at',
        'otp_code',
        'otp_expires_at',
    ];
 
    protected $hidden = [
        'password',
        'remember_token',
        'otp_code',
    ];
 
    protected function casts(): array
    {
        return [
            'verified_at' => 'datetime',
            'otp_expires_at' => 'datetime',
            'password' => 'hashed',
            'otp_code' => 'integer',
        ];
    }
 
    public function canAccessPanel(Panel $panel): bool
    {
        return true;
    }
 
    public function hasVerifiedEmail(): bool
    {
        return ! is_null($this->verified_at);
    }
 
    public function getEmailForVerification(): string
    {
        return $this->phone;
    }
 
    public function routeNotificationForVonage(Notification $notification): string
    {
        return $this->phone;
    }
}

Filament Panel

All authentication features are enabled in the Panel Provider and every feature have a custom page for adding phone field and overwriting some Filament logic.

Next, we will:

• Implement Custom Login/Registration pages
• Add Phone Verification Prompt
• Change Password reset flow
• Add profile page to change the phone number

In the end, we will have an application that sens SMS message with one time password (OTP) for authentication confirmation.