Add user authentication, RBAC, and improved recruiter dashboard

- JWT-based auth with access tokens (15m) and refresh tokens (7d)
- User registration, login, logout, and /auth/me endpoints
- Three roles: admin, recruiter, hiring_manager with middleware enforcement
- users and refresh_tokens tables with bcrypt password hashing
- Login and Register pages with full form validation
- Protected routes — unauthenticated users redirect to /login
- Dashboard upgraded: real metrics, pipeline overview with progress bars,
  recent activity feed with 30s polling, and quick-action cards
- Dashboard API endpoints: /api/dashboard/metrics, pipeline-summary, recent-activity

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

client/package.json

@@ -9,28 +9,29 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.6.0",
-    "lucide-react": "^0.469.0",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.4"
+    "@radix-ui/react-toast": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.0",
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "typescript": "~5.7.0",
-    "vite": "^6.0.0",
     "tailwindcss": "^4.0.0",
-    "@tailwindcss/vite": "^4.0.0"
+    "typescript": "~5.7.0",
+    "vite": "^6.0.0"
   }
 }

client/src/App.tsx

@@ -1,42 +1,77 @@
-import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom'
+import { AuthProvider, useAuth } from '@/lib/auth'
 import HomePage from '@/pages/Home'
 import CandidatesPage from '@/pages/Candidates'
 import JobsPage from '@/pages/Jobs'
 import ScorecardsPage from '@/pages/Scorecards'
+import LoginPage from '@/pages/Login'
+import RegisterPage from '@/pages/Register'
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth()
+  if (loading) return <div className="min-h-screen flex items-center justify-center text-muted-foreground">Loading...</div>
+  if (!user) return <Navigate to="/login" replace />
+  return <>{children}</>
+}
+
+function Layout() {
+  const { user, logout } = useAuth()
+
+  return (
+    <div className="min-h-screen bg-[#F9FAFB]">
+      <header className="border-b sticky top-0 bg-white z-10 shadow-sm">
+        <div className="container mx-auto flex h-16 items-center justify-between px-4">
+          <div className="flex items-center gap-2">
+            <span className="text-xl font-bold text-[#3B82F6]">HireFlow</span>
+            <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full hidden sm:block">AI Recruitment</span>
+          </div>
+          <nav className="flex items-center gap-1">
+            <NavLink to="/" end className={({ isActive }) =>
+              `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-[#3B82F6] text-white' : 'hover:bg-muted'}`
+            }>Dashboard</NavLink>
+            <NavLink to="/candidates" className={({ isActive }) =>
+              `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-[#3B82F6] text-white' : 'hover:bg-muted'}`
+            }>Candidates</NavLink>
+            <NavLink to="/jobs" className={({ isActive }) =>
+              `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-[#3B82F6] text-white' : 'hover:bg-muted'}`
+            }>Jobs</NavLink>
+            <NavLink to="/scorecards" className={({ isActive }) =>
+              `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-[#3B82F6] text-white' : 'hover:bg-muted'}`
+            }>Scorecards</NavLink>
+          </nav>
+          {user && (
+            <div className="flex items-center gap-3">
+              <div className="hidden sm:block text-right">
+                <p className="text-xs font-medium">{user.email}</p>
+                <p className="text-xs text-muted-foreground capitalize">{user.role.replace('_', ' ')}</p>
+              </div>
+              <button onClick={logout} className="text-xs text-muted-foreground hover:text-foreground px-2 py-1 rounded hover:bg-muted transition-colors">
+                Sign out
+              </button>
+            </div>
+          )}
+        </div>
+      </header>
+      <Routes>
+        <Route path="/" element={<ProtectedRoute><HomePage /></ProtectedRoute>} />
+        <Route path="/candidates" element={<ProtectedRoute><CandidatesPage /></ProtectedRoute>} />
+        <Route path="/jobs" element={<ProtectedRoute><JobsPage /></ProtectedRoute>} />
+        <Route path="/scorecards" element={<ProtectedRoute><ScorecardsPage /></ProtectedRoute>} />
+      </Routes>
+    </div>
+  )
+}
 
 function App() {
   return (
     <BrowserRouter>
-      <div className="min-h-screen bg-background">
-        <header className="border-b sticky top-0 bg-background z-10">
-          <div className="container mx-auto flex h-16 items-center justify-between px-4">
-            <div className="flex items-center gap-2">
-              <span className="text-xl font-bold text-primary">HireFlow</span>
-              <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">AI Recruitment</span>
-            </div>
-            <nav className="flex items-center gap-1">
-              <NavLink to="/" end className={({ isActive }) =>
-                `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`
-              }>Dashboard</NavLink>
-              <NavLink to="/candidates" className={({ isActive }) =>
-                `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`
-              }>Candidates</NavLink>
-              <NavLink to="/jobs" className={({ isActive }) =>
-                `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`
-              }>Jobs</NavLink>
-              <NavLink to="/scorecards" className={({ isActive }) =>
-                `px-3 py-2 rounded-md text-sm font-medium transition-colors ${isActive ? 'bg-primary text-primary-foreground' : 'hover:bg-muted'}`
-              }>Scorecards</NavLink>
-            </nav>
-          </div>
-        </header>
+      <AuthProvider>
         <Routes>
-          <Route path="/" element={<HomePage />} />
-          <Route path="/candidates" element={<CandidatesPage />} />
-          <Route path="/jobs" element={<JobsPage />} />
-          <Route path="/scorecards" element={<ScorecardsPage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/register" element={<RegisterPage />} />
+          <Route path="/*" element={<Layout />} />
         </Routes>
-      </div>
+      </AuthProvider>
     </BrowserRouter>
   )
 }

client/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

client/src/lib/auth.tsx

@@ -0,0 +1,127 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+
+interface User {
+  id: number
+  email: string
+  role: 'admin' | 'recruiter' | 'hiring_manager'
+}
+
+interface AuthContextType {
+  user: User | null
+  accessToken: string | null
+  login: (email: string, password: string) => Promise<void>
+  logout: () => Promise<void>
+  register: (email: string, password: string, role?: string) => Promise<void>
+  loading: boolean
+}
+
+const AuthContext = createContext<AuthContextType | null>(null)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [accessToken, setAccessToken] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const token = localStorage.getItem('accessToken')
+    const refreshToken = localStorage.getItem('refreshToken')
+    if (token && refreshToken) {
+      // Verify token by fetching /auth/me
+      fetch('/auth/me', { headers: { Authorization: `Bearer ${token}` } })
+        .then(r => r.json())
+        .then(data => {
+          if (data.id) {
+            setUser(data)
+            setAccessToken(token)
+          } else {
+            // Try refresh
+            return refreshAccessToken(refreshToken)
+          }
+        })
+        .catch(() => {})
+        .finally(() => setLoading(false))
+    } else {
+      setLoading(false)
+    }
+  }, [])
+
+  async function refreshAccessToken(refreshToken: string) {
+    const res = await fetch('/auth/refresh', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ refreshToken })
+    })
+    if (res.ok) {
+      const data = await res.json()
+      setAccessToken(data.accessToken)
+      setUser(data.user)
+      localStorage.setItem('accessToken', data.accessToken)
+    } else {
+      localStorage.removeItem('accessToken')
+      localStorage.removeItem('refreshToken')
+    }
+  }
+
+  async function login(email: string, password: string) {
+    const res = await fetch('/auth/login', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password })
+    })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Login failed')
+    setUser(data.user)
+    setAccessToken(data.accessToken)
+    localStorage.setItem('accessToken', data.accessToken)
+    localStorage.setItem('refreshToken', data.refreshToken)
+  }
+
+  async function logout() {
+    const token = accessToken || localStorage.getItem('accessToken')
+    if (token) {
+      await fetch('/auth/logout', {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}` }
+      }).catch(() => {})
+    }
+    setUser(null)
+    setAccessToken(null)
+    localStorage.removeItem('accessToken')
+    localStorage.removeItem('refreshToken')
+  }
+
+  async function register(email: string, password: string, role = 'recruiter') {
+    const res = await fetch('/auth/register', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email, password, role })
+    })
+    const data = await res.json()
+    if (!res.ok) throw new Error(data.error || 'Registration failed')
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, accessToken, login, logout, register, loading }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext)
+  if (!ctx) throw new Error('useAuth must be used within AuthProvider')
+  return ctx
+}
+
+// Helper to make authenticated API calls
+export async function authFetch(url: string, options: RequestInit = {}) {
+  const token = localStorage.getItem('accessToken')
+  return fetch(url, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...options.headers
+    }
+  })
+}

client/src/pages/Home.tsx

@@ -1,34 +1,87 @@
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { authFetch } from '@/lib/auth'
 
-interface Stats {
-  candidates: number
-  jobs: number
-  scorecards: number
-  applications: number
+interface Metrics {
+  totalCandidates: number
+  activeJobs: number
+  totalApplications: number
+  interviewsThisWeek: number
+}
+
+interface PipelineSummary {
+  applied: number
+  screening: number
+  interview: number
+  offer: number
+  hired: number
+}
+
+interface Activity {
+  type: string
+  title: string
+  subtitle: string | null
+  timestamp: string
 }
 
 export default function HomePage() {
-  const [stats, setStats] = useState<Stats>({ candidates: 0, jobs: 0, scorecards: 0, applications: 0 })
+  const [metrics, setMetrics] = useState<Metrics>({ totalCandidates: 0, activeJobs: 0, totalApplications: 0, interviewsThisWeek: 0 })
+  const [pipeline, setPipeline] = useState<PipelineSummary>({ applied: 0, screening: 0, interview: 0, offer: 0, hired: 0 })
+  const [activities, setActivities] = useState<Activity[]>([])
 
   useEffect(() => {
-    fetch('/api/stats').then(r => r.json()).then(setStats).catch(() => {})
+    const load = () => {
+      authFetch('/api/dashboard/metrics').then(r => r.json()).then(setMetrics).catch(() => {})
+      authFetch('/api/dashboard/pipeline-summary').then(r => r.json()).then(setPipeline).catch(() => {})
+      authFetch('/api/dashboard/recent-activity').then(r => r.json()).then(d => setActivities(d.activities || [])).catch(() => {})
+    }
+    load()
+    const interval = setInterval(load, 30000)
+    return () => clearInterval(interval)
   }, [])
 
+  const pipelineStages = [
+    { key: 'applied', label: 'Applied', color: 'bg-gray-100 text-gray-700' },
+    { key: 'screening', label: 'Screening', color: 'bg-blue-100 text-blue-700' },
+    { key: 'interview', label: 'Interview', color: 'bg-yellow-100 text-yellow-700' },
+    { key: 'offer', label: 'Offer', color: 'bg-purple-100 text-purple-700' },
+    { key: 'hired', label: 'Hired', color: 'bg-green-100 text-green-700' },
+  ]
+
+  const activityTypeLabel: Record<string, string> = {
+    candidate_added: 'New Candidate',
+    job_posted: 'Job Posted',
+    application: 'Application'
+  }
+
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold">Dashboard</h1>
-        <p className="text-muted-foreground mt-1">AI-powered recruitment platform for Nordic agencies</p>
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+          <p className="text-muted-foreground mt-1">Your recruitment activity at a glance</p>
+        </div>
+        <div className="flex gap-2">
+          <Link to="/jobs">
+            <Button className="bg-[#3B82F6] hover:bg-blue-600 text-white">Post a Job</Button>
+          </Link>
+          <Link to="/candidates">
+            <Button variant="outline">Add Candidate</Button>
+          </Link>
+        </div>
       </div>
 
+      {/* Metrics */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-8">
         <Card>
           <CardHeader className="pb-2">
             <CardTitle className="text-sm font-medium text-muted-foreground">Total Candidates</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-3xl font-bold">{stats.candidates}</div>
+            <div className="text-3xl font-bold text-[#3B82F6]">{metrics.totalCandidates}</div>
+            <p className="text-xs text-muted-foreground mt-1">In your database</p>
           </CardContent>
         </Card>
         <Card>
@@ -36,7 +89,8 @@ export default function HomePage() {
             <CardTitle className="text-sm font-medium text-muted-foreground">Active Jobs</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-3xl font-bold">{stats.jobs}</div>
+            <div className="text-3xl font-bold text-[#3B82F6]">{metrics.activeJobs}</div>
+            <p className="text-xs text-muted-foreground mt-1">Currently posted</p>
           </CardContent>
         </Card>
         <Card>
@@ -44,51 +98,108 @@ export default function HomePage() {
             <CardTitle className="text-sm font-medium text-muted-foreground">Applications</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-3xl font-bold">{stats.applications}</div>
+            <div className="text-3xl font-bold text-[#3B82F6]">{metrics.totalApplications}</div>
+            <p className="text-xs text-muted-foreground mt-1">Total received</p>
           </CardContent>
         </Card>
         <Card>
           <CardHeader className="pb-2">
-            <CardTitle className="text-sm font-medium text-muted-foreground">Scorecards</CardTitle>
+            <CardTitle className="text-sm font-medium text-muted-foreground">Interviews This Week</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-3xl font-bold">{stats.scorecards}</div>
+            <div className="text-3xl font-bold text-[#3B82F6]">{metrics.interviewsThisWeek}</div>
+            <p className="text-xs text-muted-foreground mt-1">Scorecards submitted</p>
           </CardContent>
         </Card>
       </div>
 
-      <div className="grid gap-6 md:grid-cols-3">
+      <div className="grid gap-6 lg:grid-cols-2 mb-6">
+        {/* Pipeline Overview */}
         <Card>
           <CardHeader>
-            <CardTitle>AI CV Parsing</CardTitle>
+            <CardTitle>Pipeline Overview</CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground mb-3">
-              Upload CVs and automatically extract candidate information — skills, experience, education — using AI parsing.
-            </p>
-            <a href="/candidates" className="text-sm font-medium text-primary hover:underline">Go to Candidates →</a>
+            {pipeline.applied + pipeline.screening + pipeline.interview + pipeline.offer + pipeline.hired === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <p className="text-sm">No candidates in pipeline yet.</p>
+                <Link to="/candidates" className="text-[#3B82F6] text-sm hover:underline mt-2 inline-block">Add your first candidate →</Link>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {pipelineStages.map(stage => (
+                  <div key={stage.key} className="flex items-center gap-3">
+                    <span className={`text-xs font-medium px-2 py-1 rounded-full w-24 text-center ${stage.color}`}>{stage.label}</span>
+                    <div className="flex-1 bg-gray-100 rounded-full h-2">
+                      <div
+                        className="bg-[#3B82F6] h-2 rounded-full transition-all"
+                        style={{ width: `${Math.min(100, (pipeline[stage.key as keyof PipelineSummary] / Math.max(1, metrics.totalApplications)) * 100)}%` }}
+                      />
+                    </div>
+                    <span className="text-sm font-medium w-8 text-right">{pipeline[stage.key as keyof PipelineSummary]}</span>
+                  </div>
+                ))}
+              </div>
+            )}
           </CardContent>
         </Card>
+
+        {/* Recent Activity */}
         <Card>
           <CardHeader>
-            <CardTitle>Multi-Channel Job Posting</CardTitle>
+            <CardTitle>Recent Activity</CardTitle>
           </CardHeader>
           <CardContent>
-            <p className="text-sm text-muted-foreground mb-3">
-              Post jobs to LinkedIn, Indeed, Arbetsförmedlingen, and your company career page with a single click.
-            </p>
-            <a href="/jobs" className="text-sm font-medium text-primary hover:underline">Go to Jobs →</a>
+            {activities.length === 0 ? (
+              <div className="text-center py-8 text-muted-foreground">
+                <p className="text-sm">No activity yet. Start by posting a job or adding a candidate.</p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {activities.map((activity, i) => (
+                  <div key={i} className="flex items-start gap-3 py-2 border-b last:border-0">
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">{activity.title}</p>
+                      <p className="text-xs text-muted-foreground">{activityTypeLabel[activity.type] || activity.type}{activity.subtitle ? ` — ${activity.subtitle}` : ''}</p>
+                    </div>
+                    <span className="text-xs text-muted-foreground whitespace-nowrap">
+                      {new Date(activity.timestamp).toLocaleDateString()}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
           </CardContent>
         </Card>
-        <Card>
-          <CardHeader>
-            <CardTitle>Collaborative Scorecards</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <p className="text-sm text-muted-foreground mb-3">
-              Multiple interviewers score candidates using standardized criteria for consistent, unbiased evaluations.
-            </p>
-            <a href="/scorecards" className="text-sm font-medium text-primary hover:underline">Go to Scorecards →</a>
+      </div>
+
+      {/* Quick Actions */}
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Card className="hover:shadow-md transition-shadow cursor-pointer">
+          <CardContent className="pt-6">
+            <Link to="/jobs" className="block">
+              <div className="text-2xl mb-2">💼</div>
+              <h3 className="font-semibold">Post a Job</h3>
+              <p className="text-sm text-muted-foreground mt-1">Publish to LinkedIn, Indeed, and more</p>
+            </Link>
+          </CardContent>
+        </Card>
+        <Card className="hover:shadow-md transition-shadow cursor-pointer">
+          <CardContent className="pt-6">
+            <Link to="/candidates" className="block">
+              <div className="text-2xl mb-2">👤</div>
+              <h3 className="font-semibold">Add Candidate</h3>
+              <p className="text-sm text-muted-foreground mt-1">Upload CV or enter details manually</p>
+            </Link>
+          </CardContent>
+        </Card>
+        <Card className="hover:shadow-md transition-shadow cursor-pointer">
+          <CardContent className="pt-6">
+            <Link to="/scorecards" className="block">
+              <div className="text-2xl mb-2">📋</div>
+              <h3 className="font-semibold">Create Scorecard</h3>
+              <p className="text-sm text-muted-foreground mt-1">Evaluate and compare candidates</p>
+            </Link>
           </CardContent>
         </Card>
       </div>

client/src/pages/Login.tsx

@@ -0,0 +1,86 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { useAuth } from '@/lib/auth'
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+export default function LoginPage() {
+  const { login } = useAuth()
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      await login(email, password)
+      navigate('/')
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#F9FAFB] flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-[#3B82F6]">HireFlow</h1>
+          <p className="text-sm text-gray-500 mt-1">AI Recruitment Platform</p>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">Sign in to your account</CardTitle>
+          </CardHeader>
+          <form onSubmit={handleSubmit}>
+            <CardContent className="space-y-4">
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">
+                  {error}
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="you@company.com"
+                  value={email}
+                  onChange={e => setEmail(e.target.value)}
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col gap-3">
+              <Button type="submit" className="w-full bg-[#3B82F6] hover:bg-blue-600" disabled={loading}>
+                {loading ? 'Signing in...' : 'Sign In'}
+              </Button>
+              <p className="text-sm text-center text-gray-500">
+                No account yet?{' '}
+                <Link to="/register" className="text-[#3B82F6] hover:underline font-medium">Register</Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+}

client/src/pages/Register.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { useNavigate, Link } from 'react-router-dom'
+import { useAuth } from '@/lib/auth'
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+
+export default function RegisterPage() {
+  const { register } = useAuth()
+  const navigate = useNavigate()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [role, setRole] = useState('recruiter')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+    if (password !== confirmPassword) { setError('Passwords do not match'); return }
+    if (password.length < 8) { setError('Password must be at least 8 characters'); return }
+    setLoading(true)
+    try {
+      await register(email, password, role)
+      navigate('/login?registered=1')
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#F9FAFB] flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="text-center mb-8">
+          <h1 className="text-3xl font-bold text-[#3B82F6]">HireFlow</h1>
+          <p className="text-sm text-gray-500 mt-1">AI Recruitment Platform</p>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">Create your account</CardTitle>
+          </CardHeader>
+          <form onSubmit={handleSubmit}>
+            <CardContent className="space-y-4">
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md text-sm">
+                  {error}
+                </div>
+              )}
+              <div className="space-y-2">
+                <Label htmlFor="email">Work Email</Label>
+                <Input id="email" type="email" placeholder="you@company.com" value={email} onChange={e => setEmail(e.target.value)} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="role">Role</Label>
+                <select id="role" value={role} onChange={e => setRole(e.target.value)}
+                  className="w-full border border-input rounded-md px-3 py-2 text-sm bg-background">
+                  <option value="recruiter">Recruiter</option>
+                  <option value="hiring_manager">Hiring Manager</option>
+                  <option value="admin">Admin</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input id="password" type="password" placeholder="Min. 8 characters" value={password} onChange={e => setPassword(e.target.value)} required />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm Password</Label>
+                <Input id="confirmPassword" type="password" placeholder="Repeat password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} required />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col gap-3">
+              <Button type="submit" className="w-full bg-[#3B82F6] hover:bg-blue-600" disabled={loading}>
+                {loading ? 'Creating account...' : 'Create Account'}
+              </Button>
+              <p className="text-sm text-center text-gray-500">
+                Already have an account?{' '}
+                <Link to="/login" className="text-[#3B82F6] hover:underline font-medium">Sign in</Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+}