Filament: Register Form: Password Strength and Generate

Register form as a Custom Page with features like Generate password, Show/Hide password, and Measure password strength, using some Alpine.js in the code.


Get the Source Code:

How it works

We must extend the base Register class to add fields to the register page.

We modify the getPasswordFormComponent() method to add more functionality.

We add a suffix action to show/hide password fields. This is done by changing the type in the type() method.

We add a hint action to generate a random password value. After the password is generated, we determine the password strength level and dispatch event with its value to show a progress bar and to say how strong the password is.

This is how the Blade file shows the strength and listeners for the event with Alpine.js.

x-data="{ strengthScore: 0, strengthLevels: $wire.$entangle('strengthLevels') }"
@update-score.window="strengthScore = $event.detail.score"
<span class="font-semibold">Password strength:</span> <span x-text="strengthLevels[strengthScore] ?? 'Weak'"></span>
<progress :value="strengthScore" max="4" class="w-full"></progress>

This is how a custom page looks for the registration page:

use ZxcvbnPhp\Zxcvbn;
use Filament\Forms\Set;
use Filament\Forms\Get;
use Filament\Forms\Form;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Hash;
use Filament\Forms\Components\Component;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\ViewField;
use Illuminate\Validation\Rules\Password;
use App\Forms\Components\PasswordStrength;
use Filament\Forms\Components\Actions\Action;
use Filament\Pages\Auth\Register as BaseRegister;
class Register extends BaseRegister
public bool $showPassword = false;
public int $strengthScore = 0;
// ...
The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.
Get the Source Code: All 50 Premium Examples for $99 Only Form Examples for $39