NextAuth.js 깔끔하게 custom login 만들기

NextAuth custom authentication with NextJS app directory and TypeScript

• NextAuth.js 가 Auth.js로 옮겨가고 있는 중이라 email과 password로 custom login을 만들 때 CredentialsProvider를 활용하는 자료를 참고하기 어려운 점이 있습니다. 그리고 옮겨가고 중(?)이 상당히 오래 지속되는 것 같습니다.

• email과 password로 독자적인 authentication을 요구하는 클라이언트가 있었습니다. 구현해 보신분들은 아시겠지만 백엔드 도움없이 headless CMS만으로 cusmtom login을 프론트엔드에 반영해 구현하기가 생각보다 까다로웠습니다. NextAuth.js 자료 참고하려고 하면 app directory를 사용하는 현재 상황에 맞지 않는 철지난 자료 위주로 되어 있고, Auth.js자료를 참고하려고 하면 최신 자료지만 아직 자료가 부실한 악순환이 계속되었습니다.

• 우연히 깔끔하게 정리된 자료를 발견하고 활용해서 성공적으로 production에 반영한 경험이 있어 공유합니다.

• 해당 블로그에는 authencation 외에도 주옥같은 자료들이 많으니 참고하시면 좋을 것 같습니다. 블로그의 외양(?)에 비해 정말 좋은 자료들이 있습니다.^^

• 아래의 두 자료를 병행해서 참고하시면 좋습니다.

• NextAuth로 Custom Login 만들기

https://codevoweb.com/nextjs-use-custom-login-and-signup-pages-for-nextauth-js/

• NextAuth 기본적인 셋업 방법

https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/