Laravel 11 Sanctum API and vue3 422 error fun

Sooooo...... I'm making a simple login page.

<script setup>
import axios from '../lib/axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { toastController } from '@ionic/vue';

const router = useRouter()

const form = ref({
    email: '',
    password: '',
})

const onLogin = async () => {
  try {
    await axios.get('/sanctum/csrf-cookie')
    await axios.post('/login', {
      email: form.value.email,
      password: form.value.password
    })
  } catch (error) {
    await showToast("Either the username or password is incorrect or the server is down.");
  }
  router.push('/dailyoffers');
}

const showToast = async (message) => {
  const toast = await toastController.create({
      message: message,
      position: 'top',
      duration: 5000,
      color: 'danger'
  });
  await toast.present();
};

</script>

Throws me 422 error even thou the login is a success with CSRF token etc. No idea why. Because i did the same with the sandbox setup from Laravel Seeder factory and zero issues. But when i change to

const email = ref('');
const password = ref('');

There is no console warnings and no 422 error. BUT

} catch (error) {
    await showToast("Either the username or password is incorrect or the server is down.");
  }

still fires off..... Soooo.... whats up?

MaverickChan

2 years ago

Level 47

when use ref(), you better use it with single string data , not an object. If you insist , try reactive()

in your login logic

first get the csrf token by hitting

const csrfResponse = await axios.get('/sanctum/csrf-cookie')

this will return a response of csrf token which should pass with an X-XSRF-TOKEN header in axios

so , in your login function this should be

const loginResponse = await axios.post('/login', {
      email: form.value.email,
      password: form.value.password
    }, {
		headers: {
                    'X-CSRF-TOKEN': csrfResponse.data, // whatever contains the csrf token data, you can find it
                },
})

karu

2 years ago

Level 1

@MaverickChan how do i pass the sanctum api validation then? where is it in laravel 11....? the code so all over the place... not use to this new setup.

const onLogin = async () => {
  try {
    const csrfResponse = await axios.get('/sanctum/csrf-cookie');
    const loginResponse = await axios.post('/login', {
      email: form.value.email,
      password: form.value.password
    }, {
      headers: {
        'X-CSRF-TOKEN': csrfResponse.data,
      },
    });

    // Check if login was successful
    if (loginResponse.status === 200) {
      // Redirect user to the desired page after successful login
      router.push('/dailyoffers');
    } else {
      // Handle unsuccessful login
      await showToast("Either the username or password is incorrect.");
    }
  } catch (error) {
    // Handle error
    await showToast("Server error.");
  }
};

karu

2 years ago

Level 1

SOLVED i changed to

email: email.value,
password: password.value

Please or to participate in this conversation.