로그인·인증수동 검토 가이드확인일 2026-07-07

구글 로그인은 나만 되는데 다른 사람은 안 될 때

나는 로그인되는데 친구·다른 계정만 실패하거나, 배포 후 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. 1콘솔에 redirect URI 등록
  2. 2env에 ID·secret·AUTH_URL
  3. 3콜백 라우트 구현
  4. 4로컬 E2E 테스트
  5. 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. 1브라우저 주소창·네트워크 탭에서 redirect_uri_mismatch, invalid_client, 404, CORS 오류 문구를 먼저 읽습니다.
  2. 2콘솔에 등록한 '로그인 후 돌아올 주소'와 실제 요청 URL을 나란히 비교합니다.
  3. 3Vercel → Project → Settings → Environment Variables에 client secret·AUTH_URL이 배포 값으로 들어갔는지 확인합니다.
  4. 4콜백 핸들러 로그에 도달하는지, 중간 미들웨어가 콜백을 막지 않는지 확인합니다.
  5. 5http와 https, www 유무, preview 도메인 차이를 의심하고 해당 URL을 콘솔에 추가합니다.
  6. 6세션 쿠키의 SameSite·Secure·도메인 설정이 프로덕션에서 차단되지 않는지 확인합니다.

배포 전 확인 항목

  • 프로덕션 도메인용 redirect URI를 콘솔에 등록했습니다.
  • secret이 Git·클라이언트 번들·스크린샷에 노출되지 않았습니다.
  • 로그인 → 보호 페이지 → 로그아웃을 프로덕션에서 한 번씩 직접 눌러 봤습니다.
  • 에러 페이지에 client secret·전체 토큰이 노출되지 않습니다.
  • 개인정보 처리방침에 소셜 로그인으로 수집하는 항목(이메일·프로필 등)을 적어 두는 것이 일반적입니다. 실제 서비스 오픈 전 법무·개인정보 전문가 확인을 권합니다.
  • client secret은 절대 브라우저·공개 저장소에 두지 마세요.
  • OAuth scope는 필요한 최소 범위만 요청하세요. 과도한 권한은 심사·신뢰도에 영향을 줄 수 있습니다.
  • 제3자 로그인 약관·이용 정책은 제공자마다 다릅니다. 상업 서비스는 각 제공자 정책을 직접 확인하세요.
OAuth로그인NextAuth소셜로그인