Frontend form key is being overwritten

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

MagentoFrameworkDataFormFormKeyValidator

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