dash csrf fix

Author: ankushKun

frontend/src/lib/api.ts

@@ -16,6 +16,17 @@ const API_BASE = isLocalhost()
     ? 'http://localhost:8787'  // Local development
     : 'https://commentkit.ankushkun.workers.dev';  // Production
 
+// CSRF token storage
+let csrfToken: string | null = null;
+
+export function setCsrfToken(token: string | null) {
+    csrfToken = token;
+}
+
+export function getCsrfToken(): string | null {
+    return csrfToken;
+}
+
 interface ApiResponse<T> {
     data: T | null;
     error: string | null;
@@ -27,13 +38,21 @@ async function request<T>(
     options: RequestInit = {}
 ): Promise<ApiResponse<T>> {
     try {
+        const headers: Record<string, string> = {
+            'Content-Type': 'application/json',
+            ...(options.headers as Record<string, string>),
+        };
+
+        // Add CSRF token for mutation requests
+        const method = options.method?.toUpperCase();
+        if (csrfToken && method && ['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)) {
+            headers['X-CSRF-Token'] = csrfToken;
+        }
+
         const res = await fetch(`${API_BASE}${path}`, {
             ...options,
             credentials: 'include', // Include HttpOnly cookies for authentication
-            headers: {
-                'Content-Type': 'application/json',
-                ...options.headers,
-            },
+            headers,
         });
 
         const json = await res.json().catch(() => null);
@@ -75,7 +94,7 @@ export const auth = {
         }),
 
     verify: (token: string) =>
-        request<{ token: string; user: User }>(`/api/v1/auth/verify?token=${token}`),
+        request<{ token: string; user: User; csrf_token: string }>(`/api/v1/auth/verify?token=${token}`),
 
     // Get current user, optionally with bootstrap data to save an extra API call
     me: (options?: { bootstrap?: boolean }) =>
@@ -284,6 +303,7 @@ export interface User {
     is_superadmin: boolean;
     created_at: string;
     updated_at: string;
+    csrf_token?: string;
 }
 
 export interface GlobalStats {

frontend/src/lib/auth-context.tsx

@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState, useRef, type ReactNode } from 'react';
-import { auth, type User, type BootstrapData } from './api';
+import { auth, type User, type BootstrapData, setCsrfToken } from './api';
 
 interface AuthContextType {
     user: User | null;
@@ -27,7 +27,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         if (error) {
             // User not authenticated (no valid cookie)
             setUser(null);
+            setCsrfToken(null);
         } else if (data) {
+            // Store CSRF token for future requests
+            if (data.csrf_token) {
+                setCsrfToken(data.csrf_token);
+            }
             // Store bootstrap data for consumption
             if (data.bootstrap) {
                 bootstrapRef.current = data.bootstrap;
@@ -49,6 +54,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
             // Verify token - server will set HttpOnly cookie in response
             auth.verify(token).then(({ data, error }) => {
                 if (data && !error) {
+                    // Store CSRF token
+                    if (data.csrf_token) {
+                        setCsrfToken(data.csrf_token);
+                    }
                     // No need to store token - server sets HttpOnly cookie
                     setUser(data.user);
 
@@ -80,6 +89,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         // Server will clear HttpOnly cookie
         await auth.logout();
         setUser(null);
+        setCsrfToken(null);
         bootstrapRef.current = null;
     };
 

worker/src/middleware/csrf.ts

@@ -138,6 +138,7 @@ export async function validateCsrf(c: Context<{ Bindings: Env }>, next: Function
         const exemptPaths = [
             '/api/v1/auth/login',      // Entry point - user doesn't have a token yet
             '/api/v1/auth/verify',     // Uses magic link token, not session-based
+            '/api/v1/auth/logout',     // Allow logout even if CSRF token expired
         ];
 
         if (exemptPaths.includes(path)) {

worker/src/routes/auth.ts

@@ -3,6 +3,7 @@ import { zValidator } from '@hono/zod-validator';
 import { z } from 'zod';
 import { Database } from '../db';
 import { getAuthUser, hashToken } from '../middleware';
+import { generateCsrfToken } from '../middleware/csrf';
 import type { Env } from '../types';
 import { sendMagicLinkEmail } from '../utils/email';
 
@@ -160,9 +161,14 @@ auth.get('/verify', async (c) => {
     // Set HttpOnly cookie for the session
     const cookie = createAuthCookie(sessionToken, c.env, 30);
 
+    // Generate CSRF token for the frontend
+    const origin = c.req.header('Origin') || c.env.FRONTEND_URL || c.env.BASE_URL || '';
+    const csrfToken = await generateCsrfToken(origin, c.env.JWT_SECRET);
+
     // Return response with cookie
     const response = c.json({
         token: sessionToken,  // Still return token for backward compatibility
+        csrf_token: csrfToken,
         user: {
             id: user.id,
             email: user.email,
@@ -187,6 +193,10 @@ auth.get('/me', async (c) => {
 
     const includeBootstrap = c.req.query('bootstrap') === 'true';
 
+    // Generate CSRF token for the frontend
+    const origin = c.req.header('Origin') || c.env.FRONTEND_URL || c.env.BASE_URL || '';
+    const csrfToken = await generateCsrfToken(origin, c.env.JWT_SECRET);
+
     const userData = {
         id: user.id,
         email: user.email,
@@ -195,6 +205,7 @@ auth.get('/me', async (c) => {
         is_superadmin: user.is_superadmin,
         created_at: user.created_at,
         updated_at: user.updated_at,
+        csrf_token: csrfToken,
     };
 
     if (!includeBootstrap) {