¿Qué hace clerk-astro-patterns?
Patrones de Astro con Clerk — middleware, páginas SSR, componentes isla, rutas API, renderizado estático vs SSR. Se activa con: astro clerk, clerk astro middleware, astro protected page, clerk island component, astro API route auth, clerk astro SSR.
Requisitos previos
- Tener un proyecto Astro configurado.
- Tener una cuenta en Clerk y un proyecto creado.
- Instalar los paquetes necesarios:
npm install @clerk/clerk-astro
Configuración del middleware
Crea un archivo src/middleware.ts para proteger rutas y manejar la autenticación:
import { clerkMiddleware } from '@clerk/clerk-astro/server';
export const onRequest = clerkMiddleware((auth, request) => {
// Lógica personalizada opcional
});
Define las rutas públicas en tu archivo de configuración (opcional):
// astro.config.mjs
export default defineConfig({
output: 'server',
// ...
});
Páginas SSR con Clerk
Para páginas renderizadas del lado del servidor, utiliza el hook Auth:
---
import { Auth } from '@clerk/clerk-astro';
---
<Auth>
{({ user }) => (
<div>
<h1>Bienvenido, {user?.firstName}!</h1>
</div>
)}
</Auth>
Componentes isla
Crea un componente isla para manejar la interfaz de autenticación:
---
// src/components/SignIn.astro
import { ClerkProvider } from '@clerk/clerk-astro';
---
<ClerkProvider>
<SignIn />
</ClerkProvider>
Luego, úsalo en cualquier página:
---
import SignIn from '../components/SignIn.astro';
---
<SignIn client:load />
Rutas API
Para autenticar rutas API, usa getAuth desde @clerk/clerk-astro/server:
// src/pages/api/protected.ts
export async function GET(request: Request) {
const { userId } = getAuth(request);
if (!userId) {
return new Response('No autorizado', { status: 401 });
}
// Lógica protegida
return new Response(JSON.stringify({ userId }), { status: 200 });
}
Renderizado estático vs SSR
Para páginas estáticas, usa Clerk en tiempo de construcción, pero ten en cuenta que la autenticación solo se verificará en el cliente. Para SSR, habilita output: 'server' en la configuración de Astro y usa el middleware.
Referencias
Este skill se activa automáticamente con los triggers mencionados y proporciona ejemplos prácticos para cada patrón.