GitHub-Anmeldung hinzufügen

Schritt-für-Schritt für Einsteiger

Voraussetzungen: Die Web-App läuft lokal und eine migrierte Datenbank steht für echte Konten. Sie brauchen ein GitHub-Konto — dasselbe, dem das Repository gehört, reicht. Kostenlos, etwa 5 Minuten pro Umgebung.

Kurze Begriffe: Eine GitHub OAuth App ist die Registrierung, mit der GitHub Nutzer für Sie anmeldet. Anders als bei den meisten Anbietern erlaubt eine OAuth App genau eine Authorization callback URL — lokal (http://localhost:3000/…) und Produktion (https://yourdomain.com/…) brauchen also jeweils eine eigene App. Eine App wiederzuverwenden und ihren Callback hin und her zu ändern, bricht jedes Mal eine Seite.

1. Erstellen Sie eine lokale OAuth App in den Developer settings Ihres Kontos. 2. Kopieren Sie die Client ID und generieren Sie ein Client Secret. 3. Setzen Sie die drei Umgebungswerte und starten Sie neu. 4. Wiederholen Sie das einmal mit Ihrer echten Domain, bevor Sie live gehen.

• Die Web-App in 5 Minuten shippen
• Die Datenbank einrichten

Die lokale OAuth App erstellen

1. Öffnen Sie github.com und melden Sie sich an. Klicken Sie oben rechts auf Ihr Profilfoto → Settings.

2. Scrollen Sie in der linken Seitenleiste ganz nach unten und öffnen Sie Developer settings → OAuth Apps → New OAuth App.

3. Application name: etwa supastack local — Nutzer sehen diesen Namen auf GitHubs Autorisierungsseite. Homepage URL: http://localhost:3000. Authorization callback URL: http://localhost:3000/api/auth/callback/github. Klicken Sie auf Register application.

4. Kopieren Sie auf der Seite der App die Client ID, klicken Sie auf Generate a new client secret und kopieren Sie das Secret sofort — GitHub zeigt es nur einmal, Sie können aber jederzeit ein neues generieren.

Die Produktions-OAuth-App erstellen

Wiederholen Sie dieselben New-OAuth-App-Schritte mit dem Namen Ihres Produkts, Homepage URL https://yourdomain.com und Authorization callback URL https://yourdomain.com/api/auth/callback/github.

Bewahren Sie die Zugangsdaten jeder App in ihrer eigenen Umgebung auf: Das Paar der lokalen App liegt in apps/web/.env.local, das Paar der Produktions-App im Secret Store Ihres Hosts. Das lokale Secret darf nie in die Produktionskonfiguration gelangen und umgekehrt.

Die Werte in die App eintragen

Setzen Sie die drei Zeilen unten in apps/web/.env.local mit den Zugangsdaten der lokalen App. AUTH_GITHUB_ENABLED=true schaltet den Button ein; das Paar identifiziert die OAuth App.

Das Client-Secret bleibt serverseitig — nie in NEXT_PUBLIC_/EXPO_PUBLIC_-Variablen und nie committet. Starten Sie den Dev-Server nach dem Bearbeiten neu.

Verwenden Sie keine GITHUB_APP_*-Werte, die Sie eventuell anderswo sehen — sie gehören zu einer separaten GitHub-App-Integration, nicht zur Nutzer-Anmeldung. Das docs/github-auth-setup.md des Kits beschreibt den ganzen Ablauf Ende zu Ende, falls Sie eine zweite Referenz wünschen.

# apps/web/.env.local — from the LOCAL OAuth App
AUTH_GITHUB_ENABLED=true
GITHUB_CLIENT_ID=your-oauth-app-client-id
GITHUB_CLIENT_SECRET=your-oauth-app-secret

Prüfen und Fehler beheben

Öffnen Sie http://localhost:3000/auth und klicken Sie auf den GitHub-Button. Autorisieren Sie die App auf github.com und bestätigen Sie, dass Sie angemeldet zurückkommen.

Bis AUTH_GITHUB_ENABLED=true gesetzt ist, bleibt die GitHub-Option auf /auth sichtbar, aber deaktiviert — prüfen Sie die Namen in der Env-Datei und starten Sie dann neu. Das Flag ohne GITHUB_CLIENT_ID und GITHUB_CLIENT_SECRET zu setzen lässt den Start fehlschlagen und nennt die fehlende Variable.

Ein Callback-Mismatch ist der übliche Fehler: Die Authorization callback URL der App muss exakt {APP_URL}/api/auth/callback/github entsprechen — Protokoll, Host, Port und Pfad. Ein redirect_uri-Fehler nach dem Deployment heißt meist: Die Anfrage traf die Zugangsdaten der lokalen App, während APP_URL Produktion sagt — oder umgekehrt.

Starten Sie den Dev-Server nach jeder Env-Änderung neu; Werte werden nur beim Start gelesen.

• Als Nächstes die Datenbank einrichten
• OAuth-Anbieter-Übersicht