GitHub OAuth

GitHub OAuth Setup

Anleitung zur Konfiguration von GitHub als OAuth-Provider.

GitHub OAuth App erstellen

Schritt 1: Developer Settings öffnen

1. Gehe zu GitHub Developer Settings
2. Klicke auf “OAuth Apps” im linken Menü
3. Klicke auf “New OAuth App”

Schritt 2: App konfigurieren

Fülle das Formular aus:

Feld	Wert
Application name	Dein App Name (z.B. “My App Auth”)
Homepage URL	https://deine-domain.de
Application description	Optional: Beschreibung deiner App
Authorization callback URL	https://auth.deine-domain.de/auth/callback

Wichtig

Die Authorization callback URL muss exakt mit der URL übereinstimmen, die du später in OAUTH_REDIRECT_URI konfigurierst!

Schritt 3: Credentials kopieren

Nach dem Erstellen der App:

1. Kopiere die Client ID
2. Klicke auf “Generate a new client secret”
3. Kopiere das Client Secret sofort (es wird nur einmal angezeigt!)

Cloudflare Secrets konfigurieren

Speichere die GitHub Credentials in Cloudflare:

# Provider auf GitHub setzen
wrangler secret put OAUTH_PROVIDER
# Eingabe: github

# GitHub Client ID
wrangler secret put OAUTH_CLIENT_ID
# Eingabe: deine-github-client-id

# GitHub Client Secret
wrangler secret put OAUTH_CLIENT_SECRET
# Eingabe: dein-github-client-secret

# Callback URL (muss mit GitHub App übereinstimmen)
wrangler secret put OAUTH_REDIRECT_URI
# Eingabe: https://auth.deine-domain.de/auth/callback

# Frontend URL
wrangler secret put FRONTEND_URL
# Eingabe: https://deine-domain.de

# JWT Secret (zufälliger String)
wrangler secret put JWT_SECRET
# Eingabe: ein-langes-zufälliges-secret

GitHub API Berechtigungen

Der OAuth-Flow fordert folgende Berechtigungen an:

• read:user - Zugriff auf öffentliche Profil-Informationen
• user:email - Zugriff auf E-Mail-Adresse

Benutzerdaten

Nach erfolgreicher Authentifizierung erhältst du:

{
  "userId": "github:123456",
  "name": "Max Mustermann",
  "email": "max@example.com",
  "avatar": "https://avatars.githubusercontent.com/u/123456",
  "provider": "github"
}

Lokale Entwicklung

Für lokale Entwicklung mit wrangler dev:

1. Erstelle eine separate GitHub OAuth App mit:

   • Authorization callback URL: http://localhost:8787/auth/callback

2. Verwende separate Secrets für Development:

# Development Secrets (optional mit --env dev)
wrangler secret put OAUTH_CLIENT_ID --env dev
wrangler secret put OAUTH_CLIENT_SECRET --env dev
wrangler secret put OAUTH_REDIRECT_URI --env dev
# Eingabe: http://localhost:8787/auth/callback

Testen

Nach der Konfiguration teste den OAuth-Flow:

1. Öffne deine Frontend-App
2. Klicke auf “Login”
3. Du wirst zu GitHub weitergeleitet
4. Autorisiere die App
5. Du wirst zurück zu deiner App weitergeleitet mit einem JWT Token

Troubleshooting

”Redirect URI mismatch”

Problem: GitHub zeigt einen Fehler wegen falscher Redirect URI.

Lösung:

• Prüfe, dass OAUTH_REDIRECT_URI exakt mit der in GitHub konfigurierten URL übereinstimmt
• Achte auf http vs https, trailing slashes, etc.

”Invalid client_id or client_secret”

Problem: Authentifizierung schlägt fehl.

Lösung:

• Verifiziere dass Client ID und Secret korrekt kopiert wurden
• Prüfe auf zusätzliche Leerzeichen beim Kopieren

E-Mail-Adresse ist null

Problem: User-Objekt enthält keine E-Mail.

Lösung:

• GitHub-User muss eine öffentliche E-Mail-Adresse haben
• Alternative: Fordere user:email Scope an (bereits implementiert)

Nächste Schritte

• OAuth Übersicht - Mehr über OAuth-Flow
• API Endpoints - Verfügbare Auth-Endpoints
• Client Library - Integration in deine App