feat: implement web session handling and enhance token management

webapp/src/App.tsx

@@ -10,8 +10,12 @@ import JwtWarningPage from '@/components/JwtWarningPage';
 import {
   createAuthedFetch,
   getAuthorizedDevices,
+  clearProfileSnapshot,
   getCurrentDeviceIdentifier,
   getPasswordHint,
+  loadProfileSnapshot,
+  saveProfileSnapshot,
+  revokeCurrentSession,
   getTotpStatus,
   saveSession,
 } from '@/lib/api/auth';
@@ -39,6 +43,7 @@ import {
   performRecoverTwoFactorLogin,
   performRegistration,
   performTotpLogin,
+  hydrateLockedSession,
   performUnlock,
   type JwtUnsafeReason,
   type PendingTotp,
@@ -135,11 +140,12 @@ function resolveSystemTheme(): 'light' | 'dark' {
 export default function App() {
   const initialBootstrap = useMemo(() => readInitialAppBootstrapState(), []);
   const initialInviteCode = useMemo(() => readInviteCodeFromUrl(), []);
+  const initialProfileSnapshot = useMemo(() => loadProfileSnapshot(initialBootstrap.session?.email), [initialBootstrap]);
   const [pendingAuthAction, setPendingAuthAction] = useState<'login' | 'register' | 'unlock' | null>(null);
   const [location, navigate] = useLocation();
   const [phase, setPhase] = useState<AppPhase>(initialBootstrap.phase);
   const [session, setSessionState] = useState<SessionState | null>(initialBootstrap.session);
-  const [profile, setProfile] = useState<Profile | null>(null);
+  const [profile, setProfile] = useState<Profile | null>(initialProfileSnapshot);
   const [defaultKdfIterations, setDefaultKdfIterations] = useState(initialBootstrap.defaultKdfIterations);
   const [jwtWarning, setJwtWarning] = useState<{ reason: JwtUnsafeReason; minLength: number } | null>(initialBootstrap.jwtWarning);
 
@@ -172,6 +178,7 @@ export default function App() {
   const [recoverValues, setRecoverValues] = useState({ email: '', password: '', recoveryCode: '' });
   const [themePreference, setThemePreference] = useState<ThemePreference>(() => readThemePreference());
   const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(() => resolveSystemTheme());
+  const [unlockPreparing, setUnlockPreparing] = useState(() => initialBootstrap.phase === 'locked' && !initialProfileSnapshot?.key);
 
   const [confirm, setConfirm] = useState<AppConfirmState | null>(null);
   const [mobileLayout, setMobileLayout] = useState(false);
@@ -273,6 +280,16 @@ export default function App() {
     window.localStorage.setItem(THEME_STORAGE_KEY, themePreference);
   }, [themePreference]);
 
+  useEffect(() => {
+    saveProfileSnapshot(profile);
+  }, [profile]);
+
+  useEffect(() => {
+    if (phase === 'locked' && profile?.key && session) {
+      setUnlockPreparing(false);
+    }
+  }, [phase, profile, session]);
+
   useEffect(() => installMagneticUiFeedback(), []);
 
   function handleToggleTheme() {
@@ -334,6 +351,7 @@ export default function App() {
       setSession(boot.session);
       setProfile(boot.profile);
       setPhase(boot.phase);
+      setUnlockPreparing(boot.phase === 'locked' && !boot.profile?.key);
     })();
 
     return () => {
@@ -341,9 +359,34 @@ export default function App() {
     };
   }, [initialBootstrap]);
 
+  useEffect(() => {
+    if (phase !== 'locked' || !session) return;
+    let cancelled = false;
+    void (async () => {
+      const result = await hydrateLockedSession(session, profile);
+      if (cancelled) return;
+      if (!result.session) {
+        setSession(null);
+        setProfile(null);
+        setUnlockPreparing(false);
+        setPhase('login');
+        if (location !== '/login') navigate('/login');
+        return;
+      }
+      setSession(result.session);
+      if (result.profile) {
+        setProfile(result.profile);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [phase, session?.email, location, navigate]);
+
   async function finalizeLogin(login: CompletedLogin) {
     setSession(login.session);
     setProfile(login.profile);
+    setUnlockPreparing(false);
     setPendingTotp(null);
     setTotpCode('');
     setPhase('app');
@@ -528,6 +571,7 @@ export default function App() {
       const nextSession = await performUnlock(session, profile, unlockPassword, defaultKdfIterations);
       setSession(nextSession);
       setUnlockPassword('');
+      setUnlockPreparing(false);
       setPhase('app');
       if (location === '/' || location === '/lock') navigate('/vault');
       pushToast('success', t('txt_unlocked'));
@@ -544,14 +588,18 @@ export default function App() {
     delete nextSession.symEncKey;
     delete nextSession.symMacKey;
     setSession(nextSession);
+    setUnlockPreparing(false);
     setPhase('locked');
     navigate('/lock');
   }
 
   function logoutNow() {
+    void revokeCurrentSession(sessionRef.current);
     setConfirm(null);
     setSession(null);
+    clearProfileSnapshot();
     setProfile(null);
+    setUnlockPreparing(false);
     setPendingTotp(null);
     setPhase('login');
     navigate('/login');
@@ -882,9 +930,11 @@ export default function App() {
 
     const connect = () => {
       if (disposed) return;
+      const accessToken = session.accessToken;
+      if (!accessToken) return;
       try {
         const hubUrl = new URL('/notifications/hub', window.location.origin);
-        hubUrl.searchParams.set('access_token', session.accessToken);
+        hubUrl.searchParams.set('access_token', accessToken);
         hubUrl.protocol = hubUrl.protocol === 'https:' ? 'wss:' : 'ws:';
         socket = new WebSocket(hubUrl.toString());
       } catch {
@@ -1198,7 +1248,8 @@ export default function App() {
         <AuthViews
           mode={phase}
           pendingAction={pendingAuthAction}
-          unlockReady={!!profile}
+          unlockReady={!!profile?.key && !!session}
+          unlockPreparing={unlockPreparing}
           loginValues={loginValues}
           registerValues={registerValues}
           unlockPassword={unlockPassword}