alvaro/normogen
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

feat(web): unlock UX — re-derive DEK on page reload

Browse source 
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.
This commit is contained in:
goose 2026-07-03 20:21:15 -03:00
parent 38bf0ae8b4
commit 46f413975c
4 changed files with 160 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/normogen-web/src/store/useStore.ts
View file

@ -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,
}),
}
)