NextJS/NextAuth

추가 인증 요구사항 분석지난 강의들을 통해 로그인, 로그아웃, 사용자 생성 기능을 구현했다. 또한 특정 페이지를 보호하고, 로그인 여부에 따라 접근 가능한 페이지를 제어하는 방법도 다루었다. 예를 들어 프로필 페이지는 로그인하지 않은 상태에서는 접근할 수 없도록 리다이렉트 처리했다. 이 모든 기능은 Next Auth 패키지와 세션 관리 기능을 통해 작동한다. 여기서 말하는 '세션'은 Next Auth가 자동으로 관리하는 JSON Web Token(JWT)을 의미한다. 이 토큰은 브라우저 쿠키에 저장되며, Next Auth는 이 쿠키를 확인하여 활성 세션 여부를 판단한다. 프론트엔드에서 getSession을 호출하거나 useSession 훅을 사용할 때 일어나는 일이 바로 이 쿠키 확인 과정이다. 하지만 ..

애플리케이션의 규모가 커질수록 최적화는 중요한 고려 사항이 된다. 현재 구현된 인증 로직은 MainNavigation 등 여러 컴포넌트에서 useSession 훅을 사용하고 있다. 하지만 특정 상황에서 중복된 인증 확인 과정이 발생하는 문제가 있어 이를 최적화하는 방법을 다룬다. 1. 중복된 세션 확인 문제사용자가 로그인된 상태에서 프로필 페이지(profile)에 접속하거나 새로고침을 한다고 가정해보자.서버 사이드 확인: 페이지가 로드되기 전 getServerSideProps 함수가 실행되어 사용자의 인증 여부를 확인한다.클라이언트 사이드 확인: 페이지 로드 후, MainNavigation 컴포넌트 내의 useSession 훅이 실행되어 다시 한번 세션 존재 여부를 파악한다.개발자 도구의 Network ..

https://codesmoothie.tistory.com/81 [NextAuth] 클라이언트 사이드 페이지 가드 (라우트 보호) 추가하기 - 6로그인하지 않은 사용자는 /profile과 같은 특정 페이지에 접근할 수 없어야 합니다. 만약 해당 페이지에 머무르는 중에 로그아웃을 클릭한다면, 즉시 다른 페이지로 리디렉션되어야 합니다.NextAutcodesmoothie.tistory.com 이전 포스팅에서 클라이언트 사이드 코드를 사용하여 프로필 페이지를 보호했습니다. 로그인하지 않은 사용자가 /profile로 접근하면 /auth 페이지로 리디렉션했습니다. 하지만 이 방식에는 문제가 있습니다. 로그인하지 않은 상태로 /profile 페이지에 직접 URL을 입력하여 접속하면, 잠시 "Loading..." 메시..

로그인하지 않은 사용자는 /profile과 같은 특정 페이지에 접근할 수 없어야 합니다. 만약 해당 페이지에 머무르는 중에 로그아웃을 클릭한다면, 즉시 다른 페이지로 리디렉션되어야 합니다.NextAuth를 사용하여 이러한 클라이언트 사이드 페이지 보호를 구현할 수 있습니다. useSession을 사용시 문제점NextAuth에서 페이지를 보호하는 가장 먼저 떠오르는 방법은 useSession 훅을 사용하는 것입니다. 이 훅은 세션 데이터와 로딩 상태를 반환합니다. 이론적으로는 로딩 중일 때 로딩 UI를 보여주고, 로딩이 끝난 후 세션이 없으면 리디렉션하면 됩니다. NextAuth v3 (next-auth/client)// user-profile.js (NextAuth v3)import { useSess..

https://codesmoothie.tistory.com/79 [NextAuth] 로그인 API 구현 [...nextauth].js - 4사용자 생성(회원가입)에 이어, 이제 실제 인증 기능(로그인)을 구현할 차례입니다. 사용자를 로그인시키고, 로그인된 사용자를 위한 토큰(권한)을 발급받아야 합니다. 또한, 사용자가 로그인했codesmoothie.tistory.com이전 블로그에서 로그인 API를 작성했지만, 현재 프론트엔드 컴포넌트 로직은 없습니다. 이번 포스팅에서는 React 컴포넌트에서 어떻게 NextAuth와 연동하여 로그인, 로그아웃 기능을 만들 수 있는지 작성하겠습니다. NextAuth에서는 직접 HTTP 요청을 보낼 필요가 없습니다. 대신 NextAuth v3의 경우 next-auth/cl..

사용자 생성(회원가입)에 이어, 이제 실제 인증 기능(로그인)을 구현할 차례입니다. 사용자를 로그인시키고, 로그인된 사용자를 위한 토큰(권한)을 발급받아야 합니다. 또한, 사용자가 로그인했는지 여부를 클라이언트 사이드(UI 변경, 특정 라우트 접근 제한)와 서버 사이드(API 라우트) 양쪽에서 확인할 수 있어야 합니다.이 과정에서 이전에 설치한 NextAuth 패키지가 핵심적인 역할을 합니다. NextAuth는 사용자 인증 과정을 돕고, 토큰 생성 및 저장을 백그라운드에서 관리하여 사용자가 권한을 가졌는지 쉽게 확인할 수 있게 해줍니다. [...nextauth].js API 라우트 설정NextAuth를 사용하기 위해 먼저 새로운 API 라우트를 추가해야 합니다. 로그인은 결국 사용자의 정보를 받아 데이터..

https://codesmoothie.tistory.com/77이전 포스팅에서 회원가입(SignUp) API 라우트를 구현했습니다. 이제 프론트엔드에서 이 API를 호출하도록 연동합니다. 폼 제출(submission) 시, '로그인' 모드가 아닌 '계정 생성' 모드일 때 백엔드에 사용자 생성을 요청해야 합니다. 1. 폼 제출 핸들러: submitHandler 구현폼 제출 이벤트를 처리하기 위해 submitHandler 함수를 생성하고, 이를 요소의 onSubmit 속성에 연결합니다. 먼저 event.preventDefault()를 호출하여 폼 제출 시 발생하는 기본 동작(페이지 새로고침)을 방지합니다. submitHandler 내에서는 isLogin 상태값을 확인합니다.isLogin이 true (로그..

NextAuth3로 진행된 내용입니다. NextAuth는 인증 및 세션 관리에 도움을 주지만, 자체 사용자 계정 시스템을 운영할 경우 사용자 생성 로직은 직접 구현해야 합니다. NextAuth는 이미 존재하는 사용자를 인증하고 토큰을 발급하는 데 사용되며, 그 사용자를 생성하는 것은 우리의 몫입니다.이 과정에서는 사용자 계정 생성을 위한 API 라우트를 구축합니다. 이 API는 이메일과 비밀번호를 입력받아 데이터베이스에 사용자를 저장하는 역할을 합니다. 데이터베이스 선택 및 설정데이터베이스는 MongoDB를 사용합니다. MongoDB Atlas는 시작하기에 비용이 들지 않고, JavaScript와 함께 사용하기 쉬우며, 호스팅까지 해결해 주므로 편리합니다. (물론 다른 데이터베이스를 사용해도 무방합니다...

인증의 기본적인 원리웹 애플리케이션에서 인증의 핵심 아이디어는 항상 동일합니다. 사용자(클라이언트, 브라우저)가 서버에 접근하여 자신의 신원을 증명하고, 서버는 이 신원을 확인하여 보호된 리소스에 대한 접근 권한을 부여하는 것입니다. 클라이언트와 서버의 상호작용:사용자가 로그인 폼에 이메일, 비밀번호와 같은 자격 증명을 입력하고 '로그인'을 클릭합니다.클라이언트(브라우저)는 해당 데이터를 담은 요청을 서버로 전송합니다.서버는 데이터베이스에 접근하여 해당 이메일 주소의 계정이 존재하는지, 입력된 비밀번호가 저장된 비밀번호와 일치하는지 검증합니다.검증에 성공하면, 서버는 클라이언트에게 인증 성공 응답을 보냅니다.권한 증명(Permission)의 필요성:로그인 성공 후, 클라이언트는 프로필 페이지 접속이나 비..