![]()
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)의 필요성:로그인 성공 후, 클라이언트는 프로필 페이지 접속이나 비..
