how to post using a token in rest-auth with axios? POST http://localhost:8000/rest-auth/password/change/ 401 (Unauthorized)

Question

This is my code in vue,

resetPOST(){
    var formData = new FormData();
    formData.append('old_password', this.oldPassword);
    formData.append('new_password1', this.password1);
    formData.append('new_password2', this.password2);
    axios.post('http://localhost:8000/rest-auth/password/change/',
      {headers: { 'Authorization' :  this.token },
      data: {
        old_password: this.oldPassword,
        new_password1: this.password1,
        new_password2: this.password2
      }
    })
},

where the variable 'token' has a value like that : bbf957d27925a860f8c678546cf0425dbf7ddf98

I do not understand why I get this error, if I try the back part I enter the old password, and the two new passwords and it works. For some reason I it isn't taking the token parameter.

Thanks in advance

Answer 1

You are missing the Bearer. Most of the frameworks by default require you to send the authorization in the following format: Bearer <token>.

If you changed the Bearer word to another you should use that one but if you left it to as default in django-rest-auth you have to use the following:

axios.post('http://localhost:8000/rest-auth/password/change/',
      {headers: { 'Authorization' :  `Bearer ${this.token}` },
      data: {
        old_password: this.oldPassword,
        new_password1: this.password1,
        new_password2: this.password2
      }
    })

Answer 2

I had a similar issue. I realized I was using the same axios instance for users logged into the app which meant using an authentication token. Of course if you are resetting your password you do not have authentication (and therefore a token). Use a different axios instance for your reset password like this:

const instance = axios.create({
    baseURL: Store.state.endpoints.baseUrl,
    headers: {
        'Content-Type': 'application/json'
    },
    // xhrFields: {
    //   withCredentials: true
    // },
    xsrfCookieName:"csrftoken",
    xsrfHeaderName:'X-CSRFToken'
    })
    return instance;
}

Notice there is no auth token and credential are commented out (could probably set to false too). This worked for me.