Suppose you are wanted to build a mobile base login authentication but don't know how to do it. You are in the right place to go forward with your Custom Login page. After you read this article you can be able to build your own login page with custom authentication.

If you did not publish your configuration of Filament? Run the below command.

php artisan vendor:publish --tag=filament-config

Create a Livewire component for the login page.

php artisan make:livewire Auth/Login

Now edit the Login component into the Livewire auth folder.

<?php
 
namespace App\Http\Livewire\Auth;
 
use Filament\Facades\Filament;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\TextInput;
use Illuminate\Validation\ValidationException;
use Filament\Http\Livewire\Auth\Login as OldLogin;
use Filament\Http\Responses\Auth\Contracts\LoginResponse;
use DanHarrin\LivewireRateLimiting\Exceptions\TooManyRequestsException;
 
class Login extends OldLogin
{
    public $phone_number = '';
 
 
    public function authenticate(): ?LoginResponse
    {
        try {
            $this->rateLimit(5);
        } catch (TooManyRequestsException $exception) {
            throw ValidationException::withMessages([
                'email' => __('filament::login.messages.throttled', [
                    'seconds' => $exception->secondsUntilAvailable,
                    'minutes' => ceil($exception->secondsUntilAvailable / 60),
                ]),
            ]);
        }
 
        $data = $this->form->getState();
 
        if (! Filament::auth()->attempt([
            'phone_number' => $data['phone_number'],
            'password' => $data['password'],
        ], $data['remember'])) {
            throw ValidationException::withMessages([
                'phone_number' => __('filament::login.messages.failed'),
            ]);
        }
 
        session()->regenerate();
 
        return app(LoginResponse::class);
    }
 
 
 
    protected function getFormSchema(): array
    {
        return [
            TextInput::make('phone_number')
                ->label(__('Phone number'))
                ->required()
                ->autocomplete(),
            TextInput::make('password')
                ->label(__('filament::login.fields.password.label'))
                ->password()
                ->required(),
            Checkbox::make('remember')
                ->label(__('filament::login.fields.remember.label')),
        ];
    }
 
}

Paste the above codes. I assume the column is 'phone_number'. Replace your targeted login column instead of phone_number.

Edit the config/Filament.php file. Replace your custom-made login component \App\Http\Livewire\Auth\Login::class. After being replaced your 'auth' will look like this.

'auth' => [
    'guard' => env('FILAMENT_AUTH_GUARD', 'web'),
    'pages' => [
        'login' => \App\Http\Livewire\Auth\Login::class,
    ],
],

Now you are free to go with your custom login with the phone number column.

If you have any questions please comment below.

If you want to see more tips and tricks like this please make a contribution buy me a coffee link below. https://bmc.link/tKqEP7W

#HappyCoding