clerk-astro-patternslisted

# Astro Patterns SDK: `@clerk/astro` v3+. Requires Astro 4.15+. ## What Do You Need? | Task | Reference | |------|-----------| | Configure middleware | references/middleware.md | | Protect SSR pages | references/ssr-pages.md | | Use Clerk in island components | references/island-components.md | | Auth in API routes | references/api-routes.md | | Use Clerk with React in Astro | references/astro-react.md | ## Mental Model Astro has two rendering modes per page: **SSR** and **static prerender**. Clerk works differently in each: - **SSR pages** — use `Astro.locals.auth()` which is populated by the middleware - **Static pages** (`export const prerender = true`) — Clerk middleware skips them; use client-side hooks in islands - **Islands** — React/Vue/Svelte components; use `useAuth()` and other hooks from `@clerk/astro/react` ``` Request → clerkMiddleware() → SSR page → Astro.locals.auth() ↓ Island (.client) → useAuth() hook ``` ## Setup ### astro.config.mjs ```ts import { defineConfig } from 'astro/config' import clerk from '@clerk/astro' export default defineConfig({ integrations: [clerk()], output: 'server', }) ``` ### src/middleware.ts ```ts import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server' const isProtectedRoute = createRouteMatcher(['/dashboard(.*)']) export const onRequest = clerkMiddleware((auth, context, next) => { if (isProtectedRoute(context.request) && !auth().userId) {