feat: Add encrypted credential storage and auto-fill for Hevy/Lyfta login forms

Author: aree6

DEPLOYMENT.md

@@ -192,12 +192,20 @@ If you ever want to restart onboarding:
 - Open DevTools
 - Application → Local Storage
 - Clear keys starting with `hevy_analytics_`
+- Also clear:
+  - `hevy_username_or_email`
+  - `hevy_analytics_secret:hevy_password`
+  - `hevy_auth_token`
+  - `lyfta_api_key`
+
+If your browser is missing WebCrypto/IndexedDB support (or the page isn't a secure context), the app may fall back to storing passwords in Session Storage.
 
 
 ## 5) Notes
 
 - Hevy login is proxied through your backend.
 - The app stores the Hevy token in your browser (localStorage).
+- If you choose to use Hevy/Lyfta sync, the app may also store your login inputs locally to prefill onboarding (for example: username/email and API keys). Passwords are stored locally and are encrypted when the browser supports WebCrypto + IndexedDB.
 - Your workouts are processed client-side into `WorkoutSet[]`.
 
 

README.md

@@ -189,3 +189,4 @@ If you find this project helpful, you can support it here:
 
 - The only official deployment is https://liftshift.app.
 - Any other domain is unofficial. Do not enter credentials into an unofficial deployment.
+- LiftShift stores sync credentials locally in your browser (tokens, API keys, and login inputs). Passwords are encrypted at rest when the browser supports WebCrypto + IndexedDB.

frontend/App.tsx

@@ -60,6 +60,7 @@ import {
   saveSetupComplete,
   clearSetupComplete,
 } from './utils/storage/dataSourceStorage';
+import { clearHevyCredentials, saveHevyPassword, saveHevyUsernameOrEmail } from './utils/storage/hevyCredentialsStorage';
 import { hevyBackendGetAccount, hevyBackendGetSets, hevyBackendLogin } from './utils/api/hevyBackend';
 import { lyfatBackendGetSets } from './utils/api/lyfataBackend';
 import { parseHevyDateString } from './utils/date/parseHevyDateString';
@@ -194,6 +195,7 @@ const App: React.FC = () => {
   const clearCacheAndRestart = useCallback(() => {
     clearCSVData();
     clearHevyAuthToken();
+    clearHevyCredentials();
     clearLyfataApiKey();
     clearDataSourceChoice();
     clearLastCsvPlatform();
@@ -744,7 +746,13 @@ const App: React.FC = () => {
       .then((r) => {
         if (!r.auth_token) throw new Error('Missing auth token');
         saveHevyAuthToken(r.auth_token);
-        return hevyBackendGetAccount(r.auth_token).then(({ username }) => ({ token: r.auth_token, username }));
+        const trimmed = emailOrUsername.trim();
+        saveHevyUsernameOrEmail(trimmed);
+        return Promise.all([
+          saveHevyPassword(password).catch(() => {
+          }),
+          hevyBackendGetAccount(r.auth_token),
+        ]).then(([, { username }]) => ({ token: r.auth_token, username }));
       })
       .then(({ token, username }) => {
         setLoadingStep(1);

frontend/components/HevyLoginModal.tsx

@@ -1,7 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { motion } from 'motion/react';
 import { ArrowLeft, ArrowRight, HelpCircle, LogIn, RefreshCw, Trash2, Upload } from 'lucide-react';
 import { UNIFORM_HEADER_BUTTON_CLASS, UNIFORM_HEADER_ICON_BUTTON_CLASS } from '../utils/ui/uiConstants';
+import {
+  getHevyPassword,
+  getHevyUsernameOrEmail,
+  saveHevyUsernameOrEmail,
+} from '../utils/storage/hevyCredentialsStorage';
 
 type Intent = 'initial' | 'update';
 
@@ -32,9 +37,25 @@ export const HevyLoginModal: React.FC<HevyLoginModalProps> = ({
   onBack,
   onClose,
 }) => {
-  const [emailOrUsername, setEmailOrUsername] = useState('');
+  const [emailOrUsername, setEmailOrUsername] = useState(() => getHevyUsernameOrEmail() || '');
   const [password, setPassword] = useState('');
   const [showLoginHelp, setShowLoginHelp] = useState(false);
+  const passwordTouchedRef = useRef(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    getHevyPassword()
+      .then((p) => {
+        if (cancelled) return;
+        if (passwordTouchedRef.current) return;
+        if (p) setPassword(p);
+      })
+      .catch(() => {
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   return (
     <div className="fixed inset-0 z-50 bg-slate-950/90 backdrop-blur-sm overflow-y-auto overscroll-contain">
@@ -85,7 +106,9 @@ export const HevyLoginModal: React.FC<HevyLoginModalProps> = ({
               className="mt-5 space-y-3"
               onSubmit={(e) => {
                 e.preventDefault();
-                onLogin(emailOrUsername.trim(), password);
+                const trimmed = emailOrUsername.trim();
+                saveHevyUsernameOrEmail(trimmed);
+                onLogin(trimmed, password);
               }}
             >
               {hasSavedSession && onSyncSaved ? (
@@ -103,6 +126,7 @@ export const HevyLoginModal: React.FC<HevyLoginModalProps> = ({
               <div>
                 <label className="block text-xs font-semibold text-slate-200">Hevy username or email</label>
                 <input
+                  name="username"
                   value={emailOrUsername}
                   onChange={(e) => setEmailOrUsername(e.target.value)}
                   disabled={isLoading}
@@ -116,9 +140,13 @@ export const HevyLoginModal: React.FC<HevyLoginModalProps> = ({
               <div>
                 <label className="block text-xs font-semibold text-slate-200">Password</label>
                 <input
+                  name="password"
                   type="password"
                   value={password}
-                  onChange={(e) => setPassword(e.target.value)}
+                  onChange={(e) => {
+                    passwordTouchedRef.current = true;
+                    setPassword(e.target.value);
+                  }}
                   disabled={isLoading}
                   className="mt-1 w-full h-10 rounded-md bg-black/50 border border-slate-700/60 px-3 text-sm text-slate-100 outline-none focus:border-emerald-500/60"
                   placeholder="Password"
@@ -192,9 +220,7 @@ export const HevyLoginModal: React.FC<HevyLoginModalProps> = ({
               </div>
             </form>
 
-            <div className="mt-4 text-[11px] text-slate-400">
-              You’re logging in via Hevy. Hevy receives your credentials — LiftShift does not store them.
-            </div>
+          
 
             {showLoginHelp ? (
               <div className="mt-4 space-y-3">

frontend/components/LyfataLoginModal.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { motion } from 'motion/react';
 import { ArrowLeft, ArrowRight, HelpCircle, Key, RefreshCw, Trash2, Upload } from 'lucide-react';
 import { UNIFORM_HEADER_BUTTON_CLASS, UNIFORM_HEADER_ICON_BUTTON_CLASS } from '../utils/ui/uiConstants';
+import { getLyfataApiKey } from '../utils/storage/dataSourceStorage';
 
 type Intent = 'initial' | 'update';
 
@@ -32,13 +33,7 @@ export const LyfataLoginModal: React.FC<LyfataLoginModalProps> = ({
   onBack,
   onClose,
 }) => {
-  // Try to load API key from localStorage on mount
-  const [apiKey, setApiKey] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('lyfta_api_key') || '';
-    }
-    return '';
-  });
+  const [apiKey, setApiKey] = useState(() => getLyfataApiKey() || '');
   const [showLoginHelp, setShowLoginHelp] = useState(false);
 
   return (
@@ -91,10 +86,6 @@ export const LyfataLoginModal: React.FC<LyfataLoginModalProps> = ({
               onSubmit={(e) => {
                 e.preventDefault();
                 const trimmedKey = apiKey.trim();
-                // Save API key to localStorage
-                if (typeof window !== 'undefined') {
-                  localStorage.setItem('lyfta_api_key', trimmedKey);
-                }
                 onLogin(trimmedKey);
               }}
             >
@@ -188,9 +179,7 @@ export const LyfataLoginModal: React.FC<LyfataLoginModalProps> = ({
               </div>
             </form>
 
-            <div className="mt-4 text-[11px] text-slate-400">
-              Your API key is sent only to the backend for syncing. It is stored locally and never shared.
-            </div>
+          
 
             {showLoginHelp ? (
               <motion.div

frontend/utils/storage/hevyCredentialsStorage.ts

@@ -0,0 +1,43 @@
+import { clearEncryptedCredential, getEncryptedCredential, saveEncryptedCredential } from './secureCredentialStorage';
+
+const HEVY_USERNAME_KEY = 'hevy_username_or_email';
+const HEVY_PASSWORD_KEY = 'hevy_password';
+
+export const saveHevyUsernameOrEmail = (value: string): void => {
+  try {
+    localStorage.setItem(HEVY_USERNAME_KEY, value);
+  } catch {
+  }
+};
+
+export const getHevyUsernameOrEmail = (): string | null => {
+  try {
+    return localStorage.getItem(HEVY_USERNAME_KEY);
+  } catch {
+    return null;
+  }
+};
+
+export const clearHevyUsernameOrEmail = (): void => {
+  try {
+    localStorage.removeItem(HEVY_USERNAME_KEY);
+  } catch {
+  }
+};
+
+export const saveHevyPassword = async (password: string): Promise<void> => {
+  await saveEncryptedCredential(HEVY_PASSWORD_KEY, password);
+};
+
+export const getHevyPassword = async (): Promise<string | null> => {
+  return await getEncryptedCredential(HEVY_PASSWORD_KEY);
+};
+
+export const clearHevyPassword = (): void => {
+  clearEncryptedCredential(HEVY_PASSWORD_KEY);
+};
+
+export const clearHevyCredentials = (): void => {
+  clearHevyUsernameOrEmail();
+  clearHevyPassword();
+};