Auth.register storing in sessionStoage instead of localStorage despite staySignedIn: true

[darkylmnx]

I have a weird issue, it really took me sometime to figure this behaviour.

On registration me users would be logged in but logout after leaving the tab, while on "login" they would stay signed in as usual.

It seem's when using "storage" value on store option, which is the default value, on .login() the staySignedIn: true works and saves in the localStorage, but on .register() it doesn't work, and stores in the "sessionStorage' instead.

I have to manuelly set expiry to false, which isn't the expected behaviour:

Vue.auth.register({ data })
  .then((res) => {
    Vue.auth.token(null, Vue.auth.token(), false);
    commit('update', res.data.data); // this basically just does Vue.auth.user(res.data.data)
    router.push({ name: 'home' });
  });

Why is the behaviour like that?

knowing my config is:

loginData: {
    url: '/login',
    method: 'POST',
    redirect: false,
    fetchUser: false,
    staySignedIn: true,
  },
  registerData: {
    url: '/register',
    method: 'POST',
    redirect: false,
    autoLogin: false,
    staySignedIn: true,
  },

There isn't any staySignedIn: true on register in the docs but that's how I set the thing hoping it would work

[websanova]

Hmm, strange, should be working.

https://vue-auth.websanova.com/

That is exactly from the demo code working there, seems ok.

How are you making your register call, are you sure it's not being overridden?

[darkylmnx]

100% sure nothing is overriding, to actually see that was the problem, I had to do a "blank" project.
In my case, my API sends the auth token on register with the user data as response, the plugin takes the token in account but sets in on sessionStorage instead of localStorage, but on login everything is fine.

Here's a video.
https://www.loom.com/share/934608ebbfe244b492c01d95f1907202

[websanova]

show your register code....

[darkylmnx]

It was in the initial message with one additionnal line, I use it in a Vuex action:

register({ commit }, data) {
    return Vue.auth.register({ data })
      .then((res) => {
        // Vue.auth.token(null, Vue.auth.token(), false);
        commit('update', res.data.data);
        router.push({ name: 'home' });
      });
  },

PS: I use axios that's why it's data and not body

[websanova]

Right, but what's in your data that you are passing to the register call?

Also did you try a call directly with to $auth.register and see what happens.

Some basic debugging would help ;-)

[darkylmnx]

Well as the previous code shows, it passes an object with a data key holding the payload passed to axios (so basically only the register payload: firstname, lastname, email, password).
As for the $auth.register, I don't how this is relevant here + there's actually no access to an instance context in Vuex (which is the whole point of Vuex since it's suppose to be shared accross multiple instances).

Despite that, I went along even if, I don't see how relevant Vue.auth.register would be different from this.$auth.register, and as expected, the following code gave the same result:

this.$auth.register({ data: this.user })
        .then((res) => this.$store.commit('auth/update', res.data.data))

Event tried without any update to the store and same thing goes on, stores in sessionStorage instead of localStorage but only on the register method.

Some basic debugging would help ;-)

I don't see what you mean by that here. What would you like?

[darkylmnx]

Well, came to the bottom of it:
in

vue-auth/src/auth.js

Line 192 in 8be7a27

__token.set.call(__auth, null, token, (__token.get.call(__auth, __auth.options.staySignedInKey) ? false : true));

you check if there's a "staySignedIn" value to set the expiration, but the thing is, in the .register you actually never set this value.

While in .login you set this value before doing any check

vue-auth/src/auth.js

Line 574 in 8be7a27

_setStaySignedIn(data.staySignedIn);

So basically, in the interceptor you always set token expires to "true" because in the .register() your never set anything like in the .login().

[websanova]

Wait, just realized you have autoLogin set to false, so you are registering and sending back the token/user data right away?

[websanova]

Ok, just did a small update in 4.0.2, let's see if that does the trick.

And if you haven't updated to 4.x yet check the upgrade guide.

https://websanova.com/docs/vue-auth/upgrades/3x-4x

Just a couple minor tweaks necessary to plugin setup/install.

[darkylmnx]

Wait, just realized you have autoLogin set to false, so you are registering and sending back the token/user data right away?

Yes, as shown in my code autoLogin is at false, and as said below

100% sure nothing is overriding, to actually see that was the problem, I had to do a "blank" project.
In my case, my API sends the auth token on register with the user data as response, the plugin takes the token in account but sets in on sessionStorage instead of localStorage, but on login everything is fine.

My API sends the auth token on register with the user data as response, indeed.
My project doesn't use Vue 3, and aims to work on IE 11, will version 4 be ok for this use-case?

[websanova]

https://websanova.com/docs/vue-auth/upgrades/3x-4x#default-is-for-vue-3-version

https://websanova.com/docs/vue-auth/guides/startup#vue-2

[websanova]

Closing due to inactivity