reese.dev

Next-auth를 사용한 소셜 로그인 구현기

date
Jan 24, 2024
slug
next-auth-social-login
author
status
Public
tags
Next.js
summary
type
Post
thumbnail
스크린샷 2024-04-07 오후 11.37.41.png
category
updatedAt
Apr 7, 2024 02:37 PM

Next-auth

Next-auth 라이브러리는 Next.js 로 구현되어 있는 페이지에서 로그인을 쉽게 구현할 수 있도록 관련 기능을 제공하는 3rd Party 라이브러리입니다. Next.js환경에서 OAuth인증을 편리하게 하기 위한 목적으로 사용합니다.
Next.js를 제작한 vercel에서 제공하는 오픈소스 라이브러리여서 지속적인 업데이트가 보장됩니다.
모든 OAuth 서비스와 작동하도록 설계되었으며 OAuth 1.0, 1.0A, 2.0 및 OpenID Connect를 지원합니다. JSON 웹 토큰과 데이터베이스 세션을 모두 지원합니다. (어떤 방식을 사용할지는 optional)
 
notion image
 

로그인 플로우

  1. 사용자가 구글 로그인 버튼을 클릭합니다.
  1. 클라이언트는 구글 oauth 서버에 인증 요청을 합니다.
  1. 인증이 완료되면 user, account 정보가 포함된 response를 전달받습니다.
  1. 이때 받아온 정보로 냥집 서버에 기존 가입여부 확인 API를 호출 합니다.
    1. 가입된 계정이 없으면 약관동의 화면을 보여줍니다. 동의할 경우 냥집 회원가입 + 냥집 로그인 API를 호출합니다.
    2. 계정이 있고 같은 provider라면 냥집 로그인 API를 호출합니다.
    3. 계정이 있고 다른 provider면 기가입 계정 안내 화면을 보여줍니다.
        4. 참고 이미지
        notion image
      1. 기존 계정으로 로그인 버튼 클릭시 해당 provider를 통해 oauth 서버에 인증을 요청합니다. (2번으로 돌아가 차례대로 재진행)
 

구글 OAuth에서 전달받는 user, account 필드

user {
  id: '12345678',
  name: 'reese (reese)',
  email: 'notyaeji@gmail.com',
  image: 'https://이미지주소'
}
account {
  provider: 'google',
  type: 'oauth',
  providerAccountId: '104064566949345986834',
}
 

Next-auth의 장점(from GPT)

  1. JWT 및 데이터베이스 지원: 라이브러리는 세션 관리를 위해 JWT(JSON 웹 토큰)를 사용하거나 데이터베이스에 세션을 저장할 수 있습니다. 이러한 유연성을 통해 개발자는 자신의 애플리케이션 요구 사항에 가장 적합한 접근 방식을 선택할 수 있습니다.
  1. 사용자 정의 옵션: 서비스의 상황에 맞게 로그인 페이지, 콜백 및 데이터베이스 모델을 정의할 수 있습니다.
  1. 보안 중심: 라이브러리는 CSRF 보호 및 보안 쿠키와 같은 기능을 통해 보안을 중요하게 생각합니다. 보안 인증 및 세션 관리의 복잡성을 처리하여 일반적인 보안 함정의 위험을 줄입니다. OAuth 구현의 일반적인 취약점에 대한 보호와 같은 강력한 보안 조치가 포함되어 사용자 데이터 및 인증 프로세스의 보안을 보장합니다.
  1. 쉬운 세션 관리: 프런트엔드에서 손쉬운 세션 관리를 위해 useSession과 같은 hook을 제공하여 개발자가 애플리케이션 전체에서 사용자 세션 데이터에 원활하게 접근할 수 있도록 합니다.
 

지원하는 소셜로그인 항목

notion image
외에 더 있음.