NextAuth 로그인 (아이디, 카카오, 네이버)
1.NextAuth 란?
서론 최근 next-auth 를 사용해 로그인 기능을 구현하는 곳이 많아지고, 마침 트위터 클론 코딩에서도 next-auth를 활용하게 되면서 학습한 내용을 정리해보고자 한다. Next-Auth 란? next.js 로 개발된 페이지에서 로그인을 쉽게 구현할 수 있도
2.NextAuth 로그인 구현(1) - 프로젝트 생성 및 Prisma 설정
이전 글에서 작성했던 next-auth 내용을 바탕으로 실제 로그인 서비스를 구현해보고자 한다.프로젝트 생성에서부터 Prisma 설정, Email & PW 로그인, 카카오 & 네이버 로그인, 쿠키설정 등 차례대로 진행 할 예정이다. https://mycodin
3.NextAuth 로그인 구현(2) - 회원가입, 아이디 로그인
Next.js 앱에서 내부 API를 사용하려면 /app/api 경로에 로직을 구현하면 된다.13 버전부터는 API 파일은 route.js 로 명명해야 한다.app/api/user/route.ts 파일을 만들고https://localhost:3000/api/us
4.NextAuth 로그인 구현(3) - 유효성 검사(with JWT token)
/app/api/user/\[id] 경로에 route.ts 파일을 만들어 준다.API 에서도 페이지와 같이 Dynamic Route 를 사용할 수 있다.여기서는 \[id] 값을 slug로 사용한다.findMany 는 조건과 일치하는 데이터들을 전부 가져오는 함수이다.p
5.NextAuth 로그인 구현(4) - 커스텀 로그인 페이지
NextAuth는 로그인, 로그아웃, 에러 등 간단한 인증 페이지를 제공해 준다.기본으로 제공하는 화면들을 커스텀 페이지로 대체할 수 있는데, pages:{} 를 사용하면 된다./app/(beforeLogin)/signin 경로에 파일을 만들어준다.참고Next-Auth
6.NextAuth 로그인 구현(5) - 카카오 로그인
Next-Auth란? 에서 정리한 내용과 같이, Next-Auth 는소셜 로그인을 간편하게 구현할 수 있도록 다양한 Provider를 제공해준다.먼저, 가장 많이 사용되는 카카오 아이디 로그인 부터 적용해보고자 한다.카카오 서비스를 이용하기 위해서는 카카오 개발자 사이
7.NextAuth 로그인 구현(6) - 네이버 로그인
이전 카카오 로그인 포스팅과 같이 네이버 로그인도 어렵지 않게 구현할 수 있다.네이버 개발자 센터에서 앱 등록부터 시작해보자!먼저, 네이버 개발자 센터에 들어가 앱 등록을 해야한다.홈 페이지 > 네이버 로그인 > 오픈 API 이용 신청 > 약관동의 > 본인인증 까지 완