NuxtJs login works but unauthorized 401

Question

I am using NuxtJs auth module to handle my authorization in the state. For the auth I wrote an express api which works.

I have following configuration in my nuxt.config.js:

  axios: {
    baseURL: 'http://localhost:4000/api'
  },

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/users/login', method: 'post', propertyName: 'data.token' },
          user: { url: '/users/me', method: 'get', propertyName: 'data' },
        },
      }
    }
  },

And in my login component I call the login route like this:

const { data } = await this.$auth.loginWith('local', {
  data: this.login
})

This call the /api/users/login route successfully (200) and after that calls the /api/users/me with an error saying

xhr.js:178 GET http://localhost:4000/api/users/me 401 (Unauthorized)

In postman I am calling the api route which returns the user like this*

> Get - localhost:4000/api/users/me
> 
> Authorization:
> 
> Type: Bearer Token Token: xxxx

Which returns the users data.

I read that nuxt auth module default the type to 'Bearer' but in my case it does not work.

The user login work but the second route which returns the user data does not work due to authorization. The Api is not inside the nuxtjs it is a different project written in Express.

user_8258598 · Answer

You can try this:

axios: {
baseURL: 'http://localhost:4000/api' },
auth: {
strategies: {
  local: {
    endpoints: {
      login: { url: '/users/login', method: 'post', propertyName: 'data.token' },
      user: { url: '/users/me', method: 'get', propertyName: 'data' },
    },
    tokenType: ''
  }
}

},

Setting tokenType to an empty string overrides the default "Bearer". Some server configurations may throw a 401.

NuxtJs login works but unauthorized 401

1 Answers