CSRF token is always invalid on localhost - Symfony 4 forms

Question

My form can never validate on localhost unless I deactivate my csrf field.

It works perfectly fine on prod.

I was thinking it could come from my config:

router.request_context.host: 'localhost:8000'
router.request_context.scheme: 'http'

But despite my numerous attempts, I can't figure out where it's coming from.

My userType.php is fairly basic:

class UserType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        // Remember username is email
        $builder
            ->add('firstName', TextType::class, array(
                'required' => true,
            ))
            ->add('lastName', TextType::class, array(
                'required' => true,
            ))
            ->add('email', EmailType::class, array(
                'required' => true,
            ))
            ->add('plainPassword', PasswordType::class, array(
                'required' => true,
            ))
            ->add('save', SubmitType::class, array('label' => 'Create Account'))
        ;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => User::class,
            // enable/disable CSRF protection for this form
            'csrf_protection' => true,
            // the name of the hidden HTML field that stores the token
            'csrf_field_name' => '_token',
            // an arbitrary string used to generate the value of the token
            // using a different string for each form improves its security
            'csrf_token_id'   => 'user_item'
        ));
    }
}

And my form in twig is very straightforward:

{{ form_start(form, {'attr': {'id': 'register'}}) }}
    <div class="panel panel-body registration-form">
        <div class="text-center">
            <img style="margin: 20px auto;" src="{{ asset('platform/images/icon-profile.svg') }}"/>
            <h5 class="content-group-lg">ACCOUNT CREATION</h5>
        </div>

        {% for message in app.flashes('error') %}
            <p class="alert alert-danger no-border"><strong>{{ message }}</strong></p>
        {% endfor %}

        <div class="row">
            <div class="col-md-12">
                <div class="form-group has-feedback">
                    {{ form_widget(form.email, {'attr': {'class': '', 'placeholder': "Your Email"}}) }}
                    {#<div class="form-control-feedback">#}
                    {#<i class="icon-mention text-muted"></i>#}
                    {#</div>#}
                    <small class="text-danger">{{ form_errors(form.email) }}</small>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group has-feedback">
                    {{ form_widget(form.firstName, {'attr': {'class': '', 'placeholder': "Your Fist Name"}}) }}
                    {#<div class="form-control-feedback">#}
                    {#<i class="icon-user-check text-muted"></i>#}
                    {#</div>#}
                    <small class="text-danger">{{ form_errors(form.firstName) }}</small>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group has-feedback">
                    {{ form_widget(form.lastName, {'attr': {'class': '', 'placeholder': "Your Last Name"}}) }}
                    {#<div class="form-control-feedback">#}
                    {#<i class="icon-user-check text-muted"></i>#}
                    {#</div>#}
                    <small class="text-danger">{{ form_errors(form.lastName) }}</small>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group has-feedback">
                    {{ form_widget(form.plainPassword, {'attr': {'class': '', 'placeholder': "Create Password"}}) }}
                    {#<div class="form-control-feedback">#}
                    {#<i class="icon-user-lock text-muted"></i>#}
                    {#</div>#}
                    <small class="text-danger">{{ form_errors(form.plainPassword) }}</small>
                </div>
            </div>
        </div>

        <div class="form-group help-block">
            <div class="checkbox">
                By clicking on "Create Account" you accept our
                <a href="{{ path('terms') }}">terms of service</a>
            </div>
        </div>

        <div class="text-right">
            {{ form_widget(form.save, {'attr': {'class': 'btn btn-block new-btn new-blue'}} ) }}
{#            <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response"/>#}
            {#<button name="form[save]" type="submit" class="btn bg-teal-400 btn-labeled btn-labeled-right ml-10"><b><i class="icon-plus3"></i></b> Create account</button>#}
        </div>
    </div>
    {{ form_end(form) }}

Since I'm using form_start and form_end my csrf token field is generated with the correct name.

I also tried with including the input manually:

Answer 1

Check if your sessions dir is writable, or maybe you're protecting cookies using HTTPS but on local you use HTTP.

From symfony blog:

The new default value of the cookie_secure option is null, which makes cookies secure when the request is using HTTPS and doesn't modify them when the request uses HTTP. The new behavior is a good balance between making your app "safe by default" and not breaking any existing app.

# config/packages/framework.yaml
framework:
    session:
        # improves the security of the cookies used for sessions
        cookie_secure: 'auto'