¿Qué hace crear-habilidad-de-autenticación?
Genera e implementa autenticación en aplicaciones TypeScript/JavaScript usando Better Auth. Detecta frameworks, configura adaptadores de base de datos, establece manejadores de rutas, agrega proveedores OAuth y crea páginas de UI de autenticación. Úsalo cuando los usuarios quieran agregar inicio de sesión, registro o autenticación a un proyecto nuevo o existente con Better Auth.
Características
- Detecta automáticamente el framework (Next.js, Express, Fastify, etc.).
- Configura adaptadores de base de datos (PostgreSQL, SQLite, MongoDB, etc.).
- Instala dependencias necesarias (
better-auth, paquetes de adaptadores). - Genera manejadores de rutas para login, sign-up, logout y verificación.
- Agrega proveedores OAuth (Google, GitHub, Discord, etc.) desde variables de entorno.
- Crea páginas de UI básicas para autenticación.
Uso
- Ejecuta la habilidad: En tu agente de IA (Claude Code, Cursor, etc.), solicita: "Quiero agregar autenticación con Better Auth a mi proyecto".
- Selecciona opciones: El agente preguntará:
- ¿Qué framework estás usando? (Se detecta automáticamente)
- ¿Qué base de datos? (Se detecta automáticamente o se pregunta)
- ¿Qué proveedores OAuth necesitas? (Google, GitHub, etc.)
- ¿Usar páginas UI generadas o solo API?
- Revisa los cambios: El agente modificará o creará archivos:
src/lib/auth.ts- Configuración de Better Auth.- Rutas API (según framework).
- Páginas de login/sign-up (si aplica).
- Variables de entorno en
.env.local.
- Personaliza: Los archivos generados son punto de partida; puedes modificar estilos, agregar lógica adicional.
Compatibilidad
| Framework | Soporte |
|---|---|
| Next.js (App Router) | Completo |
| Next.js (Pages Router) | Completo |
| Express | Completo |
| Fastify | Completo |
| Hono | Completo |
| React (vite) | UI + API (proxy) |
| Vue (vite) | UI + API (proxy) |
| Base de datos | Adaptador |
|---|---|
| PostgreSQL | @better-auth/postgres |
| SQLite | @better-auth/sqlite |
| MySQL | @better-auth/mysql |
| MongoDB | @better-auth/mongo |
| Prisma | @better-auth/prisma |
| Drizzle | @better-auth/drizzle |
Variables de entorno
La habilidad creará entradas en .env.local (o similar):
BETTER_AUTH_SECRET=your-secret-here
BETTER_AUTH_URL=http://localhost:3000
AUTH_GOOGLE_ID=your-google-client-id
AUTH_GOOGLE_SECRET=your-google-client-secret
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
Ejemplo de configuración generada
// src/lib/auth.ts
import { betterAuth } from "better-auth";
import { postgresAdapter } from "@better-auth/postgres";
import { google, github } from "better-auth/providers";
export const auth = betterAuth({
database: postgresAdapter({
url: process.env.DATABASE_URL!,
}),
providers: [
google({
clientId: process.env.AUTH_GOOGLE_ID!,
clientSecret: process.env.AUTH_GOOGLE_SECRET!,
}),
github({
clientId: process.env.AUTH_GITHUB_ID!,
clientSecret: process.env.AUTH_GITHUB_SECRET!,
}),
],
});
Notas
- Esta habilidad requiere que el proyecto tenga un
package.jsoncon TypeScript configurado. - Para proyectos sin base de datos, se usará SQLite por defecto.
- Los proveedores OAuth requieren registro previo en sus respectivos portales.
- Las páginas UI generadas usan Tailwind CSS (si está disponible) o CSS básico.
Licencia
MIT