noahd1/csrf_controller.js

## csrf_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = {
    wait: Number
  }

  connect() {
    this.refresh = this.debounce(this.refreshNoBounce, this.waitValue || 500); // Default wait time of 500ms if not specified
  }

  debounce = (func, wait) => {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(this, args);
        }, wait);
    };
  }

  refreshNoBounce = () => {
    fetch('/refresh_csrf', {
      method: 'GET',
      credentials: 'include',
      headers: {
        'Accept': 'application/json'
      }
    })
    .then(response => response.json())
    .then(data => {
      document.querySelector('meta[name="csrf-token"]').setAttribute('content', data.csrf);
      document.querySelectorAll('input[name="authenticity_token"]').forEach((el) => {
        el.value = data.csrf;
      });
    })
    .catch(error => console.error('Error refreshing CSRF token:', error));
  }
}

## csrf_controller.rb
class CsrfController < ActionController::Base
  def refresh
    render json: { csrf: form_authenticity_token }
  end
end

## index.html
<body data-controller="csrf" data-action="focus@window->csrf#refresh">

</body>

## routes.rb
Rails.application.routes.draw do
  # ...
  get '/refresh_csrf', to: 'csrf#refresh'
  # ...
end
	import { Controller } from "@hotwired/stimulus"

	export default class extends Controller {
	static values = {
	wait: Number
	}

	connect() {
	this.refresh = this.debounce(this.refreshNoBounce, this.waitValue \|\| 500); // Default wait time of 500ms if not specified
	}

	debounce = (func, wait) => {
	let timeout;
	return (...args) => {
	clearTimeout(timeout);
	timeout = setTimeout(() => {
	func.apply(this, args);
	}, wait);
	};
	}

	refreshNoBounce = () => {
	fetch('/refresh_csrf', {
	method: 'GET',
	credentials: 'include',
	headers: {
	'Accept': 'application/json'
	}
	})
	.then(response => response.json())
	.then(data => {
	document.querySelector('meta[name="csrf-token"]').setAttribute('content', data.csrf);
	document.querySelectorAll('input[name="authenticity_token"]').forEach((el) => {
	el.value = data.csrf;
	});
	})
	.catch(error => console.error('Error refreshing CSRF token:', error));
	}
	}
	class CsrfController < ActionController::Base
	def refresh
	render json: { csrf: form_authenticity_token }
	end
	end
	<body data-controller="csrf" data-action="focus@window->csrf#refresh">

	</body>
	Rails.application.routes.draw do
	# ...
	get '/refresh_csrf', to: 'csrf#refresh'
	# ...
	end