MVP ready to test

src/app/(app)/settings/page.tsx

@@ -4,12 +4,14 @@ import React, { useState, useEffect } from 'react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { useCsrf } from '@/hooks/useCsrf';
 import { showToast } from '@/components/ui/Toast';
 import ChangePasswordModal from '@/components/settings/ChangePasswordModal';
 
 type TabType = 'profile' | 'subscription';
 
 export default function SettingsPage() {
+  const { fetchWithCsrf } = useCsrf();
   const [activeTab, setActiveTab] = useState<TabType>('profile');
   const [loading, setLoading] = useState(false);
   const [showPasswordModal, setShowPasswordModal] = useState(false);
@@ -64,9 +66,8 @@ export default function SettingsPage() {
 
     try {
       // Save to backend API
-      const response = await fetch('/api/user/profile', {
+      const response = await fetchWithCsrf('/api/user/profile', {
         method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ name }),
       });
 
@@ -97,9 +98,8 @@ export default function SettingsPage() {
     setLoading(true);
 
     try {
-      const response = await fetch('/api/stripe/portal', {
+      const response = await fetchWithCsrf('/api/stripe/portal', {
         method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
       });
 
       const data = await response.json();
@@ -134,9 +134,8 @@ export default function SettingsPage() {
     setLoading(true);
 
     try {
-      const response = await fetch('/api/user/delete', {
+      const response = await fetchWithCsrf('/api/user/delete', {
         method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
       });
 
       const data = await response.json();