Prompt-to-PR: Better Auth zu einer Next.js-App hinzufügen
Vollständiges SOP für die Integration von Better Auth in ein Next.js App Router-Projekt — Sitzungen, E-Mail/Passwort, OAuth und Middleware-Schutz in einem Durchgang.
CursorClaude CodeCodexWindsurf Next.jsTypeScriptPostgreSQL
Ein vollständiges Playbook zum Hinzufügen von Better Auth zu einem bestehenden Next.js 15 App Router-Projekt mit PostgreSQL-Unterstützung. Deckt den Auth-Server, den Routen-Handler, den Client-Helper, die Middleware und die Anmelde-UI in einem einzigen Agentendurchlauf ab.
1. Anforderung
Füge sitzungsbasierte Authentifizierung mit E-Mail/Passwort und GitHub OAuth hinzu. Schütze alle Routen unter /dashboard über die Next.js-Middleware. Speichere Sitzungen in der vorhandenen PostgreSQL-Datenbank mit dem integrierten Drizzle-Adapter von Better Auth.
2. Erster Prompt
Add Better Auth to this Next.js 15 App Router project.
Stack: PostgreSQL (Drizzle ORM, schema in src/db/schema.ts), TypeScript, Tailwind.
Tasks:1. Install `better-auth` and `@better-auth/drizzle`.2. Create `src/lib/auth.ts` — configure BetterAuth with the Drizzle adapter, emailAndPassword plugin, and GitHub socialProvider. Read secrets from BETTER_AUTH_SECRET, GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET env vars.3. Create `src/app/api/auth/[...all]/route.ts` that re-exports the auth handler for GET and POST.4. Create `src/lib/auth-client.ts` that exports a `createAuthClient()` instance for client components.5. Add Better Auth tables to `src/db/schema.ts` using `auth.api.generateSchema()`.6. Create `src/middleware.ts` that protects every route under `/dashboard`; redirect unauthenticated requests to `/sign-in`.7. Create `src/app/(auth)/sign-in/page.tsx` — a minimal email/password form and a "Continue with GitHub" button using the auth client.8. Do not touch any existing route or component unless strictly necessary.3. Erwartete Dateiänderungen
package.json (better-auth, @better-auth/drizzle)src/lib/auth.ts (new — server auth instance)src/lib/auth-client.ts (new — browser auth client)src/app/api/auth/[...all]/route.ts (new — catch-all route handler)src/db/schema.ts (new tables: user, session, account, verification)src/middleware.ts (new — route protection)src/app/(auth)/sign-in/page.tsx (new — sign-in UI).env.local.example (BETTER_AUTH_SECRET, GITHUB_* vars)4. Review-Checkliste
BETTER_AUTH_SECREThat mindestens 32 zufällige Bytes — niemals hartcodiert.- Der Catch-All-Routen-Handler exportiert sowohl
GETals auchPOST. src/middleware.tsverwendetmatcher, um_next/static,_next/imageund/api/authauszuschließen.- Der Drizzle-Adapter erhält dieselbe
db-Instanz, die auch anderswo verwendet wird — keine zweite Verbindung. createAuthClient()inauth-client.tszeigt auf die korrektebaseURL(liestNEXT_PUBLIC_APP_URL).- Die Anmeldeseite ist eine Client-Komponente (
"use client") — keine serverseitigen Importe. - Die GitHub-OAuth-Callback-URL in den GitHub-App-Einstellungen stimmt mit
/api/auth/callback/githubüberein. - Neue Schema-Tabellen werden hinzugefügt, nicht vorhandene Tabellen ersetzt.
5. Testbefehle
# Generate and run the new auth migrationsnpx drizzle-kit generatenpx drizzle-kit migrate
# Start dev serverbun dev
# Smoke-test: attempt to hit protected route without a sessioncurl -I http://localhost:3000/dashboard# Expect: 307 redirect to /sign-in
# Run any existing test suitebun test6. Häufige Fehler
BETTER_AUTH_SECRETfehlt zur Laufzeit — Better Auth wirft einen Fehler beim Start. Füge es zu.env.localhinzu; überprüfe mitconsole.log(process.env.BETTER_AUTH_SECRET?.length)inauth.ts(danach entfernen).- Doppelte Drizzle-Verbindung — der Agent erstellt einen zweiten
drizzle()-Aufruf inauth.tsanstatt aussrc/db/index.tszu importieren. Verursacht zwei Verbindungspools. - Middleware stimmt mit
/api/authüberein — verursacht eine unendliche Weiterleitungsschleife. Dermatchermuss/api/auth/(.*)ausschließen. - Client-Komponente importiert server-only
auth— Build-Fehler. Nurauth-client.tssollte in Client-Komponenten importiert werden. - GitHub-Callback-URL stimmt nicht überein — OAuth schlägt still fehl. Bestätige, dass der GitHub OAuth-App-Callback in der Entwicklung
http://localhost:3000/api/auth/callback/githubist.
7. Fix-Prompt
The middleware is redirecting /api/auth/* to /sign-in, causing an infinite loop.
Fix src/middleware.ts so the matcher explicitly excludes:- /api/auth/:path*- /_next/static/:path*- /_next/image- /favicon.ico
Also confirm that auth.ts imports `db` from `src/db/index.ts` rather thancreating a second Drizzle instance.8. PR-Beschreibung
## Auth: Add Better Auth (email/password + GitHub OAuth)
- Installs `better-auth` with Drizzle adapter against the existing PostgreSQL db- Catch-all `/api/auth/[...all]` route handles all auth requests- Middleware protects `/dashboard/**`; unauthenticated → `/sign-in`- New sign-in page with email/password form and GitHub OAuth button- Four new schema tables (`user`, `session`, `account`, `verification`) via migration
**Env vars required** (see `.env.local.example`):- `BETTER_AUTH_SECRET` — min 32-byte random string- `GITHUB_CLIENT_ID` / `GITHUB_CLIENT_SECRET`- `NEXT_PUBLIC_APP_URL`