백엔드 토큰 저장 위치

Question

안녕하세요 제로초님! 1) 백엔드에 데이터 요청 시 필요한 쿠키(로그인 후 발급되는 액세스토큰)을 브라우저에 저장해서 사용해야한다고 하셨고, 저 또한 이전에 리액트로만 개발했을 때 그렇게 진행했었는데요, next.js가 아직 서툴고 next-auth의 역할이 완전이 이해가 되지 않아서 조금 헷갈리는 부분이 있습니다. 저는 백엔드에서 발급해준 액세스토큰을 auth.ts jwt callbacks를 통해 user값에서 가져와 token에 저장한 뒤, session callbacks에서 이 token을 session에 저장해 놓았고 만료된 토큰 갱신하는 로직까지 callbacks에서 설정해놓았는데요. 이렇게 구현을 해도 되는 건가요? 보안에 문제가 있을까요? 만약 쿠키에 저장해서 사용하는 방식으로 바꿔야한다면 만료된 토큰의 갱신처리 즉 refreshToken요청 코드는 어디에 작성을 해야하나요..? (리액트에서는 axios를 사용해서 axios.interceptor.response에서 401 jwt만료 에러가 발생시에 refreshtoken을 요청하는 방식으로 구현했었습니다.)   2) 그리고 회원가입과 같은 POST 요청시에 form action을 이용해 server action을 사용하는 것과 form onsubmit으로 post 요청하는 것과 어떤 차이가 있는 건가요..? server action으로 post 요청시 넘겨주는 formData를 찍어보면 JSON형식이 아니라 백엔드에서 type오류가 넘어오는데 server action을 사용하려면 백엔드도 같이 설정을 해줘야하나요?

제로초(조현영) · Answer

일단 그렇게는 하셔도 될 것 같은데요. 궁금한 점은 그럼 브라우저에서는 백엔드로 요청을 어떻게 보내나요? 백엔드 토큰이 필요할텐데요. 백엔드 토큰이 프론트서버 세션에 저장되어 있는 것 같은데, 그걸 브라우저로 내려주고 있나요? 서버액션으로 하면 브라우저->프론트서버이고, onsubmit으로 하면 브라우저->백엔드 서버입니다. 백엔드에서 따로 하실 건 없습니다만 백엔드로 넘길 수 있는 데이터의 형식은 제한이 있긴 합니다. export default function Page() { async function createInvoice(formData: FormData) { 'use server' const rawFormData = { customerId: formData.get('customerId'), amount: formData.get('amount'), status: formData.get('status'), } // mutate data // revalidate cache } return }