Thêm đăng nhập bằng Google cho mọi website với Supabase

Xác thực Supabase hiện có

Hướng dẫn này thêm Google làm một lựa chọn đăng nhập cho website đã có xác thực Supabase hoạt động — đăng ký, đăng nhập và phiên đăng nhập. Nếu website của bạn chưa có, hãy hoàn thành phần đó trước rồi quay lại đây.

Thêm xác thực người dùng cho mọi website với Supabase

Xây dựng đăng ký, đăng nhập, phiên đăng nhập và các khu vực được bảo vệ với Supabase.

/video/add-user-authentication-supabase

Sao chép Callback URL của Supabase

Mở Supabase

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Sao chép Callback URL (for OAuth). URL này dùng trong Google Cloud, không phải trong mã website của bạn.

Thiết lập Google Auth Platform

Mở Google Cloud Console

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

Your project Google Auth Platform

Thêm thông tin ứng dụng ở Branding — chọn "External" làm Audience Xuất bản ứng dụng ở Audience — hoặc giữ ở trạng thái "Testing" và thêm chính bạn làm người dùng thử nghiệm Xác nhận các scope cơ bản ở Data Access

openid

.../auth/userinfo.email

.../auth/userinfo.profile

Tạo OAuth client

Google Auth Platform Clients Create client

Chọn "Web application" Thêm website của bạn vào Authorized JavaScript origins Dán Callback URL của Supabase vào Authorized redirect URIs Nhấp "Create" Sao chép Client ID và Client Secret — Google chỉ hiển thị secret một lần

URL website của bạn → Authorized JavaScript origins

Callback URL của Supabase → Authorized redirect URIs

Thêm client Google vào Supabase

Quay lại nhà cung cấp Google trong Supabase — chính là tab ở Bước 1.

Your project Authentication Sign In / Providers Google

Bật Google

Dán Client ID từ Google

Dán Client Secret từ Google

Lưu

Giữ bí mật Client Secret

Client Secret chỉ được đặt trong Supabase. Tuyệt đối không để lộ nó trong mã frontend hay trong một biến môi trường công khai.

Thêm nút đăng nhập bằng Google

AI của bạn thêm Google vào phần đăng nhập bạn đã có, mà không xây dựng lại nó.

Thêm "Continue with Google"

Thêm đăng nhập bằng Google vào xác thực Supabase hiện có mà vẫn giữ nguyên luồng đăng nhập hiện tại, rồi báo lại các Redirect URLs bạn cần thêm trong 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>

Thêm các URL quay lại

Chỉ thêm các Redirect URLs mà AI của bạn đã liệt kê ở trên.

Your project Authentication URL Configuration Redirect URLs

Đây không phải Callback URL ở Bước 1 — URL đó chỉ dùng trong Google Cloud.

Đăng nhập bằng Google hoạt động

Mở website của bạn, nhấp "Continue with Google" và chọn một tài khoản Google. Xác nhận bạn quay lại trang web trong trạng thái đã đăng nhập.

Nếu muốn, hãy xác nhận tài khoản tại:

Your project Authentication Users

Đăng nhập lại hoạt động

Đăng xuất, rồi đăng nhập lại bằng Google. Xác nhận Supabase dùng lại tài khoản hiện có của bạn thay vì tạo một tài khoản trùng lặp.

Xác thực hiện có vẫn hoạt động

Xác nhận việc thêm Google không làm thay đổi bất cứ thứ gì vốn đã hoạt động.

Bạn vẫn đăng nhập sau khi tải lại trang

Các trang được bảo vệ vẫn yêu cầu đăng nhập

Đăng nhập bằng email và mật khẩu vẫn hoạt động, nếu ứng dụng của bạn có

Mỗi người dùng vẫn chỉ thấy dữ liệu riêng tư của chính mình

Đăng nhập bằng Google đã hoạt động

Bước cuối cùng xác minh tên và logo ứng dụng để người dùng nhận ra thương hiệu của bạn. Việc thay thế địa chỉ xác thực supabase.co đang hiển thị là chuyện riêng và cần tên miền tùy chỉnh của Supabase.

Khuyến nghị cho production

Đăng nhập bằng Google đã hoạt động. Bước này hiển thị tên và logo ứng dụng đã được xác minh khi người dùng đăng nhập.

Hoàn thiện thương hiệu cho ứng dụng Google của bạn

Mở 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, nếu bạn có

Authorized domain

Developer contact information

Thêm trang chính sách quyền riêng tư và điều khoản cho mọi website xây dựng bằng AI

Chưa có chính sách quyền riêng tư hay trang điều khoản? Hãy tạo chúng trước.

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

Xác minh tên miền và thương hiệu của bạn

Mở Google Search Console

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

Xác minh tên miền của bạn trong Google Search Console, nếu bạn chưa làm Quay lại trang Branding trong Google Auth Platform Nhấp "Verify Branding"

Google có thể tự động phê duyệt hoặc yêu cầu xem xét.

Xuất bản và kiểm thử lại

Khi Google hiển thị "Ready to publish", nhấp "Publish branding" Mở website của bạn trong cửa sổ trình duyệt ẩn danh Nhấp "Continue with Google" Xác nhận tên và logo ứng dụng của bạn xuất hiện

Tùy chọn: Dùng tên miền xác thực tùy chỉnh

Tính năng trả phí của Supabase — không bắt buộc cho đăng nhập bằng Google. Dùng nó để có URL xác thực mang thương hiệu của bạn, hoặc nếu quá trình xác minh của Google cần một tên miền xác thực do bạn kiểm soát.

Xác minh thương hiệu thay đổi tên ứng dụng và logo mà Google hiển thị. Tên miền tùy chỉnh của Supabase thay địa chỉ xác thực mặc định project-ref.supabase.co bằng địa chỉ của riêng bạn, như auth.example.com.

Sau khi kích hoạt, hãy thêm callback URL của nó (https://auth.example.com/auth/v1/callback) vào Authorized redirect URIs của client Google của bạn.

Tên miền tùy chỉnh của Supabase

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