Login form and auto-filling password managers

#1

I’m having trouble getting Livewire models to play nice with password managers that auto-fill both username and password.

The password managers fill out both username and password as expected. But there’s something about the timing or simulated events that cause Livewire to clear them out immediately after.

Depending on the browser/password manager combo, Livewire submits one or both fields with a null value as soon as the password manager pastes the data into the fields. The null fields then of course come back empty and get cleared on the screen.

Using wire:model.lazy resolved this for my desktop browsers (Firefox and Chrome with Bitwarden), but still left things broken for Safari on iPhone/iPad.

I ended up using this work-around for now: https://github.com/livewire/livewire/issues/313#issuecomment-542153237

While this work-around works fine, it eliminates most of the Livewire advantages, so I’m hoping for a different solution.

Has anyone else created a login form with Livewire?

Preset for TALL Stack?
When to use Livewire
#2

I don’t know if this would work, or is even a solution to the problem, but have you tried making the login button not a submit button? If you do an a tag and style it like a button, the password manager might not auto submit it.

#3

Had to try this, but unfortunately does not help.

The password manager does not automatically submit the form. It fills out the username, then the password, upon which livewire clears the username again.

#4

I would create an issue on github if you haven’t already. Like you, I would’ve thought wire:model.lazy would be the fix, but I’ve never tested any livewire in mobile safari like you have. There’s only one other way I can think of to make it work in the current state of livewire aside from your current workaround you linked, but it’s the same issue of defeating the purpose of using livewire.

I give you props for sticking with it, I would’ve given up on it and just not used livewire for the login.

#5

I also have the same issue on Safari, Filling the password with the keychain alwasy clears the email field. I wasn’t able to find any fix.

#6

I have the same issues with Safari autofill. It was fixed in version 1.3.0 but the problems came back in 1.3.1.

#7

Same issue here with iOS safari autofill - very annoying!

On desktop mac using safari or chrome together with 1password, it works just fine.

Edit: related github issue here: https://github.com/livewire/livewire/issues/1081

#8

I wonder if using wire:ignore around the inputs and using <form wire:submit.prevent="save"> would work.

edit: Probably wouldn’t have to use wire:ignore, just don’t model anything to the inputs and use what you get in the array from wire:submit.

#9

For what its worth, I had similar issues with LastPass and found that by adding ‘stop’ modifier to form submit resolved the issue.

<form wire:submit.prevent.stop="action()">