Google OAuth

Google OAuth Setup

Anleitung zur Konfiguration von Google als OAuth-Provider.

Google Cloud Projekt erstellen

Schritt 1: Google Cloud Console öffnen

1. Gehe zu Google Cloud Console
2. Erstelle ein neues Projekt oder wähle ein bestehendes
3. Notiere dir die Projekt-ID

Schritt 2: OAuth Consent Screen konfigurieren

1. Navigiere zu “APIs & Services” → “OAuth consent screen”
2. Wähle “External” (für öffentliche Apps) oder “Internal” (nur für G Suite)
3. Fülle aus:
   • App name: Name deiner App
   • User support email: Deine E-Mail
   • Developer contact information: Deine E-Mail
4. Klicke auf “Save and Continue”

Schritt 3: Scopes hinzufügen

1. Klicke auf “Add or Remove Scopes”
2. Wähle folgende Scopes:
   • userinfo.email
   • userinfo.profile
   • openid
3. Klicke auf “Save and Continue”

Schritt 4: OAuth Client ID erstellen

1. Navigiere zu “Credentials” → “Create Credentials” → “OAuth client ID”
2. Wähle “Web application”
3. Fülle aus:

Feld	Wert
Name	Dein App Name Auth
Authorized JavaScript origins	https://deine-domain.de
Authorized redirect URIs	https://auth.deine-domain.de/auth/callback

4. Klicke auf “Create”

Schritt 5: Credentials kopieren

Nach dem Erstellen:

1. Kopiere die Client ID
2. Kopiere das Client Secret

Multiple Redirect URIs

Du kannst mehrere Redirect URIs hinzufügen (z.B. für Development und Production):

• https://auth.deine-domain.de/auth/callback
• http://localhost:8787/auth/callback

Cloudflare Secrets konfigurieren

Speichere die Google Credentials in Cloudflare:

# Provider auf Google setzen
wrangler secret put OAUTH_PROVIDER
# Eingabe: google

# Google Client ID
wrangler secret put OAUTH_CLIENT_ID
# Eingabe: deine-google-client-id.apps.googleusercontent.com

# Google Client Secret
wrangler secret put OAUTH_CLIENT_SECRET
# Eingabe: dein-google-client-secret

# Callback URL
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
wrangler secret put JWT_SECRET
# Eingabe: ein-langes-zufälliges-secret

Google API Berechtigungen

Der OAuth-Flow fordert folgende Scopes an:

• openid - OpenID Connect
• profile - Zugriff auf Profil-Informationen
• email - Zugriff auf E-Mail-Adresse

Benutzerdaten

Nach erfolgreicher Authentifizierung erhältst du:

{
  "userId": "google:1234567890",
  "name": "Max Mustermann",
  "email": "max@example.com",
  "avatar": "https://lh3.googleusercontent.com/...",
  "provider": "google"
}

Lokale Entwicklung

Für lokale Entwicklung:

1. Füge in Google Cloud Console hinzu:

   • Authorized redirect URIs: http://localhost:8787/auth/callback

2. Verwende die gleichen Credentials oder erstelle separate für Development

Testen

Nach der Konfiguration teste den OAuth-Flow:

1. Öffne deine Frontend-App
2. Klicke auf “Login”
3. Du wirst zu Google weitergeleitet
4. Wähle dein Google-Konto
5. Autorisiere die App
6. Du wirst zurück zu deiner App weitergeleitet mit einem JWT Token

Troubleshooting

”redirect_uri_mismatch”

Problem: Google zeigt einen Fehler wegen falscher Redirect URI.

Lösung:

• Prüfe, dass OAUTH_REDIRECT_URI exakt mit der in Google Cloud konfigurierten URI übereinstimmt
• Achte auf http vs https, Ports, trailing slashes
• URI muss URL-encoded sein falls nötig

”Access blocked: This app’s request is invalid”

Problem: OAuth Consent Screen ist nicht korrekt konfiguriert.

Lösung:

• Stelle sicher, dass der OAuth Consent Screen vollständig ausgefüllt ist
• Prüfe dass alle erforderlichen Scopes hinzugefügt wurden

”This app is blocked”

Problem: App ist im “Testing” Modus und User ist nicht als Test-User hinzugefügt.

Lösung:

• Gehe zu “OAuth consent screen” → “Test users”
• Füge Test-User hinzu
• Oder publiziere die App (nach Review)

App veröffentlichen

Für Production-Use solltest du deine App veröffentlichen:

1. Gehe zu “OAuth consent screen”
2. Klicke auf “Publish App”
3. Google wird deine App reviewen (kann einige Tage dauern)
4. Nach Approval können alle Google-User sich anmelden

Wichtig

Während die App im “Testing” Status ist, können nur hinzugefügte Test-User sich anmelden!

Nächste Schritte

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