For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /de/docs/web/google-sign-in.md (or send Accept: text/markdown).
Google-Anmeldung hinzufügen
Erstellen Sie einen kostenlosen Google-Cloud-OAuth-Client und binden Sie „Weiter mit Google“ in die App ein.
Schritt-für-Schritt für Einsteiger
Voraussetzungen: Die Web-App läuft lokal (In 5 Minuten shippen) und eine migrierte Datenbank steht für echte Konten (Datenbank einrichten). Sie brauchen ein gewöhnliches Google-Konto; alles hier ist kostenlos und dauert etwa 10 Minuten.
Kurze Begriffe: OAuth ist der Standard, bei dem Google den Nutzer auf Googles Seite anmeldet und Ihrer App einen Nachweis übergibt. Ein Google-Cloud-Projekt ist ein Container in Googles Konsole, der die Zugangsdaten Ihrer App hält. Der OAuth-Zustimmungsbildschirm ist die Seite, die Google Nutzern zeigt, bevor sie zurückgeschickt werden. Eine Client-ID identifiziert Ihre App bei Google; das Client-Secret ist ihr Passwort und bleibt auf dem Server.
1. Erstellen Sie ein Google-Cloud-Projekt. 2. Konfigurieren Sie den Zustimmungsbildschirm. 3. Erstellen Sie einen Web-OAuth-Client und kopieren Sie dessen ID und Secret. 4. Fügen Sie drei Werte in apps/web/.env.local ein und starten Sie den Dev-Server neu.
Ein Projekt reicht für das ganze Produkt: Dasselbe Google-Cloud-Projekt hostet später Ihr Cloud-Run-Deployment, und die mobile Anmeldung läuft über dasselbe Web-Backend — Sie erstellen keinen separaten Client pro Plattform oder Funktion.
Das Google-Cloud-Projekt erstellen
1. Öffnen Sie console.cloud.google.com und melden Sie sich mit Ihrem Google-Konto an.
2. Klicken Sie in der oberen Leiste auf das Projekt-Dropdown (neben dem Google-Cloud-Logo) und wählen Sie New Project.
3. Geben Sie ihm einen Namen — Ihr Produktname reicht — und klicken Sie auf Create. Für Anmeldedaten sind weder Organisation, Karte noch Rechnungskonto nötig.
Erwartet: Die Konsole lädt in das neue Projekt und sein Name erscheint in der oberen Leiste. Nutzen Sie dieses Projekt wieder, wenn Sie die Deployment-Anleitung erreichen, statt ein weiteres zu erstellen.
Den OAuth-Zustimmungsbildschirm konfigurieren
1. Öffnen Sie in der linken Navigation APIs & Services → OAuth consent screen und klicken Sie auf Get started.
2. Tragen Sie den App-Namen ein, den Nutzer sehen (Ihr Produktname), wählen Sie eine User-Support-E-Mail, stellen Sie die Audience auf External, füllen Sie die Developer-Kontakt-E-Mail aus und klicken Sie sich durch bis Create.
3. Mehr braucht es auf diesem Bildschirm nicht: Die App fragt nur die Standard-Scopes openid, email und profile ab, die keine zusätzlichen Scopes oder Verifizierung erfordern.
Der Publishing-Status bleibt Testing, solange Sie entwickeln. In dem Modus dürfen sich nur gelistete Konten anmelden — tragen Sie Ihre eigene Gmail-Adresse unter Audience → Test users ein, sonst blockiert Google sogar Sie. Wenn das Produkt live ist, klicken Sie auf Publish app; weil keine sensiblen Scopes angefragt werden, startet das Veröffentlichen keine Google-Verifizierung.
Den OAuth-Client erstellen
1. Öffnen Sie APIs & Services → Credentials → + Create Credentials → OAuth client ID.
2. Stellen Sie den Application type auf Web application und nennen Sie ihn etwa supastack local.
3. Fügen Sie unter Authorized JavaScript origins http://localhost:3000 hinzu. Fügen Sie unter Authorized redirect URIs http://localhost:3000/api/auth/callback/google hinzu — dieser Callback-Pfad gehört zu Better Auth, der Standard-Auth-Engine des Kits: {APP_URL}/api/auth/callback/google.
4. Klicken Sie auf Create und kopieren Sie Client ID und Client Secret aus dem Dialog. Sie können sie später auf der Seite des Clients wieder öffnen, aber sie jetzt zu kopieren spart einen Schritt.
Für die Produktion erstellen Sie einen zweiten Web-Client (empfohlen) oder erweitern Sie diesen: JavaScript-Origin https://yourdomain.com und Redirect-URI https://yourdomain.com/api/auth/callback/google. Getrennte Clients pro Umgebung heißen: Ein geleaktes lokales Secret erreicht die Produktion nicht.
Die Werte in die App eintragen
Öffnen Sie apps/web/.env.local — Next.js liest diese Datei, nicht die .env im Root — und setzen Sie die drei Zeilen unten. AUTH_GOOGLE_ENABLED=true schaltet den Button ein; das Client-Paar identifiziert Ihren Google-Cloud-Client.
Das Client-Secret bleibt serverseitig: Es darf nie in einer NEXT_PUBLIC_- oder EXPO_PUBLIC_-Variablen stehen und nie zu Git committet werden. In Produktion setzen Sie dieselben drei Namen im Secret Store Ihres Hosts statt in einer Env-Datei.
Starten Sie den Dev-Server nach dem Bearbeiten neu — Umgebungsänderungen werden nur beim Start gelesen.
# apps/web/.env.local
AUTH_GOOGLE_ENABLED=true
GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secretPrüfen und Fehler beheben
Öffnen Sie http://localhost:3000/auth, klicken Sie auf den Google-Button, durchlaufen Sie Googles Zustimmungsbildschirm und bestätigen Sie, dass die App angemeldet zurückkommt.
redirect_uri_mismatch heißt: Die bei Google registrierte Redirect-URI stimmt nicht exakt — prüfen Sie Protokoll (http vs https), Port und Pfad: Er muss auf /api/auth/callback/google enden, nicht auf /callback/google/ oder eine Variante mit Slash am Ende.
Access blocked / has not completed the Google verification process heißt: Der Zustimmungsbildschirm ist noch auf Testing und das sich anmeldende Konto steht nicht unter Test users — tragen Sie es im Abschnitt Audience ein.
Fehlt der Google-Button oder schlägt die Anmeldung nach dem Bearbeiten der .env.local weiter fehl, starten Sie den Dev-Server neu. Scheitert der Start und nennt eine Variable, ist das Flag ohne das vollständige Client-Paar aktiviert.