Was macht create-auth-skill?
Rüste Authentifizierung in TypeScript/JavaScript-Apps mit Better Auth ein. Erkenne Frameworks, konfiguriere Datenbankadapter, richte Routenhandler ein, füge OAuth-Anbieter hinzu und erstelle Auth-UI-Seiten. Verwende dies, wenn Benutzer Login, Registrierung oder Authentifizierung zu einem neuen oder bestehenden Projekt mit Better Auth hinzufügen möchten.
Funktionen
- Framework-Erkennung: Automatische Erkennung von Frameworks wie Express, Next.js, Fastify, Hono, etc.
- Datenbankadapter: Konfiguration von Prisma, Drizzle, SQLite, PostgreSQL, MySQL, etc.
- Routenhandler: Erstellung von Endpunkten für
/api/auth/login,/api/auth/register,/api/auth/logout,/api/auth/session. - OAuth-Provider: Integration von Google, GitHub, Discord, Twitter, Microsoft, etc.
- Auth-UI-Seiten: Generierung von Anmelde-, Registrierungs- und Passwort-zurücksetzen-Seiten.
- Sicherheit: bcrypt-Passwort-Hashing, JWT-Tokens, CSRF-Schutz, Ratenbegrenzung.
Voraussetzungen
- Node.js 18 oder höher
- Ein TypeScript/JavaScript-Projekt (neu oder bestehend)
- npm, yarn, pnpm oder bun als Paketmanager
- Eine Datenbank (SQLite, PostgreSQL, MySQL, MongoDB) – optional für den Start
Verwendung
-
Skill initialisieren (im Stammverzeichnis des Projekts):
npx better-auth@latest init -
Framework und Datenbank auswählen – Der Skill erkennt dein Framework automatisch oder fragt bei Bedarf nach.
-
OAuth-Provider konfigurieren (optional) – Füge Umgebungsvariablen für OAuth-Anbieter hinzu:
GOOGLE_CLIENT_ID=deine_google_id GOOGLE_CLIENT_SECRET=dein_google_secret GITHUB_CLIENT_ID=deine_github_id GITHUB_CLIENT_SECRET=dein_github_secret -
Auth-UI-Seiten generieren (für Next.js, Vite, etc.):
npx better-auth@latest generate-ui -
Deine App starten – Starte den Entwicklungsserver und navigiere zu
/auth/login.
Beispiel-Integration
Express.js
import { auth } from './auth';
import express from 'express';
const app = express();
app.use('/api/auth', auth.handler);
app.listen(3000, () => {
console.log('Server läuft auf Port 3000');
});
Next.js (App Router)
// app/api/auth/[...all]/route.ts
import { auth } from '@/lib/auth';
import { toNextJsHandler } from 'better-auth/next-js';
export const { POST, GET } = toNextJsHandler(auth);
Konfiguration
Die Konfiguration erfolgt über eine auth.ts- oder auth.config.ts-Datei im Projektstamm:
import { betterAuth } from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';
export const auth = betterAuth({
database: prismaAdapter(prismaClient),
providers: {
google: {
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
},
},
});