인증 커리큘럼으로
기술 문서 (프로토타입 버전)
Google OAuth · 카카오
저장소의 docs/supabase-google-oauth-setup.md 와 동일한 원문입니다. 아래에서 Markdown과 HTML 변환 결과를 각각 복사할 수 있습니다.
공개 문서 원문 (Markdown)
# Supabase Auth 소셜 로그인 설정 (Google + Kakao)
`saas-engine`의 로그인 페이지(`app/login/page.tsx`)는 Supabase OAuth Provider로 Google/Kakao 로그인을 지원한다.
---
## 1) Supabase 공통 설정
1. Supabase Dashboard → **Authentication** → **URL Configuration**
2. **Site URL**: 로컬 개발 URL(예: `http://localhost:3000`)
3. **Redirect URLs**에 아래 경로를 추가
- `http://localhost:3000/auth/callback`
- 배포 URL 사용 시 `https://<your-domain>/auth/callback`
> 앱은 `signInWithOAuth(..., { redirectTo: "<origin>/auth/callback" })`를 사용한다.
---
## 2) Google Provider 설정
1. Supabase Dashboard → **Authentication** → **Providers** → **Google**
2. Google Provider를 **Enabled**로 전환
3. Google Cloud Console에서 OAuth Client 생성
4. Supabase의 Callback URL (`https://<project-ref>.supabase.co/auth/v1/callback`)을 Google의 승인된 리디렉션 URI로 등록
5. Google Client ID / Secret을 Supabase Google Provider에 입력 후 저장
---
## 3) Kakao Provider 설정
1. [Kakao Developers](https://developers.kakao.com/)에서 애플리케이션 생성
2. **Kakao Login 활성화** 후 Redirect URI 등록
- `https://nuqjwsxdscxyhbrsmiqd.supabase.co/auth/v1/callback`
3. 앱 키 > **REST API 키** 확인
4. 보안 > **Client Secret 생성/활성화** (권장)
5. Supabase Dashboard → **Authentication** → **Providers** → **Kakao**
- Enabled: ON
- Client ID: Kakao REST API 키
- Client Secret: Kakao Client Secret
- 저장
6. Kakao Developers → 제품 설정
- 카카오 로그인: **설정함**
- 동의항목: **설정함**
- 비즈 앱: **설정됨** (앱 ID `1425534`, 앱명 `saas-engine`)
---
## 3-1) KOE205 대응 체크 (카카오만 실패할 때)
Google은 정상이고 Kakao만 `Invalid Request (KOE205)`이면 대부분 **카카오 콘솔 설정 불일치**다.
1. Kakao Developers → **플랫폼 > Web**
- `http://localhost:3000` 또는 실제 실행 포트(예: `http://localhost:3003`)를 등록
2. Kakao Developers → **카카오 로그인 > Redirect URI**
- `https://nuqjwsxdscxyhbrsmiqd.supabase.co/auth/v1/callback` 정확히 1:1 일치
3. Supabase → **Authentication > Providers > Kakao**
- Enabled ON, Client ID(REST API 키) 일치 확인
4. 로컬 실행 포트와 `.env.local`의 `NEXT_PUBLIC_APP_URL`을 맞춤
- 예: 3000으로 실행 중이면 `NEXT_PUBLIC_APP_URL=http://localhost:3000`
---
## 4) 앱 환경 변수 체크
`.env.local`에서 최소 아래 키가 채워져 있어야 로그인 화면/콜백이 안정적으로 동작한다.
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
- `NEXT_PUBLIC_APP_URL`
`.env.example`에는 Google/Kakao 키 템플릿(`GOOGLE_*`, `KAKAO_*`)이 포함되어 있으며, 실제 OAuth 동작 값은 Supabase Dashboard Provider 설정이 기준이다.
---
## 5) 동작 확인
1. `pnpm dev`
2. `/login` 접속
3. **Google Login**, **Kakao Login** 각각 클릭
4. OAuth 완료 후 `/auth/callback` 경유 → `/dashboard` 이동 확인
실패 시 `/api/health` 안내 문구와 Supabase Provider 활성화 상태를 먼저 점검한다.
공개 문서 변환 코드 (HTML)
<h1>Supabase Auth 소셜 로그인 설정 (Google + Kakao)</h1>
<p><code>saas-engine</code>의 로그인 페이지(<code>app/login/page.tsx</code>)는 Supabase OAuth Provider로 Google/Kakao 로그인을 지원한다.</p>
<hr>
<h2>1) Supabase 공통 설정</h2>
<ol>
<li>Supabase Dashboard → <strong>Authentication</strong> → <strong>URL Configuration</strong></li>
<li><strong>Site URL</strong>: 로컬 개발 URL(예: <code>http://localhost:3000</code>)</li>
<li><strong>Redirect URLs</strong>에 아래 경로를 추가<ul>
<li><code>http://localhost:3000/auth/callback</code></li>
<li>배포 URL 사용 시 <code>https://<your-domain>/auth/callback</code></li>
</ul>
</li>
</ol>
<blockquote>
<p>앱은 <code>signInWithOAuth(..., { redirectTo: "<origin>/auth/callback" })</code>를 사용한다.</p>
</blockquote>
<hr>
<h2>2) Google Provider 설정</h2>
<ol>
<li>Supabase Dashboard → <strong>Authentication</strong> → <strong>Providers</strong> → <strong>Google</strong></li>
<li>Google Provider를 <strong>Enabled</strong>로 전환</li>
<li>Google Cloud Console에서 OAuth Client 생성</li>
<li>Supabase의 Callback URL (<code>https://<project-ref>.supabase.co/auth/v1/callback</code>)을 Google의 승인된 리디렉션 URI로 등록</li>
<li>Google Client ID / Secret을 Supabase Google Provider에 입력 후 저장</li>
</ol>
<hr>
<h2>3) Kakao Provider 설정</h2>
<ol>
<li><a href="https://developers.kakao.com/">Kakao Developers</a>에서 애플리케이션 생성</li>
<li><strong>Kakao Login 활성화</strong> 후 Redirect URI 등록<ul>
<li><code>https://nuqjwsxdscxyhbrsmiqd.supabase.co/auth/v1/callback</code></li>
</ul>
</li>
<li>앱 키 > <strong>REST API 키</strong> 확인</li>
<li>보안 > <strong>Client Secret 생성/활성화</strong> (권장)</li>
<li>Supabase Dashboard → <strong>Authentication</strong> → <strong>Providers</strong> → <strong>Kakao</strong><ul>
<li>Enabled: ON</li>
<li>Client ID: Kakao REST API 키</li>
<li>Client Secret: Kakao Client Secret</li>
<li>저장</li>
</ul>
</li>
<li>Kakao Developers → 제품 설정<ul>
<li>카카오 로그인: <strong>설정함</strong></li>
<li>동의항목: <strong>설정함</strong></li>
<li>비즈 앱: <strong>설정됨</strong> (앱 ID <code>1425534</code>, 앱명 <code>saas-engine</code>)</li>
</ul>
</li>
</ol>
<hr>
<h2>3-1) KOE205 대응 체크 (카카오만 실패할 때)</h2>
<p>Google은 정상이고 Kakao만 <code>Invalid Request (KOE205)</code>이면 대부분 <strong>카카오 콘솔 설정 불일치</strong>다.</p>
<ol>
<li>Kakao Developers → <strong>플랫폼 > Web</strong><ul>
<li><code>http://localhost:3000</code> 또는 실제 실행 포트(예: <code>http://localhost:3003</code>)를 등록</li>
</ul>
</li>
<li>Kakao Developers → <strong>카카오 로그인 > Redirect URI</strong><ul>
<li><code>https://nuqjwsxdscxyhbrsmiqd.supabase.co/auth/v1/callback</code> 정확히 1:1 일치</li>
</ul>
</li>
<li>Supabase → <strong>Authentication > Providers > Kakao</strong><ul>
<li>Enabled ON, Client ID(REST API 키) 일치 확인</li>
</ul>
</li>
<li>로컬 실행 포트와 <code>.env.local</code>의 <code>NEXT_PUBLIC_APP_URL</code>을 맞춤<ul>
<li>예: 3000으로 실행 중이면 <code>NEXT_PUBLIC_APP_URL=http://localhost:3000</code></li>
</ul>
</li>
</ol>
<hr>
<h2>4) 앱 환경 변수 체크</h2>
<p><code>.env.local</code>에서 최소 아래 키가 채워져 있어야 로그인 화면/콜백이 안정적으로 동작한다.</p>
<ul>
<li><code>NEXT_PUBLIC_SUPABASE_URL</code></li>
<li><code>NEXT_PUBLIC_SUPABASE_ANON_KEY</code></li>
<li><code>NEXT_PUBLIC_APP_URL</code></li>
</ul>
<p><code>.env.example</code>에는 Google/Kakao 키 템플릿(<code>GOOGLE_*</code>, <code>KAKAO_*</code>)이 포함되어 있으며, 실제 OAuth 동작 값은 Supabase Dashboard Provider 설정이 기준이다.</p>
<hr>
<h2>5) 동작 확인</h2>
<ol>
<li><code>pnpm dev</code></li>
<li><code>/login</code> 접속</li>
<li><strong>Google Login</strong>, <strong>Kakao Login</strong> 각각 클릭</li>
<li>OAuth 완료 후 <code>/auth/callback</code> 경유 → <code>/dashboard</code> 이동 확인</li>
</ol>
<p>실패 시 <code>/api/health</code> 안내 문구와 Supabase Provider 활성화 상태를 먼저 점검한다.</p>