fix: resolve CSRF token issues in authentication forms

- Add hidden CSRF token fields to login, register, and logout forms
- Fix form binding by adding form: struct tags to LoginRequest and RegisterRequest
- Enhance JavaScript CSRF handling with automatic token population and rotation
- Improve error handling with specific status code messages and token refresh
- Update CSRF token initialization to use safer endpoint for token fetching

Author: dunamismax

cookies.jar

@@ -0,0 +1,5 @@
+# Netscape HTTP Cookie File
+# https://curl.se/docs/http-cookies.html
+# This file was generated by libcurl! Edit at your own risk.
+
+#HttpOnly_localhost	FALSE	/	FALSE	1754705477	_csrf	22e337af7343f1f0167d8033f151725a03ee3177c8d721b6c87a5bfb0d76d5e5

cookies.txt

@@ -0,0 +1,5 @@
+# Netscape HTTP Cookie File
+# https://curl.se/docs/http-cookies.html
+# This file was generated by libcurl! Edit at your own risk.
+
+#HttpOnly_localhost	FALSE	/	FALSE	1754705155	_csrf	b296543fc6637c439c9cd027996129ca4cb9a00933d851157a91683d7a4b168d

internal/handler/auth.go

@@ -26,18 +26,18 @@ func NewAuthHandler(s *store.Store, authService *middleware.AuthService) *AuthHa
 
 // LoginRequest represents a login request
 type LoginRequest struct {
-	Email    string `json:"email" validate:"required,email"`
-	Password string `json:"password" validate:"required,min=1"`
+	Email    string `json:"email" form:"email" validate:"required,email"`
+	Password string `json:"password" form:"password" validate:"required,min=1"`
 }
 
 // RegisterRequest represents a registration request
 type RegisterRequest struct {
-	Email           string `json:"email" validate:"required,email"`
-	Name            string `json:"name" validate:"required,min=2,max=100"`
-	Password        string `json:"password" validate:"required,password"`
-	ConfirmPassword string `json:"confirm_password" validate:"required"`
-	Bio             string `json:"bio,omitempty" validate:"max=500"`
-	AvatarURL       string `json:"avatar_url,omitempty" validate:"omitempty,url"`
+	Email           string `json:"email" form:"email" validate:"required,email"`
+	Name            string `json:"name" form:"name" validate:"required,min=2,max=100"`
+	Password        string `json:"password" form:"password" validate:"required,password"`
+	ConfirmPassword string `json:"confirm_password" form:"confirm_password" validate:"required"`
+	Bio             string `json:"bio,omitempty" form:"bio" validate:"max=500"`
+	AvatarURL       string `json:"avatar_url,omitempty" form:"avatar_url" validate:"omitempty,url"`
 }
 
 // Validate implements custom validation for RegisterRequest

internal/view/auth.templ

@@ -26,6 +26,7 @@ templ LoginContent() {
 				<p>Welcome back! Please sign in to your account.</p>
 			</hgroup>
 			<form hx-post="/auth/login" hx-swap="none" hx-indicator="#login-spinner">
+				<input type="hidden" name="csrf_token" id="csrf-token-login"/>
 				<div>
 					<label for="email">Email Address</label>
 					<input
@@ -82,6 +83,7 @@ templ RegisterContent() {
 				<p>Join us! Create your account to get started.</p>
 			</hgroup>
 			<form hx-post="/auth/register" hx-swap="none" hx-indicator="#register-spinner">
+				<input type="hidden" name="csrf_token" id="csrf-token-register"/>
 				<div>
 					<label for="name">Full Name</label>
 					<input
@@ -198,14 +200,18 @@ templ ProfileContent(user middleware.User) {
 				<footer>
 					<div role="group">
 						<button class="secondary outline">Edit Profile</button>
-						<button
-							hx-post="/auth/logout"
-							hx-swap="none"
-							class="outline"
-							hx-confirm="Are you sure you want to log out?"
-						>
-							Logout
-						</button>
+						<form style="display: inline;">
+							<input type="hidden" name="csrf_token" id="csrf-token-logout"/>
+							<button
+								hx-post="/auth/logout"
+								hx-swap="none"
+								class="outline"
+								hx-confirm="Are you sure you want to log out?"
+								type="submit"
+							>
+								Logout
+							</button>
+						</form>
 					</div>
 				</footer>
 			</article>

internal/view/layout/base.templ

@@ -145,17 +145,26 @@ templ BaseWithCSRF(title, csrfToken string) {
 					// Track current CSRF token
 					let currentCSRFToken = null;
 
+					// Update hidden CSRF token fields
+					const updateCSRFTokenFields = (token) => {
+						const csrfFields = document.querySelectorAll('input[name="csrf_token"]');
+						csrfFields.forEach(field => {
+							field.value = token;
+						});
+					};
+					
 					// Initialize CSRF token from page load or fetch it
 					const initializeCSRFToken = () => {
 						// First try to get token from a meta tag (set by server)
 						const metaToken = document.querySelector('meta[name="csrf-token"]');
 						if (metaToken) {
 							currentCSRFToken = metaToken.getAttribute('content');
+							updateCSRFTokenFields(currentCSRFToken);
 							return;
 						}
 
-						// If no meta token, make a request to get one
-						fetch('/users', {
+						// If no meta token, make a request to get one from a safe endpoint
+						fetch('/', {
 							method: 'GET',
 							headers: {
 								'X-Requested-With': 'XMLHttpRequest'
@@ -164,6 +173,7 @@ templ BaseWithCSRF(title, csrfToken string) {
 							const token = response.headers.get('X-CSRF-Token');
 							if (token) {
 								currentCSRFToken = token;
+								updateCSRFTokenFields(currentCSRFToken);
 							}
 						}).catch(e => {
 							console.warn('Failed to initialize CSRF token:', e);
@@ -185,6 +195,7 @@ templ BaseWithCSRF(title, csrfToken string) {
 						const newToken = evt.detail.xhr.getResponseHeader('X-CSRF-Token');
 						if (newToken) {
 							currentCSRFToken = newToken;
+							updateCSRFTokenFields(currentCSRFToken);
 						}
 					});
 
@@ -228,13 +239,33 @@ templ BaseWithCSRF(title, csrfToken string) {
 							// Re-initialize theme
 							const savedTheme = localStorage.getItem('preferred-theme') || 'dark';
 							setTheme(savedTheme);
+							
+							// Update CSRF tokens in new content
+							if (currentCSRFToken) {
+								updateCSRFTokenFields(currentCSRFToken);
+							}
 						}
 					});
 
 					// Handle errors
 					document.body.addEventListener('htmx:responseError', function(evt) {
 						pageLoading.classList.remove('active');
-						showFlash('Failed to load page. Please try again.', 'error');
+						let errorMessage = 'Request failed. Please try again.';
+						
+						// Handle specific error codes
+						if (evt.detail.xhr.status === 403) {
+							errorMessage = 'Access forbidden. Please refresh the page and try again.';
+							// Try to refresh CSRF token
+							initializeCSRFToken();
+						} else if (evt.detail.xhr.status === 400) {
+							errorMessage = 'Invalid request. Please check your input and try again.';
+						} else if (evt.detail.xhr.status === 401) {
+							errorMessage = 'Authentication required. Please log in.';
+						} else if (evt.detail.xhr.status >= 500) {
+							errorMessage = 'Server error. Please try again later.';
+						}
+						
+						showFlash(errorMessage, 'error');
 					});
 
 					document.body.addEventListener('htmx:timeout', function(evt) {