Auth-module: not respecting header settings, sending only json on local login scheme

[wedwardbeck]

Version

v4.9.0

Reproduction link

https://github.com/wedwardbeck/nuxt-auth-vs-axios-form-issue

Steps to reproduce

In reference to issue 323 (https://github.com/nuxt-community/auth-module/issues/323) and following the direction in issue 41 (https://github.com/nuxt-community/auth-module/issues/41) to send login to my API as form data, not json.

Using this change, the header content type shows "application/x-www-form-urlencoded" but the Form Data shows malformed json data. This results in a 422 error in return from the API. When changing the method to use axios, the API call works fine and shows the Form Data as expected in DevTools. I've verified via Postman and Insomnia as well, so the issue seems to be with nuxt-auth, and how it sends the data.

Using nuxt-auth, the request headers says:
Content-Type: application/x-www-form-urlencoded

The Form Data shows:
{"username":"[email protected]","password":"notreallyme"}:

Using axios headers say:
Content-Type: application/x-www-form-urlencoded

The Form Data shows:
username: [email protected]
password: notreallyme

What is expected ?

Expected to have form data sent when header config is "application/x-www-form-urlencoded".

Request should show:
Form Data
username: [email protected]
password: notreallyme

What is actually happening?

Request sends malformed json in body when header Content Type is set to "application/x-www-form-urlencoded". Field names are quoted and an extra colon is after json object (unsure either should be expected).

The Form Data shows:
{"username":"[email protected]","password":"notreallyme"}:

Default settings w/json body show (to show difference from result above):
The Form Data shows:
{username: "[email protected]",password: "notreallyme"}

_{This bug report is available on Nuxt community (#c548)}

[ionut-tanasa]

I just literally stumbled upon this issue. I guess it's an axios request configuration thing.

Assuming:

data: {
    username: '[email protected]'
    password: 'notreallyme'
},

import qs from 'query-string';
this.$auth.loginWith('local', { data: qs.stringify(this.data) })

axios' request config

[wedwardbeck]

The current workaround is to just use the axios call and not the auth
module. I haven't worked on updating the auth store as it would be done in
the auth module, but am hoping that can be done so reverting to use auth
fully once fixed will not be a chore.

On Wed, Apr 22, 2020 at 4:21 AM Ionut Tanasa [e-mail]
wrote:

I just literally stumbled upon this issue.

Any workarounds in the meanwhile?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt-community/auth-module/issues/616#issuecomment-617660622,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AETQA5JEGFTRXX4PJ24HHRTRN2ZJ7ANCNFSM4MI6VU4A
.

[JoaoPedroAS51]

Hi @wedwardbeck! I tested your reproduction repo. You can simply pass the FormData to loginWith as you did in axios.

const form = new FormData()

form.append("username", this.username)
form.append("password", this.password)

await this.$auth.loginWith('local', {
  data: form
})

[wedwardbeck]

@JoaoPedroAS51 thank you! That was the fix to get working - sorry I thought I had tried that variation.
Thanks again for the help.