const groupName = document.getElementById("input-group-name");
const password = document.getElementById("input-password");
const loginButton = document.getElementById("login-button");
const loginError = document.getElementById("login-error");
let loginUser;
loginButton.addEventListener("click", async () => {
const formData = new FormData(document.getElementById("loginForm"));
console.log("Form data:", formData);
try {
const response = await fetch("/login", {
method: "POST",
body: formData,
});
const data = await response.json();
if (response.ok) {
console.log("Successfully logged in");
loginError.style.display = "none";
} else {
console.log("Failed login");
loginError.style.display = "block";
}
} catch (error) {
console.error("Error during login:", error);
}
});
i'm using laravel breeze for login, so i try to fetch to /login, then check the response, if login failed, then i show the login error part in my login blade, but it didn't work, help me please, here in console log : Form data: FormData {} login.js:43 Error during login: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON (anonymous)
So Breeze doesn't return JSON responses for authentication errors by default This means When a login attempt fails it redirects users back to the blade page instead of providing a JSON response. So i think this is affecting your js code leading to the SyntaxError
U can try something like this :
if (!auth()->attempt($request->only('email', 'password'))) {
return response()->json(['error' => 'Invalid credentials'], 422);
}
return response()->json(['message' => 'Logged in successfully'],200);