xsrf-token cookie name should be renamed to XSRF-TOKEN to properly work with axios

[wfelipe99]

It's not a bug, so I didn't open a bug report on adonisjs/shield repo; I'm doing it because I think the maintainer can focus on real bugs instead of looking at a "unimportant" thing like that. I'm not a experienced developer and I'm just developing a hobby project. Sorry if I'm posting on the wrong section though.

That being said, I read that axios set and send cookies automatically when withCredentials: true, but I was struggling to make things work out even with everything well configured. Every time I tried to POST/GET a route protected with CSRF, I got an error saying that it was an invalid token. After a time, I discovered that the cookie was not being sent. Turns out that Adonis sets a cookie named xsrf-token and so axios can't get the cookie.

I think axios is case sensitive and its default value for xsrfCookieName is XSRF-TOKEN (accordingly to axios's documentation), hence axios was not sending the cookie.

Consequently, to things work out, I had to set xsrfCookieName: 'xsrf-token' in axios instance. Then, everything works as expected.

Like I said: it's not a bug, but a change like this I think can help people that is starting with Adonis and I think they'll struggle with that too if they are using axios.

[Mint-Joy]

All worked is ideal.
Need add axios interceptor, like

const axiosInstance = axios.create({
  baseURL: 'your_api_url',
  withCredentials: true
})

axiosInstance.interceptors.request.use(
  async function (config) {
    config.headers['x-xsrf-token'] = await getCookie('xsrf-token')
    return config
  }
)

further axios works by itself
no difficulties, everything works transparently.

[wfelipe99]

Hey, you don't need to intercept the request. If you set the axios config xsrfCookieName to xsrf-token axios will do all the things you're manually doing. So, it would be like that:

const axiosInstance = axios.create({
  baseURL: 'your_api_url',
  withCredentials: true,
  xsrfCookieName: 'xsrf-token'
})

So axios will do everything for you (get the cookie, send it, etc). I'll send a PR so it will be not need anymore.

[ashokgelal]

No need to do it per request, you can just change the default value: adonisjs/shield#22 (comment)

[thetutlage]

Can you please open a PR for same?

[Mint-Joy]

Whis code in client side for VueJs

import Vue from 'vue'
import axios from 'axios'
import { getCookie } from '../services/helper'

const axiosInstance = axios.create({
  baseURL: window.location.origin + '/api',
  withCredentials: true
})

axiosInstance.interceptors.request.use(
  async function (config) {
    config.headers['x-xsrf-token'] = await getCookie('xsrf-token')
    return config
  }
)

Vue.prototype.$axios = axiosInstance

export { axiosInstance }

or if use fetch for all js
file datawork.js

import { objIsEmpty } from "../service/helper"

async function getFetchData (uri, params = {}) {
    return await fetch(window.location.origin + uri, params)
}

function getCookie (name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ))
    return matches ? decodeURIComponent(matches[1]) : undefined
}

function getFetchParams (data = {}, method = 'POST') {
    let prepared = {
        mode: "cors", // no-cors, *cors, same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, *same-origin, omit
        headers: {
            "x-xsrf-token": getCookie('xsrf-token'),
            "Content-Type": "application/json"
        }
    }
    prepared.method = method
    if (!objIsEmpty(data)) {
        prepared.body = JSON.stringify(data)
    }
    return prepared
}

export { getCookie, getFetchData, getFetchParams }

and use

import { get } from 'svelte/store'
import { xAuth, xUser } from '../store'
import { objIsEmpty } from './helper'
import { getFetchParams, getFetchData } from './datawork'


async function sendLoginData (nickname, password) {
    const param = getFetchParams(
        {
            nickname: nickname,
            password: password
        }
    );
    const resultCheck = await getFetchData("/api/user/login", param);
    const apiRes = await resultCheck.json();


    processUser(apiRes)

    return apiRes
}

this is more for a cookbook for adonis clientside.
I am very weak in frontend development, and obviously there are better practices, I try to keep things simple and clear.

[wfelipe99]

@thetutlage Hey, here is the PR: adonisjs/shield#23
Thank you for reply and thank you for Adonis :)