Supabase ile herhangi bir web sitesine Google ile giriş ekle

Mevcut Supabase kimlik doğrulaması

Bu rehber, Supabase kimlik doğrulamasının zaten çalıştığı bir web sitesine Google'ı bir giriş seçeneği olarak ekler — kayıt, giriş ve oturumlar. Sitende bu henüz yoksa önce onu tamamla, sonra buraya geri dön.

Supabase ile herhangi bir web sitesine kullanıcı kimlik doğrulaması ekle

Supabase ile kayıt, giriş, oturumlar ve korumalı alanlar oluşturur.

/video/add-user-authentication-supabase

Supabase Callback URL'sini kopyala

Supabase'i açın

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Callback URL (for OAuth) değerini kopyala. Bu URL web sitenin koduna değil, Google Cloud'a girilir.

Google Auth Platform'u ayarla

Google Cloud Console'u açın

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

Your project Google Auth Platform

Branding sayfasında uygulama bilgilerini ekle — Audience olarak "External" seç Audience sayfasında uygulamayı yayınla — ya da "Testing" durumunda bırakıp kendini test kullanıcısı olarak ekle Data Access sayfasında temel kapsamları onayla

openid

.../auth/userinfo.email

.../auth/userinfo.profile

OAuth istemcisini oluştur

Google Auth Platform Clients Create client

"Web application" seçeneğini seç Web siteni Authorized JavaScript origins alanına ekle Supabase Callback URL'sini Authorized redirect URIs alanına yapıştır "Create" düğmesine tıkla Client ID ve Client Secret'ı kopyala — Google secret'ı yalnızca bir kez gösterir

Sitenin URL'si → Authorized JavaScript origins

Supabase Callback URL'si → Authorized redirect URIs

Google istemcisini Supabase'e ekle

Supabase'in Google sağlayıcısına geri dön — 1. Adım'daki aynı sekme.

Your project Authentication Sign In / Providers Google

Google'ı etkinleştir

Google'dan aldığın Client ID'yi yapıştır

Google'dan aldığın Client Secret'ı yapıştır

Kaydet

Client Secret'ı gizli tut

Client Secret yalnızca Supabase'de durmalı. Onu asla frontend kodunda ya da herkese açık bir ortam değişkeninde açığa çıkarma.

Google ile giriş düğmesini ekle

Yapay zekân, mevcut girişini yeniden oluşturmadan ona Google'ı ekler.

"Continue with Google" ekle

Mevcut giriş akışını bozmadan Supabase kimlik doğrulamana Google ile girişi ekler, ardından Supabase'de ihtiyacın olan Redirect URLs değerlerini bildirir.

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>

Dönüş URL'lerini ekle

Yalnızca yapay zekânın yukarıda listelediği Redirect URLs değerlerini ekle.

Your project Authentication URL Configuration Redirect URLs

Bunlar 1. Adım'daki Callback URL değildir — o URL yalnızca Google Cloud'a girilir.

Google ile giriş çalışıyor

Web siteni aç, "Continue with Google" düğmesine tıkla ve bir Google hesabı seç. Siteye giriş yapmış olarak döndüğünü doğrula.

İstersen hesabı şurada da doğrulayabilirsin:

Your project Authentication Users

Yeniden giriş çalışıyor

Çıkış yap, ardından Google ile yeniden giriş yap. Supabase'in yeni bir kopya oluşturmak yerine mevcut hesabını yeniden kullandığını doğrula.

Mevcut kimlik doğrulama hâlâ çalışıyor

Google'ı eklemenin zaten çalışan hiçbir şeyi değiştirmediğini doğrula.

Sayfayı yeniledikten sonra oturumun açık kalıyor

Korumalı sayfalar hâlâ giriş gerektiriyor

Uygulamanda varsa, e-posta ve şifreyle giriş hâlâ çalışıyor

Her kullanıcı hâlâ yalnızca kendi özel verilerini görüyor

Google ile giriş artık çalışıyor

Son adım, kullanıcıların markanı tanıması için uygulamanın adını ve logosunu doğrular. Görünen bir supabase.co kimlik doğrulama adresini değiştirmek ayrı bir iştir ve bir Supabase özel alan adı gerektirir.

Canlı ortam için önerilir

Google ile giriş zaten çalışıyor. Bu adım, kullanıcılar giriş yaparken uygulamanın doğrulanmış adını ve logosunu gösterir.

Google uygulamanın marka bilgilerini tamamla

Google Auth Platform'u açın

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, varsa

Authorized domain

Developer contact information

Yapay zekâyla oluşturulmuş herhangi bir web sitesine gizlilik politikası ve kullanım koşulları sayfaları ekle

Henüz gizlilik politikan veya koşullar sayfan yok mu? Önce onları oluştur.

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

Alan adını ve markanı doğrula

Google Search Console'u açın

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

Henüz yapmadıysan alan adını Google Search Console'da doğrula Google Auth Platform'daki Branding sayfasına dön "Verify Branding" düğmesine tıkla

Google otomatik olarak onaylayabilir veya inceleme isteyebilir.

Yayınla ve yeniden test et

Google "Ready to publish" gösterdiğinde "Publish branding" düğmesine tıkla Web siteni gizli bir tarayıcı penceresinde aç "Continue with Google" düğmesine tıkla Uygulamanın adının ve logosunun göründüğünü doğrula

İsteğe bağlı: Özel bir kimlik doğrulama alan adı kullan

Ücretli bir Supabase özelliği — Google ile giriş için gerekli değil. Markalı bir kimlik doğrulama URL'si için ya da Google doğrulaması senin kontrolünde olan bir kimlik doğrulama alan adı isterse kullan.

Marka doğrulaması, Google'ın gösterdiği uygulama adını ve logoyu değiştirir. Supabase özel alan adı ise varsayılan project-ref.supabase.co kimlik doğrulama adresini auth.example.com gibi kendi adresinle değiştirir.

Etkinleştirdikten sonra callback URL'sini (https://auth.example.com/auth/v1/callback) Google istemcinin Authorized redirect URIs alanına ekle.

Supabase özel alan adları

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