clerk-astro-patterns

Secure Astro routes and client islands with Clerk authentication middleware.

1|Updated Apr 11, 2026
One-click install
npx skills add https://github.com/RajAryanIITBHU/bny --skill clerk-astro-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: clerk-astro-patterns
Source: https://github.com/RajAryanIITBHU/bny/tree/main/.continue/skills/clerk-astro-patterns
Command: npx skills add https://github.com/RajAryanIITBHU/bny --skill clerk-astro-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides concise, ready-to-use patterns and guidance for integrating Clerk authentication into Astro projects, removing common configuration errors and ensuring routes, API endpoints, and client islands are properly protected.

Core Features & Use Cases

  • Middleware setup with route matchers to protect dashboard, settings, and API routes and redirect unauthenticated users.
  • Server-side rendering guidance using Astro.locals.auth for SSR pages and org-aware redirects.
  • Island component patterns using client directives and useAuth/useUser hooks for React/Vue/Svelte islands.
  • API route examples showing proper auth checks, permission handling, and usage of clerkClient in server contexts.
  • Templates and examples that demonstrate required Astro config, environment variables, and deployment-ready adapter settings.

Quick Start

Use clerk-astro-patterns to add clerkMiddleware protecting /dashboard and /settings and configure Astro.locals.auth() to 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 set up Clerk middleware to protect Astro routes?

Clerk middleware in Astro protects routes by applying clerkMiddleware with route matchers to secure paths like /dashboard and /settings, redirecting unauthenticated users to the sign-in page.

Can I use Clerk useAuth hooks inside Astro islands?

Astro islands support Clerk useAuth and useUser hooks by applying client directives to React, Vue, or Svelte components for client-side authentication state management.

How does Astro locals auth work for SSR pages with Clerk?

Astro locals auth works for SSR pages by accessing Astro.locals.auth in server contexts, enabling org-aware redirects and secure rendering of user-specific content on the server.

Do I need server or hybrid output mode for Clerk authentication in Astro?

Clerk authentication in Astro requires configuring project output as server or hybrid mode to enable the server-side rendering capabilities necessary for middleware-based route protection.

How do I handle API route authentication checks with Clerk in Astro?

Astro API route authentication with Clerk involves implementing auth checks and permission handling within endpoints, utilizing clerkClient in server contexts to verify user sessions and manage access.

What environment variables are required for Clerk integration with Astro?

Clerk integration with Astro requires configuring specific Clerk environment variables alongside deployment-ready adapter settings to establish secure authentication connections between your Astro application and Clerk services.