Nuxt Auth middleware making empty request to the user endpoint

Question

everyone. I'm trying to build a login module. I am using Nuxt auth to handle my login workflow and using flask for my RestAPI. I have set up the auth options in my nuxt.config.js as specified in the docs and adapting the urls to my flask API as seen below:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'post' },
          user: { url: '/users/username/', method: 'post', propertyName: 'User' }
        },
        // tokenRequired: true,
        // tokenType: 'bearer'
        // autoFetchUser: true
      }
    }
  }

This here is my login component:

<template>
  <div>
    <form @submit.prevent="userLogin">
      <div>
        <label>Username</label>
        <input type="text" v-model="login.username" />
      </div>
      <div>
        <label>Password</label>
        <input type="text" v-model="login.password" />
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      login: {
        username: 'newUser27',
        password: 'ninjaTurtles1!'
      }
    }
  },
  methods: {
    async userLogin() {
      try {

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

        console.log(response)
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

Now, the problem I am having is that when I hit on the login button to call submit the form and call my login function, the call to the login rout is successful, the request contains the user name and password from the form, and I get a response back. As shown in the pictures:

Request body and Request response

However, the call the user endpoint fails because the request body is empty, thus the server cant handle the request as seen in the picture below: Empty request body in call to user endpoint.

I guess my question is if I had some kind of misconfiguration that is causing the request body to the user endpoint to be empty, thus failing to long in my user and keeping this.$auth.loggedIn and this.$auth.user false.

What I've tried to far:

• I tried switching the request in my API to a Post to see if that made any diference, as you can see in the picture above, it did not. Both get and post request have an empty body when they reach the API.
• I have tried setting the propertyName to false in the user entpoint. As mentioned here . Still get the same issue.
• I have tried using the this.$auth.fetchUser() method from my login fucntion in the componen, right after let response = await this.$auth.loginWith('local', { data: this.login }) . As recommended in this answer r. Still get the same issue.

Any recommendation, or help would be greatly appreciated.

Answer 1

Please set get request nuxt.config and also api endpoint.Thanks

 user: { url: '/users/username/', method: 'get', propertyName: 'User' }'

Answer 2

According login endpoint, auth must receive 'token' propertyName, but what showed in your response screenshot you received 'auth' property as response, you should change your backend to return token property directly (not nested property) or change your login endpoint propertyName , you can check token set correctly by call

console.log( this.$auth.getToken('local') );