Nextauth

사용자 로그인을 위해서 nextAuth를 사용합니다. 백엔드(라우터 핸들러)에서도 사용할 수 있고 프론트앤드에서도 사용합니다. 양방향으로 지원해주고 있기 때문에 nextAuth를 사용하면 서버라우터 뿐만아니라 미들웨어, 프론트앤드까지 Auth를 구현할 수 있습니다.

Next.js는 풀스택 라이브러리 입니다. 서버상에는 api라우트([…next.auth].ts)라는 다이나믹 라우터를 설정했습니다. 그건 서버상에서 로그인에 관련된 다양한 api를 처리하기 위해서 설정해두었습니다. 이 파일을 설정만 해두면 nextAuth라이브러리가 자동적으로 서버상에서 필요한 api라이브러리를 자동으로 구현해줍니다.

그리고 프론트앤드상으로는 로그인한 사용자의 정보를 확인할 수 있는 useSession과 같은 hook을 제공해주고 로그인, 로그아웃과 같은 다양한 함수들을 제공해줘서 클라이언트에서도 손쉽게 로그인 처리를 할 수 있도록 해주었습니다.

그래서 내부적으로 nextAuth가 어떻게 동작하는지 어떤 api라우터, 함수를 구현하는지 전혀 신경쓰지 않아도 nextAuth에서 제공해주는 login을 이용해서 손쉽게 로그인을 했습니다. 내부적으로는 nextAuth서버에 요청을 보내서 반응을 받아서 쿠키에 저장하는 처리를 해줄겁니다.

nextjs 내부적으로 jwt토큰을 사용합니다. request와 response사이에 클라이언트와 서버간의 커뮤니케이션에 상태가 없는 stateless request를 구현하고 있습니다. frontend에서 backend에게 로그인하고 싶다고 요청을 보내면 request가 전달이 됩니다. 로그인을 하지않는 상태로 api 요청을 하게 되면 request안에는 사용자의 로그인 정보가 없습니다. 요청과 반응에는 항상 헤더 부분에 쿠키와 같은 것을 설정할 수 있는데 쿠키안에 로그인한 사용자의 정보를 붙여서 보내줍니다. 처음에 로그인 요청을 하면 request 헤더에는 아무것도 들어있지 않습니다. 로그인한 사용자의 정보가 없기때문입니다. request요청이 성공적으로 적용이 되면 서버가 프론트 앤드에게 response를 보내줍니다. 헤더안에 쿠키라는 정보의 객체에 jwt 토큰을 함께 보내줍니다. 앞으로 api요청을 할때 jwt 토큰을 사용하면 로그인한 사용자로 인식합니다.