인프런 커뮤니티 질문&답변

작성한 질문수

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

카카오 로그인 구현하기 - 1

카카오로그인 에러

작성

AxiosError: Request failed with status code 401
    at settle (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:2106:12)
    at IncomingMessage.handleStreamEnd (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:3491:11)
    at IncomingMessage.emit (node:events:531:35)
    at endReadableNT (node:internal/streams/readable:1698:12)
    at process.processTicksAndRejections (node:internal/process/task_queues:90:21)
    at Axios.request (/Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/node_modules/axios/dist/node/axios.cjs:4731:41)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async /Users/sujin/Development/_00_inflearn/code/SECTION19(finalProject)/backend/routes/auth.js:77:20

카카오 로그인 버튼 클릭후 동의하기 누른 다음 이런 에러가 뜹니다.
.env 파일은 이렇게 입력되어있고요.

JWT_SECRET=sucoding!@34
KAKAO_REDIRECT_URI=http://localhost:4000/auth/kakao/callback
FRONTEND_URL=http://localhost:5173
JWT_ACCESS_EXPIRES_IN=1h
JWT_REFRESH_EXPIRES_IN=7d

무엇이 문제일까요?

react react-router redux-toolkit zustand react.js

답변 3

수코딩

지식공유자

안녕하세요!

제보해주신 내용을 바탕으로 새로운 강의를 추가해서 업로드 했습니다.

258. 카카오 개발자 페이지 변경 내용 적용하기

제보 감사합니다.

좋은 하루 되세요 🙂

hicy3nh

질문자

클라이언트 시크릿 키를 클라이언트 아이디와 동일하게 썼었는데, 현재 카카오개발자 페이지가 달라지면서 클라이언트 시크릿 코드를 정확히 넣어줘야 합니다.

앱 > 플랫폼 키 > REST API > 클라이언트 시크릿 > 카카오 로그인 > 코드 를 .env의 클라이언트시크릿에 넣으니 작동 됩니다.

수코딩

지식공유자

안녕하세요!

확인해보니 카카오 개발자 페이지가 변경이 되어서 말씀해주신 부분이 정확합니다.

다만, '서비스의 보안 강화를 위해 클라이언트 시크릿 기능은 REST API 키 발급 시 기본 활성화 상태로 설정되며, 사용을 원하지 않는 경우 직접 비활성화 상태로 변경해야 합니다.' 라고 안내 되어 있어서 비활성화를 하면 기존처럼 진행이 가능한 부분으로 확인 됩니다.

해당 부분은 빠르게 강의 내용에 반영할 수 있도록 하겠습니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. hicy3nh님.

카카오 로그인 버튼 클릭 후 발생하는 401 오류는 인증 문제와 관련되어 여러 가지 원인일 수 있습니다. 아래에 몇 가지 주요 점검 사항을 안내드리겠습니다.

주요 점검 사항:

REST API 키 확인
- 카카오 REST API 키가 서버에서 올바르게 설정되었는지 확인하세요. 통상적으로 .env 파일에 설정됩니다.
리다이렉트 URI 일치 확인
- 카카오 개발자 콘솔에서 설정한 리다이렉트 URI와 코드 내에 설정된 KAKAO_REDIRECT_URI가 서로 일치해야 합니다. 불일치 시 401 오류가 발생할 수 있습니다.
앱 설정 확인
- 카카오 디벨로퍼스 페이지에서 앱이 활성화되어 있고, 로그인 기능이 올바르게 설정되어 있는지 확인하세요.
엑세스 토큰 발급 요청
- 동의 이후 엑세스 토큰을 발급받는 API 요청이 올바르게 진행되는지 확인해 보세요. 엑세스 토큰 발급 단계에서 오류가 발생하면 인증 실패로 이어질 수 있습니다.
서버 로그 확인
- 서버의 로그를 확인하여 보다 구체적인 오류 메시지를 확인할 수 있습니다. 이는 문제 원인을 파악하는 데 큰 도움이 됩니다.

401 오류는 주로 인증 오류를 의미하므로 위의 항목들을 차례대로 점검하여 문제가 발생하는 부분을 찾아 수정하시길 바랍니다.

추가적인 도움말:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

hicy3nh

작성한 질문수

전체 Q&A

질문하기