Füge jeder Website mit Supabase einen Google-Login hinzu

Bestehende Supabase-Authentifizierung

Diese Anleitung fügt Google als Anmeldeoption zu einer Website hinzu, auf der die Supabase-Authentifizierung bereits funktioniert — Registrierung, Anmeldung und Sitzungen. Falls deine Website sie noch nicht hat, richte sie zuerst ein und komm dann hierher zurück.

Füge jeder Website mit Supabase eine Benutzer-Authentifizierung hinzu

Richtet Registrierung, Anmeldung, Sitzungen und geschützte Bereiche mit Supabase ein.

/video/add-user-authentication-supabase

Kopiere die Callback URL von Supabase

Öffne Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Kopiere die Callback URL (for OAuth). Sie gehört in Google Cloud, nicht in den Code deiner Website.

Richte Google Auth Platform ein

Öffne Google Cloud Console

https://console.cloud.google.com/auth/branding

Your project Google Auth Platform

Trage deine App-Informationen unter Branding ein — wähle „External“ als Audience Veröffentliche die App unter Audience — oder lass sie auf „Testing“ und füge dich selbst als Testnutzer hinzu Bestätige die grundlegenden Scopes unter Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

Erstelle den OAuth-Client

Google Auth Platform Clients Create client

Wähle „Web application“ Füge deine Website unter Authorized JavaScript origins hinzu Füge die Callback URL von Supabase unter Authorized redirect URIs ein Klicke auf „Create“ Kopiere die Client ID und das Client Secret — Google zeigt das Secret nur einmal an

URL deiner Website → Authorized JavaScript origins

Callback URL von Supabase → Authorized redirect URIs

Füge den Google-Client zu Supabase hinzu

Zurück beim Google-Provider in Supabase — derselbe Tab wie in Schritt 1.

Your project Authentication Sign In / Providers Google

Aktiviere Google

Füge die Client ID von Google ein

Füge das Client Secret von Google ein

Speichere die Einstellungen

Halte das Client Secret geheim

Das Client Secret gehört nur in Supabase. Gib es niemals im Frontend-Code oder in einer öffentlichen Umgebungsvariable preis.

Füge den Button für die Google-Anmeldung hinzu

Deine KI fügt Google zu deiner bestehenden Anmeldung hinzu, ohne sie neu zu bauen.

Füge „Continue with Google“ hinzu

Fügt deiner bestehenden Supabase-Authentifizierung die Google-Anmeldung hinzu, ohne deinen aktuellen Anmeldeablauf zu verändern, und nennt dir dann die Redirect URLs, die du in Supabase brauchst.

Add "Continue with Google" to this project's existing Supabase Authentication. Google is already enabled as a provider in my Supabase project, and the Google Client ID and Client Secret are already saved there. Nothing about Google needs to be configured in code. Before changing anything, inspect the current project: - the existing Supabase client(s) and how they are configured - the sign-in page, and the sign-up page if there is one - any existing auth callback route - how protected pages are guarded - how the session is read, kept in sync, and signed out - whether a profile row is created for new users - whether any signed-in user has private data of their own (for example rows protected by Row Level Security) Preserve this project's existing authentication architecture. Make the smallest focused change that adds Google — do not refactor, rename or restyle unrelated code. WHAT TO DO - Add one "Continue with Google" button to the existing sign-in page, and to the sign-up page if there is one. Match the existing design and components. - Start sign-in with the project's existing Supabase client: supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo } }). - Follow this project's own architecture instead of forcing one: - Browser-only app: make sure the page the user returns to picks up the new session through the existing session handling. - PKCE or server-rendered auth (for example @supabase/ssr or Next.js): return through a callback route that exchanges the code for a session with the existing server-side client. Reuse an existing callback route; add one only if none exists, following the project's routing conventions. - redirectTo is a page on THIS website. Build it at runtime from the current site origin, or from the project's existing site URL setting. Never hard-code localhost or a domain. - Never use the Supabase Callback URL (the one ending in /auth/v1/callback) as redirectTo — that URL belongs only in Google Cloud, not in this project's code. - After sign-in, send the user where email/password sign-in already sends them, and keep any existing "return to the page I came from" behavior. - Show a loading state while sign-in starts, and prevent repeated clicks. - If sign-in fails or is cancelled, show an error in the existing style and keep the page usable. - Returning users: the same Google account must reuse the same Supabase user, never create a duplicate. Make any profile creation safe to run more than once. - If a profile row is created for new users, make sure it works for Google users too — they have no password and no sign-up form fields; Google provides their name and picture in the user metadata. - If any signed-in user has private data of their own, preserve the existing data isolation exactly as it is (Row Level Security, policies, user id ownership, server-side checks) for a Google user too. Do not loosen, bypass or duplicate it. - Do not build custom account linking — Supabase already links a Google sign-in to an existing user with the same verified email. KEEP AS IT IS - the existing authentication UI and architecture - email/password sign-in and sign-up, if the project has them - protected routes and their guards - session handling and sign-out - Row Level Security and database policies - environment variables and the existing Supabase client configuration - unrelated pages and design NEVER - rebuild or replace the existing authentication - create a second Supabase client or a second authentication system - add a Google sign-in library or call Google APIs directly - put the Google Client Secret, a Supabase secret key or a service-role key in frontend code - deploy anything Run the production build and fix any errors you introduced. Finish with exactly this summary: GOOGLE LOGIN ADDED - Files changed: <each file, with what changed> - Sign-in flow: <browser / callback route at path> - Return URL: <the exact redirectTo path this code uses> - Supabase Redirect URLs to allow: <each full URL this code uses, one per line — the live site and local development; if the live domain is unknown, the path to add after it> - Private user data: <preserved / not applicable> - Still to do: <nothing, or a short list>

Füge die Rücksprung-URLs hinzu

Füge nur die Redirect URLs hinzu, die deine KI oben aufgelistet hat.

Your project Authentication URL Configuration Redirect URLs

Es geht hier nicht um die Callback URL aus Schritt 1 — die gehört nur in Google Cloud.

Die Google-Anmeldung funktioniert

Öffne deine Website, klicke auf „Continue with Google“ und wähle ein Google-Konto. Prüfe, dass du angemeldet zur Website zurückkehrst.

Optional kannst du das Konto hier prüfen:

Your project Authentication Users

Die erneute Anmeldung funktioniert

Melde dich ab und dann erneut mit Google an. Prüfe, dass Supabase dein bestehendes Konto wiederverwendet, statt ein doppeltes anzulegen.

Die bestehende Authentifizierung funktioniert weiterhin

Prüfe, dass das Hinzufügen von Google nichts verändert hat, was bereits funktionierte.

Du bleibst nach dem Neuladen der Seite angemeldet

Geschützte Seiten erfordern weiterhin eine Anmeldung

Die Anmeldung mit E-Mail und Passwort funktioniert weiterhin, falls deine App sie hat

Jeder Nutzer sieht weiterhin nur seine eigenen privaten Daten

Der Google-Login funktioniert

Der letzte Schritt verifiziert den Namen und das Logo deiner App, damit Nutzer deine Marke wiedererkennen. Eine sichtbare supabase.co-Auth-Adresse zu ersetzen ist ein separater Schritt und erfordert eine benutzerdefinierte Supabase-Domain.

Empfohlen für die Produktion

Der Google-Login funktioniert bereits. Dieser Schritt zeigt beim Anmelden den verifizierten Namen und das Logo deiner App.

Vervollständige das Branding deiner Google-App

Öffne Google Auth Platform

https://console.cloud.google.com/auth/branding

Google Auth Platform Branding

App name

App logo

Application home page

Application privacy policy link

Application terms of service link, falls vorhanden

Authorized domain

Developer contact information

Füge jeder mit KI gebauten Website Seiten für Datenschutzerklärung und Nutzungsbedingungen hinzu

Noch keine Datenschutzerklärung oder Seite mit Nutzungsbedingungen? Erstelle sie zuerst.

/video/add-privacy-policy-and-terms-pages-to-any-ai-built-website

Verifiziere deine Domain und dein Branding

Öffne Google Search Console

https://search.google.com/search-console

Verifiziere deine Domain in Google Search Console, falls noch nicht geschehen Kehre zur Seite Branding in Google Auth Platform zurück Klicke auf „Verify Branding“

Google kann automatisch genehmigen oder eine Prüfung verlangen.

Veröffentliche und teste erneut

Wenn Google „Ready to publish“ anzeigt, klicke auf „Publish branding“ Öffne deine Website in einem privaten Browserfenster Klicke auf „Continue with Google“ Prüfe, dass der Name und das Logo deiner App erscheinen

Optional: Nutze eine eigene Auth-Domain

Kostenpflichtige Supabase-Funktion — für den Google-Login nicht erforderlich. Nutze sie für eine Auth-URL mit deiner Marke oder falls die Google-Verifizierung eine Auth-Domain verlangt, die du kontrollierst.

Die Markenverifizierung ändert den App-Namen und das Logo, die Google anzeigt. Eine benutzerdefinierte Supabase-Domain ersetzt die Standard-Auth-Adresse project-ref.supabase.co durch deine eigene, zum Beispiel auth.example.com.

Füge nach der Aktivierung ihre callback URL (https://auth.example.com/auth/v1/callback) zu den Authorized redirect URIs deines Google-Clients hinzu.

Benutzerdefinierte Domains in Supabase

https://supabase.com/docs/guides/platform/custom-domains