Add password encryption to SQLite database and web app

Implements password-based authentication for the EVM portfolio app with graceful migration support for existing data.

Backend changes:
- Add database migration (004) to create auth table for password storage
- Implement password hashing using Bun's built-in bcrypt-compatible API
- Add session management system with in-memory session storage
- Create auth endpoints: /auth/setup, /auth/login, /auth/logout, /auth/status
- Add authentication middleware to protect all routes (except auth routes)
- Password is optional during migration; middleware allows access until password is set

Frontend changes:
- Add Login screen for password authentication
- Add Setup screen for first-time password creation
- Create ProtectedRoute component to guard authenticated pages
- Add useAuth hook for authentication state management
- Add logout button to sidebar navigation
- Implement automatic redirection based on auth state

The implementation gracefully handles existing installations by:
1. Creating auth table with nullable passwordHash field
2. Allowing unauthenticated access when no password is set
3. Redirecting to setup page on first visit
4. Requiring authentication once password is configured

No username required as the app assumes single user per machine.

Author: claude

client/src/App.tsx

@@ -5,21 +5,35 @@ import { BalanceCard } from './components/BalanceCard'
 import { ChainCard } from './components/ChainCard'
 import { Layout } from './components/Layout'
 import { PortfolioCard } from './components/PortfolioCard'
+import { ProtectedRoute } from './components/ProtectedRoute'
 import { TokenCard } from './components/TokenCard'
 import { Home } from './screens/Home'
+import { Login } from './screens/Login'
+import { Setup } from './screens/Setup'
 
 function App() {
   return (
-    <Layout>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/portfolio" element={<PortfolioCard />} />
-        <Route path="/chains" element={<ChainCard />} />
-        <Route path="/accounts" element={<AccountCard />} />
-        <Route path="/tokens" element={<TokenCard />} />
-        <Route path="/balances" element={<BalanceCard />} />
-      </Routes>
-    </Layout>
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route path="/setup" element={<Setup />} />
+      <Route
+        path="/*"
+        element={
+          <ProtectedRoute>
+            <Layout>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/portfolio" element={<PortfolioCard />} />
+                <Route path="/chains" element={<ChainCard />} />
+                <Route path="/accounts" element={<AccountCard />} />
+                <Route path="/tokens" element={<TokenCard />} />
+                <Route path="/balances" element={<BalanceCard />} />
+              </Routes>
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
+    </Routes>
   )
 }
 

client/src/components/Layout.tsx

@@ -1,12 +1,15 @@
-import { ArrowUpRight } from 'lucide-react'
-import { Link, useLocation } from 'react-router-dom'
+import { ArrowUpRight, LogOut } from 'lucide-react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
 
+import { useLogout } from '@/hooks/useAuth'
 import { useAccounts } from '@/hooks/useHono'
 import { SERVER_URL } from '@/hooks/useHono'
 import { useQueues } from '@/hooks/useQueues'
 import { cn } from '@/lib/utils'
 
 import { CurrencySelector } from './CurrencySelector'
+import { Button } from './ui/button'
 
 const links = [
   {
@@ -37,8 +40,20 @@ const links = [
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const { pathname } = useLocation()
+  const navigate = useNavigate()
   const queues = useQueues()
   const { data: offchainAccounts } = useAccounts('offchain')
+  const logout = useLogout()
+
+  const handleLogout = async () => {
+    try {
+      await logout.mutateAsync()
+      toast.success('Logged out successfully')
+      navigate('/login')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to logout')
+    }
+  }
 
   return (
     <div className="grid grid-cols-[10rem_1fr] lg:grid-cols-[15rem_1fr]">
@@ -85,6 +100,17 @@ export function Layout({ children }: { children: React.ReactNode }) {
               <ArrowUpRight className="h-4 w-4" />
             </a>
           )}
+
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleLogout}
+            isLoading={logout.isPending}
+            className="w-full"
+          >
+            <LogOut />
+            Logout
+          </Button>
         </div>
       </aside>
 

client/src/components/ProtectedRoute.tsx

@@ -0,0 +1,27 @@
+import { Navigate } from 'react-router-dom'
+
+import { useAuthStatus } from '@/hooks/useAuth'
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { data: authStatus, isLoading } = useAuthStatus()
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="text-muted-foreground">Loading...</div>
+      </div>
+    )
+  }
+
+  // If password not set, redirect to setup
+  if (!authStatus?.passwordSet) {
+    return <Navigate to="/setup" replace />
+  }
+
+  // If password is set but not authenticated, redirect to login
+  if (!authStatus?.authenticated) {
+    return <Navigate to="/login" replace />
+  }
+
+  return <>{children}</>
+}

client/src/hooks/useAuth.ts

@@ -0,0 +1,78 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { honoClient } from './useHono'
+
+export function useAuthStatus() {
+  return useQuery({
+    queryKey: ['auth', 'status'],
+    queryFn: async () => {
+      const res = await honoClient.auth.status.$get()
+      return res.json()
+    },
+    retry: false,
+  })
+}
+
+export function useSetupPassword() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (password: string) => {
+      const res = await honoClient.auth.setup.$post({
+        json: { password },
+      })
+
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.error || 'Failed to set up password')
+      }
+
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth', 'status'] })
+    },
+  })
+}
+
+export function useLogin() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (password: string) => {
+      const res = await honoClient.auth.login.$post({
+        json: { password },
+      })
+
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.error || 'Failed to login')
+      }
+
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth', 'status'] })
+    },
+  })
+}
+
+export function useLogout() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async () => {
+      const res = await honoClient.auth.logout.$post()
+
+      if (!res.ok) {
+        const error = await res.json()
+        throw new Error(error.error || 'Failed to logout')
+      }
+
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['auth', 'status'] })
+    },
+  })
+}

client/src/screens/Login.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
+
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { useLogin } from '@/hooks/useAuth'
+
+export function Login() {
+  const [password, setPassword] = useState('')
+  const login = useLogin()
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    try {
+      await login.mutateAsync(password)
+      toast.success('Logged in successfully')
+      navigate('/')
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Failed to login')
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Login</CardTitle>
+          <CardDescription>
+            Enter your password to access your portfolio
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Input
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoFocus
+                required
+              />
+            </div>
+            <Button type="submit" className="w-full" isLoading={login.isPending}>
+              Login
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

client/src/screens/Setup.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'sonner'
+
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { useSetupPassword } from '@/hooks/useAuth'
+
+export function Setup() {
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const setupPassword = useSetupPassword()
+  const navigate = useNavigate()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (password.length < 8) {
+      toast.error('Password must be at least 8 characters long')
+      return
+    }
+
+    if (password !== confirmPassword) {
+      toast.error('Passwords do not match')
+      return
+    }
+
+    try {
+      await setupPassword.mutateAsync(password)
+      toast.success('Password set up successfully')
+      navigate('/')
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : 'Failed to set up password'
+      )
+    }
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Set Up Password</CardTitle>
+          <CardDescription>
+            Create a password to secure your portfolio. This is a one-time setup.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Input
+                type="password"
+                placeholder="Password (min 8 characters)"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoFocus
+                required
+              />
+            </div>
+            <div className="space-y-2">
+              <Input
+                type="password"
+                placeholder="Confirm password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+              />
+            </div>
+            <Button
+              type="submit"
+              className="w-full"
+              isLoading={setupPassword.isPending}
+            >
+              Set Up Password
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

server/src/api.ts

@@ -2,6 +2,12 @@ import { Hono } from 'hono'
 import { cors } from 'hono/cors'
 
 import { addAccount, deleteAccount, getAccounts } from './handlers/accounts'
+import {
+  getAuthStatus,
+  login,
+  logout,
+  setupPassword,
+} from './handlers/auth'
 import {
   deleteOffchainBalance,
   editOffchainBalance,
@@ -15,12 +21,20 @@ import { addChain, deleteChain, getChains } from './handlers/chains'
 import { getFiat } from './handlers/fiat'
 import { setupDefaultChains, setupDefaultTokens } from './handlers/setup'
 import { addToken, deleteToken, getTokens } from './handlers/tokens'
+import { authMiddleware } from './middleware/auth'
 
 export const api = new Hono()
 api.use(cors())
 
-// API Routes
+// Auth routes (public)
+api.get('/auth/status', (c) => getAuthStatus(c))
+api.post('/auth/setup', (c) => setupPassword(c))
+api.post('/auth/login', (c) => login(c))
+api.post('/auth/logout', (c) => logout(c))
+
+// Protected API Routes - require authentication if password is set
 export const routes = api
+  .use('*', authMiddleware)
   .get('/accounts', (c) => getAccounts(c))
   .get('/chains', (c) => getChains(c))
   .get('/balances', (c) => getBalances(c))