구현과정
NextAuth 설정
src > app > api > auth > [...nextauth] > routs.ts경로에 아래와 같이 설정
providers에 원하는 providers 설정.
Context 생성
- AuthContext를 만들어서 layout에 적용해주기
구글, 카카오, 네이버 애플리케이션 설정
각각 공급자 애플리케이션 설정에서 CLIENT ID 혹은 앱키, SECRET 발급 받아 환경변수 설정해주기(env 설정 후에는 프로젝트를 재시작해야 적용됨)
구글(https://console.cloud.google.com/apis/dashboard)
-
구글 API 및 서비스로 이동 >. 사용자 인증정보 만들기> OAUTH 클라이언트 ID클릭
-
나중에 배포하면 배포주소 넣어주면 된다.현재는 개발중이므로 localhost사용.
-
그리고 리디렉션 URI을 넣어주어야함.
발생할 수 있는 에러
- env.local의 NEXTAUTH_URL과 구글 애플리케이션 설정시 URI에는 https로 했더니 아래와 같은 에러가 발생함
- 현재 로컬서버는 http로 돌아가고 있음. http로 통일 해주어야함!!
- 카카오, 네이버도 모두 동일하다.
카카오
(https://developers.kakao.com/console/app)
-
애플리케이션을 생성해준다.
-
플랫폼 > Web에 도메인을 입력해준다.
-
Redirect URI을 동록해준다. 등록하러가기 버튼 클릭
-
Redirect URI 수정(http://localhost:3000/api/auth/callback/kakao)
-
앱으로 이동 > 앱 키> JS키 --> 이놈을 KAKAO_CLIENT_ID로 환경변수 적용해주면 됨.
-
카카오 로그인 ON, 활성화 상태 사용함으로 설정
-
SECRET은 카카오로그인 > 보안 > Client Secret의 코드 확인!
-
동의항목에서 사용할 항목들 필수 동의로 설정. 끝.
네이버(https://developers.naver.com/apps/#/wizard/register)
-
애플리케이션 생성
- 계정 등록 먼저 해준다.- 애플리케이션 등록 페이지에서 사용할 API(별명, 프로필사진 등) 체크
- 서비스 환경 설정해주기 > PC 웹 > 서비스 URL, 콜백 URL 입력(http://localhost/api/auth/callback/naver)
-
CLIENT ID와 SECRET 확인하여 환경변수 설정해주면 끝
자신이 운영하는 사이트의 Callback URL을 모르는 경우 참고
- 오류 메세지 화면에서 개발자 콘솔로 이동
- new URL(document.referrer).searchParams.get("redirect_uri") 작성후 Enter 입력
- 명령어 실행 후 반환된 Redirect_uri 확인
- 확인되는 REDIRECT_URI를 애플리케이션에 Callback URL로 입력!
프론트
공식 문서에 나와있는 코드로 테스트.
로그인이 안된 경우에는 버튼 onClick 핸들러에 signIn(), 되어있는 경우 signOut()을 적용해준다.
로그인 페이지로 왔을때, session이 없으므로 Signin버튼이 나타난다.
클릭하면 소셜로그인 창이 나타난다.
클릭시 문제가 없는경우 계정 선택후 로그인이 실행된다.
카카오 로그인 에러
리디렉션 URI 설정 잘못하면 요런 화면이 나타날 수 있음. 구글 설정할때와 마찬가지로 http/ https 프로토콜 뭘로 썼는지 잘 확인
네이버 로그인 에러
마찬가지로 env에 NEXTAUTH_URL에과 애플리케이션 설정에 프로토콜이 일치하지 않는 경우!
