Filament•13mo ago

Filament Login Page with SMS auth

I need to redo a little default Filament Login page. I extends Filament Login Class to redo a logic. The goal is to have only one field in form => phone number and when this field is validated (present in database) I need send SMS message to this phone and then show one more field for sms verification (to compare sms code). Can I somehow do my custom code for example if I use Wizard steps: first step: entering phone number next button pressed --- sending sms code second step: entering sms verification code submit pressed: validating entered verification code and auth user I'ts not mandatory to use Wizard and steps, any other behaviour will be appreciated or any other opinions how this logic can be solved

7 Replies

toeknee•13mo ago

No need for a wizard really, just use a show / reveal? i.e. disable the phone number field after clicking a button and then render the Enter authcode. If you want a wizard, just build a wizard with one phone number which needs to validate against not being unique, then if validated go to the next step and on going to the next step, send the SMS and wait for the code. Validate the input and log them in by their ID as an example.

aivakha•13mo ago

No need for a wizard really, just use a show / reveal? i.e. disable the phone number field after clicking a button and then render the Enter authcode. --- you propose to show/hide fields with pure js ? or maybe all that is possible with filament forms without extra js ?

toeknee•13mo ago

IT's all possible with filament already...

TextInput::make('phone_number')->phone()->exists(callback: function (Exists $rule, Closure $get) {
        return $rule->where('phone_number', '=', $get('phone_number'));
    })->afterStateValidated(function($state, Closure $get, $set) {
        // Call to API here to send the code and get the stuff for validating
        $set('show_auth_code', true);
    },
TextInput::make('auth_code')->numeric()->visible(fn(Closure $get) => $get('show_auth_code', false))

TextInput::make('phone_number')->phone()->exists(callback: function (Exists $rule, Closure $get) {
        return $rule->where('phone_number', '=', $get('phone_number'));
    })->afterStateValidated(function($state, Closure $get, $set) {
        // Call to API here to send the code and get the stuff for validating
        $set('show_auth_code', true);
    },
TextInput::make('auth_code')->numeric()->visible(fn(Closure $get) => $get('show_auth_code', false))

As a free hand rough basic

aivakha•13mo ago

Thanks! Seems this is what I'm trying to achieve. But throws an exception in this method afterStateValidated() --- does not exist

toeknee•13mo ago

as I said it's free hand so you want there: ->afterStateUpdated() Itm will only update after validation if memory serves me right

aivakha•13mo ago

Thanks, for your help. Currently this is solved with the following code: But I have some more questions: 1) Is possible to show is_confirmed checkbox only when phone field validated successfully (regex) ? 2) Is possible to set submit button disabled attr until phone field is not successfully validated? 3) Is possible to add extra buttons for example for resend sms verificatoin code? 4) Any ways to show green message like validation, but success ?

JibayMcs•13mo ago

Hi 👋 About your questions: 1) & 2): Maybe use an Hidden field and change his state using $get and $set 3): Yep ! Change the view accordingly to your render() method inside your fresh new Login(Livewire Component) class and put some:

<x-filament::button wire:click="resendVerificationCode">Resend verification code</x-filament-button>

<x-filament::button wire:click="resendVerificationCode">Resend verification code</x-filament-button>

Or something like that. 4): What about sending a Notification on your login screen ?

Gaming

Programming

Filament Login Page with SMS auth