Auth state is not working reactively

[suleymangezsat]

Version

module: nuxt:

Nuxt configuration

mode:

• [x] universal
• [ ] spa

Nuxt configuration

What is expected?

When $store.state.auth.busy is changed, component should be rerendered according to new value of busy.

What is actually happening?

$store.state.auth.busy is changing but my component's computed property which is listening busy value not being notified about the change.

Steps to reproduce

• Add computed property listening vuex state : loading(){ return this.$store.state.auth.busy; }
• Bind this computed property into your html : <p>Loading value is {{loading}}</p>
• Trigger authentication by calling loginWith(..)
• Nothing will be changed and component is not being rerendered after loginWith done.

  Checklist

• [x] I have tested with the latest Nuxt version and the issue still occurs
• [x] I have tested with the latest module version and the issue still occurs
• [x] I have searched the issue tracker and this issue hasn't been reported yet

[derHodrig]

I think my question is related to that. isLoggedIn and user is also not fully updated

https://github.com/nuxt-community/auth-module/issues/1052

[derHodrig]

May also align with

https://github.com/nuxt-community/auth-module/issues/1059

[jumptrnr]

I think my question is related to that. isLoggedIn and user is also not fully updated

1052

am seeing that too.

[vpekarek]

The error is still on. There is no solution? My configuration is:

axios: {
    proxy: true,
    headers: {
      common: {
        Accept: 'application/json, text/plain, */*',
        'Access-Control-Allow-Origin': '*',
      },
    },
  },
  proxy: {
    '/api/': {
      target: process.env.PROXY_URL,
      pathRewrite: { '^/api/': '/' },
      secure: false,
      changeOrigin: true,
      logLevel: 'debug',
    },
  },
auth: {
    plugins: [ { src: '~/plugins/axios', ssr: true },],
    redirect: {
      login: '/login',
      logout: false,
      callback: '/user/feed',
      home: false,
    },
    //refirect: false,
    strategies: {
      cookie: {
        cookie: {
          name: 'XSRF-TOKEN',
        },
        user: {
          property: '',
        },
        endpoints: {
          csrf: { url: '/api/sanctum/csrf-cookie' },
          login: { url: '/api/login', method: 'post' },
          logout: { url: '/api/logout', method: 'post' },
          user: { url: '/api/me', method: 'get' },
        },
        tokenRequired: false,
        tokenType: false,
      },
    },
  },

and

async nuxtServerInit({ state, commit }: any, { req, $auth }: any) {
    let auth = null
    if (req.headers.cookie) {
      // cookie found
      try {
        // check data user login with cookie
        const data = await (<any>this).$axios.get('/api/me');
        // server return the data is cookie valid loggedIn is true

        auth = { data: data.data } // set the data auth
      } catch (err) {
        // No valid cookie found
        auth = null
      }
    }

    console.log('store state', state);
    console.log('before check', auth?.data);
    if (auth && auth.data && auth.data.id > 0) {
      console.log('after check', auth.data);
      htis.$auth.setUser(auth.data);
      state.auth.user = auth.data;
      state.auth.loggedIn = true;

      console.log('index store auth - user should be logged in:', this.$auth.loggedIn);
    }
  },

The console shows, that user is logged in. The data returned from axios is valid user, and everything looks good. But when hitting F5, the first loaded state is "not logged", so I am redirected to login page and then back (or to my logged-in page)

It is a real problem, because when I come back from payment gate, or some other website, I should be logged in on server.

[derHodrig]

Any progress from you? I am about to implement this module into a production app... I do not know if I really should do that.

[johnymanuelli]

Same problem, any solutions ?

[davidurco]

Problem here is that when auth store is being initialized, it only contains user and loggedIn properties and only those are reactive. All other properties like busy, strategy, redirect are not reactive and will not be updated in UI.

// Auth class constructor
const initialState = { user: null, loggedIn: false };
const storage = new Storage(ctx, { ...options, ...{ initialState } });

// Auth class _initState
const storeModule = {
  namespaced: true,
  state: () => this.options.initialState, // only properties defined upfront are reactive, even though Vue.set is used in SET mutation
  mutations: {
    SET(state, payload) {
      Vue__default["default"].set(state, payload.key, payload.value);
    }
  }
};

We should have the ability to extend initialState during store init!