People searching “Laravel password confirmation Vue” add one password input and then the rule fails with no obvious bug. confirmed looks for a second field named {field}_confirmation.
TL;DR
- The confirmed rule checks password_confirmation.
- The Vue form needs that second field name.
- Do not hash the password in the Vue page, and do not send a confirmation to a column.
The fix#
Password reset on the starter kit already has both fields. The Fortify guide is that flow. This page is the rule when you add a password field of your own.
use Illuminate\Validation\Rules\Password;
$validated = $request->validate([
'password' => ['required', 'confirmed', Password::defaults()],
]);<input v-model="form.password" name="password" type="password" autocomplete="new-password" />
<input v-model="form.password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" />
<p v-if="form.errors.password">{{ form.errors.password }}</p>The error is attached to password, not to password_confirmation. One paragraph under the first field is enough.
What to avoid#
Gotcha
Do not hash the password in the Vue page, and do not send a confirmation to a column. Only password is stored, and the cast on the User model hashes it. If you also Hash::make() in the controller, the password is hashed twice and login fails.
FAQ#
How do I require a password confirmation in Vue?
The confirmed rule checks password_confirmation. The Vue form needs that second field name.
What goes wrong with Laravel password confirmation Vue?
Many developers add one password input and then the rule fails with no obvious bug. Do not hash the password in the Vue page, and do not send a confirmation to a column.
