Self-hosted Supabase Google 로그인 설정 (1/3) - 개념과 Google Cloud 설정
시리즈 목차
Self-hosted Supabase Google 로그인 설정 (1/3) - 개념과 Google Cloud 설정 (현재 글)
Self-hosted Supabase Google 로그인 설정 (2/3) - 서버 설정
Self-hosted Supabase Google 로그인 설정 (3/3) - Web 연동과 테스트관련 문서
Self-hosted Supabase API 도메인 연결
Google 소셜 로그인 문제 해결 및 참고자료
Google 소셜 로그인은 설정 화면과 URL이 많아서 처음 접하면 복잡해 보입니다.
하지만 각 주소가 어느 시스템에 속하고, 누가 사용하는지를 구분하면 흐름이
명확해집니다.
이 시리즈에서는 Docker 기반 Self-hosted Supabase와 SvelteKit 웹사이트를 예로 들어
Google OAuth 로그인을 처음부터 설정합니다.
**1편(현재 글)**에서는 Web, API, Server의 개념 차이와 URL 구분법, 그리고 Google Cloud Console 설정을 다룹니다.
예시 환경:
- Web 애플리케이션:
https://example.com - Supabase 외부 API:
https://sb.example.com - Supabase 설치 서버 경로:
/root/supabase/docker - API Gateway: Kong (
localhost:8000) - 인증 서비스: Supabase Auth(GoTrue) 컨테이너
- 외부 HTTPS 진입점: Nginx
이 문서의 example.com은 설명을 위해 사용하는 예제 도메인입니다. 실제 설정할
때는 자신이 소유한 도메인으로 모두 바꿔야 합니다.
sb.example.com의 sb는 Supabase의 약자로 사용한 하위 도메인 이름입니다.
Supabase가 반드시 sb라는 이름을 요구하는 것은 아닙니다. supabase.example.com,api.example.com처럼 원하는 하위 도메인을 사용할 수 있지만, 선택한 주소를 DNS,
Nginx, Google Cloud, Supabase .env에 모두 동일하게 적용해야 합니다.
Google Client Secret, Supabase
SERVICE_ROLE_KEY, 데이터베이스 비밀번호는
공개 게시물이나 Git 저장소에 절대 포함하지 마세요.
전체 설정 흐름 미리보기
Self-hosted Supabase에서 Google 로그인을 구성하는 전체 과정은 크게 다음과 같습니다.
사전 준비 (인프라 문서 참조)
- Supabase Docker 설치와 외부 도메인 연결
- DNS, Nginx, HTTPS 인증서 설정
- 브라우저에서
https://sb.example.com정상 접속 확인
1편 (현재 글): 개념과 Google Cloud 설정
- Web, API, Server, Browser 개념 이해
- 세 가지 URL 구분법 익히기
- Google OAuth 클라이언트 생성
2편: Self-hosted Supabase 서버 설정
- Backend 서버
.env설정 - Docker Compose에서 Auth 컨테이너로 환경 변수 전달
- Auth 컨테이너 재생성
3편: Web 연동과 로그인 테스트
- Frontend에서 Supabase Client 설정
signInWithOAuth()호출- PKCE 세션 교환 및 테스트
중요: 브라우저에서
https://sb.example.com에 정상 접속할 수 없다면 Google 로그인을
설정하기 전에 DNS, HTTPS 또는 Nginx 연결을 먼저 해결해야 합니다. 인프라 설정은
Self-hosted Supabase API 도메인 연결 문서를 참조하세요.
1. 먼저 Web, API, Server의 차이부터 이해하기
이 글에서 사용하는 Web, API, Server는 서로 같은 의미가 아닙니다.
1.1 Web 애플리케이션
https://example.com
사용자가 브라우저로 방문하는 실제 웹사이트입니다.
Web 애플리케이션이 담당하는 일:
- 로그인 버튼 표시
- Supabase에 Google 로그인 시작 요청
- 로그인 완료 후
/auth/callback에서 결과 처리 - 로그인 세션을 이용해 화면과 기능 제공
Google Cloud에서 OAuth 클라이언트 유형을 선택할 때 이 서비스는
**웹 애플리케이션(Web application)**에 해당합니다.
1.2 Supabase API
https://sb.example.com
웹사이트가 인증, 데이터베이스, 스토리지 기능을 요청하는 외부 API 주소입니다.
브라우저는 이 주소를 통해 Supabase에 접근합니다.
Google 로그인과 관련된 대표 API 경로:
https://sb.example.com/auth/v1/authorize
https://sb.example.com/auth/v1/callback
https://sb.example.com/auth/v1/token
이 주소는 Google API 주소가 아닙니다. Self-hosted Supabase의 API 주소이며,
Nginx와 Kong을 거쳐 Auth 컨테이너로 연결됩니다.
1.3 Server
Server는 https://... 주소 자체가 아니라 서비스를 실행하는 컴퓨터와
그 안의 프로그램을 뜻합니다.
예시 서버 내부 구성:
인터넷
↓
Nginx :443
↓
Kong :8000
↓
Supabase Auth(GoTrue) 컨테이너
Server가 담당하는 일:
- HTTPS 연결 처리
- API 요청을 올바른 컨테이너로 전달
- Google Client Secret 보관
- Google 인증 코드를 Supabase 세션으로 교환
1.4 Google OAuth 서버
https://accounts.google.com
Google 계정 선택, 로그인, 사용자 동의를 처리하는 Google 측 시스템입니다.
사용자의 Google 비밀번호는 Web 애플리케이션이나 Supabase 서버에 전달되지
않습니다.
1.5 Browser
브라우저는 각 시스템 사이를 이동하는 전달자입니다.
- Web에서 로그인 버튼을 누름
- Supabase API로 이동
- Google 로그인 화면으로 이동
- Google에서 Supabase 콜백으로 이동
- 마지막으로 Web 애플리케이션으로 돌아옴
1.6 Client(Frontend)와 Server(Backend)의 물리적 구분
이 문서에는 .env라는 이름의 파일이 여러 번 등장할 수 있습니다. 파일 이름은
같아도 위치와 사용 주체가 완전히 다릅니다.
[Client / Frontend 프로젝트]
소스 코드, 로그인 버튼, 브라우저용 Supabase Client
예: /var/www/example.com/app/.env
│
│ HTTPS 요청
▼
[Server / Backend 서버]
Nginx + Supabase Docker + Auth + DB
Supabase 설정: /root/supabase/docker/.env
Client(Frontend)
사용자의 브라우저에서 실행되는 Web 애플리케이션입니다.
Frontend .env에 넣을 수 있는 값:
PUBLIC_SUPABASE_URL=https://sb.example.com
PUBLIC_SUPABASE_ANON_KEY=YOUR_PUBLIC_ANON_KEY
- SvelteKit은 일반적으로
PUBLIC_접두사를 사용합니다. - Vite는 일반적으로
VITE_접두사를 사용합니다. - Next.js는 일반적으로
NEXT_PUBLIC_접두사를 사용합니다. - 공개 접두사가 붙은 값은 최종 JavaScript에 포함되어 브라우저에서 볼 수
있다고 가정해야 합니다.
Frontend에 넣으면 안 되는 값:
GOOGLE_SECRET
SERVICE_ROLE_KEY
POSTGRES_PASSWORD
Server(Backend)
Self-hosted Supabase Docker가 실행되는 실제 서버입니다. Google Client Secret을
보관하고 Auth 컨테이너가 Google과 통신합니다.
이 문서에서 다음 경로를 표시하면 모두 Backend 서버용 설정입니다.
/root/supabase/docker/.env
/root/supabase/docker/docker-compose.yml
/etc/nginx/sites-available/sb.example.com
이 파일들은 브라우저로 전달되지 않아야 하며 서버 관리자만 접근해야 합니다.
같은 이름의 값도 용도가 다름
Backend SUPABASE_PUBLIC_URL
= Supabase Docker 서비스가 자신의 외부 주소를 알기 위한 서버 설정
Frontend PUBLIC_SUPABASE_URL
= 브라우저용 Supabase Client가 API를 호출하기 위한 공개 주소
두 값에 같은 URL(https://sb.example.com)이 들어갈 수 있지만 서로 다른 파일에
존재하며 읽는 프로그램도 다릅니다.
2. 반드시 구분해야 하는 URL 세 가지
설정 오류의 대부분은 아래 세 주소를 혼동해서 발생합니다.
2.1 Supabase 외부 API 주소
https://sb.example.com
브라우저와 Google이 외부에서 접근할 수 있는 Supabase API 주소입니다.
사용 위치:
SUPABASE_PUBLIC_URL=https://sb.example.com
API_EXTERNAL_URL=https://sb.example.com
2.2 Google이 돌아올 Supabase 콜백 주소
https://sb.example.com/auth/v1/callback
Google 인증 완료 후 Google이 Supabase Auth로 결과를 전달하는 주소입니다.
Google Cloud Console의 승인된 리디렉션 URI에 등록합니다.
생성 규칙:
${API_EXTERNAL_URL}/auth/v1/callback
여기에 Web 애플리케이션 주소를 등록하면 안 됩니다.
# 잘못된 예
https://example.com
https://example.com/auth/callback
https://sb.example.com
Google은 프로토콜, 도메인, 하위 도메인, 포트, 경로를 정확히 비교합니다.
와일드카드(*)를 사용할 수 없습니다.
2.3 로그인 완료 후 Web 복귀 주소
https://example.com/auth/callback
Supabase 인증이 끝난 사용자가 최종적으로 돌아올 Web 애플리케이션 주소입니다.
사용 위치:
- Web 코드의
redirectTo - Supabase의
ADDITIONAL_REDIRECT_URLS
핵심 차이:
Google → Supabase: https://sb.example.com/auth/v1/callback
Supabase → Web: https://example.com/auth/callback
두 주소의 이름에 모두 callback이 들어가지만 역할은 완전히 다릅니다.
3. 전체 로그인 흐름
Google 로그인은 다음 순서로 진행됩니다.
[1] Web
https://example.com
│ 사용자가 Google 로그인 클릭
▼
[2] Supabase API
https://sb.example.com/auth/v1/authorize
│ Google 인증 요청 생성
▼
[3] Google OAuth 서버
https://accounts.google.com/...
│ 계정 선택과 동의
▼
[4] Supabase Auth 콜백
https://sb.example.com/auth/v1/callback
│ 인증 코드를 Supabase 세션으로 처리
▼
[5] Web 복귀 페이지
https://example.com/auth/callback
│ PKCE code를 세션으로 교환
▼
[6] 로그인 완료
각 단계의 주체:
- Web이 로그인을 시작합니다.
- Supabase API가 Google 로그인 주소를 만듭니다.
- Google이 사용자를 인증합니다.
- Supabase Auth가 Google의 결과를 검증합니다.
- Web이 Supabase 세션을 저장합니다.
4. 설정 전에 준비할 것
다음 조건을 먼저 확인합니다.
- Google Cloud 프로젝트
- 외부 사용자가 접근할 Web 도메인
- 외부에서 접근할 수 있는 Supabase API 도메인
- 두 도메인의 DNS 설정
- 유효한 HTTPS 인증서
- 실행 중인 Supabase Docker 서비스
- Nginx에서 Kong으로 연결되는 프록시
서버 상태 확인:
cd /root/supabase/docker
docker compose ps
Supabase Auth 응답 확인:
curl -I https://sb.example.com/auth/v1/health
여기서 DNS 또는 TLS 오류가 발생한다면 Google 설정 전에 서버 연결부터
해결해야 합니다.
5. Google Cloud Console 설정
Google Cloud의 최신 화면에서는 Google Auth Platform 아래에
브랜딩, 대상, 데이터 액세스, 클라이언트 메뉴가 있습니다. 계정에 따라 기존
API 및 서비스 → OAuth 동의 화면 메뉴가 표시될 수도 있습니다.
5.1 브랜딩(Branding)
다음 정보를 입력합니다.
- 앱 이름
- 사용자 지원 이메일
- 앱 로고
- 홈페이지:
https://example.com - 개인정보처리방침:
https://example.com/privacy - 이용약관:
https://example.com/terms - 개발자 연락처
승인된 도메인에는 URL이 아닌 최상위 도메인을 입력합니다.
example.com
https://나 /auth/callback 같은 경로는 입력하지 않습니다.
5.2 대상(Audience)
일반 사용자가 로그인하는 웹사이트라면 사용자 유형을 **외부(External)**로
설정합니다.
테스트 상태에서는 등록한 테스트 사용자만 로그인할 수 있습니다.
- 앱을 테스트 상태로 둡니다.
- 테스트할 Google 계정을 테스트 사용자에 추가합니다.
- 설정과 로그인을 충분히 확인합니다.
- 실제 서비스에서 모든 Google 사용자를 받으려면 앱을 게시합니다.
5.3 데이터 액세스(Data Access)
일반적인 소셜 로그인에는 다음 기본 범위만 사용합니다.
openid
email
profile
이 범위로 얻는 대표 정보:
- Google 사용자의 고유 식별자
- 이메일
- 이름
- 프로필 이미지
Google Drive, Gmail, Calendar 같은 기능을 사용하지 않는다면 해당 API 범위를
추가할 필요가 없습니다. 민감하거나 제한된 범위를 추가하면 별도 검증이 필요할 수
있습니다.
5.4 OAuth 클라이언트 생성
클라이언트(Clients) → 클라이언트 만들기로 이동합니다.
애플리케이션 유형:
웹 애플리케이션
여기서 웹 애플리케이션은 콜백 주소가 Web 도메인이어야 한다는 뜻이 아닙니다.
브라우저 기반 웹서비스의 OAuth 클라이언트라는 의미입니다. 실제 Google 콜백은
Supabase Auth API가 받습니다.
승인된 JavaScript 원본:
https://example.com
https://www.example.com
원본에는 경로를 넣지 않습니다.
# 잘못된 원본 예
https://example.com/login
https://example.com/auth/callback
승인된 리디렉션 URI:
https://sb.example.com/auth/v1/callback
생성 후 다음 값을 안전한 곳에 복사합니다.
- Client ID
- Client Secret
Client ID 예시:
123456789000-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
Client ID는 식별자이고 Client Secret은 서버 비밀값입니다. Client Secret을
브라우저 코드, 공개 문서, Git 저장소에 넣지 않습니다.
다음 단계
Google Cloud 설정을 완료했다면 이제 Backend 서버의 Supabase Docker 설정으로 이동합니다.
다음 글: Self-hosted Supabase Google 로그인 설정 (2/3) - 서버 설정
2편에서는 다음 내용을 다룹니다.
- Backend 서버
.env에 Google Client 값 설정 - Docker Compose에서 Auth 컨테이너로 환경 변수 전달
- Auth 컨테이너 재생성 및 검증
- Google Provider 활성화 확인
작성일: 2026-07-18
적용 환경: Docker 기반 Self-hosted Supabase + SvelteKit
주파수 소통방 (0)
로딩 중...