release: v0.5.0 - Authentication, API Keys & Advanced Features

Complete v0.5.0 implementation:

Database (@db-engineer):
- 3 migrations: users, api_keys, report_schedules tables
- Foreign keys, indexes, constraints, enums

Backend (@backend-dev):
- JWT authentication service with bcrypt (cost=12)
- Auth endpoints: /register, /login, /refresh, /me
- API Keys service with hash storage and prefix validation
- API Keys endpoints: CRUD + rotate
- Security module with JWT HS256

Frontend (@frontend-dev):
- Login/Register pages with validation
- AuthContext with localStorage persistence
- Protected routes implementation
- API Keys management UI (create, revoke, rotate)
- Header with user dropdown

DevOps (@devops-engineer):
- .env.example and .env.production.example
- docker-compose.scheduler.yml
- scripts/setup-secrets.sh
- INFRASTRUCTURE_SETUP.md

QA (@qa-engineer):
- 85 E2E tests: auth.spec.ts, apikeys.spec.ts, scenarios.spec.ts, regression-v050.spec.ts
- auth-helpers.ts with 20+ utility functions
- Test plans and documentation

Architecture (@spec-architect):
- SECURITY.md with best practices
- SECURITY-CHECKLIST.md pre-deployment
- Updated architecture.md with auth flows
- Updated README.md with v0.5.0 features

Documentation:
- Updated todo.md with v0.5.0 status
- Added docs/README.md index
- Complete setup instructions

Dependencies added:
- bcrypt, python-jose, passlib, email-validator

Tested: JWT auth flow, API keys CRUD, protected routes, 85 E2E tests ready

Closes: v0.5.0 milestone

frontend/src/App.tsx

@@ -1,35 +1,59 @@
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { QueryProvider } from './providers/QueryProvider';
 import { ThemeProvider } from './providers/ThemeProvider';
+import { AuthProvider } from './contexts/AuthContext';
 import { Toaster } from '@/components/ui/toaster';
 import { Layout } from './components/layout/Layout';
+import { ProtectedRoute } from './components/auth/ProtectedRoute';
 import { Dashboard } from './pages/Dashboard';
 import { ScenariosPage } from './pages/ScenariosPage';
 import { ScenarioDetail } from './pages/ScenarioDetail';
 import { Compare } from './pages/Compare';
 import { Reports } from './pages/Reports';
+import { Login } from './pages/Login';
+import { Register } from './pages/Register';
+import { ApiKeys } from './pages/ApiKeys';
 import { NotFound } from './pages/NotFound';
 
+// Wrapper for protected routes that need the main layout
+function ProtectedLayout() {
+  return (
+    <ProtectedRoute>
+      <Layout />
+    </ProtectedRoute>
+  );
+}
+
 function App() {
   return (
     <ThemeProvider defaultTheme="system">
       <QueryProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Layout />}>
-              <Route index element={<Dashboard />} />
-              <Route path="scenarios" element={<ScenariosPage />} />
-              <Route path="scenarios/:id" element={<ScenarioDetail />} />
-              <Route path="scenarios/:id/reports" element={<Reports />} />
-              <Route path="compare" element={<Compare />} />
+        <AuthProvider>
+          <BrowserRouter>
+            <Routes>
+              {/* Public routes */}
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              
+              {/* Protected routes with layout */}
+              <Route path="/" element={<ProtectedLayout />}>
+                <Route index element={<Dashboard />} />
+                <Route path="scenarios" element={<ScenariosPage />} />
+                <Route path="scenarios/:id" element={<ScenarioDetail />} />
+                <Route path="scenarios/:id/reports" element={<Reports />} />
+                <Route path="compare" element={<Compare />} />
+                <Route path="settings/api-keys" element={<ApiKeys />} />
+              </Route>
+              
+              {/* 404 */}
               <Route path="*" element={<NotFound />} />
-            </Route>
-          </Routes>
-        </BrowserRouter>
-        <Toaster />
+            </Routes>
+          </BrowserRouter>
+          <Toaster />
+        </AuthProvider>
       </QueryProvider>
     </ThemeProvider>
   );
 }
 
-export default App;
+export default App;

frontend/src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,27 @@
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { Loader2 } from 'lucide-react';
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+export function ProtectedRoute({ children }: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const location = useLocation();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (!isAuthenticated) {
+    // Redirect to login, but save the current location to redirect back after login
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return <>{children}</>;
+}

frontend/src/components/layout/Header.tsx

@@ -1,8 +1,33 @@
-import { Link } from 'react-router-dom';
-import { Cloud } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Cloud, User, Settings, Key, LogOut, ChevronDown } from 'lucide-react';
 import { ThemeToggle } from '@/components/ui/theme-toggle';
+import { Button } from '@/components/ui/button';
+import { useAuth } from '@/contexts/AuthContext';
 
 export function Header() {
+  const { user, isAuthenticated, logout } = useAuth();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleLogout = () => {
+    logout();
+    navigate('/login');
+  };
+
   return (
     <header className="border-b bg-card sticky top-0 z-50">
       <div className="flex h-16 items-center px-6">
@@ -15,8 +40,87 @@ export function Header() {
             AWS Cost Simulator
           </span>
           <ThemeToggle />
+          
+          {isAuthenticated && user ? (
+            <div className="relative" ref={dropdownRef}>
+              <Button
+                variant="ghost"
+                className="flex items-center gap-2"
+                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              >
+                <User className="h-4 w-4" />
+                <span className="hidden sm:inline">{user.full_name || user.email}</span>
+                <ChevronDown className="h-4 w-4" />
+              </Button>
+
+              {isDropdownOpen && (
+                <div className="absolute right-0 mt-2 w-56 rounded-md border bg-popover shadow-lg">
+                  <div className="p-2">
+                    <div className="px-2 py-1.5 text-sm font-medium">
+                      {user.full_name}
+                    </div>
+                    <div className="px-2 py-0.5 text-xs text-muted-foreground">
+                      {user.email}
+                    </div>
+                  </div>
+                  <div className="border-t my-1" />
+                  <div className="p-1">
+                    <button
+                      onClick={() => {
+                        setIsDropdownOpen(false);
+                        navigate('/profile');
+                      }}
+                      className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                    >
+                      <User className="h-4 w-4" />
+                      Profile
+                    </button>
+                    <button
+                      onClick={() => {
+                        setIsDropdownOpen(false);
+                        navigate('/settings');
+                      }}
+                      className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                    >
+                      <Settings className="h-4 w-4" />
+                      Settings
+                    </button>
+                    <button
+                      onClick={() => {
+                        setIsDropdownOpen(false);
+                        navigate('/settings/api-keys');
+                      }}
+                      className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground transition-colors"
+                    >
+                      <Key className="h-4 w-4" />
+                      API Keys
+                    </button>
+                  </div>
+                  <div className="border-t my-1" />
+                  <div className="p-1">
+                    <button
+                      onClick={handleLogout}
+                      className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-destructive hover:text-destructive-foreground transition-colors text-destructive"
+                    >
+                      <LogOut className="h-4 w-4" />
+                      Logout
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <Link to="/login">
+                <Button variant="ghost" size="sm">Sign in</Button>
+              </Link>
+              <Link to="/register">
+                <Button size="sm">Sign up</Button>
+              </Link>
+            </div>
+          )}
         </div>
       </div>
     </header>
   );
-}
+}

frontend/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

frontend/src/components/ui/select.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+Select.displayName = "Select"
+
+export { Select }

frontend/src/contexts/AuthContext.tsx

@@ -0,0 +1,181 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import api from '@/lib/api';
+import { showToast } from '@/components/ui/toast-utils';
+
+export interface User {
+  id: string;
+  email: string;
+  full_name: string;
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface AuthTokens {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: (email: string, password: string) => Promise<boolean>;
+  logout: () => void;
+  register: (email: string, password: string, fullName: string) => Promise<boolean>;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+const TOKEN_KEY = 'auth_token';
+const REFRESH_TOKEN_KEY = 'refresh_token';
+const USER_KEY = 'auth_user';
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Initialize auth state from localStorage
+  useEffect(() => {
+    const storedUser = localStorage.getItem(USER_KEY);
+    const token = localStorage.getItem(TOKEN_KEY);
+    
+    if (storedUser && token) {
+      try {
+        setUser(JSON.parse(storedUser));
+        // Set default authorization header
+        api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      } catch {
+        // Invalid stored data, clear it
+        localStorage.removeItem(USER_KEY);
+        localStorage.removeItem(TOKEN_KEY);
+        localStorage.removeItem(REFRESH_TOKEN_KEY);
+      }
+    }
+    setIsLoading(false);
+  }, []);
+
+  // Setup axios interceptor to add Authorization header
+  useEffect(() => {
+    const interceptor = api.interceptors.request.use(
+      (config) => {
+        const token = localStorage.getItem(TOKEN_KEY);
+        if (token) {
+          config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+      },
+      (error) => Promise.reject(error)
+    );
+
+    return () => {
+      api.interceptors.request.eject(interceptor);
+    };
+  }, []);
+
+  const login = useCallback(async (email: string, password: string): Promise<boolean> => {
+    try {
+      const response = await api.post('/auth/login', { email, password });
+      const { access_token, refresh_token, token_type } = response.data;
+      
+      // Store tokens
+      localStorage.setItem(TOKEN_KEY, access_token);
+      localStorage.setItem(REFRESH_TOKEN_KEY, refresh_token);
+      
+      // Set authorization header
+      api.defaults.headers.common['Authorization'] = `${token_type} ${access_token}`;
+      
+      // Fetch user info
+      const userResponse = await api.get('/auth/me');
+      const userData = userResponse.data;
+      
+      setUser(userData);
+      localStorage.setItem(USER_KEY, JSON.stringify(userData));
+      
+      showToast({ 
+        title: 'Welcome back!', 
+        description: `Logged in as ${userData.email}` 
+      });
+      
+      return true;
+    } catch (error: any) {
+      const message = error.response?.data?.detail || 'Invalid credentials';
+      showToast({ 
+        title: 'Login failed', 
+        description: message,
+        variant: 'destructive'
+      });
+      return false;
+    }
+  }, []);
+
+  const register = useCallback(async (email: string, password: string, fullName: string): Promise<boolean> => {
+    try {
+      const response = await api.post('/auth/register', { 
+        email, 
+        password, 
+        full_name: fullName 
+      });
+      const { access_token, refresh_token, token_type, user: userData } = response.data;
+      
+      // Store tokens
+      localStorage.setItem(TOKEN_KEY, access_token);
+      localStorage.setItem(REFRESH_TOKEN_KEY, refresh_token);
+      
+      // Set authorization header
+      api.defaults.headers.common['Authorization'] = `${token_type} ${access_token}`;
+      
+      setUser(userData);
+      localStorage.setItem(USER_KEY, JSON.stringify(userData));
+      
+      showToast({ 
+        title: 'Account created!', 
+        description: 'Welcome to mockupAWS' 
+      });
+      
+      return true;
+    } catch (error: any) {
+      const message = error.response?.data?.detail || 'Registration failed';
+      showToast({ 
+        title: 'Registration failed', 
+        description: message,
+        variant: 'destructive'
+      });
+      return false;
+    }
+  }, []);
+
+  const logout = useCallback(() => {
+    setUser(null);
+    localStorage.removeItem(TOKEN_KEY);
+    localStorage.removeItem(REFRESH_TOKEN_KEY);
+    localStorage.removeItem(USER_KEY);
+    delete api.defaults.headers.common['Authorization'];
+    
+    showToast({ 
+      title: 'Logged out', 
+      description: 'See you soon!' 
+    });
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{
+      user,
+      isAuthenticated: !!user,
+      isLoading,
+      login,
+      logout,
+      register,
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

frontend/src/pages/ApiKeys.tsx

@@ -0,0 +1,466 @@
+import { useState, useEffect } from 'react';
+import api from '@/lib/api';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select } from '@/components/ui/select';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { showToast } from '@/components/ui/toast-utils';
+import { Key, Copy, Trash2, RefreshCw, Plus, Loader2, AlertTriangle, Check } from 'lucide-react';
+
+interface ApiKey {
+  id: string;
+  name: string;
+  key_prefix: string;
+  scopes: string[];
+  created_at: string;
+  expires_at: string | null;
+  last_used_at: string | null;
+  is_active: boolean;
+}
+
+interface CreateKeyResponse {
+  id: string;
+  name: string;
+  key: string;
+  prefix: string;
+  scopes: string[];
+  created_at: string;
+}
+
+const AVAILABLE_SCOPES = [
+  { value: 'read:scenarios', label: 'Read Scenarios' },
+  { value: 'write:scenarios', label: 'Write Scenarios' },
+  { value: 'read:reports', label: 'Read Reports' },
+  { value: 'write:reports', label: 'Write Reports' },
+  { value: 'read:metrics', label: 'Read Metrics' },
+  { value: 'admin', label: 'Admin (Full Access)' },
+];
+
+const EXPIRATION_OPTIONS = [
+  { value: '7', label: '7 days' },
+  { value: '30', label: '30 days' },
+  { value: '90', label: '90 days' },
+  { value: '365', label: '365 days' },
+  { value: 'never', label: 'Never' },
+];
+
+export function ApiKeys() {
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  
+  // Create form state
+  const [newKeyName, setNewKeyName] = useState('');
+  const [selectedScopes, setSelectedScopes] = useState<string[]>(['read:scenarios']);
+  const [expirationDays, setExpirationDays] = useState('30');
+  
+  // New key modal state
+  const [newKeyData, setNewKeyData] = useState<CreateKeyResponse | null>(null);
+  const [copied, setCopied] = useState(false);
+  
+  // Revoke confirmation
+  const [keyToRevoke, setKeyToRevoke] = useState<ApiKey | null>(null);
+
+  useEffect(() => {
+    fetchApiKeys();
+  }, []);
+
+  const fetchApiKeys = async () => {
+    try {
+      const response = await api.get('/api-keys');
+      setApiKeys(response.data);
+    } catch (error) {
+      showToast({
+        title: 'Error',
+        description: 'Failed to load API keys',
+        variant: 'destructive'
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCreateKey = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsCreating(true);
+
+    try {
+      const expiresDays = expirationDays === 'never' ? null : parseInt(expirationDays);
+      const response = await api.post('/api-keys', {
+        name: newKeyName,
+        scopes: selectedScopes,
+        expires_days: expiresDays,
+      });
+
+      setNewKeyData(response.data);
+      setShowCreateForm(false);
+      setNewKeyName('');
+      setSelectedScopes(['read:scenarios']);
+      setExpirationDays('30');
+      fetchApiKeys();
+      
+      showToast({
+        title: 'API Key Created',
+        description: 'Copy your key now - you won\'t see it again!'
+      });
+    } catch (error: any) {
+      showToast({
+        title: 'Error',
+        description: error.response?.data?.detail || 'Failed to create API key',
+        variant: 'destructive'
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  const handleRevokeKey = async () => {
+    if (!keyToRevoke) return;
+
+    try {
+      await api.delete(`/api-keys/${keyToRevoke.id}`);
+      setApiKeys(apiKeys.filter(k => k.id !== keyToRevoke.id));
+      setKeyToRevoke(null);
+      showToast({
+        title: 'API Key Revoked',
+        description: 'The key has been revoked successfully'
+      });
+    } catch (error) {
+      showToast({
+        title: 'Error',
+        description: 'Failed to revoke API key',
+        variant: 'destructive'
+      });
+    }
+  };
+
+  const handleRotateKey = async (keyId: string) => {
+    try {
+      const response = await api.post(`/api-keys/${keyId}/rotate`);
+      setNewKeyData(response.data);
+      fetchApiKeys();
+      showToast({
+        title: 'API Key Rotated',
+        description: 'New key generated - copy it now!'
+      });
+    } catch (error) {
+      showToast({
+        title: 'Error',
+        description: 'Failed to rotate API key',
+        variant: 'destructive'
+      });
+    }
+  };
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+      showToast({
+        title: 'Copied!',
+        description: 'API key copied to clipboard'
+      });
+    } catch {
+      showToast({
+        title: 'Error',
+        description: 'Failed to copy to clipboard',
+        variant: 'destructive'
+      });
+    }
+  };
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString) return 'Never';
+    return new Date(dateString).toLocaleDateString();
+  };
+
+  const toggleScope = (scope: string) => {
+    setSelectedScopes(prev => 
+      prev.includes(scope) 
+        ? prev.filter(s => s !== scope)
+        : [...prev, scope]
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">API Keys</h1>
+          <p className="text-muted-foreground">
+            Manage API keys for programmatic access
+          </p>
+        </div>
+        <Button onClick={() => setShowCreateForm(!showCreateForm)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Create New Key
+        </Button>
+      </div>
+
+      {/* Create New Key Form */}
+      {showCreateForm && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Create New API Key</CardTitle>
+            <CardDescription>
+              Generate a new API key for programmatic access to the API
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handleCreateKey} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="keyName">Key Name</Label>
+                <Input
+                  id="keyName"
+                  placeholder="e.g., Production Key, Development"
+                  value={newKeyName}
+                  onChange={(e) => setNewKeyName(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Scopes</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {AVAILABLE_SCOPES.map((scope) => (
+                    <div key={scope.value} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={scope.value}
+                        checked={selectedScopes.includes(scope.value)}
+                        onCheckedChange={() => toggleScope(scope.value)}
+                      />
+                      <Label htmlFor={scope.value} className="text-sm font-normal cursor-pointer">
+                        {scope.label}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="expiration">Expiration</Label>
+                <Select
+                  id="expiration"
+                  value={expirationDays}
+                  onChange={(e) => setExpirationDays(e.target.value)}
+                >
+                  {EXPIRATION_OPTIONS.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+
+              <div className="flex gap-2">
+                <Button type="submit" disabled={isCreating}>
+                  {isCreating ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Creating...
+                    </>
+                  ) : (
+                    'Create Key'
+                  )}
+                </Button>
+                <Button 
+                  type="button" 
+                  variant="outline" 
+                  onClick={() => setShowCreateForm(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* API Keys Table */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Your API Keys</CardTitle>
+          <CardDescription>
+            {apiKeys.length} active key{apiKeys.length !== 1 ? 's' : ''}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            </div>
+          ) : apiKeys.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">
+              <Key className="h-12 w-12 mx-auto mb-4 opacity-50" />
+              <p>No API keys yet</p>
+              <p className="text-sm">Create your first key to get started</p>
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Prefix</TableHead>
+                  <TableHead>Scopes</TableHead>
+                  <TableHead>Created</TableHead>
+                  <TableHead>Last Used</TableHead>
+                  <TableHead>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {apiKeys.map((key) => (
+                  <TableRow key={key.id}>
+                    <TableCell className="font-medium">{key.name}</TableCell>
+                    <TableCell>
+                      <code className="bg-muted px-2 py-1 rounded text-sm">
+                        {key.key_prefix}...
+                      </code>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        {key.scopes.slice(0, 2).map((scope) => (
+                          <span 
+                            key={scope} 
+                            className="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded"
+                          >
+                            {scope}
+                          </span>
+                        ))}
+                        {key.scopes.length > 2 && (
+                          <span className="text-xs text-muted-foreground">
+                            +{key.scopes.length - 2}
+                          </span>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>{formatDate(key.created_at)}</TableCell>
+                    <TableCell>{key.last_used_at ? formatDate(key.last_used_at) : 'Never'}</TableCell>
+                    <TableCell>
+                      <div className="flex gap-1">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleRotateKey(key.id)}
+                          title="Rotate Key"
+                        >
+                          <RefreshCw className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => setKeyToRevoke(key)}
+                          title="Revoke Key"
+                          className="text-destructive hover:text-destructive"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* New Key Modal - Show full key only once */}
+      <Dialog open={!!newKeyData} onOpenChange={() => setNewKeyData(null)}>
+        <DialogContent className="max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-yellow-500" />
+              API Key Created
+            </DialogTitle>
+            <DialogDescription>
+              Copy your API key now. You won&apos;t be able to see it again!
+            </DialogDescription>
+          </DialogHeader>
+          
+          {newKeyData && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label>Key Name</Label>
+                <p className="text-sm">{newKeyData.name}</p>
+              </div>
+              
+              <div className="space-y-2">
+                <Label>API Key</Label>
+                <div className="flex gap-2">
+                  <code className="flex-1 bg-muted p-3 rounded text-sm break-all">
+                    {newKeyData.key}
+                  </code>
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    onClick={() => copyToClipboard(newKeyData.key)}
+                  >
+                    {copied ? (
+                      <Check className="h-4 w-4 text-green-500" />
+                    ) : (
+                      <Copy className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-lg p-4">
+                <p className="text-sm text-yellow-700 dark:text-yellow-400">
+                  <strong>Important:</strong> This is the only time you&apos;ll see the full key. 
+                  Please copy it now and store it securely. If you lose it, you&apos;ll need to generate a new one.
+                </p>
+              </div>
+            </div>
+          )}
+          
+          <DialogFooter>
+            <Button onClick={() => setNewKeyData(null)}>
+              I&apos;ve copied my key
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Revoke Confirmation Dialog */}
+      <Dialog open={!!keyToRevoke} onOpenChange={() => setKeyToRevoke(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Revoke API Key</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to revoke the key &quot;{keyToRevoke?.name}&quot;? 
+              This action cannot be undone. Any applications using this key will stop working immediately.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setKeyToRevoke(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleRevokeKey}>
+              Revoke Key
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

frontend/src/pages/Login.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Cloud, Loader2 } from 'lucide-react';
+
+export function Login() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    
+    const success = await login(email, password);
+    if (success) {
+      navigate('/');
+    }
+    
+    setIsSubmitting(false);
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+      <div className="w-full max-w-md">
+        <div className="flex items-center justify-center gap-2 mb-8">
+          <Cloud className="h-8 w-8 text-primary" />
+          <span className="text-2xl font-bold">mockupAWS</span>
+        </div>
+        
+        <Card>
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl text-center">Sign in</CardTitle>
+            <CardDescription className="text-center">
+              Enter your credentials to access your account
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSubmit}>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="name@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  autoComplete="email"
+                />
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="password">Password</Label>
+                  <Link 
+                    to="#" 
+                    className="text-sm text-primary hover:underline"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      // TODO: Implement forgot password
+                      alert('Forgot password - Coming soon');
+                    }}
+                  >
+                    Forgot password?
+                  </Link>
+                </div>
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  autoComplete="current-password"
+                />
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+              <Button 
+                type="submit" 
+                className="w-full"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Signing in...
+                  </>
+                ) : (
+                  'Sign in'
+                )}
+              </Button>
+              <p className="text-sm text-center text-muted-foreground">
+                Don't have an account?{' '}
+                <Link to="/register" className="text-primary hover:underline">
+                  Create account
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+        
+        <p className="text-center text-sm text-muted-foreground mt-8">
+          AWS Cost Simulator & Backend Profiler
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Register.tsx

@@ -0,0 +1,186 @@
+import { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Cloud, Loader2 } from 'lucide-react';
+import { showToast } from '@/components/ui/toast-utils';
+
+export function Register() {
+  const [email, setEmail] = useState('');
+  const [fullName, setFullName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const { register } = useAuth();
+  const navigate = useNavigate();
+
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      newErrors.email = 'Please enter a valid email address';
+    }
+
+    // Password validation
+    if (password.length < 8) {
+      newErrors.password = 'Password must be at least 8 characters';
+    }
+
+    // Confirm password
+    if (password !== confirmPassword) {
+      newErrors.confirmPassword = 'Passwords do not match';
+    }
+
+    // Full name
+    if (!fullName.trim()) {
+      newErrors.fullName = 'Full name is required';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      showToast({
+        title: 'Validation Error',
+        description: 'Please fix the errors in the form',
+        variant: 'destructive'
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+    
+    const success = await register(email, password, fullName);
+    if (success) {
+      navigate('/');
+    }
+    
+    setIsSubmitting(false);
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/50 p-4">
+      <div className="w-full max-w-md">
+        <div className="flex items-center justify-center gap-2 mb-8">
+          <Cloud className="h-8 w-8 text-primary" />
+          <span className="text-2xl font-bold">mockupAWS</span>
+        </div>
+        
+        <Card>
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl text-center">Create account</CardTitle>
+            <CardDescription className="text-center">
+              Enter your details to create a new account
+            </CardDescription>
+          </CardHeader>
+          <form onSubmit={handleSubmit}>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="fullName">Full Name</Label>
+                <Input
+                  id="fullName"
+                  type="text"
+                  placeholder="John Doe"
+                  value={fullName}
+                  onChange={(e) => setFullName(e.target.value)}
+                  required
+                  autoComplete="name"
+                />
+                {errors.fullName && (
+                  <p className="text-sm text-destructive">{errors.fullName}</p>
+                )}
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="name@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  autoComplete="email"
+                />
+                {errors.email && (
+                  <p className="text-sm text-destructive">{errors.email}</p>
+                )}
+              </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
+                  autoComplete="new-password"
+                />
+                {errors.password && (
+                  <p className="text-sm text-destructive">{errors.password}</p>
+                )}
+                <p className="text-xs text-muted-foreground">
+                  Must be at least 8 characters
+                </p>
+              </div>
+              
+              <div className="space-y-2">
+                <Label htmlFor="confirmPassword">Confirm Password</Label>
+                <Input
+                  id="confirmPassword"
+                  type="password"
+                  placeholder="••••••••"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                  autoComplete="new-password"
+                />
+                {errors.confirmPassword && (
+                  <p className="text-sm text-destructive">{errors.confirmPassword}</p>
+                )}
+              </div>
+            </CardContent>
+            <CardFooter className="flex flex-col space-y-4">
+              <Button 
+                type="submit" 
+                className="w-full"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Creating account...
+                  </>
+                ) : (
+                  'Create account'
+                )}
+              </Button>
+              <p className="text-sm text-center text-muted-foreground">
+                Already have an account?{' '}
+                <Link to="/login" className="text-primary hover:underline">
+                  Sign in
+                </Link>
+              </p>
+            </CardFooter>
+          </form>
+        </Card>
+        
+        <p className="text-center text-sm text-muted-foreground mt-8">
+          AWS Cost Simulator & Backend Profiler
+        </p>
+      </div>
+    </div>
+  );
+}

frontend/src/types/api.ts

@@ -58,3 +58,75 @@ export interface MetricsResponse {
     value: number;
   }[];
 }
+
+// Auth Types
+export interface User {
+  id: string;
+  email: string;
+  full_name: string;
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface AuthTokens {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+}
+
+export interface RegisterRequest {
+  email: string;
+  password: string;
+  full_name: string;
+}
+
+export interface RegisterResponse {
+  user: User;
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+}
+
+// API Key Types
+export interface ApiKey {
+  id: string;
+  user_id: string;
+  key_prefix: string;
+  name: string;
+  scopes: string[];
+  last_used_at: string | null;
+  expires_at: string | null;
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface CreateApiKeyRequest {
+  name: string;
+  scopes: string[];
+  expires_days: number | null;
+}
+
+export interface CreateApiKeyResponse {
+  id: string;
+  name: string;
+  key: string;
+  prefix: string;
+  scopes: string[];
+  created_at: string;
+}
+
+export interface ApiKeyListResponse {
+  items: ApiKey[];
+  total: number;
+}