Skip to content

Commit 1b62dd4

Browse files
LesiaUKRLesiaUKR
committed
feat(quiz): implement security and UX improvements
Issue #130 - Security: Encrypted Answers - Add AES-256-GCM encryption for quiz answers (quiz-crypto.ts) - Create /api/quiz/verify-answer endpoint for server-side validation - Add client-safe types (QuizQuestionClient, QuizAnswerClient) - Remove isCorrect from client response to prevent DevTools cheating Issue #124 - Session Persistence + Quit Confirmation - Add localStorage session persistence (useQuizSession hook) - Add quit confirmation with custom ConfirmModal - Add browser navigation guards (useQuizGuards hook) - Support language switch without losing progress Issue #122 - Language Switch Category Fix - Sync category selection to URL params in QuizzesSection - Preserve query params on language switch Additional fixes: - Add isIncomplete state for timeout scenarios - Reorganize quiz utils into lib/quiz/ directory
1 parent 9e91e0a commit 1b62dd4

27 files changed

Lines changed: 900 additions & 115 deletions

‎frontend/app/[locale]/login/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useLocale } from 'next-intl';
44
import { Link } from '@/i18n/routing';
55
import { useState } from "react";
66
import { useSearchParams } from "next/navigation";
7-
import { getPendingQuizResult, clearPendingQuizResult } from "@/lib/guest-quiz";
7+
import { getPendingQuizResult, clearPendingQuizResult } from "@/lib/quiz/guest-quiz";
88
import { Button } from "@/components/ui/button";
99
import { OAuthButtons } from '@/components/auth/OAuthButtons';
1010

‎frontend/app/[locale]/quiz/[slug]/page.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { createEncryptedAnswersBlob } from '@/lib/quiz/quiz-crypto';
2+
import { stripCorrectAnswers } from '@/db/queries/quiz';
13
import { getQuizBySlug, getQuizQuestionsRandomized } from '@/db/queries/quiz';
24
import { notFound } from 'next/navigation';
35
import { getTranslations } from 'next-intl/server';
@@ -8,11 +10,13 @@ import { getCurrentUser } from '@/lib/auth';
810

911
interface QuizPageProps {
1012
params: Promise<{ locale: string; slug: string }>;
13+
searchParams: Promise<{seed?: string}>;
1114
}
1215

13-
export default async function QuizPage({ params }: QuizPageProps) {
16+
export default async function QuizPage({ params, searchParams }: QuizPageProps) {
1417
const { locale, slug } = await params;
1518
const t = await getTranslations({ locale, namespace: 'quiz.page' });
19+
const { seed: seedParam } = await searchParams;
1620

1721
const user = await getCurrentUser();
1822

@@ -22,9 +26,12 @@ export default async function QuizPage({ params }: QuizPageProps) {
2226
notFound();
2327
}
2428

25-
const seed = Date.now();
29+
const seed = seedParam ? parseInt(seedParam, 10) : Date.now();
2630
const questions = await getQuizQuestionsRandomized(quiz.id, locale, seed);
2731

32+
const encryptedAnswers = createEncryptedAnswersBlob(questions);
33+
const clientQuestions = stripCorrectAnswers(questions);
34+
2835
if (!questions.length) {
2936
return (
3037
<div className="min-h-screen flex items-center justify-center">
@@ -56,9 +63,12 @@ export default async function QuizPage({ params }: QuizPageProps) {
5663
<QuizContainer
5764
quizSlug={slug}
5865
quizId={quiz.id}
59-
questions={questions}
66+
questions={clientQuestions}
67+
encryptedAnswers={encryptedAnswers}
6068
userId={user?.id ?? null}
6169
timeLimitSeconds={quiz.timeLimitSeconds ?? questions.length * 30}
70+
seed={seed}
71+
categorySlug={quiz.categorySlug}
6272
/>
6373
{user && <PendingResultHandler userId={user.id} />}
6474
</div>

‎frontend/app/[locale]/signup/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useLocale } from 'next-intl';
44
import { Link } from '@/i18n/routing';
55
import { useState } from "react";
66
import { useSearchParams } from "next/navigation";
7-
import { getPendingQuizResult, clearPendingQuizResult } from "@/lib/guest-quiz";
7+
import { getPendingQuizResult, clearPendingQuizResult } from "@/lib/quiz/guest-quiz";
88
import { Button } from "@/components/ui/button";
99
import { OAuthButtons } from '@/components/auth/OAuthButtons';
1010

‎frontend/app/api/quiz/verify-answer/route.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { NextRequest, NextResponse } from 'next/server';
2+
import { decryptAnswers } from '@/lib/quiz/quiz-crypto';
3+
4+
interface VerifyRequest {
5+
questionId: string;
6+
answerId: string;
7+
encryptedAnswers: string;
8+
}
9+
10+
export async function POST(request: NextRequest) {
11+
try {
12+
const body: VerifyRequest = await request.json();
13+
const { questionId, answerId, encryptedAnswers } = body;
14+
15+
if (!questionId || !answerId || !encryptedAnswers) {
16+
return NextResponse.json(
17+
{ error: 'Missing required fields' },
18+
{ status: 400 }
19+
);
20+
}
21+
22+
const correctAnswersMap = decryptAnswers(encryptedAnswers);
23+
24+
if (!correctAnswersMap) {
25+
return NextResponse.json(
26+
{ error: 'Invalid encrypted data' },
27+
{ status: 400 }
28+
);
29+
}
30+
31+
const correctAnswerId = correctAnswersMap[questionId];
32+
33+
if (!correctAnswerId) {
34+
return NextResponse.json(
35+
{ error: 'Question not found' },
36+
{ status: 404 }
37+
);
38+
}
39+
40+
return NextResponse.json({
41+
isCorrect: answerId === correctAnswerId,
42+
});
43+
} catch {
44+
return NextResponse.json(
45+
{ error: 'Internal server error' },
46+
{ status: 500 }
47+
);
48+
}
49+
}

‎frontend/components/quiz/PendingResultHandler.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import { useEffect } from 'react';
4-
import { getPendingQuizResult, clearPendingQuizResult } from '@/lib/guest-quiz';
4+
import { getPendingQuizResult, clearPendingQuizResult } from '@/lib/quiz/guest-quiz';
55

66
interface Props {
77
userId: string;
@@ -24,13 +24,13 @@ export function PendingResultHandler({ userId }: Props) {
2424
timeSpentSeconds: pending.timeSpentSeconds,
2525
}),
2626
})
27-
.then(async (res) => {
28-
if (res.ok) {
29-
clearPendingQuizResult();
30-
} else {
31-
console.error("Guest-result API error:", res.status);
32-
}
33-
})
27+
.then(async (res) => {
28+
if (res.ok) {
29+
clearPendingQuizResult();
30+
} else {
31+
console.error("Guest-result API error:", res.status);
32+
}
33+
})
3434
.catch(err => {
3535
console.error("Guest-result fetch error:", err);
3636
});

‎frontend/components/quiz/QuizCard.tsx‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -52,34 +52,26 @@ export function QuizCard({ quiz, userProgress }: QuizCardProps) {
5252
</div>
5353
</div>
5454
{userProgress && (
55-
<div className="mb-6">
56-
<div className="flex justify-between text-xs mb-1.5">
57-
<div className="flex flex-row items-center gap-2">
58-
<span className="text-gray-600 dark:text-gray-400">
59-
Best: {userProgress.bestScore}/{userProgress.totalQuestions}
60-
</span>
61-
<p className="text-xs text-gray-500">
62-
{userProgress.attemptsCount} {userProgress.attemptsCount === 1 ? 'attempt' : 'attempts'}
63-
</p>
64-
</div>
65-
<span className="text-gray-600 dark:text-gray-400">
66-
{t('best')} {userProgress.bestScore}/{userProgress.totalQuestions}
67-
</span>
68-
<span className="font-medium text-gray-900 dark:text-gray-100">
69-
{percentage}%
70-
</span>
71-
</div>
72-
<div className="h-1.5 bg-gray-200 dark:bg-neutral-800 rounded-full overflow-hidden">
73-
<div
74-
className="h-full bg-blue-600 rounded-full transition-all"
75-
style={{ width: `${percentage}%` }}
76-
/>
77-
</div>
78-
<p className="text-xs text-gray-500 mt-1">
79-
{userProgress.attemptsCount} {userProgress.attemptsCount === 1 ? t('attempt') : t('attempts')}
80-
</p>
81-
</div>
82-
)}
55+
<div className="mb-6">
56+
<div className="flex justify-between text-xs mb-1.5">
57+
<span className="text-gray-600 dark:text-gray-400">
58+
{t('best')} {userProgress.bestScore}/{userProgress.totalQuestions}
59+
</span>
60+
<span className="text-gray-500">
61+
{userProgress.attemptsCount} {userProgress.attemptsCount === 1 ? t('attempt') : t('attempts')}
62+
</span>
63+
<span className="font-medium text-gray-900 dark:text-gray-100">
64+
{percentage}%
65+
</span>
66+
</div>
67+
<div className="h-1.5 bg-gray-200 dark:bg-neutral-800 rounded-full overflow-hidden">
68+
<div
69+
className="h-full bg-blue-600 rounded-full transition-all"
70+
style={{ width: `${percentage}%` }}
71+
/>
72+
</div>
73+
</div>
74+
)}
8375
<Link
8476
href={`/quiz/${quiz.slug}`}
8577
className="block w-full text-center rounded-lg bg-blue-600 text-white px-4 py-2.5 text-sm font-medium hover:bg-blue-500 transition-colors"

0 commit comments

Comments
 (0)