SvelteKit + Supabase.com 에서 Google OAuth 설정 완벽 가이드 [흐름도 이미지 포함]

개발 환경(localhost)과 프로덕션 환경 모두에서 Google OAuth를 설정하는 방법을 단계별로 알아봅니다.

개요

이 가이드는 SvelteKit 프로젝트에서 Supabase를 사용하여 Google OAuth 인증을 구현하는 방법을 설명합니다. localhost 개발 환경과 프로덕션 환경 모두에서 작동하도록 설정하는 방법을 다룹니다.

Google OAuth

1. Supabase Dashboard 설정

Redirect URLs 설정

1) Supabase Dashboard 접속

https://supabase.com/dashboard 접속
프로젝트 선택

2) Authentication → URL Configuration 이동

좌측 메뉴에서 Authentication 클릭
URL Configuration 탭 선택

3) Site URL 설정

Site URL: https://example.com

⚠️ 중요:

프로덕션 URL만 설정합니다.
이 값은 리디렉트 URL이 지정되지 않았거나 허용 목록에 없을 때 사용되는 기본 URL입니다.

4) Redirect URLs 추가

Additional Redirect URLs 섹션에 다음 URL들을 모두 추가합니다:

http://localhost:5173/auth/callback
http://localhost:5174/auth/callback
https://example.com/auth/callback

참고:

포트 번호는 개발 서버 설정에 따라 다를 수 있습니다.
개발용 localhost URL과 프로덕션 URL을 모두 추가해야 양쪽 환경에서 모두 작동합니다.

2. Google Cloud Console 설정

OAuth 동의 화면 설정

1) Google Cloud Console 접속

https://console.cloud.google.com 접속
프로젝트 선택 (또는 새 프로젝트 생성)

2) API 및 서비스 → OAuth 동의 화면 이동

좌측 메뉴에서 API 및 서비스 → OAuth 동의 화면 클릭

3) 앱 정보 설정

앱 이름: 내 애플리케이션 이름
사용자 지원 이메일: support@example.com
앱 도메인: example.com
개발자 연락처 정보: developer@example.com

⚠️ 중요:

앱 이름은 홈페이지에 표시되는 이름과 정확히 일치해야 합니다.
Google OAuth 인증 심사 시 홈페이지의 앱 이름과 대조하므로 일치하지 않으면 심사가 거부될 수 있습니다.
승인된 도메인에는 localhost를 입력할 수 없습니다. 공개적으로 접근 가능한 도메인만 허용합니다.

4) 범위 설정

기본적으로 필요한 범위가 자동으로 설정됩니다.
추가 권한이 필요한 경우에만 범위를 추가합니다.

5) 테스트 사용자 추가 (선택사항)

개발 중인 경우 테스트 사용자 이메일을 추가할 수 있습니다.

OAuth 2.0 클라이언트 ID 설정

1) API 및 서비스 → 사용자 인증 정보 이동

좌측 메뉴에서 API 및 서비스 → 사용자 인증 정보 클릭

2) OAuth 2.0 클라이언트 ID 생성

사용자 인증 정보 만들기 → OAuth 클라이언트 ID 선택
애플리케이션 유형: 웹 애플리케이션 선택

3) 승인된 JavaScript 원본 추가

다음 원본들을 모두 추가합니다:

http://localhost:5173
http://localhost:5174
https://example.com

⚠️ 중요:

localhost는 승인된 JavaScript 원본에 추가할 수 있습니다.
개발 환경에서 OAuth가 작동하려면 localhost URL을 여기에 추가해야 합니다.
포트 번호는 개발 서버 설정에 맞게 조정하세요.

4) 승인된 리디렉션 URI 추가

Supabase 콜백 URL을 추가합니다:

https://[YOUR_SUPABASE_PROJECT_ID].supabase.co/auth/v1/callback

참고:

[YOUR_SUPABASE_PROJECT_ID]는 Supabase 프로젝트의 실제 ID로 교체해야 합니다.
Supabase Dashboard → Settings → API에서 프로젝트 URL을 확인할 수 있습니다.
예: https://abcdefghijklmnop.supabase.co/auth/v1/callback

5) Client ID 및 Client Secret 저장

생성된 Client ID와 Client Secret을 안전한 곳에 저장합니다.
다음 단계에서 Supabase에 입력할 예정입니다.

3. Supabase에서 Google OAuth Provider 설정

1) Supabase Dashboard → Authentication → Providers 이동

2) Google Provider 활성화

Google 토글을 Enabled로 설정

3) Client ID 및 Client Secret 입력

Google Cloud Console에서 생성한 OAuth 2.0 클라이언트의:
- Client ID: 복사하여 입력 (필수)
- Client Secret (for OAuth): 복사하여 입력 (필수)

⚠️ 중요:

웹 애플리케이션의 경우 Client Secret이 필수입니다.
Client Secret 없이는 Google OAuth가 정상적으로 작동하지 않습니다.
Client Secret은 보안상 중요한 정보이므로 절대 공개 저장소에 커밋하지 마세요.

4) 저장

설정을 저장하면 Google OAuth가 활성화됩니다.

4. SvelteKit 코드 구현

동적 리디렉션 URL 설정

코드에서 window.location.origin을 사용하여 환경에 맞는 URL을 자동으로 설정합니다:

// src/lib/stores/authStore.svelte.js
async signInWithProvider(provider) {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: `${window.location.origin}/auth/callback`
    }
  });
  
  if (error) {
    console.error('OAuth 로그인 에러:', error);
    return { error };
  }
  
  return { data };
}

이렇게 하면:

localhost: http://localhost:5173/auth/callback
production: https://example.com/auth/callback

자동으로 올바른 URL이 설정됩니다.

콜백 페이지 구현

<!-- src/routes/auth/callback/+page.svelte -->
<script>
  import { onMount } from 'svelte';
  import { goto } from '$app/navigation';
  import { supabase } from '$lib/supabaseClient';

  onMount(async () => {
    const { data: { session }, error } = await supabase.auth.getSession();
    
    if (error) {
      console.error('세션 확인 에러:', error);
      goto('/login');
      return;
    }
    
    if (session) {
      // 로그인 성공 - 메인 페이지로 리디렉션
      goto('/');
    } else {
      // 세션 없음 - 로그인 페이지로
      goto('/login');
    }
  });
</script>

<div class="flex items-center justify-center min-h-screen">
  <div class="text-center">
    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900 mx-auto"></div>
    <p class="mt-4 text-gray-600">로그인 처리 중...</p>
  </div>
</div>

로그인 버튼 구현

<!-- src/routes/login/+page.svelte -->
<script>
  import { authStore } from '$lib/stores/authStore.svelte';
  
  async function handleGoogleLogin() {
    const { error } = await authStore.signInWithProvider('google');
    
    if (error) {
      alert('로그인에 실패했습니다: ' + error.message);
    }
  }
</script>

<button 
  on:click={handleGoogleLogin}
  class="flex items-center justify-center gap-2 w-full px-4 py-2 
         border border-gray-300 rounded-lg hover:bg-gray-50 
         transition-colors"
>
  <svg class="w-5 h-5" viewBox="0 0 24 24">
    <!-- Google 아이콘 SVG -->
  </svg>
  Google로 로그인
</button>

5. 테스트

Localhost 테스트

개발 서버 실행:

npm run dev

브라우저에서 http://localhost:5173/login 접속
"Google로 로그인" 버튼 클릭
Google 로그인 완료 후 /auth/callback으로 리디렉트되는지 확인
메인 페이지로 정상적으로 이동하는지 확인

Production 테스트

프로덕션 배포 확인
https://example.com/login 접속
"Google로 로그인" 버튼 클릭
Google 로그인 완료 후 정상적으로 리디렉트되는지 확인

문제 해결

1. "redirect_uri_mismatch" 에러

원인: Google Cloud Console의 승인된 리디렉션 URI가 정확하지 않음

해결 방법:

Google Cloud Console → 사용자 인증 정보 → OAuth 2.0 클라이언트 ID 편집
승인된 리디렉션 URI에 Supabase 콜백 URL이 정확히 추가되었는지 확인
Supabase 프로젝트 ID가 정확한지 확인

2. "access_denied" 에러

원인: Redirect URL이 Supabase에 등록되지 않음

해결 방법:

Supabase Dashboard → Authentication → URL Configuration
Additional Redirect URLs에 모든 필요한 URL이 추가되었는지 확인

3. 로그인 후 콜백 페이지에서 에러 발생

원인: 콜백 페이지 코드 문제 또는 세션 처리 오류

해결 방법:

/auth/callback 페이지가 정상적으로 작동하는지 확인
브라우저 콘솔에서 에러 메시지 확인
Supabase 세션이 정상적으로 생성되는지 확인

4. localhost에서 작동하지 않음

원인: Google Cloud Console에 localhost가 등록되지 않음

해결 방법:

Google Cloud Console → OAuth 2.0 클라이언트 ID 편집
승인된 JavaScript 원본에 http://localhost:5173 추가
포트 번호가 실제 개발 서버 포트와 일치하는지 확인

5. Google 로그인 화면에 Supabase URL이 표시됨

원인: OAuth 동의 화면에서 앱 이름이 설정되지 않음

해결 방법:

Google Cloud Console → API 및 서비스 → OAuth 동의 화면
"앱 이름" 필드에 원하는 앱 이름 입력
저장 후 다시 로그인 시도

OAuth 인증 심사 팁

Google OAuth 인증 심사를 통과하기 위한 체크리스트:

1. 앱 이름 일치

확인 사항:

Google Cloud Console의 "앱 이름"과 웹사이트에 표시되는 이름이 정확히 일치해야 합니다.
오타나 불필요한 공백이 없는지 확인하세요.

웹사이트에서 확인할 위치:

브라우저 타이틀 (<title> 태그)
메인 로고 옆 텍스트
Footer의 저작권 표시
Open Graph 메타 태그 (og:site_name)

SvelteKit 구현 예시:

<!-- src/routes/+layout.svelte -->
<script>
  const appName = "내 애플리케이션";
</script>

<svelte:head>
  <title>{appName}</title>
  <meta name="application-name" content={appName} />
  <meta property="og:site_name" content={appName} />
</svelte:head>

2. 개인정보 처리방침 및 서비스 약관

필수 사항:

개인정보 처리방침(Privacy Policy) 페이지 제공
서비스 약관(Terms of Service) 페이지 제공
두 문서 내에서 앱 이름을 일관되게 사용

페이지 생성 위치:

src/routes/privacy/+page.svelte
src/routes/terms/+page.svelte

Google Cloud Console 등록:

OAuth 동의 화면 → 앱 도메인
개인정보 처리방침 링크: https://example.com/privacy
서비스 약관 링크: https://example.com/terms

3. 도메인 소유권 확인

확인 방법:

Google Search Console에서 도메인 소유권 인증 완료
Google Cloud Console → OAuth 동의 화면 → 승인된 도메인에 추가

4. 심사 제출 전 체크리스트

앱 이름이 웹사이트와 정확히 일치
개인정보 처리방침 페이지 제공
서비스 약관 페이지 제공
도메인 소유권 인증 완료
앱 로고 업로드 (선택사항이지만 권장)
사용자 지원 이메일 설정
개발자 연락처 정보 입력

환경 변수 설정

.env 파일에 다음 변수들을 설정하세요:

# Supabase
PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# Google OAuth (선택사항 - 필요시)
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret

⚠️ 보안 주의사항:

.env 파일을 .gitignore에 추가하세요
Client Secret은 절대 공개 저장소에 커밋하지 마세요
프로덕션 환경에서는 환경 변수를 안전하게 관리하세요

참고 사항

개발 포트 변경 시

Supabase Dashboard의 Redirect URLs에 새 포트 추가
Google Cloud Console의 승인된 JavaScript 원본에 새 포트 추가

새 도메인 추가 시

Supabase Dashboard에 새 도메인의 콜백 URL 추가
Google Cloud Console의 승인된 JavaScript 원본에 새 도메인 추가
OAuth 동의 화면의 승인된 도메인에 새 도메인 추가

여러 환경 관리

개발(dev), 스테이징(staging), 프로덕션(production) 환경별로 각각 설정
각 환경의 콜백 URL을 모두 등록
환경별로 다른 Supabase 프로젝트 사용 권장

마치며

이 가이드를 따라 설정하면 SvelteKit + Supabase 프로젝트에서 Google OAuth를 안정적으로 사용할 수 있습니다.

핵심 포인트 요약:

Supabase에 localhost와 프로덕션 URL 모두 등록
Google Cloud Console에 승인된 JavaScript 원본 설정 (localhost 포함)
동적 리디렉션 URL 사용 (window.location.origin)
앱 이름을 웹사이트와 정확히 일치시키기
Client Secret 보안 관리

문제가 발생하면 브라우저 콘솔과 Supabase 로그를 확인하여 구체적인 에러 메시지를 파악하세요.

SvelteKit + Supabase.com 에서 Google OAuth 설정 완벽 가이드 [흐름도 이미지 포함]

개요

1. Supabase Dashboard 설정

Redirect URLs 설정

2. Google Cloud Console 설정

OAuth 동의 화면 설정

OAuth 2.0 클라이언트 ID 설정

3. Supabase에서 Google OAuth Provider 설정

4. SvelteKit 코드 구현

동적 리디렉션 URL 설정

콜백 페이지 구현

로그인 버튼 구현

5. 테스트

Localhost 테스트

Production 테스트

문제 해결

1. "redirect_uri_mismatch" 에러

2. "access_denied" 에러

3. 로그인 후 콜백 페이지에서 에러 발생

4. localhost에서 작동하지 않음

5. Google 로그인 화면에 Supabase URL이 표시됨

OAuth 인증 심사 팁

1. 앱 이름 일치

2. 개인정보 처리방침 및 서비스 약관

3. 도메인 소유권 확인

4. 심사 제출 전 체크리스트

환경 변수 설정

참고 사항

개발 포트 변경 시

새 도메인 추가 시

여러 환경 관리

마치며

주파수 소통방 (0)