NEXT

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

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

사용자 생성(회원가입)에 이어, 이제 실제 인증 기능(로그인)을 구현할 차례입니다. 사용자를 로그인시키고, 로그인된 사용자를 위한 토큰(권한)을 발급받아야 합니다. 또한, 사용자가 로그인했는지 여부를 클라이언트 사이드(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 (로그..