Level 50
You don't need to add it manually, but you have to configure Sanctum and Axios.
First things first: will your front and back ends run on the same domain, or are they subdomains of the same domain, e.g. api.app.com and app.com?
I have a csrf-token mismatch. Now I haven't really used sanctum before, so I'm trying to get some insight on how to proceed when I hit the endpoint '/sanctum/csrf-cookie'. How do I add the csrf token to my form?
<script setup>
import { ref } from "vue";
const form = ref({
email: "",
password: "",
});
const getCsrfToken = async () => {
try {
await axios.get('/sanctum/csrf-cookie');
} catch (error) {
console.error("Failed to get CSRF token:", error);
}
};
const handleLogin = async () => {
await getCsrfToken();
try {
await axios.post('/auth/login/authenticate', {
email: form.value.email,
password: form.value.password
});
} catch (error) {
console.error("Login failed:", error);
form.value.password = "";
}
};
</script>
<template>
<div class="flex flex-col justify-center items-center mt-36">
<span class="text-2xl font-semibold mb-4">Book Application 📔</span>
<div class="p-2 border border-gray-200 rounded-lg w-1/3">
<form
@submit.prevent="handleLogin"
method="post"
class="flex flex-col space-y-4"
>
<input
type="email"
name="email"
placeholder="Email"
v-model="form.email"
class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<input
type="password"
name="password"
placeholder="Password"
v-model="form.password"
class="p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
required
/>
<button
type="submit"
class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-200"
>
Login
</button>
</form>
</div>
</div>
</template>
You don't need to add it manually, but you have to configure Sanctum and Axios.
First things first: will your front and back ends run on the same domain, or are they subdomains of the same domain, e.g. api.app.com and app.com?
Please or to participate in this conversation.