CSRF tokens in multiple components on first cached request

Using CSRF tokens in multiple components on the first cached request can result in CSRF requests failing. This is because the Sprig components are loaded asynchronously, without a session cookie existing for the user, as reported in https://github.com/putyourlightson/craft-sprig/issues/201 and related to https://github.com/putyourlightson/craft-blitz/issues/329.

The current suggested workaround is to use a dummy init component that on page load will force a session cookie to be generated and will then refresh all other components on the page.

{# _components/init #} 

{% if sprig.isRequest %}
    {{ csrfInput() }}
    <script>
        for (const component of htmx.findAll('.sprig-component')) {
            htmx.trigger(component, 'refresh');
        }
    </script>
{% endif %}

{# Main page #} 

{{ sprig('_components/init', {}, { 's-trigger': 'load' }) }}

{{ sprig('_components/form') }}
{{ sprig('_components/form') }}
{{ sprig('_components/form') }}

{{ sprig.script }}

This is a feature request for Sprig to add a convenience method for handling this use-case.

[bencroker]

Features are only added to new versions of the plugin, so you’ll have to update to get it.

[bencroker]

Released in version 2.4.0.