torsten/yourpart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c44eb93f33b521ef202335be38188d8c41aac5ed
yourpart3/OAUTH_CREDENTIALS_SETUP.md
Torsten Schulz (local) ac57931928
Some checks failed
Deploy to production / deploy (push) Failing after 49s
Details
Add OAuth integration for multiple providers and implement user linking 
- Created OAuth credentials setup guide for Google, Microsoft, Keycloak, ORY, and ZITADEL.
- Added migration for oauth_identity table to store OAuth identities linked to users.
- Implemented OAuthIdentity model for managing OAuth identities in the database.
- Developed oauthService to handle OAuth login, user creation, and identity linking.
- Created OAuthCallbackView and OAuthUserCallbackView components for handling OAuth responses in the frontend.
- Added error handling and user feedback during the OAuth process.
2026-05-15 13:59:40 +02:00

260 lines
7.1 KiB
Markdown
Raw Blame History

# OAuth Credentials Setup Guide
Anleitung zum Sammeln der OAuth-Credentials für alle 5 Provider.
## Redirect URIs
Für alle Provider benötigst du folgende Redirect URIs (ersetze `www.your-part.de` mit deiner echten Domain):
```
https://www.your-part.de/auth/oauth/callback
https://www.your-part.de/auth/oauth/user/callback
```
Lokal zum Testen:
```
http://localhost:3000/auth/oauth/callback
http://localhost:3000/auth/oauth/user/callback
```
---
## 1. Google
### Credentials besorgen:
1. Öffne [Google Cloud Console](https://console.cloud.google.com/)
2. Erstelle ein neues Projekt oder wähle ein bestehendes
3. Navigiere zu **APIs & Services** → **Credentials**
4. Klick **+ CREATE CREDENTIALS** → **OAuth 2.0 Client IDs**
5. Wähle **Web application**
6. Füge unter **Authorized redirect URIs** hinzu:
- `https://www.your-part.de/auth/oauth/callback`
- `https://www.your-part.de/auth/oauth/user/callback`
7. Speichern und die **Client ID** und **Client Secret** kopieren
### .env:
```env
OAUTH_GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
OAUTH_GOOGLE_CLIENT_SECRET=your-client-secret
```
---
## 2. Microsoft Azure
### Credentials besorgen:
1. Öffne [Azure Portal](https://portal.azure.com/)
2. Navigiere zu **Azure Active Directory** → **App registrations** → **+ New registration**
3. Gib einen Namen ein (z.B. "YourPart OAuth")
4. Wähle **Accounts in any organizational directory (Any Azure AD directory - Multitenant)**
5. Bei **Redirect URI** wähle **Web** und füge ein:
- `https://www.your-part.de/auth/oauth/callback`
6. Klick **Register**
7. Notiere die **Application (client) ID**
8. Gehe zu **Certificates & secrets** → **+ New client secret**
9. Erstelle ein Secret und kopiere den **Value** (nicht die ID!)
10. Gehe zu **Token configuration** und stelle sicher, dass die richtigen Claims enthalten sind
### Zusätzliche URI hinzufügen:
1. Gehe zu **Authentication**
2. Unter **Redirect URIs** klick **+ Add URI**
3. Füge hinzu: `https://www.your-part.de/auth/oauth/user/callback`
### .env:
```env
OAUTH_MICROSOFT_CLIENT_ID=your-application-id
OAUTH_MICROSOFT_CLIENT_SECRET=your-client-secret-value
```
---
## 3. Keycloak
Keycloak ist ein Open-Source OIDC Provider. Du kannst ihn selbst hosten oder eine gehostete Lösung nutzen.
### Option A: Selbst gehostet mit Docker
```bash
docker run -d \
-p 8080:8080 \
-e KEYCLOAK_ADMIN=admin \
-e KEYCLOAK_ADMIN_PASSWORD=admin \
quay.io/keycloak/keycloak:latest \
start-dev
```
Dann:
1. Öffne http://localhost:8080
2. Login mit `admin` / `admin`
3. **Realm erstellen**: Oben links Dropdown → **Create realm**
- Name: `yourpart` (oder beliebig)
4. Im neuen Realm: **Clients** → **Create client**
- Client ID: `yourpart`
- Client Protocol: `openid-connect`
- Access Type: `confidential`
5. Im **Settings** Tab:
- Valid Redirect URIs:
```
https://www.your-part.de/auth/oauth/callback
https://www.your-part.de/auth/oauth/user/callback
```
6. Speichern
7. Gehe zu **Credentials** Tab
- **Client Secret** kopieren
### Option B: Gehosteter Service
- [Keycloak.cloud](https://www.keycloak.cloud/) oder
- [Red Hat Managed Keycloak](https://www.keycloak.org/cloud/)
### .env:
```env
OAUTH_KEYCLOAK_ISSUER=https://your-keycloak-domain/realms/yourpart
OAUTH_KEYCLOAK_CLIENT_ID=yourpart
OAUTH_KEYCLOAK_CLIENT_SECRET=your-client-secret
```
---
## 4. ORY Hydra / ORY Cloud
ORY ist ein moderner OIDC Provider. Am einfachsten ist ORY Cloud.
### Option A: ORY Cloud (empfohlen)
1. Öffne [ORY Cloud Console](https://console.ory.sh/)
2. Registriere dich oder logge dich ein
3. Erstelle ein neues **Project**
4. Gehe zu **Applications**
5. Klick **Create New Application**
6. Gib einen Namen ein (z.B. "YourPart")
7. Unter **Redirect URLs** füge ein:
```
https://www.your-part.de/auth/oauth/callback
https://www.your-part.de/auth/oauth/user/callback
```
8. Speichern
9. Die **Client ID** und **Client Secret** werden angezeigt
10. Finde deine **Issuer URL** in den Project Settings (meist `https://your-project-slug.eu.hydra.cloud`)
### Option B: Selbst gehostet (komplex)
Siehe [ORY Hydra Dokumentation](https://www.ory.sh/hydra/docs/)
### .env:
```env
OAUTH_ORY_ISSUER=https://your-project-slug.eu.hydra.cloud
OAUTH_ORY_CLIENT_ID=your-client-id
OAUTH_ORY_CLIENT_SECRET=your-client-secret
```
---
## 5. ZITADEL
ZITADEL ist ein Zero-Trust Identity Platform als SaaS.
### Credentials besorgen:
1. Öffne [ZITADEL Console](https://zitadel.cloud/)
2. Registriere dich oder logge dich ein
3. Erstelle eine neue **Organization** (oder verwende die existierende)
4. Gehe zu **Projects** → **+ New Project**
5. Gib einen Namen ein (z.B. "YourPart")
6. Gehe zum Projekt → **Applications** → **+ New Application**
7. Wähle **Type: Web**
8. Gib einen Namen ein
9. Bei **Redirect URIs** füge ein:
```
https://www.your-part.de/auth/oauth/callback
https://www.your-part.de/auth/oauth/user/callback
```
10. Speichern
11. Unter **Client Information** kopiere:
- **Client ID**
- **Client Secret** (falls sichtbar, sonst im "CREDENTIALS" Tab generieren)
12. Finde deine **Issuer URL** in den Organization Settings (meist `https://your-instance.zitadel.cloud`)
### .env:
```env
OAUTH_ZITADEL_ISSUER=https://your-instance.zitadel.cloud
OAUTH_ZITADEL_CLIENT_ID=your-client-id
OAUTH_ZITADEL_CLIENT_SECRET=your-client-secret
```
---
## Komplette .env für alle 5 Provider
```env
# Google
OAUTH_GOOGLE_CLIENT_ID=...
OAUTH_GOOGLE_CLIENT_SECRET=...
# Microsoft
OAUTH_MICROSOFT_CLIENT_ID=...
OAUTH_MICROSOFT_CLIENT_SECRET=...
# Keycloak
OAUTH_KEYCLOAK_ISSUER=...
OAUTH_KEYCLOAK_CLIENT_ID=...
OAUTH_KEYCLOAK_CLIENT_SECRET=...
# ORY
OAUTH_ORY_ISSUER=...
OAUTH_ORY_CLIENT_ID=...
OAUTH_ORY_CLIENT_SECRET=...
# ZITADEL
OAUTH_ZITADEL_ISSUER=...
OAUTH_ZITADEL_CLIENT_ID=...
OAUTH_ZITADEL_CLIENT_SECRET=...
```
---
## Schnell-Checkliste
- [ ] Google: Client ID & Secret
- [ ] Microsoft: Application ID & Client Secret
- [ ] Keycloak: Issuer, Client ID, Secret
- [ ] ORY: Issuer, Client ID, Secret
- [ ] ZITADEL: Issuer, Client ID, Secret
- [ ] Alle Redirect URIs in den Providern konfiguriert
- [ ] .env datei aktualisiert
- [ ] Server neu gestartet (`npm restart`)
---
## Testing
Nach der Konfiguration:
1. Frontend öffnen: http://www.your-part.de
2. Auf "Login" oder Provider-Button klicken
3. Jeder verfügbare Provider sollte als Button angezeigt werden
4. Test: Mit jedem Provider einloggen
5. Test: Existender Nutzer → Einstellungen → Authentifizierung hinzufügen
---
## Troubleshooting
### "Invalid redirect URI"
- Stelle sicher, dass die Redirect URIs **exakt** übereinstimmen (inkl. `https://` vs `http://`)
- Beachte Trailing Slashes
### "Invalid client secret"
- Kopiere das Secret neu (nicht die ID)
- Manche Provider verstecken das Secret nach einmaliger Anzeige
### "Discovery endpoint not found"
- Überprüfe die Issuer URL (mit/ohne Trailing Slash)
- Für Keycloak: URL muss auf `/realms/xxx` enden
- Für ORY: URL darf nicht auf `/` enden
### Port-Konflikt lokal
- Keycloak benutzt `8080` → ändere auf: `docker run -p 8081:8080 ...`
- Stelle sicher, dass 3000 (Frontend) und 5000 (Backend) frei sind
Reference in New Issue View Git Blame Copy Permalink