skills.rest
clerk
clerkOFFICIAL
Explore all skills by this author →
Website𝕏@ClerkGitHub

clerk-astro-patterns

Protect Astro routes with Clerk middleware and createRouteMatcher.

66|4|Updated Jan 6, 2026
Search Tags:#middleware#astro#ssr#auth#clerk#api-routes#islands
One-click install
npx skills add https://github.com/clerk/skills --skill clerk-astro-patterns-clerk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: clerk-astro-patterns
Source: https://github.com/clerk/skills/tree/main/skills/frameworks/clerk-astro-patterns
Command: npx skills add https://github.com/clerk/skills --skill clerk-astro-patterns-clerk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many Astro apps need consistent, server-aware authentication across SSR pages, API routes, and client-side islands, but Astro's dual rendering modes and hydration model make it easy to misconfigure auth and expose protected content or break client components.

Core Features & Use Cases

  • Middleware routing: Examples for adding clerkMiddleware, using createRouteMatcher, and redirecting unauthenticated users to sign-in.
  • SSR page protection: Guidance for using Astro.locals.auth() to gate server-rendered pages and fetch user-specific data.
  • Island component auth: Patterns for using Clerk hooks in React islands with client:* directives to maintain reactive auth state.
  • API route authorization: How to check context.locals.auth() in API handlers and use clerkClient for server-side user/organization data.
  • Common pitfalls & fixes: Advice on prerendering, output mode, client hydration, and permission checks.

Quick Start

Add clerkMiddleware with createRouteMatcher in src/middleware.ts to guard /dashboard and /settings and redirect unauthenticated users to /sign-in.

Frequently Asked Questions about clerk-astro-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I protect Astro routes with Clerk authentication middleware?▼

Protect Astro routes with Clerk authentication by adding clerkMiddleware in src/middleware.ts and using createRouteMatcher to define protected paths. Unauthenticated users are automatically redirected to the sign-in page before rendering occurs.

How do I access auth state in Astro SSR pages and API routes?▼

Access auth state in Astro SSR pages and API routes by calling Astro.locals.auth() or context.locals.auth(). This server-side check gates server-rendered content and authorizes API handlers effectively.

Can I use Clerk auth hooks in React island components with Astro?▼

Use Clerk auth hooks in React island components by applying client:* directives. This maintains reactive auth state within Astro islands, bridging server-side middleware protection with client-side hydration.

Does Clerk middleware work with Astro prerendering and hybrid output?▼

Clerk middleware works with Astro prerendering and hybrid output modes. Configure your Astro project output setting correctly to ensure middleware executes properly and avoids exposing protected content during static generation.

Why does my Astro middleware redirect loop when checking Clerk organizations?▼

Astro middleware redirect loops during Clerk organization checks often stem from improper createRouteMatcher configuration. Ensure your matcher accurately distinguishes public routes from protected and no-org states to prevent infinite redirects.

Related Skills

Explore More Software Engineering Skills→
RajAryanIITBHURajAryanIITBHU

clerk-astro-patterns

Secure Astro routes and client islands with Clerk authentication middleware.

Community
Intermediate
Aditya07024Aditya07024

clerk-tanstack-patterns

Implement Clerk authentication guards and server functions in TanStack React Start applications.

Community
Intermediate
sudarshan-krishnansudarshan-krishnan

clerk-astro-patterns

Implement Clerk authentication patterns in Astro applications with middleware and SSR.

Community
Intermediate
faw01faw01
18

clerk-nextjs-patterns

Implement Clerk SDK authentication patterns for Next.js middleware and server-side authorization.

Community
Advanced