Problem implementing nuxtjs/auth using local strategy - api

Question

I'm following a nuxtjs tutorial and I'm having issues implementing nuxtjs/auth loginWith. It is pretty straightforward but I don't know why it doesn't work for me. tested with postman and the API responds with a token;
Everything looks okay, saves the token to cookies and local storage. Signup also works but it doesn't login. When I inspect with Vue dev tools, it shows login false and the user undefined when I'm expecting a user object. What could be wrong?
As it is, here's the method for Login.vue
async onLogin() {
try {
this.$auth.loginWith("local", {
data: {
email: this.email,
password: this.password
}
});
this.$router.push("/");
} catch (err) {
console.log(err);
}
}
here's also my nuxt.config.js
const URL = 'http://localhost:3000'
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: '/css/font-awesome/css/all.css' },
{ rel: 'stylesheet', href: '/css/default.css' }
]
},
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vue.js.org
'bootstrap-vue/nuxt',
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
'#nuxtjs/pwa',
'#nuxtjs/auth',
// Doc: https://github.com/nuxt/content
// '#nuxt/content',
],
/*
**Axios Module config
** See https://axios.nuxtjs.org/options
*/
axios: {
proxy: true,
baseURL: URL
},
proxy: {
"/api": URL
},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
extend(config, ctx) {}
},
auth: {
strategies: {
local: {
endpoints: {
login: {
url: "/api/auth/login",
method: "post",
propertyName: "token"
},
user: {
url: "/api/auth/user",
method: "get",
propertyName: "token"
},
logout: true
}
}
}
}
};

Answer 1

Try this:
auth: {
strategies: {
local: {
endpoints: {
login: {
url: "/api/auth/login",
method: "post",
propertyName: "data.token"
},
user: {
url: "/api/auth/user",
method: "get",
propertyName: "data.user"
},
logout: true
}
}
}
}
As the response from the api is received inside data, when axios is used.

Answer 2

Okay Somehow, it only updates the after I refresh the entire browser. I thought the Hot reloading would suffice but it works. this is my auth strategies setup
auth: {
strategies: {
local: {
endpoints: {
login: {
url: "/api/auth/login",
method: "post",
propertyName: "data.token"
},
user: {
url: "/api/auth/user",
method: "get",
propertyName: "data.user"
},
logout: true
}
}
}
}
Thanks to all that commented. It has helped my confidence and problem solving ability.