전체 글

비밀번호 변경 로직 추가이전 단계에서 API 라우트 보호 코드를 작성하여 요청이 인증된 사용자로부터 왔으며, 올바른 메서드(PATCH)를 사용하고 있는지 확인했다. 이제 요청에서 데이터(기존 비밀번호, 새 비밀번호)를 추출하고, 세션에서 사용자 이메일을 가져와야 한다. 데이터베이스에는 사용자의 이메일과 비밀번호가 저장되어 있으므로, 사용자를 식별하기 위해 이메일이 필요하다. 사용자 이메일은 폼 데이터에 포함되어 있지 않지만, 토큰에 인코딩되어 있으므로 세션 객체(session.user.email)를 통해 쉽게 접근할 수 있다. 기존 비밀번호와 새 비밀번호는 req.body를 통해 추출한다.이제 데이터베이스에 연결하여 다음 단계를 수행한다.이메일로 사용자를 찾는다.사용자를 찾으면 데이터베이스에 저장된 현재..

추가 인증 요구사항 분석지난 강의들을 통해 로그인, 로그아웃, 사용자 생성 기능을 구현했다. 또한 특정 페이지를 보호하고, 로그인 여부에 따라 접근 가능한 페이지를 제어하는 방법도 다루었다. 예를 들어 프로필 페이지는 로그인하지 않은 상태에서는 접근할 수 없도록 리다이렉트 처리했다. 이 모든 기능은 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..