redirect_uri_mismatch, 카카오 콜백, REST 키 | 로컬은 되고 프리뷰만 실패하면?
redirect_uri_mismatch와 카카오 KOE006은 코드가 틀린 게 아니라 요청에 실은 콜백 주소가 콘솔 등록 문자열과 한 글자라도 다른 줄입니다. http와 https, 끝 슬래시, REST 키와 JS 키, 프리뷰 호스트. 카카오, 구글, Next.js, 한국 1인 개발자 기준. 2026년 9월 카카오 로그인 REST·구글 OAuth 문서.
두 문자열을 복사해 붙여 보세요 | 코드의 redirect_uri와 콘솔 입력란을 메모장에 나란히 둡니다. 공백, 슬래시, http, 포트 3000과 3001이 가장 많이 갈립니다.
콘솔에 없는 콜백 주소는 한 글자만 달라도 거절된다
http, 슬래시, www가 다른 칸이다
카카오는 http와 https를 따로 등록합니다. 로컬은 http://localhost:3000, 프리뷰는 https://....vercel.app입니다. 로컬 URI만 있으면 배포 콜백은 거절됩니다. 포트가 3001로 바뀌어도 다른 주소입니다.
끝 슬래시가 있으면 없는 값과 다릅니다. 넥스트 trailingSlash가 콜백 경로에 슬래시를 붙이면 콘솔 값과 어긋납니다. 구글 콘솔도 슬래시까지 포함해 등록해야 합니다.
www와 apex, 커스텀 도메인과 버셀 기본 도메인도 각각 한 줄입니다. 와일드카드는 카카오가 도메인 단위로 허용하는 경우가 있어 문서 기준으로 확인하세요. 쿼리스트링을 경로에 넣으면 저장 시 잘리거나 거절됩니다. state 파라미터로 넘기세요.
로컬과 프리뷰를 둘 다 등록
# 카카오 REST API 키 > Redirect URI 예시
http://localhost:3000/api/auth/callback/kakao
https://내사이트.vercel.app/api/auth/callback/kakao
https://내사이트-git-브랜치-팀.vercel.app/api/auth/callback/kakao
# 코드의 redirect_uri는 위 문자열과 완전 일치
REST 키와 자바스크립트 키가 섞이면
카카오는 플랫폼 키마다 Redirect URI를 둡니다. 서버에서 REST로 인가 URL을 만들면 REST 키 칸에 등록해야 합니다. 프론트 SDK면 자바스크립트 키 칸입니다. 한쪽만 고치면 다른 호출은 그대로 실패합니다.
client_id에 REST 키를 넣고 URI는 자바스크립트 키에만 있으면 KOE006입니다. 네이버, 구글도 클라이언트 ID와 등록 URI가 한 세트입니다. 환경 변수에 키는 맞는데 URI만 로컬인 구성이 프리뷰에서 자주 납니다.
로그인 버튼에서 쿠키를 읽다 서버 전용 API 경고가 나는 줄은 콜백 등록과 무관합니다. 헤더와 쿠키는 서버에서 읽고, 콜백 주소는 콘솔과 맞추세요. CORS로 토큰 교환이 막히면 CORS 글입니다.
호출 방식
등록 칸
client_id
서버 REST
REST API 키 Redirect URI
REST 키
카카오 JS SDK
JavaScript 키 Redirect URI
JS 키
구글 웹
해당 클라이언트 ID의 URI
그 클라이언트 ID
호출에 쓰는 키 아래에 URI를 넣어야 한다
프리뷰 URL은 배포마다 달라진다
버셀 프리뷰 호스트는 브랜치 이름에 따라 바뀝니다. 콘솔에 프로덕션 도메인만 있으면 프리뷰 로그인은 매번 거절됩니다. 카카오는 URI를 최대 10개까지 넣는다고 안내하므로, 고정 프리뷰 도메인이나 스테이징 도메인을 따로 두는 편이 낫습니다.
환경 변수 NEXTAUTH_URL이나 공개 사이트 URL이 로컬로 남아 있으면, 코드가 localhost 콜백을 만들어 배포에서 mismatch가 납니다. 프리뷰 환경 값에 그 배포 원점을 넣으세요. 클라이언트에 안 박히는 키는 NEXT_PUBLIC 글과 칸이 다릅니다. 여기 문제는 서버가 만드는 콜백 문자열입니다.
와일드카드 도메인을 허용하는 콘솔이면 문서 범위만 쓰세요. 임의 경로를 열어 두면 열린 리다이렉트가 됩니다. 필요한 콜백 경로만 적습니다.
[ ] 요청 redirect_uri와 콘솔 값을 복사해 비교했다
[ ] http, https, 포트, 끝 슬래시를 확인했다
[ ] REST 키와 JS 키 중 실제 호출 키 칸에 등록했다
[ ] 프리뷰 호스트를 콘솔에 넣거나 고정 스테이징을 썼다
[ ] 코드가 만드는 콜백이 배포 원점을 쓰는지 봤다
실전에서 고르는 순서
에러 화면에 적힌 redirect URI를 복사합니다. 콘솔 목록에 그 문자열이 있는지 찾고, 없으면 추가합니다. 있으면 코드가 다른 키나 다른 슬래시로 보내고 있는지 봅니다.
로컬이 되면 콘솔과 코드의 로컬 값은 맞습니다. 배포만 실패면 배포 원점이 빠진 겁니다. 키를 재발급하기 전에 URI 한 줄을 맞추는 편이 빠릅니다.
한국에서 카카오 로그인을 넥스트 라우트 핸들러로 받는 구성이면, 콜백 경로를 /api/auth/callback/kakao처럼 고정하고 로컬, 스테이징, 프로덕션 세 줄을 콘솔에 넣어둡니다. 브랜치마다 호스트가 바뀌는 프리뷰는 스테이징으로 우회하는 편이 안전합니다.
