_app.tsx에서 session을 접근하고 싶어요.

최근에 NextAuth를 사용했던 경험이 있어서 간단한 답변을 달아봅니다. 일단 pageProps의 session이 undefined면 어딘가 설정이 잘못된게 아닌가 의심스럽네요. 아래 공식문서를 읽어보시면 pageProps로 정상적으로 session 정보를 넘길수 있습니다. https://next-auth.js.org/getting-started/client#sessionprovider 다만 앱이 처음 랜더링되고 나서 서버에서 session 정보를 받아오기전까지 props상에서 undefined가 찍혀있을수 있습니다. 이런 점들로 인해 page단에서 이런 값으로 처리하기엔 랜더링 타이밍에 따른 이슈가 있을수 있습니다. 권한이 없으면 라우팅하는 로직일 경우 -> session 정보가 업데이트 되기전까지 노출될 수 있음, 권한이 있으면 라우팅하는 로직인 경우 -> session 정보가 업데이트 되면 다른 곳에 있다가 해당 페이지로 rewrite 됨 그래서 위에 2가지 모두 UX적으로 별로인 상황입니다. 따라서 _app에서 특정페이지로의 이동보다는 [...nextauth] 내부의 callbacks에서 해당 값을 확인하신 후에 redirect 처리하는 것을 추천합니다. https://next-auth.js.org/configuration/callbacks#sign-in-callback

안녕하세요! next-auth를 사용해서 _app.tsx로 session을 넘겨주려면 서버사이드 코드가 필요한 것으로 알고 있습니다. 서버에서 session 값을 받기 전까지는 클라이언트에서 undefined가 찍힐 수는 있을 것 같아요. ex) /posts 페이지의 getServersideProps에서 next-auth의 getSession을 호출한 뒤, session 데이터를 클라이언트 pageProps로 보내줌. _app.tsx의 pageProps로 접근가능. session 값에 따라 redirect하는 로직은 구현할 수 있는 위치가 많을 것 같습니다. 클라이언트, 서버사이드 (nextjs getServersideProps, nextjs middleware, next-auth callback) 모두 가능하고 각각의 장단점을 파악하신 뒤 하나 선택하시면 될 것 같습니다. 위 예시에서는 간단하게 /posts 페이지의 getServersideProps에서 session이 없을 시 redirect 하는 로직을 구현할 수 있을 것 같습니다. 범용적인 인증 및 redirect 로직이 필요하다면 next v12부터 지원하는 middleware로 구현이 가능하다고 하네요. edge runtime 환경의 제한으로 아직은 jwt를 활용한 session 방식만 지원한다고 합니다. - https://next-auth.js.org/configuration/nextjs#middleware 질문자님의 케이스처럼 인증 후 부가적인 로직을 돌릴 때 next-auth에서 제공하는 callback 함수도 유용합니다. next-auth 공식 문서를 참고해보시면 좋을 것 같아요 :) - https://next-auth.js.org/configuration/callbacks