Merge pull request #252 from SheetMetalConnect/claude/fix-jwt-token-validation-01KAyvGqpLcGxpqE5AzhzvNL

Fix JWT token validation in API

Author: SheetMetalConnect

docs/API_KEY_AUTHENTICATION.md

@@ -0,0 +1,135 @@
+# API Key Authentication
+
+## Overview
+
+The Eryxon Flow API uses API keys for external integrations (ERP systems, automation, etc.). Keys follow the format `ery_live_xxx` or `ery_test_xxx`.
+
+## How It Works
+
+### Key Generation
+1. Admin creates API key via dashboard (Admin > API Keys)
+2. System generates random key: `ery_live_<32-random-chars>`
+3. Key is hashed using **SHA-256** and stored in `api_keys` table
+4. Plaintext key shown once to user (never stored)
+
+### Key Validation
+1. Client sends request with `Authorization: Bearer ery_live_xxx`
+2. System extracts key prefix (first 12 chars) for efficient lookup
+3. Looks up candidate keys by prefix
+4. Hashes provided key with **SHA-256** and compares to stored hash
+5. On match: sets tenant context and allows request
+
+## Architecture
+
+```
+┌─────────────────────┐     ┌──────────────────────┐
+│   Dashboard User    │     │   External System    │
+│   (JWT Auth)        │     │   (API Key Auth)     │
+└─────────┬───────────┘     └──────────┬───────────┘
+          │                            │
+          ▼                            ▼
+┌─────────────────────┐     ┌──────────────────────┐
+│  api-key-generate   │     │  api-jobs, api-parts │
+│  (creates keys)     │     │  (validates keys)    │
+└─────────┬───────────┘     └──────────┬───────────┘
+          │                            │
+          │     SHA-256 hash           │ SHA-256 hash
+          ▼                            ▼
+┌──────────────────────────────────────────────────┐
+│                  api_keys table                  │
+│  key_prefix | key_hash | tenant_id | active      │
+└──────────────────────────────────────────────────┘
+```
+
+## Shared Auth Module
+
+All API endpoints use the shared authentication module:
+
+```typescript
+// supabase/functions/_shared/auth.ts
+import { authenticateAndSetContext } from "../_shared/auth.ts";
+
+// In your endpoint:
+const { tenantId } = await authenticateAndSetContext(req, supabase);
+```
+
+This module:
+- Extracts Bearer token from Authorization header
+- Validates key format (`ery_live_*` or `ery_test_*`)
+- Looks up key by prefix (efficient query)
+- Hashes and compares using SHA-256
+- Sets tenant context for Row-Level Security
+- Updates `last_used_at` timestamp (async)
+
+## Two Auth Patterns
+
+| Pattern | Endpoints | Token Type | Use Case |
+|---------|-----------|------------|----------|
+| **API Key** | `api-jobs`, `api-parts`, etc. | `ery_live_xxx` | External integrations |
+| **JWT** | `api-key-generate`, `api-integrations` | Supabase session | Dashboard users |
+
+## Key Format
+
+```
+ery_live_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6
+└─┬─┘└┬─┘└──────────────┬────────────────┘
+  │   │                 │
+  │   │                 └── 32 random chars
+  │   └── Environment (live/test)
+  └── Prefix identifier
+```
+
+## Database Schema
+
+```sql
+CREATE TABLE api_keys (
+  id UUID PRIMARY KEY,
+  tenant_id UUID NOT NULL REFERENCES tenants(id),
+  name TEXT NOT NULL,
+  key_prefix TEXT NOT NULL,      -- First 12 chars for lookup
+  key_hash TEXT NOT NULL,        -- SHA-256 hash of full key
+  active BOOLEAN DEFAULT true,
+  last_used_at TIMESTAMPTZ,
+  created_at TIMESTAMPTZ DEFAULT now(),
+  created_by UUID REFERENCES profiles(id)
+);
+
+-- Index for efficient prefix lookup
+CREATE INDEX idx_api_keys_prefix ON api_keys(key_prefix) WHERE active = true;
+```
+
+## Security Considerations
+
+1. **Keys are never stored** - Only SHA-256 hash is persisted
+2. **Prefix lookup** - Avoids comparing all keys (O(1) vs O(n))
+3. **Constant-time comparison** - SHA-256 comparison prevents timing attacks
+4. **Async last_used update** - Doesn't block request response
+5. **Soft delete** - Keys are deactivated, not deleted (audit trail)
+
+## Error Responses
+
+| Error | HTTP Status | Cause |
+|-------|-------------|-------|
+| `Missing or invalid authorization header` | 401 | No Bearer token |
+| `Invalid API key format` | 401 | Key doesn't match `ery_*` pattern |
+| `Invalid API key` | 401 | Key not found or hash mismatch |
+
+## Testing
+
+```bash
+# Test with valid key
+curl -H "Authorization: Bearer ery_live_yourkey" \
+  https://yourproject.supabase.co/functions/v1/api-jobs
+
+# Expected: 200 OK with jobs data
+
+# Test with invalid key
+curl -H "Authorization: Bearer invalid_key" \
+  https://yourproject.supabase.co/functions/v1/api-jobs
+
+# Expected: 401 Unauthorized
+```
+
+## Historical Note
+
+**Issue Fixed (Dec 2024):** API endpoints were using bcrypt for key validation while key generation used SHA-256. This caused all API key authentication to fail. Fixed by standardizing all endpoints on the shared auth module with SHA-256.

public/openapi.json

@@ -2,7 +2,7 @@
   "openapi": "3.0.3",
   "info": {
     "title": "Eryxon Flow API",
-    "description": "Production workflow management API for sheet metal manufacturing. This API allows you to manage jobs, parts, tasks, and track production progress through various stages.\n\n## Authentication\n\nAll API requests require an API key. Include your API key in the `Authorization` header:\n\n```\nAuthorization: Bearer ery_live_your_api_key_here\n```\n\n## Getting Started\n\n1. **Generate an API Key**: Navigate to Admin > API Keys in the web interface\n2. **Test the Connection**: Use the `/api-stages` endpoint (read-only) to verify your key works\n3. **Create Your First Job**: Use POST `/api-jobs` to create a job with parts and tasks\n4. **Track Progress**: Use GET endpoints to retrieve and monitor job status\n\n## Rate Limiting\n\nAPI requests are rate-limited to prevent abuse. Rate limit information is included in response headers:\n- `X-RateLimit-Limit`: Maximum requests allowed\n- `X-RateLimit-Remaining`: Remaining requests in current window\n- `X-RateLimit-Reset`: Timestamp when the limit resets\n\n## Base URL\n\n```\nhttps://vatgianzotsurljznsry.supabase.co/functions/v1\n```",
+    "description": "Production workflow management API for sheet metal manufacturing. This API allows you to manage jobs, parts, tasks, and track production progress through various stages.\n\n## Authentication\n\nAll API requests require an API key. Include your API key in the `Authorization` header:\n\n```\nAuthorization: Bearer ery_live_your_api_key_here\n```\n\n## Getting Started\n\n1. **Generate an API Key**: Navigate to Admin > API Keys in the web interface\n2. **Test the Connection**: Use the `/api-stages` endpoint (read-only) to verify your key works\n3. **Create Your First Job**: Use POST `/api-jobs` to create a job with parts and tasks\n4. **Track Progress**: Use GET endpoints to retrieve and monitor job status\n\n## Rate Limiting\n\nAPI requests are rate-limited based on your subscription plan:\n\n| Plan | Daily Limit |\n|------|-------------|\n| Free | 100 requests/day |\n| Pro | 1,000 requests/day |\n| Premium | 10,000 requests/day |\n| Enterprise | Unlimited |\n\nRate limit information is included in response headers:\n- `X-RateLimit-Remaining`: Remaining requests in current window\n- `X-RateLimit-Reset`: Timestamp when the limit resets\n- `Retry-After`: Seconds until you can retry (when rate limited)\n\nWhen you exceed your rate limit, you'll receive a `429 Too Many Requests` response.\n\n## Base URL\n\n```\nhttps://vatgianzotsurljznsry.supabase.co/functions/v1\n```",
     "version": "1.0.0",
     "contact": {
       "name": "API Support",
@@ -2336,7 +2336,31 @@
         }
       },
       "RateLimitError": {
-        "description": "Rate limit exceeded",
+        "description": "Rate limit exceeded. Your subscription plan's daily request limit has been reached.",
+        "headers": {
+          "X-RateLimit-Remaining": {
+            "description": "Number of requests remaining in current window",
+            "schema": {
+              "type": "integer",
+              "example": 0
+            }
+          },
+          "X-RateLimit-Reset": {
+            "description": "ISO 8601 timestamp when the rate limit resets",
+            "schema": {
+              "type": "string",
+              "format": "date-time",
+              "example": "2024-12-10T00:00:00Z"
+            }
+          },
+          "Retry-After": {
+            "description": "Seconds until the rate limit resets",
+            "schema": {
+              "type": "integer",
+              "example": 3600
+            }
+          }
+        },
         "content": {
           "application/json": {
             "schema": {
@@ -2346,7 +2370,13 @@
               "success": false,
               "error": {
                 "code": "RATE_LIMIT_EXCEEDED",
-                "message": "Too many requests. Please try again later."
+                "message": "Rate limit exceeded. Your free plan allows 100 requests per day. Please upgrade your plan or wait until the limit resets.",
+                "statusCode": 429,
+                "details": {
+                  "remaining": 0,
+                  "resetAt": "2024-12-10T00:00:00Z",
+                  "retryAfter": 3600
+                }
               }
             }
           }

src/hooks/useSubscription.ts

@@ -27,10 +27,18 @@ export interface TenantUsageStats {
   total_admins: number;
 }
 
+export interface ApiUsageStats {
+  today_requests: number;
+  this_month_requests: number;
+  reset_at: string;
+  daily_limit: number | null;
+}
+
 export const useSubscription = () => {
   const { profile } = useAuth();
   const [subscription, setSubscription] = useState<TenantSubscription | null>(null);
   const [usageStats, setUsageStats] = useState<TenantUsageStats | null>(null);
+  const [apiUsageStats, setApiUsageStats] = useState<ApiUsageStats | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
@@ -64,6 +72,17 @@ export const useSubscription = () => {
         if (statsData && statsData.length > 0) {
           setUsageStats(statsData[0] as any);
         }
+
+        // Fetch API usage statistics
+        const { data: apiData, error: apiError } = await supabase
+          .rpc('get_api_usage_stats' as any);
+
+        if (apiError) {
+          console.warn('API usage stats not available:', apiError);
+          // Don't throw - API usage stats are optional
+        } else if (apiData && apiData.length > 0) {
+          setApiUsageStats(apiData[0] as any);
+        }
       } catch (err) {
         console.error('Error fetching subscription:', err);
         setError(err instanceof Error ? err.message : 'Failed to fetch subscription data');
@@ -110,6 +129,7 @@ export const useSubscription = () => {
   return {
     subscription,
     usageStats,
+    apiUsageStats,
     loading,
     error,
     getPlanDisplayName,

src/i18n/locales/de/admin.json

@@ -316,6 +316,13 @@
     "upgradePlan": "Plan upgraden",
     "usage": "Nutzung",
     "usageThisMonth": "Nutzung diesen Monat",
-    "users": "Benutzer"
+    "users": "Benutzer",
+    "apiRequests": "API Anfragen",
+    "today": "heute",
+    "requestsThisMonth": "Anfragen diesen Monat",
+    "upgradeRequest": {
+      "subject": "Upgrade Anfrage: {{planName}}",
+      "body": "Hallo,\n\nIch möchte auf den {{planName}} Plan upgraden.\n\nAktueller Plan: {{currentPlan}}\nTenant ID: {{tenantId}}\n\nDanke!"
+    }
   }
 }

src/i18n/locales/en/admin.json

@@ -403,6 +403,13 @@
     "upgradePlan": "Upgrade Plan",
     "usage": "Usage",
     "usageThisMonth": "Usage This Month",
-    "users": "Users"
+    "users": "Users",
+    "apiRequests": "API Requests",
+    "today": "today",
+    "requestsThisMonth": "requests this month",
+    "upgradeRequest": {
+      "subject": "Upgrade Request: {{planName}}",
+      "body": "Hi,\n\nI would like to upgrade to the {{planName}} plan.\n\nCurrent Plan: {{currentPlan}}\nTenant ID: {{tenantId}}\n\nThank you!"
+    }
   }
 }

src/i18n/locales/nl/admin.json

@@ -553,6 +553,13 @@
     "upgradePlan": "Abonnement upgraden",
     "usage": "Gebruik",
     "usageThisMonth": "Gebruik deze maand",
-    "users": "Gebruikers"
+    "users": "Gebruikers",
+    "apiRequests": "API Verzoeken",
+    "today": "vandaag",
+    "requestsThisMonth": "verzoeken deze maand",
+    "upgradeRequest": {
+      "subject": "Upgrade Aanvraag: {{planName}}",
+      "body": "Hallo,\n\nIk wil graag upgraden naar het {{planName}} abonnement.\n\nHuidig Abonnement: {{currentPlan}}\nTenant ID: {{tenantId}}\n\nBedankt!"
+    }
   }
 }

src/pages/common/MyPlan.tsx

@@ -12,6 +12,7 @@ import {
   Briefcase,
   Package,
   Users,
+  Zap,
 } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -77,6 +78,7 @@ export const MyPlan: React.FC = () => {
   const {
     subscription,
     usageStats,
+    apiUsageStats,
     loading,
     error,
     getPlanDisplayName,
@@ -273,6 +275,37 @@ export const MyPlan: React.FC = () => {
                   className="h-2 [&>div]:bg-blue-500"
                 />
               </div>
+
+              {/* API Usage */}
+              {apiUsageStats && (
+                <div>
+                  <div className="flex justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                      <Zap className="h-4 w-4 text-muted-foreground" />
+                      <span className="text-sm font-medium">{t("myPlan.apiRequests")}</span>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {apiUsageStats.today_requests} /{" "}
+                      {apiUsageStats.daily_limit || "∞"} {t("myPlan.today")}
+                    </span>
+                  </div>
+                  <Progress
+                    value={getUsagePercentage(
+                      apiUsageStats.today_requests,
+                      apiUsageStats.daily_limit
+                    )}
+                    className={cn(
+                      "h-2",
+                      isAtLimit(apiUsageStats.today_requests, apiUsageStats.daily_limit)
+                        ? "[&>div]:bg-destructive"
+                        : "[&>div]:bg-orange-500"
+                    )}
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {apiUsageStats.this_month_requests.toLocaleString()} {t("myPlan.requestsThisMonth")}
+                  </p>
+                </div>
+              )}
             </CardContent>
           </Card>