Next14 SSR 과정에서 Authorization에 쿠키를 사용해 토큰값을 전달하면 에러가 발생합니다..

안녕하세요! 답변 감사합니다. 현재 소셜 로그인 시 쿼리 파라미터를 사용해서 토큰 값을 저장하고 리뷰 목록을 조회하기 위해 백엔드 서버에 데이터 요청할 때 Authorization: `Bearer ${accessToken}`으로 토큰을 담아서 보내야 하는 상황입니다. 'next/headers'를 사용해서 따로 util 파일을 만들었을 때에도 에러가 발생해서 cookies-'next'를 사용하게 되었습니다. 쿠키를 사용한 이유는 서버에서 쿼리 파라미터의 값을 저장하고(localstorage 사용 불가) API 요청 시 사용하는 목적으로 사용을 계획하고 있었습니다! 그런데 위의 코드가 SSR 시 쿠키에서 꺼낸 값을 인식하지 못하는 것 같습니다..

소셜 로그인이라면 리다이렉트 시에 access 토큰 말고 인가코드를 쿼리 파라미터로 받고 그 인가코드를 서버로 넘겨줘서 서버에서 소셜로그인 측으로 access 토큰을 받는 방식을 주로 사용하는 것으로 알고 있는데 어떤 소셜 로그인인가요?

OAuth 프로토콜 방식에서 클라이언트에서 직접 access 토큰을 받게 되면 브라우저 URI에 바로 노출되는 문제가 있어 위와 같은 방식으로 인가 코드를 받고 바로 노출되지 않게 서버에서 인가 코드를 통해 access 토큰을 받는 방식을 사용합니다!

현재 카카오 소셜로그인을 사용하고 있습니다! 백엔드에서 쿼리 파라미터 방식을 제안하셔서 말씀해 주신 방법은 사용하지 않고 있는 상태입니다!

만약 저 방법대로 하신다면 Next.js 서버 컴포넌트에서도 쿼리 마라미터를 Page Props로 받을 수 있습니다. Props 객체 안에 searchParams라는 속성이 있습니다. 따라서 데이터 페칭하는 함수에서 이 값을 매개변수로 받도록 하면 따로 브라우저 저장소에 저장하지 않아도 될 거 같습니다!

리다이렉트 된 uri에 access_token 키 값으로 저장되어 있을 텐데 export default async function Page({searchParams}) const datafetching = getData(searchParams.access_token); 이런 방식으로 해보시는 건 어떨까요?

이렇게 되면 처음 로그인할 때 서버에서 쿠키에 토큰을 저장하고 리뷰 데이터를 받을 때에도 따로 클라이언트 측에서 처리하지 않고 서버에서 쿠키에 토큰이 있는지 없는지 확인 후 데이터를 내려주는 방식이 될 거 같습니다.

만약 액세스토큰을 꼭 클라이언트에서 쿠키에 저장하고 싶으시면 14버전부터 클라이언트에서 서버 액션을 할 수 있습니다. 서버 액션을 하는 함수를 따로 빼서 페이지에서 받아온 쿼리 파라미터를 넘겨주시는 방법도 있을 거 같네요. 다음은 해당 내용에 대한 공식문서 내용입니다. https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#cookies

좋은 정보 감사합니다! 최대한 반영해 보려고 했으나 마음처럼 잘 안되네요.. 말씀해 주신 부분처럼 searchParams를 사용했을 때 해당 페이지에서 uri에 있는 accessToken을 저장할 수 있지만, 다른 페이지에 이동해서 accessToken을 사용하기 위해서 localstorage와 쿠키에 값을 저장하려고 했습니다. 클라이언트 컴포넌트에서 현재 코드를 호출해서 사용하고 있었습니다. react-query 로직이 포함되어 있어 'use server' 키워드를 사용할 수 없었고 'next/headers'를 따로 util 파일로 만들어 호출해서 사용하게 되었습니다. 쿠키를 꺼내서 Bearer 토큰에 값을 포함해 사용해 보려고 했으나 다른 에러가 발생하게 되네요.. 😭 Uncaught Error: Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead. Cannot update a component (`Router`) while rendering a different component (`ReviewSection`). To locate the bad setState() call inside `ReviewSection`, follow the stack trace as described in 에러를 살펴보니, const accessToken = getCookie('accessToken') 유틸 파일에서 호출한 next/headers 쿠키 값을 꺼내는 과정에서 에러가 발생하는 것 같습니다. 이 부분을 해결하기 위해 노력해 봐야겠네요..!