Production-tested integration patterns for connecting React frontends to Cloudflare Worker backends with Hono, Clerk authentication, and D1 databases. Prevents common frontend-backend connection issues, CORS errors, auth token failures, and race conditions. Use when: connecting frontend to backend, implementing auth flow, setting up API calls, troubleshooting CORS, fixing race conditions, auth tokens not passing, frontend-backend connection errors, 401 errors, integrating Clerk with Workers, setting up full-stack Cloudflare app, vite cloudflare plugin setup. Prevents: CORS errors, 401 Unauthorized, auth token mismatches, race conditions with auth loading, environment variable confusion, frontend calling wrong endpoints, JWT verification errors, D1 connection issues. Keywords: frontend-backend integration, Cloudflare Workers, Hono, Clerk auth, JWT verification, CORS, React API client, race conditions, auth loading, connection issues, full-stack integration, vite plugin, @cloudflare/vite-plugin, D1 database, environment variables, token attachment, session management, protected routes, API middleware
Status: Production Ready ✅ Last Updated: 2025-10-23 Version: 1.0.0 Token Savings: ~67% Errors Prevented: 6+ common integration issues
This skill should auto-trigger when the user mentions:
Provides production-tested patterns for connecting React frontends to Cloudflare Worker backends using Hono and Clerk authentication.
Solves these recurring problems:
lib/api-client.ts) - Auto-attaches Clerk tokenscomponents/ProtectedRoute.tsx) - Auth gate with loading statesmiddleware/cors.ts) - Dev & prod configurationsmiddleware/auth.ts) - JWT verification with Clerkroutes/api.ts) - Complete example with all patterns| Issue | Why It Happens | Prevention |
|-------|---------------|------------|
| 401 Unauthorized | API called before auth loaded | Check isLoaded before fetch |
| CORS errors | Middleware after routes | Apply CORS BEFORE routes |
| Token not attached | Not using apiClient | Use apiClient wrapper |
| Env vars undefined | Wrong prefix or file | Frontend: VITE_, Backend: .dev.vars |
| Race conditions | Missing auth checks | Wait for isLoaded && isSignedIn |
| JWT verification fails | Wrong secret key | Use correct Clerk secret |
Source: Real production debugging sessions + Cloudflare/Clerk docs
# 1. Copy templates to your project
cp templates/frontend/lib/api-client.ts src/lib/
cp templates/backend/middleware/*.ts backend/middleware/
cp templates/config/* ./
# 2. Install dependencies
npm install hono @clerk/clerk-react @clerk/backend
# 3. Configure environment
cp .dev.vars.example .dev.vars
# Fill in your Clerk keys
# 4. Start development
npm run dev
import { apiClient, useApiClient } from '@/lib/api-client'
function App() {
useApiClient() // Set up token access
return <YourApp />
}
// In components
const data = await apiClient.get('/api/data')
import { ProtectedRoute } from '@/components/ProtectedRoute'
<ProtectedRoute>
<Dashboard /> {/* Only renders when authenticated */}
</ProtectedRoute>
const { isLoaded, isSignedIn } = useSession()
useEffect(() => {
if (!isLoaded || !isSignedIn) return // Wait for auth!
fetchData()
}, [isLoaded, isSignedIn])
// ✅ CORRECT
app.use('/api/*', cors())
app.post('/api/data', handler)
// ❌ WRONG
app.post('/api/data', handler)
app.use('/api/*', cors())
{
"@clerk/clerk-react": "5.53.3",
"@clerk/backend": "2.19.0",
"hono": "4.10.2",
"vite": "7.1.11",
"@cloudflare/vite-plugin": "1.13.14"
}
For those cases, check other skills or refer to official docs.
✅ WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) ✅ Multiple Jezweb client projects ✅ All templates verified working 2025-10-23
| Scenario | Without Skill | With Skill | Savings | |----------|--------------|------------|---------| | Setup integration | ~12k tokens | ~4k tokens | 67% | | Debug CORS | ~3k tokens | 0 tokens | 100% | | Fix auth errors | ~4k tokens | 0 tokens | 100% | | Total | ~19k tokens | ~4k tokens | ~79% |
cloudflare-full-stack-integration/
├── SKILL.md # Main skill file (you are here)
├── README.md # This file
├── templates/
│ ├── frontend/
│ │ ├── lib/
│ │ │ └── api-client.ts # Auto-token API client
│ │ └── components/
│ │ └── ProtectedRoute.tsx # Auth gate component
│ ├── backend/
│ │ ├── middleware/
│ │ │ ├── cors.ts # CORS configuration
│ │ │ └── auth.ts # JWT verification
│ │ └── routes/
│ │ └── api.ts # Example API routes
│ └── config/
│ ├── wrangler.jsonc # Workers configuration
│ ├── .dev.vars.example # Environment variables
│ └── vite.config.ts # Vite + Cloudflare plugin
└── references/
└── common-race-conditions.md # Troubleshooting guide
Quick Summary: This skill provides working code templates and patterns for connecting React frontends to Cloudflare Worker backends, preventing the 6 most common integration errors (CORS, auth, race conditions, env vars, JWT, token attachment).
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer