fix(auth): migrate tokens from localStorage to httpOnly cookies + CSRF hardening

Backend:
- Auth controller sets httpOnly secure cookies (access_token, refresh_token, goodgo_authenticated) on login/register/refresh
- JWT strategy reads token from cookie first, falls back to Authorization header
- Added POST /auth/logout to clear auth cookies
- Added POST /auth/exchange-token for OAuth callback token-to-cookie exchange
- Refresh endpoint reads refresh_token from cookie (body fallback for backwards compat)
- CSRF middleware excludes auth endpoints (login, register, refresh, exchange-token, logout)

Frontend:
- Removed all localStorage token storage (goodgo_tokens key)
- Removed authGet/authPost/authPatch helpers from api-client (tokens sent via cookies)
- All API calls use credentials:'include' for cookie-based auth
- Updated auth-store: no more token state, uses isAuthenticated flag from cookie
- Updated admin-api, listings-api to remove explicit token parameters
- Updated all pages (admin dashboard, users, KYC, moderation, listings) to remove token passing
- OAuth callbacks use exchange-token endpoint to convert URL tokens to cookies
- Auth provider simplified (no client-side cookie management needed)

Security improvements:
- JWT no longer accessible via JavaScript (XSS-safe)
- Refresh token scoped to /auth path only
- Server-side goodgo_authenticated cookie with SameSite=Lax
- Access token cookie with SameSite=Strict

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-08 06:25:11 +07:00
parent 9583d1cb66
commit 6389dcf78e
19 changed files with 151 additions and 191 deletions

View File

@@ -24,7 +24,6 @@ import {
DialogDescription,
DialogFooter,
} from '@/components/ui/dialog';
import { useAuthStore } from '@/lib/auth-store';
import { adminApi, type KycQueueItem, type PaginatedResult } from '@/lib/admin-api';
function kycStatusBadge(status: string) {
@@ -152,7 +151,6 @@ function KycDetailView({ item, onApprove, onReject }: {
}
export default function AdminKycPage() {
const { tokens } = useAuthStore();
const [result, setResult] = useState<PaginatedResult<KycQueueItem> | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -172,28 +170,27 @@ export default function AdminKycPage() {
const [actionError, setActionError] = useState<string | null>(null);
const fetchQueue = useCallback(async () => {
if (!tokens?.accessToken) return;
setLoading(true);
setError(null);
try {
const data = await adminApi.getKycQueue(tokens.accessToken, page, 20);
const data = await adminApi.getKycQueue(page, 20);
setResult(data);
} catch (e) {
setError(e instanceof Error ? e.message : 'Không thể tải hàng đợi KYC');
} finally {
setLoading(false);
}
}, [tokens?.accessToken, page]);
}, [page]);
useEffect(() => {
fetchQueue();
}, [fetchQueue]);
const handleApprove = async () => {
if (!tokens?.accessToken || !approveDialog) return;
if (!approveDialog) return;
setActionLoading(true);
try {
await adminApi.approveKyc(tokens.accessToken, approveDialog, approveNotes || undefined);
await adminApi.approveKyc(approveDialog, approveNotes || undefined);
setApproveDialog(null);
setApproveNotes('');
setSelectedItem(null);
@@ -206,10 +203,10 @@ export default function AdminKycPage() {
};
const handleReject = async () => {
if (!tokens?.accessToken || !rejectDialog || !rejectReason.trim()) return;
if (!rejectDialog || !rejectReason.trim()) return;
setActionLoading(true);
try {
await adminApi.rejectKyc(tokens.accessToken, rejectDialog, rejectReason);
await adminApi.rejectKyc(rejectDialog, rejectReason);
setRejectDialog(null);
setRejectReason('');
setSelectedItem(null);

View File

@@ -23,7 +23,6 @@ import {
DialogDescription,
DialogFooter,
} from '@/components/ui/dialog';
import { useAuthStore } from '@/lib/auth-store';
import { adminApi, type ModerationQueueItem, type PaginatedResult } from '@/lib/admin-api';
function formatPrice(price: number): string {
@@ -44,7 +43,6 @@ function moderationScoreBadge(score: number | null) {
}
export default function AdminModerationPage() {
const { tokens } = useAuthStore();
const [result, setResult] = useState<PaginatedResult<ModerationQueueItem> | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -66,28 +64,27 @@ export default function AdminModerationPage() {
const [bulkReason, setBulkReason] = useState('');
const fetchQueue = useCallback(async () => {
if (!tokens?.accessToken) return;
setLoading(true);
setError(null);
try {
const data = await adminApi.getModerationQueue(tokens.accessToken, page, 20);
const data = await adminApi.getModerationQueue(page, 20);
setResult(data);
} catch (e) {
setError(e instanceof Error ? e.message : 'Không thể tải hàng đợi');
} finally {
setLoading(false);
}
}, [tokens?.accessToken, page]);
}, [page]);
useEffect(() => {
fetchQueue();
}, [fetchQueue]);
const handleApprove = async () => {
if (!tokens?.accessToken || !approveDialog) return;
if (!approveDialog) return;
setActionLoading(true);
try {
await adminApi.approveListing(tokens.accessToken, approveDialog, approveNotes || undefined);
await adminApi.approveListing(approveDialog, approveNotes || undefined);
setApproveDialog(null);
setApproveNotes('');
fetchQueue();
@@ -99,10 +96,10 @@ export default function AdminModerationPage() {
};
const handleReject = async () => {
if (!tokens?.accessToken || !rejectDialog || !rejectReason.trim()) return;
if (!rejectDialog || !rejectReason.trim()) return;
setActionLoading(true);
try {
await adminApi.rejectListing(tokens.accessToken, rejectDialog, rejectReason);
await adminApi.rejectListing(rejectDialog, rejectReason);
setRejectDialog(null);
setRejectReason('');
fetchQueue();
@@ -114,11 +111,10 @@ export default function AdminModerationPage() {
};
const handleBulkAction = async () => {
if (!tokens?.accessToken || !bulkAction || selected.size === 0) return;
if (!bulkAction || selected.size === 0) return;
setActionLoading(true);
try {
await adminApi.bulkModerate(
tokens.accessToken,
Array.from(selected),
bulkAction,
bulkReason || undefined,

View File

@@ -15,7 +15,6 @@ import {
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useAuthStore } from '@/lib/auth-store';
import { adminApi, type DashboardStats, type RevenueStatsItem } from '@/lib/admin-api';
interface StatCardProps {
@@ -95,14 +94,12 @@ function RevenueChart({ data }: { data: RevenueStatsItem[] }) {
}
export default function AdminDashboardPage() {
const { tokens } = useAuthStore();
const [stats, setStats] = useState<DashboardStats | null>(null);
const [revenue, setRevenue] = useState<RevenueStatsItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const fetchData = useCallback(async () => {
if (!tokens?.accessToken) return;
setLoading(true);
setError(null);
try {
@@ -110,8 +107,8 @@ export default function AdminDashboardPage() {
const startDate = new Date(Date.now() - 180 * 86400000).toISOString().split('T')[0]!;
const [statsData, revenueData] = await Promise.all([
adminApi.getDashboardStats(tokens.accessToken),
adminApi.getRevenueStats(tokens.accessToken, startDate, endDate, 'month'),
adminApi.getDashboardStats(),
adminApi.getRevenueStats(startDate, endDate, 'month'),
]);
setStats(statsData);
setRevenue(revenueData);
@@ -120,7 +117,7 @@ export default function AdminDashboardPage() {
} finally {
setLoading(false);
}
}, [tokens?.accessToken]);
}, []);
useEffect(() => {
fetchData();

View File

@@ -25,7 +25,6 @@ import {
DialogDescription,
DialogFooter,
} from '@/components/ui/dialog';
import { useAuthStore } from '@/lib/auth-store';
import {
adminApi,
type UserListItem,
@@ -169,7 +168,6 @@ function UserDetailPanel({
}
export default function AdminUsersPage() {
const { tokens } = useAuthStore();
const [result, setResult] = useState<PaginatedResult<UserListItem> | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
@@ -189,11 +187,10 @@ export default function AdminUsersPage() {
const [actionError, setActionError] = useState<string | null>(null);
const fetchUsers = useCallback(async () => {
if (!tokens?.accessToken) return;
setLoading(true);
setError(null);
try {
const data = await adminApi.getUsers(tokens.accessToken, {
const data = await adminApi.getUsers({
page,
limit: 20,
role: roleFilter || undefined,
@@ -206,17 +203,16 @@ export default function AdminUsersPage() {
} finally {
setLoading(false);
}
}, [tokens?.accessToken, page, roleFilter, statusFilter, search]);
}, [page, roleFilter, statusFilter, search]);
useEffect(() => {
fetchUsers();
}, [fetchUsers]);
const openDetail = async (userId: string) => {
if (!tokens?.accessToken) return;
setDetailLoading(true);
try {
const detail = await adminApi.getUserDetail(tokens.accessToken, userId);
const detail = await adminApi.getUserDetail(userId);
setSelectedUser(detail);
} catch (e) {
setActionError(e instanceof Error ? e.message : 'Không thể tải chi tiết người dùng');
@@ -231,11 +227,10 @@ export default function AdminUsersPage() {
};
const confirmToggleStatus = async () => {
if (!tokens?.accessToken || !banDialog) return;
if (!banDialog) return;
setActionLoading(true);
try {
await adminApi.banUser(
tokens.accessToken,
banDialog.userId,
banReason || 'Admin action',
banDialog.isActive, // unban = true if making active

View File

@@ -114,7 +114,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
variant="ghost"
size="sm"
className="w-full justify-start gap-2"
onClick={logout}
onClick={() => logout()}
>
<LogOut className="h-4 w-4" />
Đăng xuất

View File

@@ -49,7 +49,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
{user.fullName}
</span>
)}
<Button variant="ghost" size="sm" onClick={logout}>
<Button variant="ghost" size="sm" onClick={() => logout()}>
Đăng xuất
</Button>
</div>

View File

@@ -22,7 +22,6 @@ import {
type CreateListingFormData,
} from '@/lib/validations/listings';
import { listingsApi, type CreateListingPayload, type Direction } from '@/lib/listings-api';
import { useAuthStore } from '@/lib/auth-store';
import { cn } from '@/lib/utils';
const STEPS = [
@@ -41,7 +40,6 @@ function toNum(val: string | undefined): number | undefined {
export default function CreateListingPage() {
const router = useRouter();
const { tokens } = useAuthStore();
const [currentStep, setCurrentStep] = React.useState(0);
const [images, setImages] = React.useState<ImageFile[]>([]);
const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -69,11 +67,6 @@ export default function CreateListingPage() {
const goBack = () => setCurrentStep((s) => Math.max(s - 1, 0));
const onSubmit = async (data: CreateListingFormData) => {
if (!tokens?.accessToken) {
setError('Vui lòng đăng nhập để đăng tin');
return;
}
setIsSubmitting(true);
setError(null);
@@ -117,11 +110,11 @@ export default function CreateListingPage() {
const commissionPct = toNum(data.commissionPct);
if (commissionPct != null) payload.commissionPct = commissionPct;
const result = await listingsApi.create(tokens.accessToken, payload);
const result = await listingsApi.create(payload);
for (const img of images) {
try {
await listingsApi.uploadMedia(tokens.accessToken, result.listingId, img.file);
await listingsApi.uploadMedia(result.listingId, img.file);
} catch {
// Continue with remaining images
}

View File

@@ -15,8 +15,6 @@ import {
type PaginatedResult,
} from '@/lib/listings-api';
import { PROPERTY_TYPES, TRANSACTION_TYPES, LISTING_STATUSES } from '@/lib/validations/listings';
import { useAuthStore } from '@/lib/auth-store';
function formatPrice(priceVND: string): string {
const num = Number(priceVND);
if (num >= 1_000_000_000) return `${(num / 1_000_000_000).toFixed(1)} ty`;
@@ -36,7 +34,6 @@ function formatDate(dateStr: string | null): string {
type ViewMode = 'grid' | 'table';
export default function ListingsPage() {
const { tokens } = useAuthStore();
const [result, setResult] = React.useState<PaginatedResult<ListingDetail> | null>(null);
const [loading, setLoading] = React.useState(true);
const [viewMode, setViewMode] = React.useState<ViewMode>('grid');

View File

@@ -30,11 +30,11 @@ export default function GoogleCallbackPage() {
return;
}
handleOAuthCallback({
handleOAuthCallback(
accessToken,
refreshToken,
expiresIn: expiresIn ? Number(expiresIn) : 900,
})
expiresIn ? Number(expiresIn) : 900,
)
.then(() => {
const redirect = searchParams.get('redirect') || '/dashboard';
router.replace(redirect);

View File

@@ -30,11 +30,11 @@ export default function ZaloCallbackPage() {
return;
}
handleOAuthCallback({
handleOAuthCallback(
accessToken,
refreshToken,
expiresIn: expiresIn ? Number(expiresIn) : 900,
})
expiresIn ? Number(expiresIn) : 900,
)
.then(() => {
const redirect = searchParams.get('redirect') || '/dashboard';
router.replace(redirect);