Invalid CSRF token because user logging is using turbo_streams

Just a quick question,
I have a case of mismatching CSRF token. It happens when the users logs in or out: it changes the session["_csrf_token"] but the head stays untouched (because my logging is done through turbo_streams) . then any link with destroy method fails until the page is reloaded.

I could force reload the page, or make my link_to’s some button_to’s but for the sake of simplicity would it be possible to update the CSRF token in head alongside the real token in session ?
Also I have updated Turbo today to latest 7.3.0 version and read the changelog that says we can pass head in stream response. Then maybe it would be possible to update token (specifically in my users/sessions controller) ?

Actually I just reset the CSRF each time the navbar is printed. When the user logs, the stream is about replacing this nav with a new nav. So it fixes the problem.

html :

<%= turbo_frame_tag "nav", "data-csrf-token":form_authenticity_token, "data-controller":"csrf" do %>
	<nav class="responsive nav"> ....

csrf Stimulus controller

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect(){
    let csrf = this.element.dataset.csrfToken
    document.querySelector("meta[name='csrf-token']").content = csrf
  }  
}

It is now reset each time the root is hit, so basically I overried a valid CSRF with a new one, but I guess the cost is rather slim.

I recently learned that you can have inline <turbo-stream> element in basically any kind of response, and Turbo Drive will apply the transformations to the page. As such, I’m wondering if you can accomplish this without a Stimulus controller. If you give your meta tag an id, then perhaps you can just action="remove" it and action="append" to the head with each page rendering … or something like that. I’m just thinking out loud - maybe the Stimulus controller is easier :smiley:

I am not too sure if I have understood your post about inline turbo-streams. Though I had read previously that a Turbo stream could modify an element with an ID whether it was included in a turbo frame or not. It kinda breaks my knowledge of Turbo but will definitely try that.
Also I thought about adding a frame in <head> but it sounded a bit hacky. Your solution with IDs is definitely cleaner and will spare me the replacement of the CSRF token on each page load. Tks

I’m still very much learning all this Hotwire stuff, so I’m just trying random ideas to see what happens.