Laravel 8 Jetstream Livewire Password Confirmation modal not working

Question

I am new to Livewire and I'm trying to use a modal password confirmation in Laravel 8 using Jetstream/Livewire/TailwindCSS. I'd like to do this as an added layer of protection before providing the user with some sensitive information. As per documentation in https://jetstream.laravel.com/2.x/features/password-confirmation.html (#Modal Confirmation Via Livewire) I should be able to create a component and then call the action to request the password confirmation before executing the rest of my code. However, I cannot get this to work.
My Component (\App\Http\Livewire\TestComponent.php):

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class TestComponent extends Component
{
    public function doSomething(){
        $this->ensurePasswordIsConfirmed();
        //do something here to provide sensitive information, but for now:
        dd('hello world');
    }
}

and my view file:

<!-- some other stuff -->
<x-jet-confirms-password wire:then="doSomething">
    <x-jet-button type="button" wire:loading.attr="disabled">
        {{ __('Click Me') }}
    </x-jet-button>
</x-jet-confirms-password>
<!-- rest of page -->

I expected to click the button and be presented with a password confirmation modal but instead, nothing happens on the UI and the console shows errors as follows:

Alpine: Cannot reference "$wire" outside a Livewire component (in SupportAlpine.js)

Alpine Error: "TypeError: null is not an object (evaluating 'wireEl.__livewire')" Expression: "$wire.startConfirmingPassword('88430b463c8820be758732f8dbb3f7de')" (in app.js)

Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'wireEl.__livewire') (in SupportAlpine.js)

Other components on the page are working fine. I don't know what am I missing, but I'm sure it must be something embarrassingly simple. Any ideas? It would be greatly appreciated. Thanks in advance!

Cameron A · Accepted Answer · 2022-03-06 15:05:17Z

1

Try Adding use ConfirmsPasswords; under the top of your class

use Laravel\Jetstream\ConfirmsPasswords;
    
class TestComponent extends Component {
        use ConfirmsPasswords;
    
    public function doSomething(){
        // Some Logic
    }
}

for more in check this link Jetstream: Customization + Password Confirmation

answered Mar 6, 2022 at 15:05

Cameron A

1591 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel 8 Jetstream Livewire Password Confirmation modal not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related