laravelvue.jssingle-page-applicationfortifylaravel-sanctum

Laravel Fortify SPA POST /logout 419 unknown status


I'm having a hard time dealing with sanctum and fortify, I'm using sanctum with fortify for Vue SPA authentication, when I login it works fine, When doing POST /sanctum/csrf-cookie a cookie is set on the client side, then i grab this cookie and send it with the request headers when doing POST /login to authenticate login, but this is the only thing that works so far, when i send request to POST /logout it says 419 unknown status csrf-token mismatch, even when grabbing the cookie and send it with the request headers again, if i send request to GET api/users/auth, it says 401 unauthorized with response unauthenticated, i've done all of the configuration for this to work, like configuring cors.php and setting paths, setting .env variables and configuring fortify.php and fortifyServiceProvider.php for SPA authentication.

Login

function getCookie(name) {
  const value = document.cookie
  const parts = value.split(name)
  if (parts.length === 2) {
    return parts.pop().split(';').shift()
  }
}

const login = async () => {
  error.value = null
  const payload = {
    email: email.value,
    password: password.value
  }

  axios.get('http://localhost:80/sanctum/csrf-cookie').then(() => {
    const csrfToken = getCookie('XSRF-TOKEN')

    axios
      .post('http://localhost:80/login', payload, {
        headers: {
          'X-XSRF-TOKEN': decodeURIComponent(csrfToken)
        },
        withCredentials: true
      })
      .then((response) => {
        if (response.data.error) {
          error.value = response.data.error
        } else {
          router.push('/')
        }
      })
  })
}

Logout

const logout = async () => {
  const csrfToken = getCookie('XSRF-TOKEN')
  axios
    .post('http://localhost:80/logout', {
      headers: {
        'X-XSRF-TOKEN': decodeURIComponent(csrfToken)
      },
      withCredentials: true
    })
    .then(router.push('/login'))
}

Solution

  • This may be a result of the way you get the XSRF-TOKEN cookie. in your login get request you get the cookie as such:

    const csrfToken = getCookie('XSRF-TOKEN=')
    

    However inside the logout function you get the cookie by this line of code:

    const csrfToken = getCookie('XSRF-TOKEN')
    

    I guess you may first need to check your authentication API then look back at your login and logout methods to check for inconsistencies through the authentication process. Good luck.