Next Auth

HughKim·2024년 7월 12일
0

Nextjs14

목록 보기
6/6
post-thumbnail

Next.js에서 쿠키 세션을 활용한 간편한 사용자 인증 구현

구현된 github
TEST Site
ID와 PW는 임시로 구성하였기 때문에 깃헙 Readed.md참고해주시길 바랍니다.

Next.js 애플리케이션에서 사용자 인증 및 세션 관리를 구현한 서버 사이드 코드입니다. 그리고 사용자 인증 및 세션 관리를 구현하는 예시하기 위해서 만들었습니다.

Next.js와 React를 사용하는 개발자들에게 이 코드는 안전하고 효율적인 인증 시스템을 구축하는 데 있어 훌륭한 시작점이 될 것입니다. 복잡한 인증 로직을 간소화하면서도 필요한 모든 핵심 기능을 포함하고 있어, 개발 시간을 단축하고 보안을 강화하는 데 도움이 될 것이라고 생각합니다.

코드에 대해 설명하고 싶지만 직접보는 부분이 더 좋다고 생각하여 자료를 만들면서 제가 iron-session을 사용한 이유와 주요 기능들에 대해 초점을 맞춰 설명드리겠습니다.

export const getSession = async () => {
  const session = await getIronSession<SessionData>(cookies(), sessionOptions);

  if (!session.isLoggedIn) {
    session.isLoggedIn = defaultSession.isLoggedIn;
  }

  // CHECK THE USER IN THE DB
  session.isBlocked = isBlocked;
  session.isPro = isPro;

  return session;
};

session.isBlocked = isBlocked; 이 코드는 세션 객체에 사용자의 차단 상태를 설정하는 역할을 합니다. 이를 통해 애플리케이션은 사용자가 차단되었는지 여부를 세션을 통해 확인할 수 있습니다.
이 설정은 사용자 인증 및 권한 관리에 중요한 역할을 합니다.

iron-session을 사용하여 session을 관리하였습니다.
iron-session을 사용한 이유는 다음과 같습니다.

1. 보안성 강화

  • JWT와 달리 암호화되어 사용자가 정보를 확인할 수 없습니다.
    세션 데이터가 서명되고 암호화된 쿠키에 저장되어 안전합니다.

2. 서버리스 환경 적합

  • 세션 데이터를 쿠키에 저장하여 별도의 서버 측 저장소가 필요 없습니다.
    세션을 위한 별도의 백엔드 구축이 불필요합니다.

3. 사용 편의성

  • 미들웨어 하나로 쉽게 세션 기능을 추가할 수 있어 러닝 커브가 낮습니다.
  • withIronSessionApiRoute와 같은 유용한 헬퍼 함수를 제공합니다.

4. 무상태(Stateless) 방식

  • 서버 코드에서 네트워크가 필요 없는 상태 비저장 방식으로 디코딩됩니다.
  • 세션 ID가 없어 서버 관점에서 "무상태"로 동작합니다.

5. 유연성

  • Next.js, Express 및 Node.js HTTP 서버에서 동작 가능합니다.

6. 민감한 데이터 저장

  • 데이터를 암호화하여 저장하므로 민감한 정보도 안전하게 저장할 수 있습니다.

7. 사용자 패스워드 불필요

  • 사용자 패스워드가 없어도 안전하게 암호화가 가능합니다
export const logout = async () => {
  const session = await getSession();
  session.destroy();
  redirect("/");
};

export const changePremium = async () => {
  const session = await getSession();

  isPro = !session.isPro;
  session.isPro = isPro;
  await session.save();
  revalidatePath("/profile"); 
};

주요 기능

1. 세션 관리

  • getIronSession을 사용하여 안전한 세션 관리
  • 사용자의 로그인 상태, 프리미엄 상태, 차단 상태 등을 세션에 저장

2.사용자 인증

  • login 함수를 통한 사용자 로그인 처리
  • 사용자명과 비밀번호 검증 (실제 DB 연동은 주석 처리됨)

3. 로그아웃

  • logout 함수를 통한 세션 파괴 및 로그아웃 처리

4. 사용자 정보 업데이트

  • changePremium 함수로 사용자의 프리미엄 상태 변경
  • changeUsername 함수로 사용자명 변경

5. iron-session

  • 안전한 쿠키 기반 세션 관리를 위해 iron-session 라이브러리 사용

6. revalidatePath

  • revalidatePath를 사용하여 특정 경로의 캐시 무효화
profile
성장에 미쳐버린 Frontend Developer

0개의 댓글