Hun's DEV

Supabase 셋업부터 소셜 로그인까지 — 비개발자가 겪은 현실

AI 코딩 시작하기··20분 읽기·
Supabase소셜 로그인Google OAuth카카오 로그인Next.js비개발자 코딩AI 코딩
Supabase와 Next.js 소셜 로그인 연동 과정 — Google OAuth, 카카오 로그인 설정 흐름

"데이터베이스 필요해" → Supabase를 만나다

AI한테 "로또 분석 앱에 데이터베이스가 필요해"라고 했더니 Supabase를 추천해줬습니다. Firebase보다 SQL 기반이라 유연하고, 무료 티어로 충분하다고요. 그래서 셋업부터 소셜 로그인까지 한 번에 시키기로 했습니다.

Before — 초급 프롬프트: 
Supabase 연동해줘
After — 중급 프롬프트: 
당신은 Supabase 전문가이자 비개발자 멘토입니다.

[맥락]
- Next.js 15 App Router + TypeScript 프로젝트
- 비개발자라서 SQL, RLS, 환경변수 같은 개념이 익숙하지 않습니다
- 이메일 회원가입 + Google/카카오 소셜 로그인이 필요합니다

[제약조건]
- Supabase 무료 티어
- 한국 사용자 대상 (카카오 로그인 필수)
- 프로덕션 도메인: pick6.kr

[요청]
처음부터 끝까지 순서대로 알려주세요:
1. Supabase 프로젝트 생성
2. 환경변수 설정 (.env.local)
3. Next.js에서 Supabase 클라이언트 초기화
4. Google OAuth 연동
5. 카카오 로그인 연동
6. 미들웨어로 인증 상태 관리
각 단계에서 자주 실수하는 포인트도 알려주세요.

가이드는 잘 나왔습니다. 문제는 "실제로 따라했을 때" 시작됐거든요.

삽질 1: 환경변수 끝에 보이지 않는 줄바꿈

Supabase 대시보드에서 프로젝트 URL과 anon key를 복사해서 .env.local에 붙여넣었습니다. 그런데 로그인이 안 되더라고요. 에러 메시지도 애매해서 한 시간 넘게 헤맸습니다.

원인은 복사할 때 줄바꿈 문자(\r\n)가 섞여 들어간 것이었습니다.

# 실제로 일어난 일
NEXTAUTH_URL=https://www.pick6.kr\n    ← 보이지 않는 \n

# 이 URL로 리다이렉트 생성 시:
redirectUrl = "https://www.pick6.kr\n/auth/update-password"
                                   ↑ 여기서 깨짐

AI한테 에러 메시지를 그대로 복사해서 물어보니 바로 찾아줬습니다:

[에러 상황]
비밀번호 재설정 이메일의 링크가 /auth/update-password로 이동하지 않음
NEXTAUTH_URL 환경변수 값에 문제가 있는 것 같은데 찾아줘

[AI 해결]
baseUrl에 trim() 적용:
const baseUrl = (process.env.NEXTAUTH_URL || '').trim();

교훈: 환경변수는 대시보드에서 복사하지 말고, VS Code에서 직접 입력하는 게 안전합니다.

삽질 2: Google OAuth redirect_uri_mismatch

Google 소셜 로그인 버튼을 눌렀더니 이런 에러가 떴습니다:

Error 400: redirect_uri_mismatch
The redirect URI in the request does not match the ones authorized for the OAuth client.

여기서 비개발자가 헷갈리는 포인트가 있습니다. 리디렉션 URI를 내 사이트 주소(pick6.kr/auth/callback)로 등록했는데, 실제로 등록해야 하는 건 Supabase 인증 서버 주소였거든요.

당신은 OAuth 2.0 전문가입니다.

[에러 메시지]
redirect_uri_mismatch — Google Cloud Console에서 URI가 안 맞다고 함

[현재 등록된 URI]
https://www.pick6.kr/auth/callback  ← 이게 틀린 거였음

[요청]
Supabase를 통한 Google OAuth에서 정확히 어떤 URI를 등록해야 하는지,
Google Cloud Console과 Supabase 대시보드 양쪽 설정을 정리해주세요.

AI가 알려준 정확한 설정:

Google Cloud Console → 승인된 리디렉션 URI: 
https://xxx.supabase.co/auth/v1/callback    ← Supabase 서버 URL (핵심!)
https://www.pick6.kr/auth/callback           ← 프로덕션
http://localhost:3000/auth/callback          ← 개발환경

핵심은 첫 번째 줄입니다. 사용자가 Google 로그인을 하면, Google이 사용자를 내 사이트가 아니라 Supabase 인증 서버로 먼저 보내고, Supabase가 세션을 만든 다음 내 사이트로 리디렉션하는 구조거든요. 이걸 몰랐으니 당연히 안 됐죠.

설정을 고친 후에도 바로 안 됐습니다. Google 서버 동기화에 5~10분이 걸리더라고요. 시크릿 모드에서 테스트해야 캐시 문제도 피할 수 있었습니다.

삽질 3: 카카오 로그인 KOE205 에러

카카오 로그인은 Google보다 한 단계 더 복잡했습니다. 버튼을 누르니까 이런 에러가 떴거든요:

잘못된 요청 (KOE205)
PICK6 서비스 설정에 오류가 있어, 이용할 수 없습니다.
서비스 관리자의 확인이 필요합니다.
당신은 카카오 로그인 API 전문가입니다.

[에러 메시지]
KOE205 — "서비스 설정에 오류가 있어 이용할 수 없습니다"

[현재 상태]
- 카카오 개발자 사이트에서 앱 등록 완료
- Supabase Auth → Kakao Provider에 Client ID/Secret 입력 완료
- 개발환경 localhost:3000에서 테스트 중

[요청]
KOE205 에러의 가능한 원인을 모두 나열하고,
체크해야 할 설정을 순서대로 알려주세요.

AI가 알려준 체크리스트에서 문제를 찾았습니다:

  • 플랫폼 설정: Web 플랫폼 등록 + 사이트 도메인에 http://localhost:3000 추가 (https가 아니라 http!)
  • Redirect URI: http://localhost:3000/api/auth/callback/kakao (마지막 슬래시 없이 정확히)
  • 동의 항목: 프로필 정보 + 카카오계정(이메일) 설정
  • 비즈앱 전환: 이메일을 가져오려면 비즈앱으로 전환 필수

    • 특히 4번이 함정이었습니다. 일반 앱 상태에서는 사용자 이메일을 가져올 수 없거든요. 비즈앱 전환은 사업자 정보 입력이 필요하고, 심사가 있어서 하루 이상 걸릴 수 있습니다. 이걸 미리 알았으면 시간을 아꼈을 텐데...

    삽질 4: 미들웨어에서 세션이 사라진다

    소셜 로그인이 드디어 동작했는데, 새로운 문제가 생겼습니다. 로그인은 되는데 페이지를 이동하면 로그아웃 상태로 보이는 거예요. 미들웨어에서 getUser()를 호출하면 null이 반환됐습니다.

    당신은 Next.js 15 미들웨어 + Supabase Auth 전문가입니다.

[에러 상황]
- 소셜 로그인 성공 (클라이언트에서 세션 확인 가능)
- 미들웨어에서 supabase.auth.getSession() → null 반환
- 페이지 이동 시 로그아웃 상태로 표시됨

[현재 코드 구조]
- 클라이언트: storageKey로 커스텀 쿠키명 사용 중 (예: 'custom-auth-token')
- 미들웨어: 기본 쿠키명('sb-xxx-auth-token')으로 읽고 있음

[요청]
클라이언트와 미들웨어 간 쿠키명이 불일치하는 건지 확인하고,
근본적으로 해결하는 방법을 알려주세요.

    원인은 두 가지였습니다:

    1) 쿠키명 불일치: 클라이언트에서 storageKey로 커스텀 쿠키명을 설정했는데, 미들웨어는 Supabase 기본 쿠키명(sb-[project-ref]-auth-token)으로 읽고 있었습니다. 
    해결: storageKey 설정을 제거 → Supabase 기본 쿠키명 사용
    2) 쿠키 필터링 누락: 미들웨어에서 Supabase 쿠키를 감지하는 필터에 'supabase' 키워드가 빠져 있었습니다. 
    해결: 쿠키 필터에 'sb-', 'supabase', 'supabase-auth-token' 3가지 패턴 추가

    이 문제 때문에 커밋 3개를 쌓았습니다. localStorage → 쿠키 전환 → 쿠키 필터 개선 → storageKey 제거 + 표준 쿠키명 통일. 하나씩 고칠 때마다 AI한테 "이거 고쳤는데 아직 안 돼, 다음 가능한 원인은?"을 반복했거든요.

    Supabase + Google + 카카오 — 3곳 설정 체크리스트

    비개발자가 가장 헤매는 건 코드가 아니라 3개 서비스의 설정값을 정확히 맞추는 것입니다. 정리하면:

    | 설정 위치 | 핵심 항목 | 주의점 |
    |----------|----------|--------|
    | Supabase 대시보드 | Site URL, Redirect URLs | www 포함/미포함 구분 |
    | Google Cloud Console | 리디렉션 URI | Supabase 서버 URL 등록 (내 사이트 아님) |
    | 카카오 개발자 | 플랫폼, Redirect URI | http (https 아님), 비즈앱 전환 필요 |
    | .env.local | URL, Key | 줄바꿈 문자 주의, trim() 적용 |

    AI한테 "안 돼요"라고 하면 답이 안 나옵니다. 에러 메시지를 그대로 복사해서 "이 에러가 나오는데, 현재 내 설정은 이렇다"고 알려주면 5분 안에 해결됩니다. redirect_uri_mismatch든 KOE205든, 에러 메시지 자체가 답의 80%를 갖고 있었거든요.

    공유

    댓글