구글 로그인은 나만 되는데 다른 사람은 안 될 때
나는 로그인되는데 친구·다른 계정만 실패하거나, 배포 후 redirect_uri_mismatch가 나는 상황을 순서대로 좁힙니다.
한 줄 결론
로그인은 화면 버튼이 아니라 '로그인 후 다시 돌아올 주소'·콜백·비밀값 설정칸·세션이 한 세트로 맞아야 합니다.
아래 내용은 초보 바이브코더를 위한 일반 안내입니다. 서비스·지역·약관에 따라 달라질 수 있으며, 실제 사업화·운영 전에는 해당 분야 전문가 확인이 필요합니다.
먼저 용어부터 — 그다음 실행 프롬프트
- env
- 비밀 설정값(API Key·비밀번호)을 넣는 파일·칸
- redirect URI
- 로그인 후 다시 돌아올 우리 사이트 주소
- 콜백
- 로그인 사이트가 인증 결과를 넘겨주는 우리 서버 주소
Redirect URI
이건 redirect URI입니다
구글·카카오 로그인 후 ‘우리 사이트로 돌아올 주소’입니다. 글자 하나라도 다르면 로그인이 깨집니다.
- 콘솔에 등록한 주소와 실제 요청 URL이 같아야 합니다
- http/https · www · 끝 슬래시까지 맞춥니다
- 로컬과 배포 URL을 각각 등록합니다
이런 곳에 · Google/Kakao/Naver OAuth · /ai/guides OAuth 가이드
지금 할 일 · 콘솔 Redirect URI에 http://localhost:3000/api/auth/callback/... 등록
비용·주의 · OAuth 자체는 무료. 잘못된 콜백으로 재시도만 늘지 않게.
AI 프롬프트 보기
redirect_uri_mismatch. 등록 URI: [ ], 실제: [ ]. NextAuth 설정과 콘솔을 대조하는 체크리스트.
Environment variables
이건 env(환경변수)입니다
비밀값·설정을 코드 밖에 두는 칸입니다. 로컬은 .env.local, 배포는 Vercel Environment Variables.
- 비밀은 Git에 커밋하지 않습니다
- 로컬과 배포 값이 다르면 ‘로컬만 됨’이 납니다
- 이름만 같아도 값이 비면 500이 납니다
이런 곳에 · OAuth secret · DATABASE_URL · API Key · CRON_SECRET
지금 할 일 · .env.example에 이름만 적고, 실제 값은 .env.local에만
비용·주의 · 잘못된 env로 무한 재시도하면 API 비용이 늘 수 있습니다.
AI 프롬프트 보기
Next.js + Vercel env 점검. 로컬은 되는데 배포만 실패. 필요한 키 목록(값 제외), Production 탭 확인 순서.
바로 실행 — AI 프롬프트
Next.js + Google OAuth에서 redirect_uri_mismatch가 납니다. 로컬 URL [ ], 배포 URL [ ], .env 키 이름 목록. 콘솔 등록값과 코드를 대조하는 체크리스트를 만들어 주세요.
막히면 다시 넣을 프롬프트
OAuth redirect_uri_mismatch. 등록 URI: [ ], 실제 요청: [ ]. NextAuth 설정 파일 경로: [ ]. 단계별 수정.
럭키스팟 해석은 원출처를 바탕으로 한 실전 안내입니다. 요금·약관·라이선스는 제공자 페이지 최신 조건을 결제·배포 전에 대조하세요. 실제 사업화 전에는 해당 분야 전문가 확인이 필요할 수 있습니다.
초보자 한 줄 설명
로그인 버튼을 누르면 구글 등으로 갔다가, 다시 내 사이트 특정 주소(콜백)로 돌아옵니다. 그 주소가 콘솔 등록과 다르면 실패합니다.
먼저 AI 에이전트에게 붙여넣을 프롬프트
Next.js + Auth.js로 Google 로그인만 먼저 붙인다. 배포 URL: [ ]. 1) Google 콘솔 redirect URI 정확한 문자열(로컬+프로덕션+preview 필요 시) 2) test user vs publishing 상태에서 달라지는 점 3항 3) .env 필수 변수 이름만 목록(AUTH_SECRET, AUTH_URL 등) 4) 콜백 라우트 경로·보호 페이지 미들웨어 예시 5) redirect_uri_mismatch·세션 없음 각각 확인 순서 코드는 최소, 체크리스트 중심.
AI가 해줄 수 있는 일
- Next.js 로그인·콜백·보호 페이지 코드 작성
- 로그인 후 돌아올 주소(redirect) 목록 정리
- redirect_uri_mismatch·세션 없음 해결 순서
사람이 직접 해야 하는 외부 설정
- Google/Kakao/Naver 개발자 콘솔에서 앱 만들기
- 로그인 후 돌아올 주소를 글자 단위로 등록
- 서비스 비밀번호(client secret)를 Vercel 비밀값 칸에만 넣기
외부 설정 경로
- Google Cloud Console → APIs & Services → Credentials → OAuth client
- Kakao Developers → 내 애플리케이션 → 카카오 로그인 → Redirect URI
- Naver Developers → 내 애플리케이션 → API 설정 → Callback URL
- Vercel → Project → Settings → Environment Variables (AUTH_SECRET, client ID/secret)
제대로 됐는지 확인하는 방법
- 로컬에서 로그인 → 마이페이지 → 로그아웃 한 바퀴
- 배포 URL에서도 같은 3동작
- test user만 되는지 vs 일반 계정(publishing) 차이 확인
실행 순서
- 1콘솔에 redirect URI 등록
- 2env에 ID·secret·AUTH_URL
- 3콜백 라우트 구현
- 4로컬 E2E 테스트
- 5Vercel env 동기화 후 프로덕션 테스트
막히면 다시 AI에게 줄 프롬프트
소셜 로그인이 [redirect_uri_mismatch / 콜백 404 / 로그인 후 세션 없음]. 제공자: [Google/Kakao/Naver], 배포 URL: [ ], 콘솔에 등록한 URI: [붙여넣기], 브라우저 에러: [붙여넣기]. 콘솔 URI와 실제 요청 URL 글자 비교·Vercel AUTH_URL·쿠키 설정 순서.
막히는 지점
- redirect_uri_mismatch — localhost vs prod URL 글자 불일치
- Google test user만 되고 publishing 전 일반 계정 실패
- client secret을 NEXT_PUBLIC_ 또는 클라이언트 번들에 노출
- 콜백 404·미들웨어가 /api/auth 차단
- Vercel AUTH_URL·NEXTAUTH_URL 프로덕션 값 누락
비용·보안·저작권·약관 주의
- secret 노출 시 즉시 rotate
- 개인정보처리방침에 수집 항목 명시(사업화 시 법무 확인)
- 대부분 무료 한도 내. 상업 서비스는 제공자 심사·약관 확인.
대안 도구
Clerk · Supabase Auth · Firebase Auth
럭키스팟 판단
로컬만 되고 배포 후 깨지는 경우 90%는 URL·env 불일치입니다. 콘솔 스크린샷과 요청 URL을 글자 단위로 비교하세요.
이런 사람이 보면 좋음
- Next.js·Vercel에 처음 OAuth를 붙이는 사람
- 로컬에서는 되는데 배포 후 로그인만 실패하는 사람
- Google·Kakao·Naver 중 하나만 되고 나머지는 깨지는 사람
초보자가 보통 착각하는 지점
- 클라이언트 ID만 넣으면 로그인이 끝난다고 생각합니다. 로그인 후 돌아올 주소·콜백·서버 비밀번호(client secret)가 빠지면 바로 실패합니다.
- 로컬 주소(http://localhost:3000)를 프로덕션 콘솔에 그대로 등록해 두고 배포 URL과 다르다고 당황합니다.
- 로그인 성공 후 사용자 정보를 브라우저 저장소만에 두고, 서버 세션·쿠키 설정은 나중에 하려다 보호 페이지가 열립니다.
- Google·Kakao·Naver 콘솔 규칙이 같다고 가정합니다. 제공자마다 '로그인 후 돌아올 주소' 등록 방식이 다릅니다.
실제 점검 체크리스트
- Google Cloud Console → APIs & Services → Credentials에서 로그인 후 돌아올 주소가 실제와 글자 단위로 일치하는지 확인합니다(끝 슬래시·http/https 포함).
- Kakao Developers → 내 애플리케이션 → 카카오 로그인 → Redirect URI에 로컬·배포 URL을 각각 등록했는지 확인합니다.
- Naver Developers → 내 애플리케이션 → API 설정 → Callback URL도 동일하게 맞췄는지 확인합니다.
- 클라이언트 ID는 브라우저용 설정(NEXT_PUBLIC_), client secret은 Vercel 비밀값 칸에만 두었는지 확인합니다.
- 로그인/결제 후 돌아오는 처리 주소(콜백)가 배포 환경에서 404가 아닌지 확인합니다.
- 로그인 후 세션을 어디에 저장하는지 정하고, 보호 페이지가 서버에서 검증하는지 확인합니다.
- 로그아웃·세션 만료 시 쿠키 삭제·리다이렉트가 동작하는지 확인합니다.
실패했을 때 보는 순서
- 1브라우저 주소창·네트워크 탭에서 redirect_uri_mismatch, invalid_client, 404, CORS 오류 문구를 먼저 읽습니다.
- 2콘솔에 등록한 '로그인 후 돌아올 주소'와 실제 요청 URL을 나란히 비교합니다.
- 3Vercel → Project → Settings → Environment Variables에 client secret·AUTH_URL이 배포 값으로 들어갔는지 확인합니다.
- 4콜백 핸들러 로그에 도달하는지, 중간 미들웨어가 콜백을 막지 않는지 확인합니다.
- 5http와 https, www 유무, preview 도메인 차이를 의심하고 해당 URL을 콘솔에 추가합니다.
- 6세션 쿠키의 SameSite·Secure·도메인 설정이 프로덕션에서 차단되지 않는지 확인합니다.
배포 전 확인 항목
- 프로덕션 도메인용 redirect URI를 콘솔에 등록했습니다.
- secret이 Git·클라이언트 번들·스크린샷에 노출되지 않았습니다.
- 로그인 → 보호 페이지 → 로그아웃을 프로덕션에서 한 번씩 직접 눌러 봤습니다.
- 에러 페이지에 client secret·전체 토큰이 노출되지 않습니다.
보안·법적 주의
- 개인정보 처리방침에 소셜 로그인으로 수집하는 항목(이메일·프로필 등)을 적어 두는 것이 일반적입니다. 실제 서비스 오픈 전 법무·개인정보 전문가 확인을 권합니다.
- client secret은 절대 브라우저·공개 저장소에 두지 마세요.
- OAuth scope는 필요한 최소 범위만 요청하세요. 과도한 권한은 심사·신뢰도에 영향을 줄 수 있습니다.
- 제3자 로그인 약관·이용 정책은 제공자마다 다릅니다. 상업 서비스는 각 제공자 정책을 직접 확인하세요.