Next.js 에서 소셜 로그인 구현하기 (next-auth.js 사용)

Next.js 에서 next-auth 라이브러리 사용하여 소셜 로그인을 구현하는 글 입니다.

소셜 로그인(카카오, 네이버) 과 커스텀 로그인 두가지 모두 구현해보겠습니다.

 

 

next-auth

next-auth 라이브러리는 쉽게 인증 로직을 구현하기 위한 Next.js 전용 라이브러리입니다.

모든 OAuth 서비스와 함께 작동하도록 설계되었으며 OAuth 1.0 , 1.0A , 2.0 및 OpenID Connect를 지원 하며 가장 널리 사용되는 로그인 서비스를 기본적으로 지원합니다.

OAuth 동작 과정에 대해서는 이곳을 참고하세요

 

물론 인증 로직을 직접 구현해도 되지만, 쉽고 빠르게 할 수 있는 라이브러리를 쓰면 정신 건강에 이롭습니다.

NextAuth.js

 

현재는 Auth.js 라는 새로운 이름으로 변경되어 Next.js 뿐만 아니라 SolidStart, SvelteKit 에서도 지원하기 위해 개발 진행 중입니다.

Auth.js는 본 게시물 포스팅 시점 기준으로 0.4.0 버전 릴리즈 되었고, 공식 문서에 EXPERIEMNTAL 공지가 되어 있어서 아직은 next-auth  를 사용하는게 좋을 듯 합니다.

• https://www.npmjs.com/package/next-auth ✅
• https://www.npmjs.com/package/@auth/core 🚧👷‍♂️

 

과정 요약

얼마나 과정이 간단한 지 보십시오.

 

서버 (next.js api router 를 사용)

• Provider의 개발자 포털에서 애플리케이션을 등록하고 리다이렉션 URI 설정 및 Key를 발급 받습니다.
  • 리다이렉션 URI 은 /api/auth/callback/[provider] 와 같은 형태가 되어야 합니다.
    • 로컬 예시 : http://localhost:3000/api/auth/callback/twitter
    • 프로덕션 예시 : https://next-auth-example.vercel.app/api/auth/callback/google
  • key는 .env 파일에 안전하게 보관합니다.
• pages/api/auth/[...nextauth].ts 파일 생성하고 NextAuth 의 providers에 원하는 OAuth provider를 추가해줍니다.

 

클라이언트

• _app.tsx 파일에서 리액트 앱 최상위 요소를 SessionProvider 로 감싸줍니다.
• 로그인 페이지에서 signIn(), signOut() : 로그인, 로그아웃 실행 함수를 호출합니다.
• 로그인 정보를 불러오고 싶다면 useSession() hook을 호출합니다.

참고로 로그인 시 토큰이 쿠키에 저장되기 때문에 쿠키가 만료되지 않으면 새로고침 시에도 로그인이 유지됩니다.

그리고 리액트 앱 최상위 요소를 SessionProvider 로 감싸주었기 때문에 DOM 어디서든 session 정보를 가져와서 사용 가능합니다.

 

 

🎉

이게 끝입니다! 얼마나 간단합니까?  👏👏👏  

이후로는 상세하게 과정 하나하나 살펴보겠습니다.

 

 

개발 환경

본 게시물 에서는 next 13 버전에서 pages 디렉토리 방식을 사용합니다.

"next": "13.1.3", 
"next-auth": "^4.19.2",

 

카카오 소셜 로그인

Kakao Developers 에 접속합니다.

Kakao Developers

 

회원가입 후 애플리케이션 등록을 해줍니다.

 

내 애플리케이션 - 앱설정 - 앱키 탭에 들어가서 REST API 키를 복사합니다.

 

내 애플리케이션 - 제품 설정 - 카카오 로그인 - 보안 탭에 들어가서 Client Secret 코드를 발급 받습니다.

그리고 Client Secret 코드를 복사합니다.

그리고 내 애플리케이션 - 제품 설정 - 카카오 로그인 탭에 들어가서 Redirect URI 등록 합니다.

• http://localhost:3000/api/auth/callback/kakao

 

끝났습니다. 아까 복사한 키를 .env 파일에 넣어줍니다.

// .env
KAKAO_CLIENT_ID=RESTAPI키
KAKAO_CLIENT_SECRET=보안키

 

서버

• providers 배열에 KakaoProvider 를 추가해줍니다.

 

클라이언트

• 리액트 앱 최상위 요소를 SessionProvider 로 감싸줍니다.

• 로그인 페이지에서는 signIn("kakao") 로 로그인, signOut() 으로 로그아웃 가능합니다.
• useSession() 을 통해 로그인한 유저의 정보를 가져올 수 있습니다.

 

 

 

네이버 소셜 로그인

Naver Developers 에 접속합니다.

NAVER Developers

 

회원가입 후 애플리케이션 등록 해줍니다.

애플리케이션 등록시 필요한 유저 정보를 선택 해줍니다.

그리고 서비스 URL 과 네이버 로그인 Callback URL을 추가로 설정해줍니다.

 

내 애플리케이션 페이지에 들어가면 정보를 볼 수 있습니다.

거기서 Client ID 와 Client Secret 를 복사하여 .env 파일에 추가해줍니다.

// .env
NAVER_CLIENT_ID=클라이언트ID
NAVER_CLIENT_SECRET=클라이언트시크릿

 

서버

• providers 배열에 KakaoProvider 를 추가해줍니다.

 

클라이언트

• 리액트 앱 최상위 요소를 SessionProvider 로 감싸줍니다.
• 로그인 페이지에서는 signIn("kakao") 로 로그인, signOut() 으로 로그아웃 가능합니다.
• useSession() 을 통해 로그인한 유저의 정보를 가져올 수 있습니다.

 

 

커스텀  로그인

서버

• providers 배열에 CredentialsProvider 를 추가해줍니다.
• 설명은 코드의 주석 참고 바랍니다.

 

Provider 마다 제공하는 정보가 다르고 변수명이 달라서 그런지 next-auth 의 session 은 아래와 같이 3가지 공통 정보만 다룹니다.

그런데 실제론 저 셋 말고도 다른 정보를 세션이 넣어서 사용하고 싶을 수 있습니다. (아까 소셜 로그인에서도 마찬가지입니다.)

그래서 Session 타입을 재정의 해줘야 합니다.

types/next-auth.d.ts 파일을 만들어서 아래와 같이 원하는 형태로 재정의 해줄 수 있습니다.

 

마지막으로 로그인 폼을 만들어줍니다.

주목할 부분은 signIn("credentails") 의 두번째 매개변수(옵션) 안에 유저가 입력한 정보가 넘어간다는 것 입니다.

 

결과

로그인 전 화면

 

로그인 후 화면

 

/login 페이지 접근 제어

로그인 완료한 유저는 /login 페이지에 접근하면 안됩니다.

그래서 로그인 접근 제어 하는 기능도 마지막으로 추가해보겠습니다.

 

미들웨어를 사용하면 요청이 완료되기 전에 코드를 실행할 수 있으며 들어오는 요청에 따라 요청 또는 응답 헤더를 다시 작성, 리디렉션, 수정하거나 직접 응답하여 응답을 수정할 수 있습니다.

 

Advanced Features: Middleware | Next.js

 

middleware.ts 파일을 추가해줍니다. 그냥 / 경로에 추가해주면 됩니다. 🎉