CODEWITHSUNDEEP
reactjscookiesnext.js
Marc Perrin-Pelletier
Marc Perrin-Pelletier

Reputation: 13506

How do I forward a cookie using fetch in getServerSideProps?

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:

N.B: My cookie is httpOnly.

Upvotes: 2

Views: 4797

Answers (2)

Someone Special
Someone Special

Reputation: 13588

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

Upvotes: 1

Marc Perrin-Pelletier
Marc Perrin-Pelletier

Reputation: 13506

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
    }
  })
...

Upvotes: 4

Related Questions