Add HF Spaces deployment config and passkey auth

- Update Dockerfile to use $PORT env var (default 7860 for HF Spaces)
- Add HF Spaces README.md with Docker SDK metadata
- Add passkey authentication gate (backend + frontend)
- Update frontend components

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

Dockerfile

@@ -21,6 +21,7 @@ COPY airline_routes.json ./
 # Copy built frontend
 COPY --from=frontend-build /app/frontend/dist ./frontend/dist
 
-EXPOSE 8080
+ENV PORT=7860
+EXPOSE $PORT
 
-CMD ["uvicorn", "backend.main:app", "--host", "0.0.0.0", "--port", "8080"]
+CMD uvicorn backend.main:app --host 0.0.0.0 --port $PORT

README.md

@@ -0,0 +1,8 @@
+---
+title: Flight Search
+emoji: ✈️
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+---

backend/api/auth.py

@@ -0,0 +1,59 @@
+"""Authentication endpoints for passkey gate."""
+
+import os
+import secrets
+
+from fastapi import APIRouter, Request, Response
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/api/auth", tags=["auth"])
+
+PASSKEY = "flyingagents"
+# Token written into the HTTP-only cookie after successful verification.
+AUTH_TOKEN = secrets.token_hex(32)
+
+
+def _require_passkey() -> bool:
+    """Return True unless REQUIRE_PASSKEY is explicitly set to 'false'."""
+    return os.environ.get("REQUIRE_PASSKEY", "true").lower() != "false"
+
+
+class PasskeyBody(BaseModel):
+    passkey: str
+
+
+@router.post("/verify")
+async def verify(body: PasskeyBody, response: Response):
+    if not _require_passkey():
+        response.set_cookie(
+            key="flight_auth",
+            value=AUTH_TOKEN,
+            httponly=True,
+            samesite="lax",
+            max_age=60 * 60 * 24 * 30,  # 30 days
+        )
+        return {"ok": True}
+
+    if body.passkey != PASSKEY:
+        return JSONResponse(status_code=401, content={"detail": "Invalid passkey"})
+
+    response.set_cookie(
+        key="flight_auth",
+        value=AUTH_TOKEN,
+        httponly=True,
+        samesite="lax",
+        max_age=60 * 60 * 24 * 30,  # 30 days
+    )
+    return {"ok": True}
+
+
+@router.get("/check")
+async def check(request: Request):
+    if not _require_passkey():
+        return {"ok": True}
+
+    token = request.cookies.get("flight_auth")
+    if token != AUTH_TOKEN:
+        return JSONResponse(status_code=401, content={"detail": "Not authenticated"})
+    return {"ok": True}

backend/main.py

@@ -3,12 +3,13 @@
 import os
 import time
 
-from fastapi import FastAPI
+from fastapi import FastAPI, Request
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, JSONResponse
+from starlette.middleware.base import BaseHTTPMiddleware
 
-from .api import airports, calendar, search
+from .api import airports, auth, calendar, search
 from .data_loader import get_route_graph
 from .hub_detector import compute_hub_scores
 
@@ -23,7 +24,31 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+# Passkey middleware — protects /api/* routes when REQUIRE_PASSKEY is enabled
+class PasskeyMiddleware(BaseHTTPMiddleware):
+    EXEMPT_PREFIXES = ("/api/auth/", "/api/health")
+
+    async def dispatch(self, request: Request, call_next):
+        if not auth._require_passkey():
+            return await call_next(request)
+
+        path = request.url.path
+        if path.startswith("/api/") and not any(
+            path.startswith(p) for p in self.EXEMPT_PREFIXES
+        ):
+            token = request.cookies.get("flight_auth")
+            if token != auth.AUTH_TOKEN:
+                return JSONResponse(
+                    status_code=401, content={"detail": "Not authenticated"}
+                )
+
+        return await call_next(request)
+
+
+app.add_middleware(PasskeyMiddleware)
+
 # Register API routers
+app.include_router(auth.router)
 app.include_router(airports.router)
 app.include_router(search.router)
 app.include_router(calendar.router)

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/src/App.tsx

@@ -1,9 +1,28 @@
+import { useEffect, useState } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Header from './components/shared/Header';
+import PasskeyGate from './components/shared/PasskeyGate';
 import SearchPage from './pages/SearchPage';
 import ResultsPage from './pages/ResultsPage';
 
 export default function App() {
+  const [authenticated, setAuthenticated] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    fetch('/api/auth/check')
+      .then((res) => setAuthenticated(res.ok))
+      .catch(() => setAuthenticated(false));
+  }, []);
+
+  // Still checking auth status
+  if (authenticated === null) {
+    return null;
+  }
+
+  if (!authenticated) {
+    return <PasskeyGate onAuthenticated={() => setAuthenticated(true)} />;
+  }
+
   return (
     <BrowserRouter>
       <Header />

frontend/src/components/results/FlightCard.tsx

@@ -78,22 +78,33 @@ export default function FlightCard({ flight, roundTripPrice, priceLabel, onSelec
           </div>
         </div>
 
-        {/* Price column */}
-        <div className="text-right pl-3 min-w-[80px]" data-testid="price">
-          {roundTripPrice != null ? (
-            <>
-              <div className="text-[15px] font-medium text-gray-900">{formatPrice(roundTripPrice)}</div>
-              <div className="text-[11px] text-gray-500">{priceLabel || 'round trip'}</div>
-            </>
-          ) : (
-            <>
-              <div className="text-[15px] font-medium text-gray-900">{formatPrice(flight.price_usd)}</div>
-              <div className="text-[11px] text-gray-500">{flight.cabin_class.replace('_', ' ')}</div>
-            </>
-          )}
-          {discountApplied && (
-            <div className="text-[10px] text-green-600 mt-0.5">Airline discount</div>
+        {/* Select button + Price column */}
+        <div className="flex items-center gap-3 pl-3">
+          {onSelect && expanded && (
+            <button
+              onClick={(e) => { e.stopPropagation(); onSelect(flight); }}
+              className="rounded-full bg-[#1a73e8] px-4 py-1.5 text-xs font-medium text-white hover:bg-[#1557b0] cursor-pointer whitespace-nowrap"
+              data-testid="select-flight-btn"
+            >
+              Select flight
+            </button>
           )}
+          <div className="text-right min-w-[80px]" data-testid="price">
+            {roundTripPrice != null ? (
+              <>
+                <div className="text-[15px] font-medium text-gray-900">{formatPrice(roundTripPrice)}</div>
+                <div className="text-[11px] text-gray-500">{priceLabel || 'round trip'}</div>
+              </>
+            ) : (
+              <>
+                <div className="text-[15px] font-medium text-gray-900">{formatPrice(flight.price_usd)}</div>
+                <div className="text-[11px] text-gray-500">{flight.cabin_class.replace('_', ' ')}</div>
+              </>
+            )}
+            {discountApplied && (
+              <div className="text-[10px] text-green-600 mt-0.5">Airline discount</div>
+            )}
+          </div>
         </div>
 
         {/* Chevron */}
@@ -105,19 +116,6 @@ export default function FlightCard({ flight, roundTripPrice, priceLabel, onSelec
         </svg>
       </div>
 
-      {/* Select flight button */}
-      {onSelect && (
-        <div className="px-4 pb-3 -mt-1">
-          <button
-            onClick={(e) => { e.stopPropagation(); onSelect(flight); }}
-            className="w-full rounded-full bg-[#1a73e8] px-4 py-2 text-sm font-medium text-white hover:bg-[#1557b0] cursor-pointer"
-            data-testid="select-flight-btn"
-          >
-            Select flight
-          </button>
-        </div>
-      )}
-
       {/* Expanded detail view */}
       {expanded && (
         <div className="border-t border-gray-100 px-4 pt-3 pb-4" data-testid="segments-detail">
@@ -262,6 +260,7 @@ export default function FlightCard({ flight, roundTripPrice, priceLabel, onSelec
               </>
             )}
           </div>
+
         </div>
       )}
     </div>

frontend/src/components/shared/PasskeyGate.tsx

@@ -0,0 +1,73 @@
+import { useState, type FormEvent } from 'react';
+
+interface Props {
+  onAuthenticated: () => void;
+}
+
+export default function PasskeyGate({ onAuthenticated }: Props) {
+  const [passkey, setPasskey] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    try {
+      const res = await fetch('/api/auth/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ passkey }),
+      });
+
+      if (res.ok) {
+        onAuthenticated();
+      } else {
+        setError('Invalid passkey');
+        setPasskey('');
+      }
+    } catch {
+      setError('Connection error. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="w-full max-w-sm mx-4">
+        <div className="text-center mb-8">
+          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" className="mx-auto mb-4 text-[#1a73e8]">
+            <path d="M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z" fill="currentColor"/>
+          </svg>
+          <h1 className="text-2xl font-medium text-gray-900">Flights</h1>
+          <p className="text-sm text-gray-500 mt-1">Enter passkey to continue</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+          <input
+            type="password"
+            value={passkey}
+            onChange={(e) => setPasskey(e.target.value)}
+            placeholder="Passkey"
+            autoFocus
+            className="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#1a73e8] focus:border-transparent"
+          />
+
+          {error && (
+            <p className="mt-3 text-sm text-red-600">{error}</p>
+          )}
+
+          <button
+            type="submit"
+            disabled={loading || !passkey}
+            className="mt-4 w-full py-3 rounded-lg bg-[#1a73e8] text-white font-medium hover:bg-[#1557b0] disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer"
+          >
+            {loading ? 'Verifying...' : 'Continue'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}