BetterTyped/hyper-fetch

419 status with laravel breeze and nuxt

natarajbodhi opened this issue ยท 2 comments

Describe the bug
I'm trying to use HyperFetch in one my projects. When I use the code below trying to login I get 419 unknown status. But it is working fine with axios and nuxt's useFetch.

To Reproduce
Steps to reproduce the behavior:
async function handleLogin() {
const client = new Client({ url: "http://localhost:8000" });

	const cookie = client.createRequest()({
		endpoint: "/sanctum/csrf-cookie",
		method: "GET",
		options: { withCredentials: true },
	});
	await cookie.send();

	const token = useCookie("XSRF-TOKEN");

	type ResponseType = { token: string; refreshToken: string };
	type RequestType = { email: string; password: string };

	const postLogin = client.createRequest<ResponseType, RequestType>()({
		method: "POST",
		endpoint: "/login",
		headers: {
			["X-XSRF-TOKEN"]: String(token.value),
		},
	});

	const { data, error, status } = await postLogin.send({
		data: {
			email: loginForm.email,
			password: loginForm.password,
		},
	});

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

Not a hyper-fetch issue I think.
You don't need to call /sanctum/csrf-cookie every login (submit).

subsequent requests to the Laravel application may receive 401 or 419 HTTP error response
@see https://laravel.com/docs/10.x/sanctum#logging-in

prc5 commented

Thanks @johngerome for help! ๐Ÿš€
I will close the issue, if it still exist - I will reopen thread.