Merge feat/unlock-ux

Unlock UX: re-derive the DEK on page reload without a full re-login.

web/normogen-web/src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { LoginPage } from './pages/LoginPage';
 import { RegisterPage } from './pages/RegisterPage';
 import { RecoveryPage } from './pages/RecoveryPage';
+import { UnlockPage } from './pages/UnlockPage';
 import { Dashboard } from './pages/Dashboard';
 import { ProtectedRoute } from './components/common/ProtectedRoute';
 
@@ -13,6 +14,7 @@ function App() {
         <Route path="/login" element={<LoginPage />} />
         <Route path="/register" element={<RegisterPage />} />
         <Route path="/recover" element={<RecoveryPage />} />
+        <Route path="/unlock" element={<UnlockPage />} />
 
         {/* Protected routes */}
         <Route

web/normogen-web/src/components/common/ProtectedRoute.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Navigate } from 'react-router-dom';
 import { useAuthStore } from '../../store/useStore';
+import { hasEncKey } from '../../crypto';
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -11,11 +12,11 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
 
   if (isLoading) {
     return (
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'center', 
-        alignItems: 'center', 
-        height: '100vh' 
+      <div style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh'
       }}>
         <p>Loading...</p>
       </div>
@@ -26,5 +27,12 @@ export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
     return <Navigate to="/login" replace />;
   }
 
+  // Zero-knowledge: the user is authenticated (JWT valid) but the in-memory
+  // encryption key is gone (page reload). Redirect to the unlock screen to
+  // re-derive it without a full re-login.
+  if (!hasEncKey()) {
+    return <Navigate to="/unlock" replace />;
+  }
+
   return <>{children}</>;
 };

web/normogen-web/src/pages/UnlockPage.tsx

@@ -0,0 +1,127 @@
+import { useState, type FC } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import {
+  Container,
+  Paper,
+  TextField,
+  Button,
+  Typography,
+  Box,
+  Alert,
+  CircularProgress,
+} from '@mui/material';
+import { Lock as LockIcon } from '@mui/icons-material';
+import { useAuthStore } from '../store/useStore';
+import { unlockWithPassword, deriveAuthAndEncKeys, setEncKey } from '../crypto';
+
+export const UnlockPage: FC = () => {
+  const navigate = useNavigate();
+  const { wrapped_dek, wrapped_dek_iv, user } = useAuthStore();
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [unlocking, setUnlocking] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setUnlocking(true);
+
+    try {
+      if (wrapped_dek && wrapped_dek_iv) {
+        // Wrapped-DEK model: unwrap the DEK using the password.
+        const { dek } = await unlockWithPassword(password, {
+          data: wrapped_dek,
+          iv: wrapped_dek_iv,
+        });
+        setEncKey(dek);
+      } else {
+        // Phase 1 compat: derive the key directly from the password.
+        const { encKey } = await deriveAuthAndEncKeys(password);
+        setEncKey(encKey);
+      }
+      navigate('/', { replace: true });
+    } catch {
+      setError('Incorrect password. Please try again.');
+    } finally {
+      setUnlocking(false);
+    }
+  };
+
+  return (
+    <Container maxWidth="xs">
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Paper
+          elevation={3}
+          sx={{
+            p: 4,
+            width: '100%',
+            borderRadius: 2,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <LockIcon color="primary" sx={{ fontSize: 40, mb: 1 }} />
+          <Typography component="h1" variant="h5" gutterBottom>
+            Unlock
+          </Typography>
+          <Typography variant="body2" color="text.secondary" align="center" sx={{ mb: 3 }}>
+            {user?.username
+              ? `Welcome back, ${user.username}. Enter your password to decrypt your data.`
+              : 'Enter your password to decrypt your data.'}
+          </Typography>
+
+          {error && (
+            <Alert severity="error" sx={{ mb: 2, width: '100%' }}>
+              {error}
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
+            <TextField
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoFocus
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={unlocking}
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              sx={{ mt: 3, mb: 2 }}
+              disabled={unlocking || !password}
+            >
+              {unlocking ? <CircularProgress size={24} /> : 'Unlock'}
+            </Button>
+            <Box sx={{ textAlign: 'center' }}>
+              <Link to="/login">
+                <Typography variant="body2">Sign in with a different account</Typography>
+              </Link>
+              <Link to="/recover">
+                <Typography variant="body2" sx={{ mt: 0.5 }}>
+                  Forgot password?
+                </Typography>
+              </Link>
+            </Box>
+          </Box>
+        </Paper>
+      </Box>
+    </Container>
+  );
+};
+
+export default UnlockPage;

web/normogen-web/src/store/useStore.ts

@@ -32,7 +32,12 @@ interface AuthState {
   isAuthenticated: boolean;
   isLoading: boolean;
   error: string | null;
-  
+  // Persisted wrapped DEK — safe to store (AES-GCM ciphertext, useless without
+  // the password). Used by the unlock screen to re-derive the in-memory DEK
+  // on page reload without a full re-login.
+  wrapped_dek: string | null;
+  wrapped_dek_iv: string | null;
+
   // Actions
   login: (email: string, password: string) => Promise<void>;
   register: (username: string, email: string, password: string, recoveryPhrase?: string) => Promise<void>;
@@ -120,6 +125,8 @@ export const useAuthStore = create<AuthState>()(
         isAuthenticated: false,
         isLoading: false,
         error: null,
+        wrapped_dek: null,
+        wrapped_dek_iv: null,
 
         login: async (email: string, password: string) => {
           set({ isLoading: true, error: null });
@@ -150,6 +157,8 @@ export const useAuthStore = create<AuthState>()(
               token: response.token,
               isAuthenticated: true,
               isLoading: false,
+              wrapped_dek: response.wrapped_dek ?? null,
+              wrapped_dek_iv: response.wrapped_dek_iv ?? null,
             });
           } catch (error: any) {
             clearEncKey();
@@ -191,6 +200,8 @@ export const useAuthStore = create<AuthState>()(
               token: response.token,
               isAuthenticated: true,
               isLoading: false,
+              wrapped_dek: setup.passwordWrappedDek.data,
+              wrapped_dek_iv: setup.passwordWrappedDek.iv,
             });
           } catch (error: any) {
             set({
@@ -228,7 +239,8 @@ export const useAuthStore = create<AuthState>()(
               newWrapped.data,
               newWrapped.iv,
             );
-            set({ isLoading: false });
+            // Persist the new wrapped DEK so unlock works with the new password.
+            set({ isLoading: false, wrapped_dek: newWrapped.data, wrapped_dek_iv: newWrapped.iv });
           } catch (error: any) {
             clearEncKey();
             set({
@@ -247,6 +259,8 @@ export const useAuthStore = create<AuthState>()(
             token: null,
             isAuthenticated: false,
             error: null,
+            wrapped_dek: null,
+            wrapped_dek_iv: null,
           });
         },
 
@@ -279,6 +293,8 @@ export const useAuthStore = create<AuthState>()(
           token: state.token,
           user: state.user,
           isAuthenticated: state.isAuthenticated,
+          wrapped_dek: state.wrapped_dek,
+          wrapped_dek_iv: state.wrapped_dek_iv,
         }),
       }
     )