clerk/clerk-nuxt-patterns

¿Qué hace clerk-nuxt-patterns?

Patrones de autenticación para Nuxt 3 con @clerk/nuxt - middleware, composables, rutas de API de servidor, SSR. Se activa en: autenticación Nuxt, composable useAuth, clerkMiddleware Nuxt, API de servidor Clerk, protección de rutas Nuxt.

Resumen

Este skill proporciona implementaciones de referencia para integrar Clerk en aplicaciones Nuxt 3, incluyendo:

• Middleware de autenticación para protección de rutas
• Composición de estado de usuario con useAuth y useUser
• Rutas de API de servidor protegidas con Clerk
• Soporte para renderizado del lado del servidor (SSR)

Plataformas soportadas

• Cursor
• Codex
• Windsurf

Activación

El skill se activa automáticamente cuando se detectan los siguientes contextos:

• Nuxt auth
• useAuth composable
• clerkMiddleware Nuxt
• server API Clerk
• Nuxt route protection

Archivos incluidos

• middleware/auth.ts - Middleware global para proteger rutas, redirigiendo a usuarios no autenticados o renderizando condicionalmente basado en SSR
• server/api/auth.ts - Endpoints de API del servidor protegidos con Clerk para acceder a datos del usuario
• server/middleware/auth.ts - Middleware del servidor para validar tokens Clerk en peticiones de API

Ejemplo de uso

// Composable useAuth en un componente Vue
const { userId, isLoaded, signOut } = useAuth()

// Proteger una ruta con middleware
// En middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { userId } = useAuth()
  if (!userId) {
    return navigateTo('/sign-in')
  }
})

Para más información, consulta la documentación oficial de Clerk para Nuxt.