I'm using Laravel 11 with Inertia and VueJS 3. I installed Breeze on the project and tested authentication. Everything was working fine until I tested whether the invalid credentials error was displayed correctly. To my surprise, this wasn't happening.
I keep getting a 302 on the form submit, followed by a 200 on the login page, with no error recorded. Below is a printout of the return, from my frontend and my backend.
<Form
as="form"
v-slot="$form"
:initial-values="form"
:resolver="resolver"
@submit="onSubmit"
class="flex flex-col gap-4 text-gray-900"
>
<InputText id="email" name="email" v-model="form.email" type="email" autocomplete="username" class="w-full" />
<Message v-if="$form.email?.invalid" severity="error" size="small">{{ $form.email.error.message }}</Message>
<Message v-if="form.errors.email" severity="error" class="text-center mt-2">{{ form.errors.email }}</Message>
<Message v-if="page.props.errors.email" severity="error" size="small">{{ page.props.errors.email }}</Message>
<!-- ...other fields... -->
<Button type="submit" label="Entrar" class="w-full mt-2" />
</Form>
<script setup>
import { useForm, usePage } from '@inertiajs/vue3'
const page = usePage()
const form = useForm({ email: '', password: '', remember: false })
const resolver = ({ values }) => {
const errors = {}
if (!values.email) errors.email = [{ message: 'O e-mail é obrigatório.' }]
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) errors.email = [{ message: 'O e-mail informado é inválido.' }]
if (!values.password) errors.password = [{ message: 'A senha é obrigatória.' }]
return { errors }
}
function onSubmit(e) {
if (!e.valid || !e.states) return
form.email = e.states.email.value
form.password = e.states.password.value
form.post(route('login'), { onFinish: () => form.reset('password') })
}
</script>
public function store(LoginRequest $request)
{
$request->authenticate();
$request->session()->regenerate();
return redirect()->intended(RouteServiceProvider::HOME);
}
public function authenticate(): void
{
if (! Auth::attempt($this->only('email', 'password'), $this->boolean('remember'))) {
throw ValidationException::withMessages([
'email' => __('auth.failed'),
]);
}
}
my kernel.php
protected $middleware = [
// \App\Http\Middleware\TrustHosts::class,
\App\Http\Middleware\TrustProxies::class,
\Illuminate\Http\Middleware\HandleCors::class,
\App\Http\Middleware\PreventRequestaluringMaintenance::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];
/**
* The application's route middleware groups.
*
* @var array<string, array<int, class-string|string>›
*/
protected $middlewareGroups = [
'web' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\App\Http\Middleware\HandleInertiaRequests::class,
\Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
],
