Integración con el Worker

El frontend se comunica con el Cloudflare Worker para todas las operaciones que requieren servidor: autenticación, reservaciones y pagos. No hay conexión directa a Supabase desde el navegador.

Variable de entorno


NEXT_PUBLIC_WORKER_URL=    # URL del worker (local o producción)

Esta variable es el único punto de configuración para cambiar entre entornos.

Autenticación en los requests

Todos los endpoints protegidos del worker requieren un Bearer token en el header Authorization. El token lo emite el worker en el signin y el frontend lo guarda en localStorage.


// Patrón usado en todos los componentes que llaman al worker
async function authedFetch(url: string, options: RequestInit = {}): Promise<Response> {
  const token = localStorage.getItem("auth_token"); // o getToken() del hook de auth
  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      Authorization: `Bearer ${token}`,
    },
  });
}

`ReservationModal`

components/organisms/ReservationModal.tsx es el componente que orquesta todo el flujo de reservación + pago:


Usuario abre modal
    │
    ├─ GET /api/reservations/check?slug=...
    │   ↳ Sin reservación → mostrar formulario
    │   ↳ pending         → ir directo a PayPal
    │   ↳ completed       → "ya tienes una reservación"
    │
    ├─ [Formulario] POST /api/reservations
    │   ↳ guarda reservationId
    │
    └─ [PayPal]
        ├─ createOrder → POST /api/paypal/create-order
        └─ onApprove  → POST /api/paypal/capture-order

Página `/reservations`

app/reservations/page.tsx es un Client Component (marcado con "use client"). No puede ser Server Component porque:

La autenticación es client-side (token en localStorage)
output: "export" no admite Server Components con fetch en runtime

Flujo al cargar la página:


useEffect(() => {
  if (!isLoaded) return;
  if (!isSignedIn) { router.replace("/auth/sign-in"); return; }
  
  // Fetch con token del hook de auth
  fetch(`${WORKER_URL}/api/reservations`, {
    headers: { Authorization: `Bearer ${getToken()}` }
  });
}, [isLoaded, isSignedIn]);

Rutas de autenticación

Las rutas /auth/sign-in y /auth/sign-up son páginas simples con "use client", sin routing dinámico. No requieren generateStaticParams().


app/
└── auth/
    ├── sign-in/
    │   └── page.tsx   # Formulario de inicio de sesión
    └── sign-up/
        └── page.tsx   # Formulario de registro

Ambas llaman a useAuth() y redirigen a / tras el login exitoso. Ver apps/web/lib/auth-context.tsx para la implementación completa del contexto.