Autorefresh form key via AJAX calls

Author: jissereitsma

Controller/HtmlResult.php

@@ -4,11 +4,18 @@
 
 use Magento\Framework\App\Response\HttpInterface as HttpResponseInterface;
 use Magento\Framework\Controller\Result\Raw;
+use Magento\Framework\Data\Form\FormKey;
 
 class HtmlResult extends Raw
 {
+    public function __construct(
+        private readonly FormKey $formKey
+    ) {
+    }
+
     protected function render(HttpResponseInterface $response)
     {
+        $response->setHeader('X-Magento-Form-Key', $this->formKey->getFormKey());
         $response->setHeader('Content-Type', 'text/html');
 
         return parent::render($response);

view/base/templates/script/ajax-queue.phtml

@@ -93,14 +93,20 @@ if ($interval < 10) {
                 return;
             }
 
+            const formKey = Alpine.store('LokiComponents').formKey;
             await fetch('<?= $escaper->escapeUrl($componentUtil->getPostUrl(
-            )) ?>?form_key=' + LokiComponentFormKey + '&isAjax=true', {
+            )) ?>?form_key=' + formKey + '&isAjax=true', {
                 method: 'POST',
                 mode: 'same-origin',
                 headers: this.getPostHeaders(),
                 body: JSON.stringify(this.buildBody(requests))
             })
                 .then(async response => {
+                    const formKey = response.headers.get('x-magento-form-key');
+                    if (formKey) {
+                        Alpine.store('LokiComponents').formKey = formKey;
+                    }
+
                     const body = await response.text();
                     if (response.ok) {
                         return body;

view/base/templates/script/components-store.phtml

@@ -1,15 +1,23 @@
 <?php
 declare(strict_types=1);
 
-/** @version 2.4.1 */
-
+use Loki\Components\Factory\ViewModelFactory;
+use Loki\Components\Util\ComponentUtil;
+use Magento\Framework\Escaper;
 use Magento\Framework\View\Element\Template;
 
+/** @version 2.4.1 */
 /** @var Template $block */
+/** @var Escaper $escaper */
+/** @var ViewModelFactory $viewModelFactory */
+/** @var ComponentUtil $componentUtil */
+
+$componentUtil = $viewModelFactory->create(ComponentUtil::class);
 ?>
 <script>
     document.addEventListener('alpine:init', () => {
         Alpine.store('LokiComponents', {
+            formKey: '<?= $escaper->escapeJs($componentUtil->getFormKey()) ?>',
             components: {},
             getComponentIds() {
                 return Object.keys(this.components);