Nuxt Auth Module - save JWT in Vuex store

Question

The login/logout/middleware etc themselves work, but I don't seem to have control over the token. I'm trying to save JWT in Vuex store after logging in, but the token is only saved in a cookie and localStorage. From documentation I understand that support for auth in Vuex is added automatically. I didn't define tokenRequired and tokenType in config as according to documentation they are needed for cookie based flow (also adding them did not change anything).

nuxt.config.js

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
],
axios: {
    baseURL: 'https://api.example.com/'
},
router: {
    middleware: ['auth']
},
auth: {
    strategies: {
        local: {
            endpoints: {
                login: { url: 'login', method: 'post', propertyName: 'token' },
                logout: { url: 'logout', method: 'post' },
                user: false
            }
        }
    },
    redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/'
    }
},

login function

await this.$axios.post('authenticate', {
    email: this.email,
    password: this.password
}).then(response => {
    if (response.success === 'true') {
        this.$auth.setUserToken(response.token)
    } else {
        //alert invalid login
    }
}).catch(error => {
    //alert server error
});

Now when I successfully log in and look at $auth.$state it returns

{ "user": {}, "loggedIn": true, "strategy": "local" }

I expect the token to also be saved in $auth.

I also looked at a question with similar title, but their solution does not work for me, as I am using user: false.

Cray · Accepted Answer · 2019-06-21T18:40:25.037

I looked at auth-module's default.js file and tried the default values in my nuxt.config.js. After adding the default into my configuration it started working. So now I was able to disable the cookies and localStorage, while saving JWT into store only.

auth: {
    strategies: {
        local: {
            endpoints: {
                login: { url: 'login', method: 'post', propertyName: 'token' },
                logout: { url: 'logout', method: 'post' },
                user: false
            }
        }
    },
    redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/'
    },
    cookie: false,
    localStorage: false,
    token: {
        prefix: 'token.'
    },
},

And $auth.$state returns

{ "user": {}, "loggedIn": true, "strategy": "local", "token.local": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" }

If anyone has an explanation why the default value did not work and why I had to include it in my configuration, please let me know. I assume for some reason they have disabled the Vuex saving by default? Even though the documentation states what can be interpreted as by default token is saved in three locations.

Auth tokens are stored in various storage providers (cookie, localStorage, vuex)

Nuxt Auth Module - save JWT in Vuex store

1 Answers1