<p>I have a frontend login form that sends a request to Craft's own <code>actions/users/login</code> action. I've used this same process in another project and it works there, but not here, and I can't figure out what might be different.</p>

<p>After entering username and password to my form and submitting it, I get the 400 Bad Request error page with "Unable to verify your data submission." When I look at the login request in the browser's network tab I can see it has a CSRF value.</p>

<p>One of the weirdest things about this is that <em>sometimes</em> I can click the "back" button and voila, I will be logged in! I haven't been able to tell what's different when I sometimes get a 200 status and other times where I get a "cancelled" status. No matter what the status is, I always get that "Unable to verify your data submission" error page.</p>

<p>Here is my frontend login method:</p>

<pre class="lang-js prettyprint-override"><code>login() {
  if (!this.loginName || !this.password) {
    this.error = "Enter a username and/or password";

    return;
  }

  const config = {
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  };

  const data = qs.stringify({
    loginName:  this.loginName,
    password:   this.password,
    rememberMe: this.rememberMe
  });

  axios
    .post("/actions/users/login", data, config)
    .then(response =&gt; {
      console.log(response)
      if (response.data.errorCode === "invalid_credentials") {
        this.loggingIn = false;
        this.error = response.data.error;

        return;
      }

      if (response.data.success) {
        console.log(response);
      }
    })
    .catch(console.error);
}
</code></pre>

<p>My axios utility:</p>

<pre class="lang-js prettyprint-override"><code>import axios from 'axios';

export default axios.create({
  headers: {
    'X-CSRF-TOKEN': window.csrfTokenValue
  }
});
</code></pre>

<p>And how I am attaching CSRF stuff to the <code>window</code> in my main template:</p>

<pre><code>&lt;script&gt;
    window.timezone = "{{ craft.app.timezone }}";
    window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
    window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";
&lt;/script&gt;
</code></pre>

<p>I'm at my wit's end with this and am unable to figure out how to troubleshoot this further...</p>

CC BY-SA 4.0
2020-02-10T04:26:23.437Z
Do you need to `qs.stringify` your data? Seems like Axios knows how to manage an object as POST data… I'd also consider setting the [`X-Requested-With` header](https://github.com/yiisoft/yii2/blob/master/framework/web/Request.php#L471-L482), and a proper [`Accepts` header](https://github.com/craftcms/cms/blob/master/src/web/Request.php#L993-L1001)!
August Miller
CC BY-SA 4.0
2020-02-10T11:24:13.453Z
I think the data needs to be stringified, but I'm not 100% sure I guess. Interestingly when I make the request without using stringify I get a 400 status as a response. Every other time--except when it randomly gives me the error AND a 200 status--I get `Cancelled`. Adding `'X-Requested-With': 'XMLHttpRequest'` and `'Accept': 'application/json'` to my headers object doesn't change the behavior at all :(
Steven Thate
<login><frontend-form><request><csrf>
What's left to troubleshoot this quirky "Unable to verify your data submission" behavior?
# What's left to troubleshoot this quirky "Unable to verify your data submission" behavior?

(Asked by: username_0 on 2020-02-10)

I have a frontend login form that sends a request to Craft's own actions/users/login action. I've used this same process in another project and it works there, but not here, and I can't figure out what might be different.
After entering username and password to my form and submitting it, I get the 400 Bad Request error page with "Unable to verify your data submission." When I look at the login request in the browser's network tab I can see it has a CSRF value.
One of the weirdest things about this is that sometimes I can click the "back" button and voila, I will be logged in! I haven't been able to tell what's different when I sometimes get a 200 status and other times where I get a "cancelled" status. No matter what the status is, I always get that "Unable to verify your data submission" error page.
Here is my frontend login method:
login() {
  if (!this.loginName || !this.password) {
    this.error = "Enter a username and/or password";

    return;
  }

  const config = {
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  };

  const data = qs.stringify({
    loginName:  this.loginName,
    password:   this.password,
    rememberMe: this.rememberMe
  });

  axios
    .post("/actions/users/login", data, config)
    .then(response => {
      console.log(response)
      if (response.data.errorCode === "invalid_credentials") {
        this.loggingIn = false;
        this.error = response.data.error;

        return;
      }

      if (response.data.success) {
        console.log(response);
      }
    })
    .catch(console.error);
}

My axios utility:
import axios from 'axios';

export default axios.create({
  headers: {
    'X-CSRF-TOKEN': window.csrfTokenValue
  }
});

And how I am attaching CSRF stuff to the window in my main template:


I'm at my wit's end with this and am unable to figure out how to troubleshoot this further...

**Tags:** login, frontend-form, request, csrf
> **Comments:**
> **username_1**: Do you need to `qs.stringify` your data? Seems like Axios knows how to manage an object as POST data… I'd also consider setting the [`X-Requested-With` header](https://github.com/yiisoft/yii2/blob/master/framework/web/Request.php#L471-L482), and a proper [`Accepts` header](https://github.com/craftcms/cms/blob/master/src/web/Request.php#L993-L1001)!  
> **username_0**: I think the data needs to be stringified, but I'm not 100% sure I guess. Interestingly when I make the request without using stringify I get a 400 status as a response. Every other time--except when it randomly gives me the error AND a 200 status--I get `Cancelled`. Adding `'X-Requested-With': 'XMLHttpRequest'` and `'Accept': 'application/json'` to my headers object doesn't change the behavior at all :(  

---

## 0 answers

