Authentication issues with django-webpack-loader with vuejs and django restframework and restauth

Question

I created a frontend with vue.js using vue cli and webpack and the backend using django restframework where I am also implementing social authentication for google using restauth. Before I used the django webpack, the login and logout would work fine and as expected. (I should mention that I was using tokenauthentication) in my settings.py, file I had both the sessionauthentication as well as tokenauthentication enabled in the restframework authentication possibilities. The two settings being enabled never caused any trouble. However, after using the django webpack loader to render the frontend vue files using django templates, I would continuously get an error that said my csrf token was not present. The login would work fine in this case if I removed the sessionauthentication option out of the settings.py file however.

Does anyone know why this is happening?

https://medium.com/@rodrigosmaniotto/integrating-django-and-vuejs-with-vue-cli-3-and-webpack-loader-145c3b98501a

I used the above blog to implement the webpack loader functionality

I removed the 'rest_framework.authentication.SessionAuthentication', line from my settings.py after using the django-webpack-loader and the issue was resolved

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
    'rest_framework.authtoken',
    'rest_framework.authentication.BasicAuthentication',
    'rest_framework.authentication.SessionAuthentication',
)
}

I basically changed it like below:

REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': (
    'rest_framework.authtoken'
    'rest_framework.authentication.BasicAuthentication',

)
}

Answer 1

as you are probably using axios, you need to include these two lines in your main.js

/* configure axios to forward the csrftoken back to Django on POST requests */
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.xsrfCookieName = 'csrftoken';