개발 노트

NextAuth 로그인 본문

React

NextAuth 로그인

한츄 2024. 12. 3. 10:18

https://velog.io/@jae_han_e/next-auth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%841

 

NextAuth 로그인 구현(1) - 프로젝트 생성 및 Prisma 설정

이전 글에서 작성했던 next-auth 내용을 바탕으로 실제 로그인 서비스를 구현해보고자 한다.프로젝트 생성에서부터 Prisma 설정, Email & PW 로그인, 카카오 & 네이버 로그인, 쿠키설정 등 차례대로 진

velog.io

 

https://velog.io/@jae_han_e/naxt-auth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%842

 

NextAuth 로그인 구현(2) - 회원가입, 아이디 로그인

Next.js 앱에서 내부 API를 사용하려면 /app/api 경로에 로직을 구현하면 된다.13 버전부터는 API 파일은 route.js 로 명명해야 한다.app/api/user/route.ts 파일을 만들고https://localhost:3000/api/us

velog.io

 

https://velog.io/@jae_han_e/next-auth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%843

 

NextAuth 로그인 구현(3) - 유효성 검사(with JWT token)

/app/api/user/\[id] 경로에 route.ts 파일을 만들어 준다.API 에서도 페이지와 같이 Dynamic Route 를 사용할 수 있다.여기서는 \[id] 값을 slug로 사용한다.findMany 는 조건과 일치하는 데이터들을 전부 가져오

velog.io

https://velog.io/@jae_han_e/naxt-auth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%844

 

NextAuth 로그인 구현(4) - 커스텀 로그인 페이지

NextAuth는 로그인, 로그아웃, 에러 등 간단한 인증 페이지를 제공해 준다.기본으로 제공하는 화면들을 커스텀 페이지로 대체할 수 있는데, pages:{} 를 사용하면 된다./app/(beforeLogin)/signin 경로에 파

velog.io

https://velog.io/@jae_han_e/next-auth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%845

 

NextAuth 로그인 구현(5) - 카카오 로그인

Next-Auth란? 에서 정리한 내용과 같이, Next-Auth 는소셜 로그인을 간편하게 구현할 수 있도록 다양한 Provider를 제공해준다.먼저, 가장 많이 사용되는 카카오 아이디 로그인 부터 적용해보고자 한다.

velog.io

https://velog.io/@jae_han_e/next-auth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%846

'React' 카테고리의 다른 글

next14 - next-auth v5  (0) 2024.12.09
Next auth와 Bearer 토큰  (0) 2024.11.28
next-auth  (2) 2024.10.31
CMAN BUILD  (0) 2024.09.02
Next.js 구글번역을 이용한 웹페이지 번역  (0) 2024.08.05