CloudSignal WebSocket — React MQTT Context Generator

Generate a production-grade React context provider for real-time messaging over CloudSignal's MQTT broker using WebSocket. The generated code handles the full connection lifecycle: authentication via external auth providers, reconnection, proactive token refresh, message routing, and cleanup.

What You Generate

1. mqtt-context.tsx — React context provider with:

   • Auth-provider token exchange (Clerk, Supabase, Auth0, Firebase, or custom OIDC)
   • WebSocket connection to CloudSignal MQTT broker
   • Auth error circuit-breaker (max 3 retries, 10s delay)
   • Proactive token refresh at 50 minutes (before 60-min TTL expiry)
   • Exact topic routing with safe JSON parsing
   • React StrictMode double-mount protection
   • Tab visibility reconnection
   • Typed subscription hooks (jobs, notifications, transactions, or custom)

2. cloudsignal.d.ts — TypeScript declarations for @cloudsignal/mqtt-client (the npm package does not ship types)

Before You Start