fix: csrf token updates

Author: ItsNotGoodName

web/events/events.go

@@ -1,9 +1,17 @@
 // events are used by pages/components packages.
 package events
 
-import "github.com/ItsNotGoodName/smtpbridge/pkg/htmx"
+import (
+	"fmt"
+
+	"github.com/ItsNotGoodName/smtpbridge/pkg/htmx"
+)
 
 const (
 	EnvelopeCreated    htmx.Event = "envelope-created"
 	RetentionPolicyRun htmx.Event = "retention-policy-run"
 )
+
+func CSRFToken(csrfToken string) htmx.Event {
+	return htmx.Event(fmt.Sprintf(`{ "csrfToken": "%s" }`, csrfToken))
+}

web/http/controller.go

@@ -9,6 +9,7 @@ import (
 	"github.com/ItsNotGoodName/smtpbridge/internal/core"
 	"github.com/ItsNotGoodName/smtpbridge/web"
 	c "github.com/ItsNotGoodName/smtpbridge/web/components"
+	"github.com/ItsNotGoodName/smtpbridge/web/events"
 	"github.com/ItsNotGoodName/smtpbridge/web/meta"
 	"github.com/ItsNotGoodName/smtpbridge/web/routes"
 	"github.com/a-h/templ"
@@ -54,10 +55,15 @@ func (ct Controller) Meta(r *http.Request) meta.Meta {
 
 func (ct Controller) Page(w http.ResponseWriter, r *http.Request, body templ.Component) {
 	csrfToken := csrf.Token(r)
+	events.CSRFToken(csrfToken).SetTrigger(w)
+
 	c.Base(ct.head, body, csrfToken).Render(r.Context(), w)
 }
 
 func (ct Controller) Component(w http.ResponseWriter, r *http.Request, body templ.Component) {
+	csrfToken := csrf.Token(r)
+	events.CSRFToken(csrfToken).SetTrigger(w)
+
 	body.Render(r.Context(), w)
 }
 

web/src/main.ts

@@ -4,11 +4,20 @@ import "./index.css"
 
 import "htmx.org"
 
-const csrfToken = (document.getElementsByName("gorilla.csrf.Token").item(0) as HTMLMetaElement).content
-
-document.body.addEventListener('htmx:configRequest', function(evt: any) {
-  evt.detail.headers['X-CSRF-Token'] = csrfToken;
-});
+// csrfToken is first loaded from meta tag and then is updated through HX-Trigger HTTP response headers.
+// This allows HX-Boost to happen without invalidating previous csrfToken.
+{
+  let csrfToken = (document.getElementsByName("gorilla.csrf.Token").item(0) as HTMLMetaElement).content
+
+  document.body.addEventListener("csrfToken", function(evt: any) {
+    csrfToken = evt.detail.value
+  })
+
+  document.body.addEventListener('htmx:configRequest', function(evt: any) {
+    // TODO: why can't I use console.log here?
+    evt.detail.headers['X-CSRF-Token'] = csrfToken;
+  });
+}
 
 // ------------- Toastify