46f413975c
Solves the core usability problem of zero-knowledge encryption: on page reload the in-memory DEK is lost, so the user can't decrypt their data even though their JWT is still valid. Previously they had to close the tab and re-login from scratch. Changes: - Persist wrapped_dek/wrapped_dek_iv in the auth store (zustand persist). Safe: it's AES-GCM ciphertext, useless without the password KEK — the server already stores the same ciphertext. login/register/recover all save the wrapped DEK; logout clears it. - New UnlockPage: minimal password-only form. Re-derives the DEK locally via unlockWithPassword (no API call — the JWT is still valid). Falls back to deriveAuthAndEncKeys for Phase 1 compat accounts. Links to /login and /recover. - ProtectedRoute now checks hasEncKey() after isAuthenticated: authenticated but no in-memory DEK → redirect to /unlock. - /unlock route in App.tsx (public, alongside login/register/recover). Flow: login → browse → reload page → unlock screen → enter password → dashboard loads with decrypted data. No full re-login needed. Verified: npm build clean, 20 tests pass.
127 lines
3.7 KiB
TypeScript
127 lines
3.7 KiB
TypeScript
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;
|