Phase 3: Full Authentication System

[tkkr6895]

Description

Implement local-first authentication with PIN-based security (PBKDF2 hashing), multi-user profile support on shared devices, session auto-lock, and a Dexie v3 schema migration for the users table.

Implementation Tasks

• 3.2.1 — Create AuthService.ts with createUser(), authenticate(), PIN hashing via PBKDF2 (Web Crypto API), session management (src/services/AuthService.ts)
• 3.2.2 — Create useAuth hook with reactive auth state, current user, auto-lock timer (15 min inactive) (src/hooks/useAuth.ts)
• 3.2.3 — Create LoginScreen.tsx — username + PIN entry, create account flow, user switcher (src/components/auth/LoginScreen.tsx)
• 3.2.4 — Create PinLock.tsx — lock screen overlay, PIN entry to unlock, lockout after failed attempts (src/components/auth/PinLock.tsx)
• 3.2.5 — Create ProfileEditor.tsx — edit display name, affiliation, role (src/components/auth/ProfileEditor.tsx)
• 3.2.6 — Wire auth into App.tsx — gate main UI behind login, show PinLock overlay when session is locked (src/App.tsx)
• 3.2.7 — Add users table to Dexie schema (v3 migration) — migrate existing deviceId identity to first user (src/db/database.ts)

Acceptance Criteria

• Users can create local accounts with username + 4–6 digit PIN
• PIN is never stored in plaintext — PBKDF2 hash with salt persisted
• Auto-lock triggers after 15 minutes of inactivity with PinLock overlay
• Multiple user profiles supported on shared devices
• Each user only sees their own observations (userId-scoped queries)
• Profile editor allows updating name, affiliation, and role
• Main UI is gated behind LoginScreen on startup
• Dexie v3 migration creates users table without breaking existing data
• Existing deviceId-based identity migrated to a default user profile
• Web Crypto API availability verified; graceful fallback message on unsupported browsers

Dependencies

• Lightweight User Identity (1.9, ✅ complete) — migration path from deviceId-based identity
• Coordinate v3 migration with Gamification issue (3.3.6) to avoid conflicting schema versions

Relevant Files

• src/services/AuthService.ts (new)
• src/hooks/useAuth.ts (new)
• src/components/auth/LoginScreen.tsx (new)
• src/components/auth/PinLock.tsx (new)
• src/components/auth/ProfileEditor.tsx (new)
• src/db/database.ts — v3 migration
• src/App.tsx — auth gating
• src/services/DeviceService.ts — existing identity