What problem does it solve? Integrating Clerk authentication into Astro apps is tricky because Astro has two rendering modes (SSR and static prerender) plus island components, and Clerk behaves differently in each. This Skill provides the correct patterns for middleware setup, SSR page auth, island components, and API route protection so you avoid common pitfalls like undefined Astro.locals.auth or non-reactive islands. ## Core Features & Use Cases - Middleware Configuration: Set up clerkMiddleware with createRouteMatcher to protect routes like /dashboard and redirect unauthenticated users to sign-in. - SSR & API Route Auth: Use Astro.locals.auth() in SSR pages and context.locals.auth() in API routes, with proper 401/403 status codes and org/permission checks. - Island Components: Use useAuth, UserButton, and SignInButton from @clerk/astro/react with the required client:load hydration directive. - Use Case: You are adding Clerk to an Astro app with mixed static and dynamic pages and need to protect /dashboard, build an auth-aware header island, and secure an API endpoint — this Skill gives you the exact code patterns and rendering-mode guidance for each. ## Quick Start Set up Clerk middleware in my Astro app to protect the /dashboard route and redirect unauthenticated users to /sign-in.
