Frontend form key is being overwritten

Question

I am currently having issues with frontend forms where the form keys are somehow being overwritten and displaying incorrect form keys. I am currently debugging this issue on the customer login form.

This is snapshot of the code at login.phtml, that i setup to see what the formkey value is.

  <?php
      $retrievedKey =  $block->getBlockHtml('formkey');
      echo $retrievedKey ;
      // i made a breakpoint and inspected $retrievedKey, it returned a html output <input> ... </input> with a form key value of, let's name it 'keyA'.
  ?>

ok so now after i continued the code execution, it renders the page successfully.

And now i go to inspect the form key hidden input on my chrome browser, however, it prints out a totally different form key from 'KeyA'. Let's name this new form key 'KeyB'.

Now i try and do a login, and submit the form. I inspected the request that is sent over, and it indeed passes a form key variable of value that reflects 'KeyB'.

I have placed some breakpoints at 'validate' function of

Magento\Framework\Data\Form\FormKey\Validator

This is my comparison checker. By right, $formKey and $a should match. However, it does not.

 $formKey = $request->getParam('form_key', null); // outputs 'KeyB'
 $a = $this->_formKey->getFormKey(); // outputs 'KeyA'

Thus, the validation fails, and it redirects me back to the login page with no error message what so ever.

Things to note:

1. This behavior only arises in chrome and Microsoft EDGE.
2. Firefox works fine, no overwriting is happening
3. The form key that is printed out seems to be changing on each refresh. $retrievedKey doesn't refresh each time though
   

Things i have tried:

1. setup:upgrade and setup:static-content:deploy
2. cleared var/cache and var/generation
3. cleared browser cache and incognito mode

I just can't my head around why the form-key is being overwritten?

Any help or hints on why this is happening would be great. Thanks for reading

Update - I've done some debugging and i figured that page-cache.js is causing the issue by setting the form key again. This is due to the fact that, it is checking my cookies if a 'form_key' cookie is set, if not, create a new form key and save to cookies. The problem is, it is not able to save the cookie, that is why it keeps creating new form keys.

Update - I have solved the issue. This is due to cookie domain issues. Thanks

Answer 1

For my case, I am using localhost in URL so the following solution helps me.

If you are using localhost in your URL in the local computer, so then replace it with IP.

I mean if your URL is

http://localhost/Magento2/

replace it with

http://127.0.0.1/Magento2/

Hope it will work for Chrome & Edge and Firefox also.

Answer 2

I've just spent the best part of a day trying to figure out why Magento's JS couldn't read my form_key cookie.

In my case it was because I had Apache configured to always force cookies to be HttpOnly - which javascript libraries simply cannot read. Disabling HttpOnly in my Apache config sorted this (note this is different to the HttpOnly option in Magento admin, which appears to leave the form_key cookie alone even when set to 'Yes').