Supabase OAuth 인증 도메인에 Vanity Subdomain 적용하기

Supabase에서 소셜 로그인(Google OAuth 등)을 사용할 때 기본 도메인은 asdfsadfsadfasdf.supabase.co처럼 프로젝트 ID가 노출된다. 이 URL을 spoteditor.supabase.co처럼 깔끔한 서브도메인으로 바꾸는 방법을 정리한다.
DNS 설정이나 별도의 도메인 구매 없이 Supabase CLI로 설정 가능하다.

처음에는 Custom Domain 기능(auth.thespoteditor.com 같은 형태)을 사용하려 했지만, 이를 적용하려면 서브도메인을 따로 구매하고 DNS 설정까지 해야 했다. 이미 사용하는 루트 도메인이 있는 상태라 서브도메인을 별도로 추가 구매해야 하는 상황이라 부담이 있었고, 대신 Supabase에서 제공하는 Vanity Subdomain 기능으로 방향을 바꿨다.

---

1. 사전 조건

• Supabase Pro 플랜 이상
• Supabase CLI 설치 완료
• 프로젝트 Ref(ID) 확인 (예: asdfsadfsadfasdf)

---

2. CLI 로그인

npx supabase login

---

3. 원하는 서브도메인 사용 가능 여부 확인

npx supabase vanity-subdomains --project-ref <프로젝트Ref> check-availability --desired-subdomain <바꿀 도메인> --experimental

available: true가 출력되면 사용 가능한 상태다.

---

4. Vanity Subdomain 활성화

npx supabase vanity-subdomains --project-ref <프로젝트Ref> activate --desired-subdomain <바꿀 도메인> --experimental

이 명령어 실행 후 https://spoteditor.supabase.co가 프로젝트의 인증 도메인으로 활성화된다.

---

5. Google OAuth 리디렉션 URI 추가

Google Cloud Console > OAuth 클라이언트에서 다음 두 URI를 모두 등록한다.

https://<프로젝트Ref>.supabase.co/auth/v1/callback
https://spoteditor.supabase.co/auth/v1/callback

두 주소 모두 등록해두면 새 도메인과 기존 도메인이 모두 정상 작동한다.

---

6. (선택) 클라이언트 코드에서 도메인 수정

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'https://spoteditor.supabase.co',
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)

필수는 아니지만, Twitter 로그인을 사용하는 경우 반드시 새로운 도메인만 사용해야 한다.

---

7. 적용 확인

브라우저 시크릿 모드에서 로그인 시도 시 인증 URL이 spoteditor.supabase.co로 시작하면 적용 완료다.

---

참고사항

• 기존 도메인(<프로젝트Ref>.supabase.co)도 계속 동작한다.
• Vanity Subdomain은 CLI에서만 설정 가능하며, 한 프로젝트에 한 번만 적용할 수 있다.
• DNS 설정은 필요 없다. Custom Domain과는 다르다.
• Twitter 로그인을 사용하는 경우 반드시 새로운 Vanity 도메인 기반으로 클라이언트 설정을 바꿔야 정상 작동한다.

---

참고 자료

• Custom Domains