Tambahkan login dengan Google ke website apa pun dengan Supabase

Autentikasi Supabase yang sudah ada

Panduan ini menambahkan Google sebagai opsi login ke website yang autentikasi Supabase-nya sudah berfungsi — pendaftaran, login, dan sesi. Kalau website-mu belum punya, selesaikan itu dulu, lalu kembali ke sini.

Tambahkan autentikasi pengguna ke website apa pun dengan Supabase

Membangun pendaftaran, login, sesi, dan area terlindungi dengan Supabase.

/video/add-user-authentication-supabase

Salin Callback URL Supabase

Buka Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Salin Callback URL (for OAuth). URL ini dimasukkan ke Google Cloud, bukan ke kode website-mu.

Siapkan Google Auth Platform

Buka Google Cloud Console

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

Your project Google Auth Platform

Tambahkan informasi aplikasimu di Branding — pilih "External" sebagai Audience Publikasikan aplikasi di Audience — atau biarkan dalam status "Testing" dan tambahkan dirimu sebagai pengguna uji Konfirmasi scope dasar di Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

Buat klien OAuth

Google Auth Platform Clients Create client

Pilih "Web application" Tambahkan website-mu di Authorized JavaScript origins Tempel Callback URL Supabase di Authorized redirect URIs Klik "Create" Salin Client ID dan Client Secret — Google hanya menampilkan secret sekali

URL website-mu → Authorized JavaScript origins

Callback URL Supabase → Authorized redirect URIs

Tambahkan klien Google ke Supabase

Kembali ke provider Google di Supabase — tab yang sama dari Langkah 1.

Your project Authentication Sign In / Providers Google

Aktifkan Google

Tempel Client ID dari Google

Tempel Client Secret dari Google

Simpan

Jaga kerahasiaan Client Secret

Client Secret hanya boleh ada di Supabase. Jangan pernah mengeksposnya di kode frontend atau di environment variable publik.

Tambahkan tombol login dengan Google

AI-mu menambahkan Google ke login yang sudah kamu punya, tanpa membangunnya ulang.

Tambahkan "Continue with Google"

Menambahkan login dengan Google ke autentikasi Supabase-mu yang sudah ada tanpa mengubah alur login saat ini, lalu melaporkan Redirect URLs yang kamu perlukan di Supabase.

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>

Tambahkan URL kembali

Tambahkan hanya Redirect URLs yang dicantumkan AI-mu di atas.

Your project Authentication URL Configuration Redirect URLs

Ini bukan Callback URL dari Langkah 1 — URL itu hanya dimasukkan ke Google Cloud.

Login dengan Google berfungsi

Buka website-mu, klik "Continue with Google", lalu pilih akun Google. Pastikan kamu kembali ke situs dalam keadaan sudah login.

Jika mau, cek akunnya di:

Your project Authentication Users

Login ulang berfungsi

Keluar, lalu login lagi dengan Google. Pastikan Supabase memakai ulang akunmu yang sudah ada, bukan membuat akun duplikat.

Autentikasi yang sudah ada tetap berfungsi

Pastikan penambahan Google tidak mengubah apa pun yang sebelumnya sudah berfungsi.

Kamu tetap login setelah memuat ulang halaman

Halaman terlindungi tetap mengharuskan login

Login dengan email dan kata sandi tetap berfungsi, jika aplikasimu memilikinya

Setiap pengguna tetap hanya melihat data pribadinya sendiri

Login dengan Google sudah berfungsi

Langkah terakhir memverifikasi nama dan logo aplikasimu agar pengguna mengenali brand-mu. Mengganti alamat autentikasi supabase.co yang terlihat adalah hal terpisah dan memerlukan domain kustom Supabase.

Direkomendasikan untuk produksi

Login dengan Google sudah berfungsi. Langkah ini menampilkan nama dan logo aplikasimu yang sudah diverifikasi saat pengguna login.

Lengkapi branding aplikasi Google-mu

Buka 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, jika kamu punya

Authorized domain

Developer contact information

Tambahkan halaman kebijakan privasi & ketentuan layanan ke website buatan AI apa pun

Belum punya kebijakan privasi atau halaman ketentuan? Buat dulu.

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

Verifikasi domain dan branding-mu

Buka Google Search Console

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

Verifikasi domainmu di Google Search Console, jika belum Kembali ke halaman Branding di Google Auth Platform Klik "Verify Branding"

Google bisa menyetujui secara otomatis atau meminta peninjauan.

Publikasikan dan uji ulang

Saat Google menampilkan "Ready to publish", klik "Publish branding" Buka website-mu di jendela penyamaran browser Klik "Continue with Google" Pastikan nama dan logo aplikasimu muncul

Opsional: Gunakan domain autentikasi kustom

Fitur berbayar Supabase — tidak diperlukan untuk login dengan Google. Gunakan untuk URL autentikasi dengan brand-mu, atau jika verifikasi Google memerlukan domain autentikasi yang kamu kendalikan.

Verifikasi brand mengubah nama aplikasi dan logo yang ditampilkan Google. Domain kustom Supabase mengganti alamat autentikasi default project-ref.supabase.co dengan alamatmu sendiri, seperti auth.example.com.

Setelah mengaktifkannya, tambahkan callback URL-nya (https://auth.example.com/auth/v1/callback) ke Authorized redirect URIs klien Google-mu.

Domain kustom Supabase

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