How to retrieve token property in Nuxt Auth

Question

I am developing my first NuxtJs application with the following technologies.

For Backend APIs Laravel 7.3 (Passport)
Nuxt v2.15.2
Rendering mode: Universal (SSR / SSG)
NuxtAxios v5.13.1
NuxtAuth v5

My login API response is as follows:

{
    "status": true,
    "code": 200,
    "data": [
        {
            "id": 3,
            "nick_name": "johndoe",
            "full_name": "John Doe",
            "email": "[email protected]",
            "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiNWE5MjFmMGMyMDBlZjkxYWQxY2QyNGI3NDEyYmI1OWY4ZGEyZjg2Yzc0Y2M1ZDAwOTRhOWIyZTU4MGY3MmZmODRmNGI5N2QwYjJmYjA5NjMiLCJpYXQiOjE2MTQwMzE1MDMsIm5iZiI6MTYxNDAzMTUwMywiZXhwIjoxNjQ1NTY3NTAzLCJzdWIiOiIzIiwic2NvcGVzIjpbXX0.clQslt3CdTLoVDHzQFwQyrRLjzjTOSeipCyQAl07gzmwXFKr542hR3MUCRr8CTjueWDTNbwd-iKkQztvB7Z-0N1zaptq67UEwj3iPEEtnbV2gMOSlVdAUu0q4OPJKYI9RwJKHnK-q1bTCOUOitfLrnYOq3Lb1T8B-3en5_S7xb9ln-iOtwVc3vW1OnEbEIsn3ELeTro1zQ9IKdlHhQ50CnGU45LipzKeadtVGkm9qm467XOqlVPZdulMJTCkvunETo23hQsTsn_Fxy0IYLUA0v-_C-ARB0N672fAuHF2a8MIYHv066Omm-6WsPrCNtfOkoIgyuMLl0gaua04IJfHrDbh7CJSEUqootKTsIVvFG4OjqR3yDN2PdhjJkPYWNTMeLbKV3ewSsjCS1aMOtXYvhrVFjrunn5M74pDBzn3kW9VMFIh2BbIfUDO_ziDrsn7KAVyOm-p7gdBN_gVKcl_Hx9x4EagixWRL7GGUqEZ2AbxRkpIO4HKwqMm7WxKatSt5hkmPZ6Zt-jfMTfrj7KuF6WhhjCh1TOFJSy9BTqp9_a2eKP-YL2M6JIJXFDHwovToC96JBptbumPvB2i2KDU_XoXF2WFx_I4iNJpZVFN0u12MeyMbXlnpf4X2t79_I7QklxSfZ5LgsOdsnt9dAm9QBbSvf8AdZZNOS4p59DuQls",
        }
    ],
    "error": null,
    "errors": null
}

nuxt.config.js

auth: {
    strategies: {
      local: {
        token: {
          // property: 'access_token'
          // property: 'data[0].access_token'
          // property: 'data.data[0].access_token'
          property: false
        },
        user: {
          property: 'data',
          autoFetch: true
        },
        endpoints: {
          login: { url: '/en/signin', method: 'post' },
          logout: { url: '/user/logout', method: 'get' },
          user: { url: '/en/user/profile', method: 'get' },
        }
      }
    }
  },

Login.vue

export default {
  data() {
      return {
        login: {
          email: '[email protected]',
          password: 'welcome'
        }
      }
    },
    methods: {
      async userLogin() {
        try {
          let response = await this.$auth.loginWith('local', { data: this.login })
          console.log(response)
        } catch (err) {
          console.log(err)
        }
      }
    }
}

When I am setting local.property: false, auth._token.local is being set as complete json object instead of "access_token" and then the second hit goes to '/en/user/profile' with Unauthenticated Request result.

bar5um bar5um · Accepted Answer · 2021-02-24T18:29:52

I think an alternate way would be to set local.token.required:false , and then set the user token after your login attempt was successful. Something like this:

nuxt.config.js

auth: {
    strategies: {
      local: {
        token: {
          required: false
        },
        user: {
          property: 'data',
          autoFetch: true
        },
        endpoints: {
          login: { url: '/en/signin', method: 'post' },
          logout: { url: '/user/logout', method: 'get' },
          user: { url: '/en/user/profile', method: 'get' },
        }
      }
    }
  },

Login.vue

     methods: {
              async userLogin() {
                try {
                  let response = await this.$auth.loginWith('local', { data: this.login })
                  .then((response)=>{
  this.$auth.setUserToken(response.data[0].access_token,'refreshToken');
                  });
                  console.log(response);
                } catch (err) {
                  console.log(err)
                }
              }
            }

How to retrieve token property in Nuxt Auth

1 Answers