Rails form with multiple submit actions has invalid auth token (CSRF error)

Question

I have a rails form:

<%= form_with(model: activity, method: 'POST', url: retry_failed_post_path, class: 'px-4', data: { turbo: false }) do |form| %>
  <div class="grid grid-cols-1 gap-4">
    <%= form.hidden_field :id, value: activity.id %>
    <%= form.labeled_text_field :response, name: '', readonly: true, label: 'Response from...', value: 'Invalid or expired token' %>

    <% token_tag %>
    <div class="flex flex-row space-x-2 items-center">
      <%= form.submit 'Retry', class: 'btn btn-primary' %>
      <%= form.submit 'Remove from Queue', class: 'btn btn-primary btn-outline', formaction: remove_failed_post_path %>
      <div class="tooltip" data-tip="Failed posts are only resolved by trying to publish the content again or removing the post from the failed posts queue.">
        <%= iconhelper :info, size: '8' %>
      </div>
    </div>
  </div>
<% end %>

Resulting in the following HTML:

<form class="px-4" data-turbo="false" action="/failed/retry" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="puKpnE6rnoeUnrWco8f+lesCjygvjPn2A7e70Wz0ak8dirurzYYtE2JjqagneA7naJsszk2BEVF9QI7nd5YQwA==">
  <div class="grid grid-cols-1 gap-4">
    <input value="471386a9-c54e-4bd3-9a6d-c8392d130cd5" type="hidden" name="activity[id]">
    <div class="">
      <label class="field-label">
        <span class="field-label-span">Response from...</span>
      </label>
      <div class="field-input-wrapper">
        <input name="" readonly="readonly" value="Invalid or expired token" type="text" class="sa-field-input">
      </div>
    </div>

    <div class="flex flex-row space-x-2">
      <input type="submit" name="commit" value="Retry" class="btn btn-primary" data-disable-with="Retry">
      <input type="submit" name="commit" value="Remove" class="btn btn-primary btn-outline" formaction="/new/failed/remove" data-disable-with="Remove">
    </div>
  </div>
</form>

When using the first submit button my form submits fine, with no problems. However, when I submit using the second submit button (using the formation override) I receive an invalid auth token error. Can someone help explain why and how to fix it?

[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] ActionController::InvalidAuthenticityToken excluded from capture: DSN not set
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f]   
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f]   
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] actionpack (6.1.4) lib/action_controller/metal/request_forgery_protection.rb:211:in `handle_unverified_request'
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] actionpack (6.1.4) lib/action_controller/metal/request_forgery_protection.rb:243:in `handle_unverified_request'
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] actionpack (6.1.4) lib/action_controller/metal/request_forgery_protection.rb:238:in `verify_authenticity_token'
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] activesupport (6.1.4) lib/active_support/callbacks.rb:427:in `block in make_lambda'
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] activesupport (6.1.4) lib/active_support/callbacks.rb:198:in `block (2 levels) in halting'
[0ba3ef85-2fa4-474d-82d2-f3f03fc8046f] actionpack (6.1.4) lib/abstract_controller/callbacks.rb:34:in `block (2 levels) in <module:Callbacks>'

score 1 · Accepted Answer · answered Jan 27 '22 at 15:36

So, I was able to figure out what the problem was. I'm using Hotwire/Turbo, and having the data : { turbo: false } included on the form was removing all the AJAX bits -- ensuring the CSRF token wouldn't change/update based on the form action change...

So, resulting ERB/HTML:

<%= form_for(model: activity, builder: CustomBuilder, url: retry_failed_path, method: :POST, class: 'px-4') do |form| %>
  <div class="grid grid-cols-1 gap-4">
    <%= form.hidden_field :id, value: activity.id %>
    <%= form.labeled_text_field :response, name: '', readonly: true, label: 'Response from...', value: 'Invalid or expired token' %>

    <div class="flex flex-row space-x-2 items-center">
      <%= form.submit 'Retry', class: 'btn btn-primary' %>
      <%= form.button 'Remove', class: 'btn btn-primary btn-outline', formaction: remove_failed_path %>
      <div class="tooltip" data-tip="Failed posts are only resolved by trying to publish the content again or removing the post from the failed posts queue.">
        <%= iconhelper :info, size: '8' %>
      </div>
    </div>
  </div>
<% end %>

Rails form with multiple submit actions has invalid auth token (CSRF error)

1 Answers1