How do I forward a cookie using fetch in getServerSideProps?

user_4173135 0
Viewed 3187

I'm using Nextjs for my app. On a page, I would like to fetch data from an authenticated API endpoint ('/api/profile').

I have tried the following, with no success:

export async function getServerSideProps(ctx) {
  const { req, res } = ctx
  const cookies = cookie.parse(req.headers.cookie ?? '')
  const mycookie = cookies[MY_COOKIE] // mycookie exists and is set correctly

  if (mycookie) {
    const response = await fetch(process.env.SERVER_HOST+'/api/profile', {
      credentials: 'same-origin' // I tried with and without this, also tried "include" instead
    })

  ...

I have 2 questions:

  • Is there a way to avoid having to enter the absolute URL? (I was hoping to simply use '/api/profile', since it's an "internal" api)
  • How do I make sure the cookie required to fetch data from /api/profile is forwarded through fetch?

N.B: My cookie is httpOnly.

next.js reactjs cookies
2 Answers

Turns out I'm allowed to manually forward the cookie through:

if (mycookie) {
  const response = await fetch(process.env.SERVER_HOST+'/api/profile', {     
    headers: {
      cookie: mycookie
    }
  })
...
user_41731350

if you use get server side props then the recommended way is to process whatever data fetching functions you have directly in getserversideprops.

calling fetch /api is redundant. what you can do is to extract the function from the api and use it directly in getserversideprops.

what you are doing now is client -> serverside rendering -> api -> serverside rendering -> client

it can become client -> serverside rendering -client

user_28220410
Related