feat: implement JWT auth and voice calibration onboarding

backend/main.py

@@ -14,6 +14,7 @@ from routes.entries import router as entries_router
 from routes.trends import router as trends_router
 from routes.alerts import router as alerts_router
 from routes.chat import router as chat_router
+from routes.auth import router as auth_router
 
 app = FastAPI(
     title="InnerVoice API",
@@ -43,28 +44,7 @@ app.include_router(entries_router, prefix="/api")
 app.include_router(trends_router, prefix="/api")
 app.include_router(alerts_router, prefix="/api")
 app.include_router(chat_router, prefix="/api")
-
-# User creation helper endpoint
-from fastapi import Depends
-from sqlalchemy.orm import Session
-from models.database import get_db, User
-from pydantic import BaseModel
-import uuid
-
-class UserCreate(BaseModel):
-    email: str
-    name: str
-
-@app.post("/api/users")
-def create_or_get_user(body: UserCreate, db: Session = Depends(get_db)):
-    user = db.query(User).filter(User.email == body.email).first()
-    if user:
-        return {"id": user.id, "email": user.email, "name": user.name, "existed": True}
-    user = User(id=str(uuid.uuid4()), email=body.email, name=body.name)
-    db.add(user)
-    db.commit()
-    db.refresh(user)
-    return {"id": user.id, "email": user.email, "name": user.name, "existed": False}
+app.include_router(auth_router, prefix="/api")
 
 
 @app.get("/api/health")

backend/models/database.py

@@ -37,6 +37,7 @@ class User(Base):
     id = Column(String, primary_key=True, default=lambda: str(uuid.uuid4()))
     email = Column(String, unique=True, nullable=False, index=True)
     name = Column(String, nullable=False)
+    password_hash = Column(String, nullable=False)
     created_at = Column(DateTime, default=datetime.utcnow)
     baseline_pitch = Column(Float, nullable=True)
     baseline_energy = Column(Float, nullable=True)

backend/requirements.txt

@@ -10,8 +10,10 @@ scipy==1.13.0
 openai==1.30.1
 httpx==0.27.0
 aiofiles==23.2.1
+passlib[bcrypt]==1.7.4
+PyJWT==2.8.0
 # ML models — comment out if you want faster install without AI analysis
 transformers==4.41.2
 torch==2.3.0
 torchaudio==2.3.0
-openai-whisper==20231117
+openai-whisper

backend/routes/alerts.py

@@ -4,16 +4,17 @@ PUT  /api/alerts/{id}/read — mark alert as read
 """
 from fastapi import APIRouter, Depends, HTTPException
 from sqlalchemy.orm import Session
-from models.database import get_db, MoodAlert
+from models.database import get_db, MoodAlert, User
+from routes.auth import get_current_user
 
 router = APIRouter()
 
 
 @router.get("/alerts")
-def get_alerts(user_id: str, db: Session = Depends(get_db)):
+def get_alerts(current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
     alerts = (
         db.query(MoodAlert)
-        .filter(MoodAlert.user_id == user_id, MoodAlert.is_read == False)
+        .filter(MoodAlert.user_id == current_user.id, MoodAlert.is_read == False)
         .order_by(MoodAlert.created_at.desc())
         .all()
     )

backend/routes/analyze.py

@@ -3,7 +3,7 @@ POST /api/analyze — Full voice analysis pipeline
 """
 import os
 import tempfile
-from fastapi import APIRouter, UploadFile, File, Form, Depends, HTTPException
+from fastapi import APIRouter, UploadFile, File, Depends, HTTPException
 from sqlalchemy.orm import Session
 from models.database import get_db, VoiceEntry, MoodAlert, User
 from services.audio_processor import convert_to_wav, extract_features
@@ -14,6 +14,7 @@ from services.transcriber import transcribe
 from services.mood_calculator import calculate_mood_scores
 from services.trend_detector import check_trends
 from services.gpt_service import generate_insight
+from routes.auth import get_current_user
 import uuid
 
 router = APIRouter()
@@ -22,7 +23,7 @@ router = APIRouter()
 @router.post("/analyze")
 async def analyze_audio(
     audio: UploadFile = File(...),
-    user_id: str = Form(...),
+    current_user: User = Depends(get_current_user),
     db: Session = Depends(get_db),
 ):
     # 1. Save uploaded audio to temp file
@@ -64,6 +65,8 @@ async def analyze_audio(
             tempo=features["speech_rate"],
             avg_pause=features["avg_pause_duration"],
             filler_rate=features["filler_rate"],
+            baseline_energy=current_user.baseline_energy,
+            baseline_pitch=current_user.baseline_pitch,
         )
 
         # 7. Generate AI insight
@@ -78,7 +81,7 @@ async def analyze_audio(
         # 8. Save voice entry to DB
         entry = VoiceEntry(
             id=str(uuid.uuid4()),
-            user_id=user_id,
+            user_id=current_user.id,
             transcription=transcription,
             primary_emotion=emotion,
             emotion_confidence=confidence,
@@ -103,7 +106,7 @@ async def analyze_audio(
         # 9. Check for trend alerts
         all_entries = (
             db.query(VoiceEntry)
-            .filter(VoiceEntry.user_id == user_id)
+            .filter(VoiceEntry.user_id == current_user.id)
             .order_by(VoiceEntry.created_at)
             .all()
         )
@@ -116,7 +119,7 @@ async def analyze_audio(
             existing = (
                 db.query(MoodAlert)
                 .filter(
-                    MoodAlert.user_id == user_id,
+                    MoodAlert.user_id == current_user.id,
                     MoodAlert.alert_type == alert_data["type"],
                     MoodAlert.created_at >= cutoff,
                 )
@@ -124,7 +127,7 @@ async def analyze_audio(
             )
             if not existing:
                 alert = MoodAlert(
-                    user_id=user_id,
+                    user_id=current_user.id,
                     alert_type=alert_data["type"],
                     severity=alert_data["severity"],
                     message=alert_data["message"],

backend/routes/auth.py

@@ -0,0 +1,164 @@
+import os
+from datetime import datetime, timedelta
+from typing import Optional
+import jwt
+import bcrypt
+from fastapi import APIRouter, Depends, HTTPException, status, UploadFile, File
+from fastapi.security import OAuth2PasswordBearer
+from pydantic import BaseModel
+from sqlalchemy.orm import Session
+from models.database import get_db, User
+from services.audio_processor import convert_to_wav, extract_features
+import tempfile
+
+router = APIRouter(prefix="/auth", tags=["auth"])
+
+SECRET_KEY = os.getenv("SECRET_KEY", "change_me_to_a_random_secret_key_32chars")
+ALGORITHM = "HS256"
+ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24 * 7 # 7 days
+
+oauth2_scheme = OAuth2PasswordBearer(tokenUrl="api/auth/login")
+
+
+class UserCreate(BaseModel):
+    name: str
+    email: str
+    password: str
+
+class UserLogin(BaseModel):
+    email: str
+    password: str
+
+class Token(BaseModel):
+    access_token: str
+    token_type: str
+    user_id: str
+    name: str
+    has_baseline: bool
+
+
+def verify_password(plain_password, hashed_password):
+    return bcrypt.checkpw(plain_password.encode("utf-8"), hashed_password.encode("utf-8"))
+
+def get_password_hash(password):
+    salt = bcrypt.gensalt()
+    return bcrypt.hashpw(password.encode("utf-8"), salt).decode("utf-8")
+
+def create_access_token(data: dict, expires_delta: Optional[timedelta] = None):
+    to_encode = data.copy()
+    if expires_delta:
+        expire = datetime.utcnow() + expires_delta
+    else:
+        expire = datetime.utcnow() + timedelta(minutes=15)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
+    return encoded_jwt
+
+
+async def get_current_user(token: str = Depends(oauth2_scheme), db: Session = Depends(get_db)):
+    credentials_exception = HTTPException(
+        status_code=status.HTTP_401_UNAUTHORIZED,
+        detail="Could not validate credentials",
+        headers={"WWW-Authenticate": "Bearer"},
+    )
+    try:
+        payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])
+        user_id: str = payload.get("sub")
+        if user_id is None:
+            raise credentials_exception
+    except jwt.PyJWTError:
+        raise credentials_exception
+    user = db.query(User).filter(User.id == user_id).first()
+    if user is None:
+        raise credentials_exception
+    return user
+
+
+@router.post("/register", response_model=Token)
+def register(user_in: UserCreate, db: Session = Depends(get_db)):
+    # Check if exists
+    if db.query(User).filter(User.email == user_in.email).first():
+        raise HTTPException(status_code=400, detail="Email already registered")
+    
+    hashed_password = get_password_hash(user_in.password)
+    user = User(
+        name=user_in.name,
+        email=user_in.email,
+        password_hash=hashed_password
+    )
+    db.add(user)
+    db.commit()
+    db.refresh(user)
+    
+    # Create token
+    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    access_token = create_access_token(
+        data={"sub": user.id}, expires_delta=access_token_expires
+    )
+    return {
+        "access_token": access_token, 
+        "token_type": "bearer", 
+        "user_id": user.id,
+        "name": user.name,
+        "has_baseline": False
+    }
+
+
+@router.post("/login", response_model=Token)
+def login(user_in: UserLogin, db: Session = Depends(get_db)):
+    user = db.query(User).filter(User.email == user_in.email).first()
+    if not user or not verify_password(user_in.password, user.password_hash):
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect email or password",
+        )
+    
+    access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
+    access_token = create_access_token(
+        data={"sub": user.id}, expires_delta=access_token_expires
+    )
+    return {
+        "access_token": access_token, 
+        "token_type": "bearer", 
+        "user_id": user.id,
+        "name": user.name,
+        "has_baseline": user.baseline_pitch is not None
+    }
+
+
+@router.post("/baseline")
+async def setup_baseline(
+    audio: UploadFile = File(...),
+    current_user: User = Depends(get_current_user),
+    db: Session = Depends(get_db)
+):
+    """
+    Onboarding step: Takes a neutral reading audio clip, extracts features,
+    and sets the baseline statistics for the user.
+    """
+    suffix = ".webm" if audio.content_type == "audio/webm" else ".wav"
+    tmp_fd, tmp_path = tempfile.mkstemp(suffix=suffix)
+    wav_path = None
+    try:
+        content = await audio.read()
+        with os.fdopen(tmp_fd, "wb") as f:
+            f.write(content)
+
+        wav_path = convert_to_wav(tmp_path)
+        features = extract_features(wav_path)
+        
+        # Save to user
+        current_user.baseline_pitch = features.get("pitch_mean", 0.0)
+        current_user.baseline_energy = features.get("energy_raw", 0.0)
+        current_user.baseline_speech_rate = features.get("speech_rate", 0.0)
+        
+        db.commit()
+        db.refresh(current_user)
+        return {"msg": "Baseline set successfully", "has_baseline": True}
+    
+    finally:
+        if os.path.exists(tmp_path):
+            os.remove(tmp_path)
+        if wav_path and os.path.exists(wav_path):
+            os.remove(wav_path)
+

backend/routes/chat.py

@@ -4,25 +4,26 @@ POST /api/chat — AI companion chat with full user context
 from fastapi import APIRouter, Depends, HTTPException
 from pydantic import BaseModel
 from sqlalchemy.orm import Session
-from models.database import get_db, ChatMessage, VoiceEntry
+from models.database import get_db, ChatMessage, VoiceEntry, User
+from routes.auth import get_current_user
 from services.gpt_service import chat_response
+from typing import Optional
 import uuid
 
 router = APIRouter()
 
 
 class ChatRequest(BaseModel):
-    user_id: str
     message: str
-    voice_entry_id: str | None = None
+    voice_entry_id: Optional[str] = None
 
 
 @router.post("/chat")
-def chat(req: ChatRequest, db: Session = Depends(get_db)):
+def chat(req: ChatRequest, current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
     # Fetch recent voice entries for context
     recent_entries = (
         db.query(VoiceEntry)
-        .filter(VoiceEntry.user_id == req.user_id)
+        .filter(VoiceEntry.user_id == current_user.id)
         .order_by(VoiceEntry.created_at.desc())
         .limit(30)
         .all()
@@ -32,7 +33,7 @@ def chat(req: ChatRequest, db: Session = Depends(get_db)):
     # Fetch conversation history
     history = (
         db.query(ChatMessage)
-        .filter(ChatMessage.user_id == req.user_id)
+        .filter(ChatMessage.user_id == current_user.id)
         .order_by(ChatMessage.created_at.asc())
         .limit(40)
         .all()
@@ -49,7 +50,7 @@ def chat(req: ChatRequest, db: Session = Depends(get_db)):
     # Save user message
     user_msg = ChatMessage(
         id=str(uuid.uuid4()),
-        user_id=req.user_id,
+        user_id=current_user.id,
         role="user",
         content=req.message,
         voice_entry_id=req.voice_entry_id,
@@ -59,7 +60,7 @@ def chat(req: ChatRequest, db: Session = Depends(get_db)):
     # Save assistant response
     ai_msg = ChatMessage(
         id=str(uuid.uuid4()),
-        user_id=req.user_id,
+        user_id=current_user.id,
         role="assistant",
         content=response_text,
         voice_entry_id=req.voice_entry_id,
@@ -74,10 +75,10 @@ def chat(req: ChatRequest, db: Session = Depends(get_db)):
 
 
 @router.get("/chat/history")
-def get_chat_history(user_id: str, db: Session = Depends(get_db)):
+def get_chat_history(current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
     messages = (
         db.query(ChatMessage)
-        .filter(ChatMessage.user_id == user_id)
+        .filter(ChatMessage.user_id == current_user.id)
         .order_by(ChatMessage.created_at.asc())
         .limit(100)
         .all()

backend/routes/entries.py

@@ -3,7 +3,8 @@ GET /api/entries — fetch voice entries for a user
 """
 from fastapi import APIRouter, Depends, Query
 from sqlalchemy.orm import Session
-from models.database import get_db, VoiceEntry
+from models.database import get_db, VoiceEntry, User
+from routes.auth import get_current_user
 from datetime import datetime, timedelta
 
 router = APIRouter()
@@ -11,14 +12,14 @@ router = APIRouter()
 
 @router.get("/entries")
 def get_entries(
-    user_id: str,
+    current_user: User = Depends(get_current_user),
     days: int = Query(default=30, ge=1, le=365),
     db: Session = Depends(get_db),
 ):
     cutoff = datetime.utcnow() - timedelta(days=days)
     entries = (
         db.query(VoiceEntry)
-        .filter(VoiceEntry.user_id == user_id, VoiceEntry.created_at >= cutoff)
+        .filter(VoiceEntry.user_id == current_user.id, VoiceEntry.created_at >= cutoff)
         .order_by(VoiceEntry.created_at)
         .all()
     )

backend/routes/trends.py

@@ -3,7 +3,8 @@ GET /api/trends — week-over-week comparisons and pattern insights
 """
 from fastapi import APIRouter, Depends, Query
 from sqlalchemy.orm import Session
-from models.database import get_db, VoiceEntry
+from models.database import get_db, VoiceEntry, User
+from routes.auth import get_current_user
 from datetime import datetime, timedelta
 from statistics import mean
 from collections import Counter
@@ -12,10 +13,10 @@ router = APIRouter()
 
 
 @router.get("/trends")
-def get_trends(user_id: str, db: Session = Depends(get_db)):
+def get_trends(current_user: User = Depends(get_current_user), db: Session = Depends(get_db)):
     entries = (
         db.query(VoiceEntry)
-        .filter(VoiceEntry.user_id == user_id)
+        .filter(VoiceEntry.user_id == current_user.id)
         .order_by(VoiceEntry.created_at)
         .all()
     )

backend/seed_data.py

@@ -125,10 +125,16 @@ def seed():
         # Create or get demo user
         user = db.query(User).filter(User.email == DEMO_USER_EMAIL).first()
         if not user:
+            from routes.auth import get_password_hash
+            hashed_pwd = get_password_hash("password")
             user = User(
                 id=str(uuid.uuid4()),
                 email=DEMO_USER_EMAIL,
                 name=DEMO_USER_NAME,
+                password_hash=hashed_pwd,
+                baseline_pitch=150.0,
+                baseline_energy=0.03,
+                baseline_speech_rate=100.0,
             )
             db.add(user)
             db.commit()

backend/services/mood_calculator.py

@@ -12,11 +12,22 @@ def calculate_mood_scores(
     tempo: float,
     avg_pause: float,
     filler_rate: float,
+    baseline_energy: float = None,
+    baseline_pitch: float = None,
 ) -> dict:
     """Calculate Energy, Calmness, Mood, and Clarity scores (0-100)."""
 
     # ── Energy Score ──────────────────────────────────────────────────────────
-    energy_score = min(100, int(energy * 5000))
+    if baseline_energy and baseline_energy > 0:
+        # Calculate relative to baseline
+        ratio = energy / baseline_energy
+        # If ratio is 1.0 (baseline), score is 50.
+        # Max out at 2x baseline
+        energy_score = min(100, int((ratio) * 50))
+    else:
+        # Fallback to absolute
+        energy_score = min(100, int(energy * 5000))
+        
     if emotion == "happy":
         energy_score = min(100, energy_score + 15)
     if emotion == "sad":

frontend/app/chat/page.tsx

@@ -32,7 +32,7 @@ export default function ChatPage() {
         if (isDemoMode) {
           setMessages(DEMO_CHAT_HISTORY as Message[]);
         } else {
-          const hist = await api.getChatHistory(userId);
+          const hist = await api.getChatHistory();
           setMessages(hist as Message[]);
         }
       } catch (e) {
@@ -68,7 +68,7 @@ export default function ChatPage() {
            setLoading(false);
         });
       } else {
-        const res = await api.chat(userId, text);
+        const res = await api.chat(text);
         setMessages(prev => [...prev, { id: Date.now().toString(), role: "assistant", content: res.response }]);
       }
     } catch (e) {

frontend/app/dashboard/page.tsx

@@ -27,9 +27,9 @@ export default function DashboardPage() {
           setTrends(DEMO_TRENDS);
         } else {
           const [eRes, aRes, tRes] = await Promise.all([
-            api.getEntries(userId, 14),
-            api.getAlerts(userId),
-            api.getTrends(userId),
+            api.getEntries(14),
+            api.getAlerts(),
+            api.getTrends(),
           ]);
           setEntries(eRes);
           setAlerts(aRes);

frontend/app/layout.tsx

@@ -4,6 +4,8 @@ import "./globals.css";
 import Navbar from "@/components/Navbar";
 import DemoModeBanner from "@/components/DemoModeBanner";
 
+import { AuthProvider } from "@/contexts/AuthContext";
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -24,9 +26,11 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
       </head>
       <body className={`${inter.className} bg-[#0f0a1e] text-white min-h-screen`}>
-        <DemoModeBanner />
-        <Navbar />
-        <main className="md:ml-64 min-h-screen pt-10 md:pt-0">{children}</main>
+        <AuthProvider>
+          <DemoModeBanner />
+          <Navbar />
+          <main className="md:ml-64 min-h-screen pt-10 md:pt-0">{children}</main>
+        </AuthProvider>
       </body>
     </html>
   );

frontend/app/login/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/contexts/AuthContext";
+import { apiPost } from "@/lib/api";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const { loginState } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      const data = await apiPost<{ access_token: string; user_id: string; name: string; has_baseline: boolean }>(
+        "/api/auth/login",
+        { email, password }
+      );
+      
+      loginState(data.access_token, {
+        id: data.user_id,
+        name: data.name,
+        hasBaseline: data.has_baseline,
+      });
+
+      if (!data.has_baseline) {
+        router.push("/onboarding");
+      } else {
+        router.push("/dashboard");
+      }
+    } catch (err: any) {
+      setError("Invalid email or password");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-6 relative z-10 md:-ml-64">
+      <div className="w-full max-w-sm glass-card p-8 animate-slide-up">
+        <div className="text-center mb-8">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-600 to-teal-500 flex items-center justify-center text-2xl shadow-glow-purple mx-auto mb-4">
+            🎵
+          </div>
+          <h1 className="text-2xl font-bold">Welcome Back</h1>
+          <p className="text-sm text-white/50 mt-2">Sign in to InnerVoice</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-semibold uppercase text-white/50 mb-1.5 ml-1">Email</label>
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 outline-none focus:border-purple-500/50 transition-colors"
+              placeholder="you@example.com"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold uppercase text-white/50 mb-1.5 ml-1">Password</label>
+            <input
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 outline-none focus:border-purple-500/50 transition-colors"
+              placeholder="••••••••"
+            />
+          </div>
+
+          {error && <div className="text-red-400 text-sm text-center py-2">{error}</div>}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-3 mt-4 bg-gradient-to-r from-purple-600 to-teal-500 font-semibold rounded-xl hover:opacity-90 transition-opacity text-white disabled:opacity-50"
+          >
+            {loading ? "Signing in..." : "Sign In"}
+          </button>
+        </form>
+
+        <p className="text-center text-sm text-white/40 mt-6">
+          Don't have an account?{" "}
+          <Link href="/signup" className="text-purple-400 hover:text-purple-300">
+            Sign up
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/app/onboarding/page.tsx

@@ -0,0 +1,138 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/contexts/AuthContext";
+import { useAudioRecorder } from "@/hooks/useAudioRecorder";
+import { api } from "@/lib/api";
+import WaveformVisualizer from "@/components/WaveformVisualizer";
+import CircularProgress from "@/components/CircularProgress";
+import { motion } from "framer-motion";
+
+export default function OnboardingPage() {
+  const router = useRouter();
+  const { user, loginState, token } = useAuth();
+  
+  const {
+    state,
+    seconds,
+    startRecording,
+    stopRecording,
+    audioBlob,
+    analyserNode,
+    reset
+  } = useAudioRecorder(15); 
+  
+  const isRecording = state === "recording";
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (seconds >= 15 && isRecording) {
+      stopRecording();
+    }
+  }, [seconds, isRecording, stopRecording]);
+
+  const handleSubmit = async () => {
+    if (!audioBlob) return;
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      const res = await api.setBaseline(audioBlob);
+      if (res.has_baseline && user && token) {
+        // Update user state globally
+        loginState(token, { ...user, hasBaseline: true });
+        router.push("/dashboard");
+      }
+    } catch (err: any) {
+      setError("Failed to process calibration audio. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="max-w-3xl mx-auto p-6 md:p-10 relative mt-20 md:mt-0">
+      <div className="mb-10 animate-fade-in text-center">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-teal-400 to-purple-400 bg-clip-text text-transparent">
+          Voice Calibration
+        </h1>
+        <p className="text-white/60 mt-2 max-w-lg mx-auto">
+          Before we begin, we need a baseline of your "normal" voice. This helps 
+          our AI detect subtle shifts in your mood relative to your personal baseline.
+        </p>
+      </div>
+
+      <div className="glass-card p-6 md:p-10 mb-8 max-w-2xl mx-auto">
+        <div className="bg-black/30 p-6 rounded-2xl border border-white/5 mb-8">
+          <p className="text-xs uppercase text-white/50 mb-4 font-semibold tracking-wider">Please read this short text aloud:</p>
+          <p className="text-lg md:text-xl font-medium leading-relaxed">
+            "I am recording this to calibrate my voice. The quick brown fox jumps over the lazy dog. It is a beautiful day outside, and I am feeling calm and neutral."
+          </p>
+        </div>
+
+        <div className="flex flex-col items-center">
+          <div className="h-24 w-full mb-8 relative">
+            {!isRecording && !audioBlob ? (
+              <div className="absolute inset-0 flex items-center justify-center text-white/20 text-sm">
+                Voice visualizer will appear here...
+              </div>
+            ) : (
+              <WaveformVisualizer analyserNode={analyserNode} isActive={isRecording} />
+            )}
+          </div>
+
+          {!audioBlob ? (
+            <div className="relative w-24 h-24">
+              <CircularProgress progress={(seconds / 15) * 100} />
+              <button
+                onClick={isRecording ? stopRecording : startRecording}
+                className={`absolute inset-0 m-auto w-16 h-16 rounded-full flex items-center justify-center transition-all ${
+                  isRecording 
+                    ? "bg-red-500/20 text-red-400 hover:bg-red-500/30" 
+                    : "bg-purple-500 hover:bg-purple-400 hover:shadow-glow-purple text-white shadow-lg"
+                }`}
+              >
+                {isRecording ? (
+                  <div className="w-5 h-5 bg-red-400 rounded-sm animate-pulse" />
+                ) : (
+                  <svg className="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/></svg>
+                )}
+              </button>
+              {isRecording && (
+                <div className="absolute -bottom-8 left-0 right-0 text-center text-sm font-medium text-red-400">
+                  {Math.floor(seconds)}s / 15s
+                </div>
+              )}
+            </div>
+          ) : (
+            <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="flex gap-4">
+              <button
+                disabled={isSubmitting}
+                onClick={() => reset()}
+                className="px-6 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition-colors font-medium border border-white/10 disabled:opacity-50"
+              >
+                Retake
+              </button>
+              <button
+                onClick={handleSubmit}
+                disabled={isSubmitting}
+                className="px-8 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-teal-500 font-medium hover:opacity-90 transition-opacity shadow-glow-purple disabled:opacity-50 flex items-center gap-2"
+              >
+                {isSubmitting ? (
+                  <>
+                    <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                    Calibrating...
+                  </>
+                ) : "Set Baseline"}
+              </button>
+            </motion.div>
+          )}
+
+          {error && <div className="mt-6 text-red-400 text-sm">{error}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/app/record/page.tsx

@@ -55,7 +55,7 @@ export default function RecordPage() {
               setAnalyzing(false);
             });
           } else {
-            const res = await api.analyzeAudio(audioBlob, userId);
+            const res = await api.analyzeAudio(audioBlob);
             setResult(res);
             setAnalyzing(false);
           }

frontend/app/signup/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/contexts/AuthContext";
+import { apiPost } from "@/lib/api";
+
+export default function SignupPage() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const { loginState } = useAuth();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      const data = await apiPost<{ access_token: string; user_id: string; name: string; has_baseline: boolean }>(
+        "/api/auth/register",
+        { name, email, password }
+      );
+      
+      loginState(data.access_token, {
+        id: data.user_id,
+        name: data.name,
+        hasBaseline: data.has_baseline,
+      });
+
+      router.push("/onboarding");
+    } catch (err: any) {
+      setError("Registration failed, email might be in use.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-6 relative z-10 md:-ml-64">
+      <div className="w-full max-w-sm glass-card p-8 animate-slide-up">
+        <div className="text-center mb-8">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-purple-600 to-teal-500 flex items-center justify-center text-2xl shadow-glow-purple mx-auto mb-4">
+            ✨
+          </div>
+          <h1 className="text-2xl font-bold">Join InnerVoice</h1>
+          <p className="text-sm text-white/50 mt-2">Start your emotional wellness journey</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-xs font-semibold uppercase text-white/50 mb-1.5 ml-1">Name</label>
+            <input
+              type="text"
+              required
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 outline-none focus:border-purple-500/50 transition-colors"
+              placeholder="Your Name"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold uppercase text-white/50 mb-1.5 ml-1">Email</label>
+            <input
+              type="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 outline-none focus:border-purple-500/50 transition-colors"
+              placeholder="you@example.com"
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-semibold uppercase text-white/50 mb-1.5 ml-1">Password</label>
+            <input
+              type="password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white placeholder:text-white/20 outline-none focus:border-purple-500/50 transition-colors"
+              placeholder="••••••••"
+            />
+          </div>
+
+          {error && <div className="text-red-400 text-sm text-center py-2">{error}</div>}
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full py-3 mt-4 bg-gradient-to-r from-purple-600 to-teal-500 font-semibold rounded-xl hover:opacity-90 transition-opacity text-white disabled:opacity-50"
+          >
+            {loading ? "Creating Account..." : "Create Account"}
+          </button>
+        </form>
+
+        <p className="text-center text-sm text-white/40 mt-6">
+          Already have an account?{" "}
+          <Link href="/login" className="text-purple-400 hover:text-purple-300">
+            Sign in
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/app/timeline/page.tsx

@@ -25,8 +25,8 @@ export default function TimelinePage() {
           setTrends(DEMO_TRENDS);
         } else {
           const [eRes, tRes] = await Promise.all([
-            api.getEntries(userId, 30),
-            api.getTrends(userId),
+            api.getEntries(30),
+            api.getTrends(),
           ]);
           setEntries(eRes);
           setTrends(tRes);

frontend/components/Navbar.tsx

@@ -2,6 +2,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useDemoMode } from "@/hooks/useDemoMode";
+import { useAuth } from "@/contexts/AuthContext";
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: "🏠" },
@@ -14,6 +15,7 @@ const navItems = [
 export default function Navbar() {
   const pathname = usePathname();
   const { isDemoMode, toggleDemoMode } = useDemoMode();
+  const { user, logout } = useAuth();
 
   return (
     <>
@@ -56,8 +58,17 @@ export default function Navbar() {
           })}
         </div>
 
-        {/* Demo mode toggle */}
-        <div className="p-4 border-t border-white/5">
+        {/* Demo mode & Auth */}
+        <div className="p-4 border-t border-white/5 space-y-2">
+          {user && !isDemoMode && (
+            <button
+              onClick={logout}
+              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-sm text-white/40 hover:text-red-400 hover:bg-white/5"
+            >
+              <span>👋</span>
+              <span className="font-medium">Sign Out</span>
+            </button>
+          )}
           <button
             onClick={toggleDemoMode}
             className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all text-sm ${

frontend/contexts/AuthContext.tsx

@@ -0,0 +1,97 @@
+"use client";
+import { createContext, useContext, useState, useEffect, ReactNode } from "react";
+import { useRouter, usePathname } from "next/navigation";
+import { useDemoMode } from "@/hooks/useDemoMode";
+
+interface User {
+  id: string;
+  name: string;
+  hasBaseline: boolean;
+}
+
+interface AuthContextType {
+  user: User | null;
+  token: string | null;
+  loginState: (token: string, user: User) => void;
+  logout: () => void;
+  isLoading: boolean;
+}
+
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  token: null,
+  loginState: () => {},
+  logout: () => {},
+  isLoading: true,
+});
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [token, setToken] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const router = useRouter();
+  const pathname = usePathname();
+  const { isDemoMode } = useDemoMode();
+
+  useEffect(() => {
+    // Load auth from local storage on mount
+    const savedToken = localStorage.getItem("token");
+    const savedUser = localStorage.getItem("user");
+    
+    if (savedToken && savedUser) {
+      setToken(savedToken);
+      setUser(JSON.parse(savedUser));
+    }
+    setIsLoading(false);
+  }, []);
+
+  // Route guarding
+  useEffect(() => {
+    if (isLoading) return;
+    
+    const publicPaths = ["/", "/login", "/signup"];
+    const isPublic = publicPaths.includes(pathname);
+    
+    if (isDemoMode) {
+      // Allow full access in Demo Mode
+      return; 
+    }
+
+    if (!user && !isPublic) {
+      router.push("/login");
+    } else if (user && isPublic && pathname !== "/") {
+      if (!user.hasBaseline) {
+        router.push("/onboarding");
+      } else {
+        router.push("/dashboard");
+      }
+    } else if (user && !user.hasBaseline && pathname !== "/onboarding") {
+      router.push("/onboarding");
+    }
+  }, [user, pathname, isLoading, router, isDemoMode]);
+
+  const loginState = (newToken: string, newUser: User) => {
+    setToken(newToken);
+    setUser(newUser);
+    localStorage.setItem("token", newToken);
+    localStorage.setItem("user", JSON.stringify(newUser));
+  };
+
+  const logout = () => {
+    setToken(null);
+    setUser(null);
+    localStorage.removeItem("token");
+    localStorage.removeItem("user");
+    router.push("/");
+  };
+
+  return (
+    <AuthContext.Provider value={{ user, token, loginState, logout, isLoading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}

frontend/lib/api.ts

@@ -2,8 +2,16 @@
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
 
+function getAuthHeader(): Record<string, string> {
+  if (typeof window === "undefined") return {};
+  const token = localStorage.getItem("token");
+  return token ? { Authorization: `Bearer ${token}` } : {};
+}
+
 export async function apiGet<T>(path: string): Promise<T> {
-  const res = await fetch(`${API_URL}${path}`);
+  const res = await fetch(`${API_URL}${path}`, {
+    headers: { ...getAuthHeader() },
+  });
   if (!res.ok) throw new Error(`API Error ${res.status}: ${await res.text()}`);
   return res.json();
 }
@@ -11,7 +19,7 @@ export async function apiGet<T>(path: string): Promise<T> {
 export async function apiPost<T>(path: string, body: unknown): Promise<T> {
   const res = await fetch(`${API_URL}${path}`, {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", ...getAuthHeader() },
     body: JSON.stringify(body),
   });
   if (!res.ok) throw new Error(`API Error ${res.status}: ${await res.text()}`);
@@ -19,7 +27,10 @@ export async function apiPost<T>(path: string, body: unknown): Promise<T> {
 }
 
 export async function apiPut<T>(path: string): Promise<T> {
-  const res = await fetch(`${API_URL}${path}`, { method: "PUT" });
+  const res = await fetch(`${API_URL}${path}`, {
+    method: "PUT",
+    headers: { ...getAuthHeader() },
+  });
   if (!res.ok) throw new Error(`API Error ${res.status}: ${await res.text()}`);
   return res.json();
 }
@@ -74,38 +85,61 @@ export interface AnalyzeResult {
 }
 
 export const api = {
-  getEntries: (userId: string, days = 30) =>
-    apiGet<VoiceEntry[]>(`/api/entries?user_id=${userId}&days=${days}`),
+  getEntries: (days = 30) =>
+    apiGet<VoiceEntry[]>(`/api/entries?days=${days}`),
 
-  getTrends: (userId: string) =>
-    apiGet<TrendsData>(`/api/trends?user_id=${userId}`),
+  getTrends: () =>
+    apiGet<TrendsData>(`/api/trends`),
 
-  getAlerts: (userId: string) =>
-    apiGet<MoodAlert[]>(`/api/alerts?user_id=${userId}`),
+  getAlerts: () =>
+    apiGet<MoodAlert[]>(`/api/alerts`),
 
   markAlertRead: (alertId: string) =>
     apiPut<{ success: boolean }>(`/api/alerts/${alertId}/read`),
 
-  chat: (userId: string, message: string) =>
-    apiPost<{ response: string }>("/api/chat", { user_id: userId, message }),
+  chat: (message: string) =>
+    apiPost<{ response: string }>("/api/chat", { message }),
 
-  getChatHistory: (userId: string) =>
+  getChatHistory: () =>
     apiGet<Array<{ id: string; role: string; content: string; created_at: string }>>(
-      `/api/chat/history?user_id=${userId}`
+      `/api/chat/history`
     ),
 
-  createUser: (email: string, name: string) =>
-    apiPost<{ id: string; email: string; name: string }>("/api/users", { email, name }),
-
-  analyzeAudio: async (audioBlob: Blob, userId: string): Promise<AnalyzeResult> => {
+  analyzeAudio: async (audioBlob: Blob): Promise<AnalyzeResult> => {
     const formData = new FormData();
     formData.append("audio", audioBlob, "recording.webm");
-    formData.append("user_id", userId);
+    
+    const headers: Record<string, string> = {};
+    if (typeof window !== "undefined") {
+      const token = localStorage.getItem("token");
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+    }
+
     const res = await fetch(`${API_URL}/api/analyze`, {
       method: "POST",
+      headers,
       body: formData,
     });
     if (!res.ok) throw new Error(`Analyze error ${res.status}`);
     return res.json();
   },
+
+  setBaseline: async (audioBlob: Blob): Promise<{msg: string, has_baseline: boolean}> => {
+    const formData = new FormData();
+    formData.append("audio", audioBlob, "calibration.webm");
+    
+    const headers: Record<string, string> = {};
+    if (typeof window !== "undefined") {
+      const token = localStorage.getItem("token");
+      if (token) headers["Authorization"] = `Bearer ${token}`;
+    }
+
+    const res = await fetch(`${API_URL}/api/auth/baseline`, {
+      method: "POST",
+      headers,
+      body: formData,
+    });
+    if (!res.ok) throw new Error(`Baseline error ${res.status}`);
+    return res.json();
+  }
 };