Supabase로 어떤 웹사이트에든 Google 로그인 추가하기

기존 Supabase 인증

이 가이드는 Supabase 인증이 이미 작동하는 웹사이트에 Google을 로그인 방법 중 하나로 추가합니다 — 회원가입, 로그인, 세션. 아직 없다면 먼저 그것부터 완료한 뒤 여기로 돌아오세요.

Supabase로 어떤 웹사이트에든 사용자 인증 추가하기

Supabase로 회원가입, 로그인, 세션, 보호된 영역을 구축합니다.

/video/add-user-authentication-supabase

Supabase Callback URL 복사하기

Supabase 열기

https://supabase.com/dashboard

Your project Authentication Sign In / Providers Google

Callback URL (for OAuth)을 복사하세요. 이 URL은 웹사이트 코드가 아니라 Google Cloud에 입력합니다.

Google Auth Platform 설정하기

Google Cloud Console 열기

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

Your project Google Auth Platform

Branding에서 앱 정보를 추가하세요 — Audience로 「External」을 선택합니다 Audience에서 앱을 게시하세요 — 또는 「Testing」 상태로 두고 자신을 테스트 사용자로 추가하세요 Data Access에서 기본 범위를 확인하세요

openid

.../auth/userinfo.email

.../auth/userinfo.profile

OAuth 클라이언트 만들기

Google Auth Platform Clients Create client

「Web application」을 선택하세요 Authorized JavaScript origins에 웹사이트를 추가하세요 Authorized redirect URIs에 Supabase Callback URL을 붙여 넣으세요 「Create」를 클릭하세요 Client ID와 Client Secret을 복사하세요 — Google은 시크릿을 한 번만 보여 줍니다

사이트 URL → Authorized JavaScript origins

Supabase의 Callback URL → Authorized redirect URIs

Google 클라이언트를 Supabase에 추가하기

Supabase의 Google 제공자 화면으로 돌아가세요 — 1단계와 같은 탭입니다.

Your project Authentication Sign In / Providers Google

Google을 켜세요

Google의 Client ID를 붙여 넣으세요

Google의 Client Secret을 붙여 넣으세요

저장하세요

Client Secret을 비공개로 유지하세요

Client Secret은 Supabase에만 두어야 합니다. 프런트엔드 코드나 공개 환경 변수에 절대 노출하지 마세요.

Google 로그인 버튼 추가하기

AI가 이미 있는 로그인 기능을 다시 만들지 않고 Google을 추가합니다.

「Continue with Google」 추가하기

현재 로그인 흐름은 그대로 유지하면서 기존 Supabase 인증에 Google 로그인을 추가한 다음, Supabase에 필요한 Redirect URLs를 알려 줍니다.

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>

돌아올 URL 추가하기

위에서 AI가 알려 준 Redirect URLs만 추가하세요.

Your project Authentication URL Configuration Redirect URLs

이것은 1단계의 Callback URL이 아닙니다 — 그 URL은 Google Cloud에만 입력합니다.

Google 로그인이 작동함

웹사이트를 열고 「Continue with Google」을 클릭한 뒤 Google 계정을 선택하세요. 로그인된 상태로 사이트에 돌아오는지 확인하세요.

원한다면 여기에서 계정을 확인하세요:

Your project Authentication Users

다시 로그인이 작동함

로그아웃한 다음 Google로 다시 로그인하세요. Supabase가 중복 계정을 만들지 않고 기존 계정을 다시 사용하는지 확인하세요.

기존 인증이 계속 작동함

Google을 추가해도 이미 작동하던 것이 아무것도 바뀌지 않았는지 확인하세요.

페이지를 새로고침한 뒤에도 로그인 상태가 유지됩니다

보호된 페이지는 여전히 로그인이 필요합니다

앱에 이메일·비밀번호 로그인이 있다면 여전히 작동합니다

각 사용자는 여전히 자신의 비공개 데이터만 봅니다

Google 로그인이 작동합니다

마지막 단계에서는 사용자가 브랜드를 알아볼 수 있도록 앱 이름과 로고를 인증합니다. 화면에 보이는 supabase.co 인증 주소를 바꾸는 것은 별개의 작업이며 Supabase 커스텀 도메인이 필요합니다.

프로덕션에 권장

Google 로그인은 이미 작동합니다. 이 단계를 마치면 사용자가 로그인할 때 인증된 앱 이름과 로고가 표시됩니다.

Google 앱 브랜딩 완료하기

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(있는 경우)

Authorized domain

Developer contact information

AI가 만든 어떤 웹사이트에든 개인정보처리방침 및 이용약관 페이지 추가하기

아직 개인정보처리방침이나 이용약관 페이지가 없나요? 먼저 만드세요.

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

도메인과 브랜딩 인증하기

Google Search Console 열기

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

아직 하지 않았다면 Google Search Console에서 도메인을 인증하세요 Google Auth Platform의 Branding 페이지로 돌아가세요 「Verify Branding」을 클릭하세요

Google이 자동으로 승인하거나 검토를 요청할 수 있습니다.

게시하고 다시 테스트하기

Google에 「Ready to publish」가 표시되면 「Publish branding」을 클릭하세요 브라우저의 시크릿 창에서 웹사이트를 여세요 「Continue with Google」을 클릭하세요 앱 이름과 로고가 표시되는지 확인하세요

선택: 커스텀 인증 도메인 사용하기

Supabase 유료 기능 — Google 로그인에는 필요하지 않습니다. 브랜드가 담긴 인증 URL이 필요하거나, Google 인증에서 직접 관리하는 인증 도메인을 요구할 때 사용하세요.

브랜드 인증은 Google이 보여 주는 앱 이름과 로고를 바꿉니다. Supabase 커스텀 도메인은 기본 인증 주소인 project-ref.supabase.co를 auth.example.com 같은 나만의 주소로 바꿉니다.

활성화한 뒤에는 해당 callback URL(https://auth.example.com/auth/v1/callback)을 Google 클라이언트의 Authorized redirect URIs에 추가하세요.

Supabase 커스텀 도메인

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