Vuejs / Vue-auth Token is removed from localStorage in IE and Edge works in Chrome and FF

Question

Using VUE 2 and the plugin vue-auth ( https://github.com/websanova ). For whatever reason in IE and Edge the auth token is removed from localStorage on page refresh however in Chrome, FF everything just works and the token isn't removed.

I have been developing in chrome and am approaching a product launch. Was testing in other browsers and then got hit with this near the end of the development phase. Using their docs i am basically setting it up without any real changes.

Vue.use(require('@websanova/vue-auth'), {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  refreshData: {enabled: false},
});

Vue.auth.login({
        method: 'post',
        data: {email: payload.email, password: payload.password, rememberMe: true},
      }).catch(error => {
        console.log('error happened');
        console.log(error);
      })

Open IE, go to page, login, view localStorage default_auth_token is present. Hit F5 User gets logged out. Vuew localStorage and default_auth_token is gone.

Exactly the same in IE.

I am not doing anything custom with their plugin other then disabling the refesh token option since we don't use them.

I know this might be a long shot looking for a fix here but i have already tried using the github issues ( https://github.com/websanova/vue-auth/issues/309 ) to no avail.

Answer 1

I… HATE… IE…

If an cookie has a domain of localhost (doesn't have three dot domain, such as foo.bar.com ) then IE and Edge just let it fall through without an error. Cookie is not saved and you have no idea why.

function setCookie (name, value, timeOffset) {
  var domain = this.options.cookieDomain();
  var expires = (new Date((new Date()).getTime() + timeOffset)).toUTCString();
  if (domain === 'localhost'){
    document.cookie = name + '=' + value + '; Expires=' + expires + ';Path=/;';
  } else {
    document.cookie = name + '=' + value + '; Expires=' + expires + ';Path=/; Domain=' + domain + ';';
  }  
}

This took me all day to trace through this plugin but now I actually understand how it all works. I am normally a backend python developer so this was enlightening.