ausgaben-next/AUTH_README.md

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

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:

# 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:

# 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)

import LogoutButton from '@/components/LogoutButton';

// In deiner Komponente:
<LogoutButton />

Konfiguration

Benutzer hinzufügen/entfernen

1. Generiere einen Passwort-Hash:

node scripts/generate-password.js neuesPasswort

2. Editiere die AUTH_USERS Variable in der .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:

AUTH_USERS=

Session-Dauer anpassen

Editiere in lib/session.ts:

const SESSION_DURATION = 7 * 24 * 60 * 60 * 1000; // 7 Tage

Geschützte Routen anpassen

Editiere in middleware.ts die publicPaths:

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):

npm run generate-password
# oder
node scripts/generate-password.js
# Passwort wird interaktiv abgefragt

Mit Argument:

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

import { getSession } from '@/lib/session';

const session = await getSession();
if (session) {
  console.log('Eingeloggt als:', session.username);
}

Programmatisch prüfen, ob authentifiziert

import { isAuthenticated } from '@/lib/session';

const authenticated = await isAuthenticated();

In Server Components

import { getSession } from '@/lib/session';
import { redirect } from 'next/navigation';

export default async function ProtectedPage() {
  const session = await getSession();
  
  if (!session) {
    redirect('/login');
  }
  
  return <div>Hallo {session.username}!</div>;
}