Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-10T04:26:23.437Z
Comments.Text: 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)!
Comments.UserDisplayName: August Miller
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-10T11:24:13.453Z
Comments.Text: 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 :(
Comments.UserDisplayName: Steven Thate
Tags: <login><frontend-form><request><csrf>
Title: What's left to troubleshoot this quirky "Unable to verify your data submission" behavior?
ThreadText: # 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:
  
  ```js
  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:
  
  ```js
  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:
  
  ```
  <script>
      window.timezone = "{{ craft.app.timezone }}";
      window.csrfTokenName = "{{ craft.app.config.general.csrfTokenName|e('js') }}";
      window.csrfTokenValue = "{{ craft.app.request.csrfToken|e('js') }}";
  </script>
  
  ```
  
  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
  
  