Merging Fortify into my Laravel-Livewire App (inspired by Jetstream)

I'm using Livewire to build my Laravel project, and I'm also implementing the security/authentication layer with Fortify.

For various reasons though, I'm not using Jetstream. With that said, there are clearly some very useful features and techniques which Jetstream employs to do its stuff, and so in the true spirit of creativity, I've "borrowed" the following "update-password" form as an example of how Jetstream uses Livewire to interface with Fortify.

This HTML template is a simplified version of the actual code that goes into building my form (via a combination of Components and Livewire templates). I've taken out all the styling and labeling "noise" so that we can focus only on what's important:

<!-- update-password-form.blade.php (Livewire Template) -->
<form wire:submit.prevent="updatePassword">
    <input id="current_password" type="password" name="current_password" required="true" />
    <input id="password" type="password" name="password" required="true" />
    <input id="password_confirmation" type="password" name="password_confirmation" required="true" />
    <button type="submit">Change Password</button>
</form>

As we see, Livewire prevents the default submission of the form, and redirects it to the function updatePassword() in the Livewire class. The function as you can see here looks like this:

/**
 * Update the user's password.
 *
 * @param  \Laravel\Fortify\Contracts\UpdatesUserPasswords  $updater
 * @return void
 */
public function updatePassword(UpdatesUserPasswords $updater)
{
    $this->resetErrorBag();

    $updater->update(Auth::user(), $this->state);

    $this->state = [
        'current_password' => '',
        'password' => '',
        'password_confirmation' => '',
    ];

    $this->emit('saved');
}

This all appears to work fine-ish. When I (the user) press [Change Password] Livewire sets the form inactive (to prevent the user from double-submitting the form), and when the response from Laravel/Livewire is received, the form is enabled again. And... well that's it.

The problem is that it doesn't matter what data I submit. If I enter all correct values, the password doesn't update! If I enter incorrect current_password, it doesn't error. If I submit the correct current_password with mismatching password and password_confirmation, I get the same "nothing happened" experience (as an end user). When I check the "network" tab on the browser's dev-tools, I get valid 200 responses each time without any obvious errors being reported in the detail. I know the PHP function is being invoked because if I put a dd($this) style debug in it, the JSON response throws back the Livewire object.

So the question I therefore have is the following...

How does the Fortify framework manage errors, and how am I supposed to catch them (in Livewire) to give the user some useful feedback?

Does the ErrorBag (which is reset in the first line of code) somehow get populated in the $updater->update() function?

Moreover, I copied (sorry, borrowed) this solution from Jetstream project. Does this also mean that the Jetstream interface is equally as unintuitive (from an end-user point of view)? Is there some higher-level concept that I've missed from the Jetstream project?

nyce

4 years ago

Level 2

I was being stupid. The error bag is returned to the view, there just wasn't an outlet in the template to display the response. All I needed was a conditional label (or a span or a div) to display the field if the @error exists.

<form wire:submit.prevent="updatePassword">
    <input id="current-password" type="password" name="current_password" required="true" />
	@error('current_password')
	<label id="current-password-err" class="error" for="current-password">{{ $message }}</label>
	@enderror
    <input id="password" type="password" name="password" required="true" />
	@error('password')
	<label id="password-err" class="error" for="password">{{ $message }}</label>
	@enderror
    <input id="password-confirmation" type="password" name="password_confirmation" required="true" />
	@error('password_confirmation')
	<label id="password-confirmation-err" class="error" for="password-confirmation">{{ $message }}</label>
	@enderror
    <button type="submit">Change Password</button>
</form>

nyce

4 years ago

Level 2

As a side-note, this video really helped:

Laravel Authentication Lesson 12

Please or to participate in this conversation.