> ## Documentation Index > Fetch the complete documentation index at: https://supastack.dev/llms.txt > Use this file to discover all available pages before exploring further. > For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt # 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. [Die Web-App in 5 Minuten shippen](https://supastack.dev/de/docs/web/ship-in-5-minutes.md) [Die Datenbank einrichten](https://supastack.dev/de/docs/web/setup-database.md) ## Das Google-Cloud-Projekt erstellen 1. Öffnen Sie [console.cloud.google.com](https://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-secret ``` ## Prü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. [Als Nächstes GitHub-Anmeldung hinzufügen](https://supastack.dev/de/docs/web/github-sign-in.md) [OAuth-Anbieter-Übersicht](https://supastack.dev/de/docs/web/setup-oauth.md) Wenn du die Einrichtung fortsetzen möchtest, lies [GitHub-Anmeldung hinzufügen](https://supastack.dev/de/docs/web/github-sign-in.md). ## Weiter [GitHub-Anmeldung hinzufügen](https://supastack.dev/de/docs/web/github-sign-in.md)