JWT und Refresh Token erklärt

📚 Theorie: Was sind JWT und Refresh Token?

Was ist ein JWT (JSON Web Token)?

Ein JWT ist wie ein digitaler Ausweis, den Sie bei jeder Anfrage an einen Server vorzeigen. Stellen Sie sich vor, Sie gehen in ein Bürogebäude - anstatt sich jedes Mal neu anzumelden, bekommen Sie einen Ausweis, der beweist, wer Sie sind.

Ein JWT besteht aus drei Teilen:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Diese drei Blöcke (getrennt durch Punkte) sind:

1. Header (Kopf)

{
  "alg": "HS256",
  "typ": "JWT"
}

• Sagt dem Server, wie der Token verschlüsselt wurde
• Wie ein Stempel auf einem Dokument

2. Payload (Inhalt)

{
  "userId": "12345",
  "username": "max.mustermann",
  "role": "user",
  "exp": 1735689600
}

• Enthält die eigentlichen Informationen über den Benutzer
• Wie die Daten auf Ihrem Ausweis (Name, ID, Berechtigung)
• Wichtig: Keine Passwörter oder sensible Daten hier speichern!

3. Signature (Unterschrift)

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret
)

• Beweist, dass der Token echt ist und nicht manipuliert wurde
• Wie eine Unterschrift oder ein Siegel

Wie funktioniert JWT in der Praxis?

Traditioneller Weg (mit Sessions):

1. Sie loggen sich ein → Server speichert “Sie sind eingeloggt” in seiner Datenbank
2. Sie machen eine Anfrage → Server prüft in der Datenbank nach
3. Sie loggen sich aus → Server löscht den Eintrag

JWT Weg:

1. Sie loggen sich ein → Server gibt Ihnen einen Token (wie einen Ausweis)
2. Sie machen eine Anfrage → Server prüft nur Ihren Token (keine Datenbankabfrage)
3. Sie loggen sich aus → Token wird verworfen

Was ist ein Refresh Token?

Ein Refresh Token ist wie ein “Master-Schlüssel”, der neue JWT-Token erstellen kann.

Das Problem: JWT-Token sollten nur kurz gültig sein (z.B. 15 Minuten) - aus Sicherheitsgründen.

Die Lösung: Refresh Token - ein langlebiger Token (z.B. 7 Tage), der automatisch neue JWT-Token erstellt.

Analogie

Stellen Sie sich vor, Ihr Büroausweis läuft alle 15 Minuten ab, aber Sie haben einen speziellen Schlüssel, mit dem Sie sich einen neuen Ausweis holen können, ohne sich komplett neu anzumelden.

Es ist viel unwahrscheinlicher, dass ein Refresh Token geklaut wird, denn dieses wird nur beim Anfordern eines neuen Access-Token übermittelt. Das Access-Token hingegen bei jedem Request.

Ein Refresh Token kann direkt ungültig gemacht werden, sollte dieses mehr als einmal verwendet werden.

🔄 Authentifizierungs-Flow einfach erklärt

Schritt 1: Anmeldung

Benutzer → Server: "Hier sind meine Login-Daten"
Server → Benutzer: "OK, hier ist dein JWT (15 min) + Refresh Token (7 Tage)"

Schritt 2: Normale Anfragen

Benutzer → Server: "Hier sind meine Daten + JWT"
Server → Benutzer: "JWT ist gültig, hier sind deine Daten"

Schritt 3: JWT abgelaufen

Benutzer → Server: "Hier sind meine Daten + abgelaufener JWT"
Server → Benutzer: "JWT abgelaufen, Zugriff verweigert"

Schritt 4: Automatische Erneuerung

Benutzer → Server: "Hier ist mein Refresh Token"
Server → Benutzer: "OK, hier ist ein neuer JWT"

⚖️ Vor- und Nachteile verstehen

Vorteile von JWT:

✅ Keine Server-Speicherung nötig

• Server muss sich nichts merken
• Besser für viele gleichzeitige Benutzer

✅ Funktioniert überall

• Zwischen verschiedenen Services verwendbar
• Mobile Apps, Webseiten, APIs

✅ Offline prüfbar

• Server kann Token prüfen ohne Datenbankabfrage
• Schneller

Nachteile von JWT:

❌ Schwer zu widerrufen

• Einmal ausgestellt, läuft Token bis zum Ablauf
• Wie ein Gutschein, den Sie nicht zurücknehmen können

❌ Grösser als Session-IDs

• Mehr Datenübertragung bei jeder Anfrage

❌ Sensible Daten sichtbar

• Jeder kann den Inhalt lesen (aber nicht fälschen)
• Niemals Passwörter im Token speichern!

🛡️ Sicherheits-Grundlagen

Access Token (JWT):

• Lebensdauer: Kurz (5-15 Minuten)
• Speicherung: Im Arbeitsspeicher der App
• Zweck: Für jede API-Anfrage
• Bei Diebstahl: Schaden begrenzt durch kurze Lebensdauer

Refresh Token:

• Lebensdauer: Lang (Tage bis Wochen)
• Speicherung: Sicher in HttpOnly Cookies
• Zweck: Neue Access Token erstellen
• Bei Diebstahl: Kann vom Server widerrufen werden

Warum zwei Token?

Sicherheit durch Trennung:

• JWT für tägliche Arbeit (kurz, oft verwendet)
• Refresh Token für Erneuerung (lang, selten verwendet)
• Wie Geldbörse (wenig Bargeld) vs. Bankkonto (viel Geld, extra geschützt)

📋 Was Sie als nächstes lernen werden

1. Express.js Backend erstellen

• Login/Logout Funktionen
• Token-Erstellung und -Prüfung
• Geschützte Routen

2. React Frontend entwickeln

• Automatische Token-Verwaltung
• Login-Formulare
• Geschützte Seiten

---

Im nächsten Teil implementieren wir das Express.js Backend mit allen notwendigen Funktionen für die JWT-Authentifizierung.