jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed IDToken encrption

Browse Source
This commit is contained in:
Jeet Debnath
2026-03-09 12:19:55 +05:30
parent b5aa672b8e
commit 06d40b8e59
12 changed files with 120 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
backend/__pycache__/main.cpython-312.pyc
View File

Binary file not shown.

0
ENCRYPTION_IMPLEMENTATION.md → docs/ENCRYPTION_IMPLEMENTATION.md
View File

0
LIBSODIUM_FIX.md → docs/LIBSODIUM_FIX.md
View File

0
backend/MIGRATION_GUIDE.md → docs/MIGRATION_GUIDE.md
View File

0
backend/REFACTORING_SUMMARY.md → docs/REFACTORING_SUMMARY.md
View File

0
backend/SCHEMA.md → docs/SCHEMA.md
View File

0
project-context.md → docs/project-context.md
View File

194
src/App.css
View File

@@ -22,13 +22,13 @@
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
background: #eef6ee; background: #eef6ee;
color: #6b9a6b; color: #9ca3af;
} }
.protected-route__spinner { .protected-route__spinner {
width: 28px; width: 28px;
height: 28px; height: 28px;
border: 3px solid #bbf7d0; border: 3px solid #e5e7eb;
border-top-color: #22c55e; border-top-color: #22c55e;
border-radius: 50%; border-radius: 50%;
animation: spin 0.7s linear infinite; animation: spin 0.7s linear infinite;
@@ -48,7 +48,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: linear-gradient(160deg, #eef6ee 0%, #d1fae5 50%, #bbf7d0 100%); background: linear-gradient(160deg, #eef6ee 0%, #dcfce7 100%);
padding: 1.5rem; padding: 1.5rem;
overflow: hidden; overflow: hidden;
} }
@@ -64,7 +64,7 @@
.login-page__spinner { .login-page__spinner {
width: 28px; width: 28px;
height: 28px; height: 28px;
border: 3px solid #bbf7d0; border: 3px solid #e5e7eb;
border-top-color: #22c55e; border-top-color: #22c55e;
border-radius: 50%; border-radius: 50%;
animation: spin 0.7s linear infinite; animation: spin 0.7s linear infinite;
@@ -75,9 +75,7 @@
padding: 2rem; padding: 2rem;
border-radius: 20px; border-radius: 20px;
border-top: 4px solid #22c55e; border-top: 4px solid #22c55e;
box-shadow: box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
0 8px 32px rgba(34, 197, 94, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06);
width: 100%; width: 100%;
max-width: 360px; max-width: 360px;
text-align: center; text-align: center;
@@ -130,7 +128,7 @@
font-weight: 500; font-weight: 500;
color: #3c4043; color: #3c4043;
background: #fff; background: #fff;
border: 1px solid #d1e7d1; border: 1px solid #dadce0;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: transition:
@@ -140,9 +138,8 @@
} }
.google-sign-in-btn:hover:not(:disabled) { .google-sign-in-btn:hover:not(:disabled) {
background: #f0fdf4; background: #f8f9fa;
box-shadow: 0 1px 6px rgba(34, 197, 94, 0.15); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
border-color: #22c55e;
} }
.google-sign-in-btn:disabled { .google-sign-in-btn:disabled {
opacity: 0.7; opacity: 0.7;
@@ -204,10 +201,7 @@
background: #fff; background: #fff;
border-radius: 20px; border-radius: 20px;
padding: 1.625rem 1.5rem; padding: 1.625rem 1.5rem;
box-shadow: box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
0 2px 16px rgba(34, 197, 94, 0.1),
0 1px 4px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(34, 197, 94, 0.08);
flex: 1; flex: 1;
min-height: 0; min-height: 0;
display: flex; display: flex;
@@ -250,19 +244,16 @@
color: #374151; color: #374151;
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 1px solid #d1e7d1; border-bottom: 1px solid #e0f0e0;
outline: none; outline: none;
transition: transition: border-color 0.2s;
border-color 0.2s,
box-shadow 0.2s;
} }
.journal-title-input::placeholder { .journal-title-input::placeholder {
color: #9ec49e; color: #c4bfb5;
} }
.journal-title-input:focus { .journal-title-input:focus {
border-bottom-color: #22c55e; border-bottom-color: #22c55e;
box-shadow: 0 1px 0 0 rgba(34, 197, 94, 0.3);
} }
.journal-entry-textarea { .journal-entry-textarea {
@@ -278,11 +269,11 @@
border: none; border: none;
outline: none; outline: none;
resize: none; resize: none;
caret-color: #22c55e; caret-color: #374151;
} }
.journal-entry-textarea::placeholder { .journal-entry-textarea::placeholder {
color: #9ec49e; color: #c4bfb5;
font-style: italic; font-style: italic;
} }
@@ -334,8 +325,8 @@
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
.journal-icon-btn:hover { .journal-icon-btn:hover {
color: #22c55e; color: #6b7280;
background: rgba(34, 197, 94, 0.08); background: rgba(0, 0, 0, 0.05);
} }
/* ============================ /* ============================
@@ -345,7 +336,7 @@
flex-shrink: 0; flex-shrink: 0;
position: relative; /* NOT fixed — lives in the flex column */ position: relative; /* NOT fixed — lives in the flex column */
background: rgba(255, 255, 255, 0.96); background: rgba(255, 255, 255, 0.96);
border-top: 1px solid rgba(34, 197, 94, 0.12); border-top: 1px solid rgba(0, 0, 0, 0.07);
padding: 8px 12px 12px; padding: 8px 12px 12px;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -387,8 +378,7 @@
} }
.bottom-nav-btn:hover { .bottom-nav-btn:hover {
color: #22c55e; color: #6b7280;
background: rgba(34, 197, 94, 0.06);
} }
.bottom-nav-btn-active { .bottom-nav-btn-active {
@@ -441,16 +431,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #fff; background: #fff;
border: 1px solid #d1e7d1; border: 1px solid #e5e7eb;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
color: #6b7280; color: #6b7280;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.history-search-btn:hover { .history-search-btn:hover {
background: #f0fdf4; background: #f9fafb;
color: #22c55e; color: #374151;
border-color: #22c55e;
} }
/* scrollable content area for history */ /* scrollable content area for history */
@@ -471,10 +460,7 @@
background: #fff; background: #fff;
border-radius: 18px; border-radius: 18px;
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
box-shadow: box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
0 2px 12px rgba(34, 197, 94, 0.08),
0 1px 4px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(34, 197, 94, 0.08);
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
} }
@@ -512,8 +498,8 @@
transition: all 0.15s ease; transition: all 0.15s ease;
} }
.calendar-nav-btn:hover { .calendar-nav-btn:hover {
background: #f0fdf4; background: #f3f4f6;
color: #22c55e; color: #374151;
} }
.calendar-grid { .calendar-grid {
@@ -607,9 +593,7 @@
padding: 1rem 1rem 1rem 0.875rem; padding: 1rem 1rem 1rem 0.875rem;
border-radius: 14px; border-radius: 14px;
border-left: 4px solid #22c55e; border-left: 4px solid #22c55e;
box-shadow: box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
0 2px 8px rgba(34, 197, 94, 0.08),
0 1px 3px rgba(0, 0, 0, 0.04);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
text-align: left; text-align: left;
@@ -617,10 +601,7 @@
} }
.entry-card:hover { .entry-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: box-shadow: 0 5px 16px rgba(0, 0, 0, 0.09);
0 6px 20px rgba(34, 197, 94, 0.15),
0 2px 6px rgba(0, 0, 0, 0.05);
border-left-color: #16a34a;
} }
.entry-header { .entry-header {
@@ -713,10 +694,7 @@
background: #fff; background: #fff;
border-radius: 18px; border-radius: 18px;
padding: 1rem 1.125rem; padding: 1rem 1.125rem;
box-shadow: box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
0 2px 12px rgba(34, 197, 94, 0.08),
0 1px 4px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(34, 197, 94, 0.08);
} }
.settings-avatar { .settings-avatar {
@@ -736,7 +714,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, #86efac 0%, #22c55e 100%); background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 100%);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -788,10 +766,7 @@
.settings-card { .settings-card {
background: #fff; background: #fff;
border-radius: 18px; border-radius: 18px;
box-shadow: box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
0 2px 12px rgba(34, 197, 94, 0.08),
0 1px 4px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(34, 197, 94, 0.06);
overflow: hidden; overflow: hidden;
} }
@@ -811,7 +786,7 @@
transition: background 0.15s ease; transition: background 0.15s ease;
} }
.settings-item-button:hover { .settings-item-button:hover {
background: #f0fdf4; background: #f9fafb;
} }
.settings-item-icon { .settings-item-icon {
@@ -868,7 +843,7 @@
.settings-divider { .settings-divider {
height: 1px; height: 1px;
background: #e0f2e0; background: #f3f4f6;
margin: 0 1.125rem; margin: 0 1.125rem;
} }
@@ -939,7 +914,7 @@
} }
.settings-theme-dot-beige { .settings-theme-dot-beige {
background: #eef6ee; background: #f5f0e8;
} }
.settings-theme-dot-dark { .settings-theme-dot-dark {
background: #1a1a1a; background: #1a1a1a;
@@ -951,11 +926,6 @@
opacity: 0.6; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
} }
.settings-theme-dot-active {
border-color: #22c55e;
box-shadow: 0 0 0 2px #22c55e;
transform: scale(1.1);
}
/* Clear Data */ /* Clear Data */
.settings-clear-btn { .settings-clear-btn {
@@ -997,7 +967,7 @@
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
} }
.settings-signout-btn:hover { .settings-signout-btn:hover {
background: #f0fdf4; background: #f9fafb;
color: #374151; color: #374151;
} }
@@ -1059,10 +1029,7 @@
max-height: 85vh; max-height: 85vh;
overflow-y: auto; overflow-y: auto;
padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
box-shadow: box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
0 -4px 32px rgba(34, 197, 94, 0.12),
0 -1px 8px rgba(0, 0, 0, 0.06);
border-top: 3px solid #22c55e;
animation: modalSlideUp 0.25s ease; animation: modalSlideUp 0.25s ease;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@@ -1105,7 +1072,7 @@
height: var(--touch-min); height: var(--touch-min);
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: #f0fdf4; background: #f3f4f6;
color: #6b7280; color: #6b7280;
cursor: pointer; cursor: pointer;
transition: transition:
@@ -1114,8 +1081,8 @@
flex-shrink: 0; flex-shrink: 0;
} }
.entry-modal-close:hover { .entry-modal-close:hover {
background: #dcfce7; background: #e5e7eb;
color: #16a34a; color: #374151;
} }
/* Title */ /* Title */
@@ -1229,94 +1196,84 @@
inset: 0; inset: 0;
z-index: 2000; z-index: 2000;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 1.5rem; padding: 1.5rem;
animation: modalFadeIn 0.2s ease; animation: fadeIn 0.15s ease;
} }
.confirm-modal { .confirm-modal {
background: #fff; background: #fff;
border-radius: 20px; border-radius: 20px;
padding: 1.75rem 1.5rem; padding: 1.75rem;
max-width: 380px;
width: 100%; width: 100%;
max-width: 340px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
text-align: center; text-align: center;
animation: modalScaleIn 0.2s ease; animation: modalScaleIn 0.2s ease;
} }
.confirm-modal-icon { .confirm-modal-icon {
font-size: 2.5rem; font-size: 2.25rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.confirm-modal-title { .confirm-modal-title {
margin: 0 0 0.5rem;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 700; font-weight: 700;
color: #dc2626; color: #ef4444;
font-family: "Sniglet", system-ui; margin: 0 0 0.5rem;
} }
.confirm-modal-desc { .confirm-modal-desc {
margin: 0 0 1rem; font-size: 0.85rem;
font-size: 0.8125rem;
line-height: 1.5;
color: #6b7280; color: #6b7280;
margin: 0 0 1rem;
line-height: 1.5;
} }
.confirm-modal-label { .confirm-modal-label {
margin: 0 0 0.5rem; font-size: 0.8rem;
font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: #374151; color: #374151;
text-align: left; text-align: left;
margin: 0 0 0.375rem;
} }
.confirm-modal-input { .confirm-modal-input {
width: 100%; width: 100%;
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
font-size: 0.875rem; font-size: 0.9rem;
font-family: "Sniglet", system-ui; font-family: inherit;
border: 1.5px solid #e5e7eb; border: 1.5px solid #d1d5db;
border-radius: 10px; border-radius: 10px;
outline: none; outline: none;
transition: border-color 0.2s; transition: border-color 0.15s;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #1a1a1a;
background: #f9fafb;
} }
.confirm-modal-input:focus { .confirm-modal-input:focus {
border-color: #dc2626; border-color: #ef4444;
background: #fff;
}
.confirm-modal-input::placeholder {
color: #c4c4c4;
} }
.confirm-modal-actions { .confirm-modal-actions {
display: flex; display: flex;
gap: 0.625rem; gap: 0.75rem;
} }
.confirm-modal-cancel { .confirm-modal-cancel {
flex: 1; flex: 1;
padding: 0.625rem; padding: 0.65rem;
font-size: 0.875rem;
font-weight: 600;
font-family: "Sniglet", system-ui;
color: #6b7280;
background: #f3f4f6;
border: none; border: none;
border-radius: 10px; border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
font-family: inherit;
background: #f3f4f6;
color: #374151;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition: background 0.15s;
} }
.confirm-modal-cancel:hover:not(:disabled) { .confirm-modal-cancel:hover:not(:disabled) {
@@ -1325,20 +1282,22 @@
.confirm-modal-delete { .confirm-modal-delete {
flex: 1; flex: 1;
padding: 0.625rem; padding: 0.65rem;
font-size: 0.875rem;
font-weight: 600;
font-family: "Sniglet", system-ui;
color: #fff;
background: #dc2626;
border: none; border: none;
border-radius: 10px; border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
font-family: inherit;
background: #ef4444;
color: #fff;
cursor: pointer; cursor: pointer;
transition: background 0.2s; transition:
background 0.15s,
opacity 0.15s;
} }
.confirm-modal-delete:hover:not(:disabled) { .confirm-modal-delete:hover:not(:disabled) {
background: #b91c1c; background: #dc2626;
} }
.confirm-modal-delete:disabled { .confirm-modal-delete:disabled {
@@ -1767,8 +1726,3 @@
border-color: rgba(74, 222, 128, 0.3); border-color: rgba(74, 222, 128, 0.3);
box-shadow: 0 1px 8px rgba(74, 222, 128, 0.1); box-shadow: 0 1px 8px rgba(74, 222, 128, 0.1);
} }
/* -- Success/error message inline -- */
[data-theme="dark"] .settings-container [style*="backgroundColor"] {
/* Handled inline but these override for common patterns */
}

15
src/contexts/AuthContext.tsx
View File

@@ -47,10 +47,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
// Initialize encryption keys on login // Initialize encryption keys on login
async function initializeEncryption(authUser: User, token: string) { async function initializeEncryption(authUser: User) {
try { try {
const firebaseUID = authUser.uid const firebaseUID = authUser.uid
const firebaseIDToken = token
// Get or create salt // Get or create salt
let salt = getSalt() let salt = getSalt()
@@ -59,8 +58,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
saveSalt(salt) saveSalt(salt)
} }
// Derive master key from Firebase credentials // Derive master key from Firebase UID (stable across sessions)
const derivedKey = await deriveSecretKey(firebaseUID, firebaseIDToken, salt) const derivedKey = await deriveSecretKey(firebaseUID, salt)
// Check if device key exists // Check if device key exists
let deviceKey = await getDeviceKey() let deviceKey = await getDeviceKey()
@@ -110,13 +109,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
const email = authUser.email! const email = authUser.email!
// Initialize encryption before syncing user // Initialize encryption before syncing user
await initializeEncryption(authUser, token) await initializeEncryption(authUser)
// Try to get existing user // Try to get existing user
try { try {
console.log('[Auth] Fetching user by email:', email)
const existingUser = await getUserByEmail(email, token) as { id: string } const existingUser = await getUserByEmail(email, token) as { id: string }
console.log('[Auth] Found existing user:', existingUser.id)
setUserId(existingUser.id) setUserId(existingUser.id)
} catch (error) { } catch (error) {
console.warn('[Auth] User not found, registering...', error)
// User doesn't exist, register them // User doesn't exist, register them
const newUser = await registerUser( const newUser = await registerUser(
{ {
@@ -126,10 +128,11 @@ export function AuthProvider({ children }: { children: ReactNode }) {
}, },
token token
) as { id: string } ) as { id: string }
console.log('[Auth] Registered new user:', newUser.id)
setUserId(newUser.id) setUserId(newUser.id)
} }
} catch (error) { } catch (error) {
console.error('Error syncing user with database:', error) console.error('[Auth] Error syncing user with database:', error)
throw error throw error
} }
} }

33
src/index.css
View File

@@ -95,3 +95,36 @@ button:focus-visible {
outline: 2px solid var(--color-primary); outline: 2px solid var(--color-primary);
outline-offset: 2px; outline-offset: 2px;
} }
/* ── Dark theme root overrides ────────────────────────── */
[data-theme="dark"] {
--color-primary: #4ade80;
--color-primary-hover: #22c55e;
--color-bg-soft: #0f0f0f;
--color-surface: #1a1a1a;
--color-accent-light: rgba(74, 222, 128, 0.12);
--color-text: #e8f5e8;
--color-text-muted: #7a8a7a;
--color-border: rgba(74, 222, 128, 0.12);
color: var(--color-text);
background-color: var(--color-bg-soft);
caret-color: #4ade80;
}
[data-theme="dark"] body {
background: #0a0a0a;
}
@media (min-width: 600px) {
[data-theme="dark"] body {
background: #111;
}
[data-theme="dark"] #root {
box-shadow:
0 24px 80px rgba(0, 0, 0, 0.6),
0 4px 16px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(74, 222, 128, 0.08);
}
}

5
src/lib/crypto.ts
View File

@@ -20,12 +20,11 @@ import { getSodium } from '../utils/sodium'
*/ */
export async function deriveSecretKey( export async function deriveSecretKey(
firebaseUID: string, firebaseUID: string,
firebaseIDToken: string,
salt: string salt: string
): Promise<Uint8Array> { ): Promise<Uint8Array> {
// Use native Web Crypto API for key derivation (PBKDF2) // Use native Web Crypto API for key derivation (PBKDF2)
// This is more reliable than libsodium's Argon2i // Derives from UID only — stable across sessions
const password = `${firebaseUID}:${firebaseIDToken}` const password = firebaseUID
const encoding = new TextEncoder() const encoding = new TextEncoder()
const passwordBuffer = encoding.encode(password) const passwordBuffer = encoding.encode(password)
const saltBuffer = encoding.encode(salt) const saltBuffer = encoding.encode(salt)

4
src/pages/HistoryPage.tsx
View File

@@ -180,12 +180,12 @@ export default function HistoryPage() {
<h1>History</h1> <h1>History</h1>
<p className="history-subtitle">Your past reflections</p> <p className="history-subtitle">Your past reflections</p>
</div> </div>
{/* <button type="button" className="history-search-btn" title="Search entries"> <button type="button" className="history-search-btn" title="Search entries">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<circle cx="11" cy="11" r="8"></circle> <circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path> <path d="m21 21-4.35-4.35"></path>
</svg> </svg>
</button> */} </button>
</header> </header>
<main className="history-container"> <main className="history-container">