next-auth 적용하여 소셜 로그인 구현하기

NextJS 에서 next-auth 라는 라이브러리를 이용하면 google , facebook , naver 같은 소셜 로그인 기능을 쉽게 관리 및 추가 할 수 있습니다.

이번 포스트에서는 next-auth 를 통해 소셜 로그인을 구현하는 방법에 대해서 알아보겠습니다.

먼저 nextjs 프로젝트 셋팅을 진행 한 뒤 next-auth 라이브러리 설치를 진행해줍니다.

pages/api 경로에 auth 폴더를 생성하고 그 안에 [...nextauth].js 파일을 생성 한 뒤 next-auth 관련 설정 작성합니다.

원하는 소셜로그인의 provider를 providers 객체에 추가해줍니다. 여기서는 google 로그인을 기능을 위해 GoogleProvider를 추가하겠습니다.

next-auth/react 에서 제공하는 SessionProvider로 Component를 감싸 nextjs에서 useSession 훅을 통해 session 정보를 접근 할 수 있도록 합니다.

기본 설정은 완료 됬으니 이제 실제 로그인 그리고 로그아웃 하는 방법에 대해서 알아보겠습니다.

어려운거 없습니다 그저 next-auth/react 에서 제공하는 signIn , signOut 그리고 useSession 을 활용하면 됩니다.

signIn

signIn 함수를 실행하면 로그인을 진행 할 수 있는데요. 해당 함수를 그냥 실행하며 [...nextauth.ts] 에 설정해둔 소셜의 로그인 버튼들이 별도의 페이지를 통해 나타나게 됩니다.

만약 특정 소셜의 로그인을 실행하고 싶은 경우 signIn 함수에 소셜이름을 전달하시면 됩니다.

signOut

로그아웃을 하고 싶다면 signOut 함수를 실행하면 됩니다.

useSession

useSession 에서는 data 와 status 값을 제공해줍니다.

data 는 유저 정보를 제공하며 status 는 유저의 로그인 여부 값을 문자열로 형태로 제공해줍니다.

코드를 실행하면 아래와 같이 작동하게 됩니다.

next-auth를 통해 간단하게 소셜 로그인을 구현하는 방법에 대해서 알아봤습니다. provider 설정 외에 db에 연동하여 회원 정보를 저장 그리고 로그인 성공 여부 관련 설정 등등 여러 설정을 진행 할 수 있어 아주 유용하다고 생각됩니다.

또한 사용하기 쉽기 때문에 NextJS 에서 빠르게 로그인을 구현하고자 한다면 라이브러리 사용을 추천드립니다.