# Wiederverwendbare Authentifizierung Diese Authentifizierungslösung kann einfach in andere Next.js Projekte übernommen werden. ## Komponenten ### 1. Core Libraries (wiederverwendbar) - `/lib/auth.ts` - Authentifizierungslogik (Benutzerverwaltung über .env) - `/lib/session.ts` - JWT-basiertes Session-Management - `/middleware.ts` - Route-Schutz Middleware ### 2. UI Komponenten (wiederverwendbar) - `/app/login/page.tsx` - Login-Seite - `/app/login/actions.ts` - Server Actions für Login/Logout - `/components/LogoutButton.tsx` - Logout-Button Komponente ## Installation in neuen Projekten ### 1. Dependencies installieren ```bash npm install jose bcryptjs npm install --save-dev @types/bcryptjs ``` ### 2. Dateien kopieren Kopiere folgende Dateien in dein neues Projekt: - `lib/auth.ts` - `lib/session.ts` - `middleware.ts` - `app/login/` (gesamter Ordner) - `scripts/generate-password.js` (Passwort-Hash Generator) - `components/LogoutButton.tsx` (optional) ### 3. Passwort-Hashes generieren Verwende das mitgelieferte Script, um sichere Passwort-Hashes zu erstellen: ```bash # Interactive Mode node scripts/generate-password.js # Mit Passwort als Argument node scripts/generate-password.js meinPasswort123 ``` Das Script gibt einen bcrypt-Hash aus, den du in der `.env` verwenden kannst. ### 4. Umgebungsvariablen einrichten Füge zu deiner `.env` hinzu: ```env # Authentifizierung # Format: username:passwordHash,username2:passwordHash2 # Verwende 'node scripts/generate-password.js' um Hashes zu generieren AUTH_USERS=admin:$2b$10$DKLO7uQPmdAw9Z64NChro...,user1:$2b$10$K613Z70Hodr6xyEh10Mw2u... # Secret Key für JWT (unbedingt ändern in Production!) AUTH_SECRET=your-super-secret-key-change-this ``` ### 5. Logout-Button einbinden (optional) ```tsx import LogoutButton from '@/components/LogoutButton'; // In deiner Komponente: ``` ## Konfiguration ### Benutzer hinzufügen/entfernen 1. Generiere einen Passwort-Hash: ```bash node scripts/generate-password.js neuesPasswort ``` 2. Editiere die `AUTH_USERS` Variable in der `.env`: ```env AUTH_USERS=user1:$2b$10$hash1...,user2:$2b$10$hash2...,user3:$2b$10$hash3... ``` ### Authentifizierung deaktivieren Entferne die `AUTH_USERS` Variable oder setze sie auf einen leeren String: ```env AUTH_USERS= ``` ### Session-Dauer anpassen Editiere in `lib/session.ts`: ```ts const SESSION_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 Tage ``` ### Geschützte Routen anpassen Editiere in `middleware.ts` die `publicPaths`: ```ts const publicPaths = ['/login', '/public-page']; ``` ## Sicherheitshinweise 1. **AUTH_SECRET ändern**: Verwende in Production einen starken, zufälligen Schlüssel 2. **HTTPS verwenden**: In Production immer HTTPS aktivieren 3. **Passwort-Hashing**: Passwörter werden mit bcrypt gehashed (10 Salt Rounds) 4. **Keine Klartext-Passwörter**: Verwende immer das Script zur Hash-Generierung ## Passwort-Hash Generator Das Script `scripts/generate-password.js` verwendet bcrypt mit 10 Salt Rounds, um sichere Passwort-Hashes zu erstellen. ### Verwendung Interactive Mode (empfohlen für sensible Passwörter): ```bash npm run generate-password # oder node scripts/generate-password.js # Passwort wird interaktiv abgefragt ``` Mit Argument: ```bash npm run generate-password -- meinPasswort # oder node scripts/generate-password.js meinPasswort ``` ### Ausgabe ``` 🔐 Generiere Passwort-Hash... ✅ Hash generiert: ──────────────────────────────────────────────────────────────────────────────── $2b$10$DKLO7uQPmdAw9Z64NChro.8mOsnqZQaRZjctWDojIkK926ROBVyJW ──────────────────────────────────────────────────────────────────────────────── 📝 Verwende diesen Hash in der .env Datei: AUTH_USERS=username:$2b$10$DKLO7uQPmdAw9Z64NChro.8mOsnqZQaRZjctWDojIkK926ROBVyJW ``` ## Erweiterte Verwendung ### Session-Informationen abrufen ```ts import { getSession } from '@/lib/session'; const session = await getSession(); if (session) { console.log('Eingeloggt als:', session.username); } ``` ### Programmatisch prüfen, ob authentifiziert ```ts import { isAuthenticated } from '@/lib/session'; const authenticated = await isAuthenticated(); ``` ### In Server Components ```tsx import { getSession } from '@/lib/session'; import { redirect } from 'next/navigation'; export default async function ProtectedPage() { const session = await getSession(); if (!session) { redirect('/login'); } return
Hallo {session.username}!
; } ```