How do i fetch to laravel breeze login?

Question

login.js

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)

Answer 1

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);