1

In the async function getServerSideProps I need to make a fetch from the back-end where I include my credentials to instantiate a session. I have the following code:

export async function getServerSideProps({ query: { id } }) {
  // Instantiate
  await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/workflow/${id}`, {
    method: 'GET',
    credentials: 'include',
  })
    .then((response) => console.log('Instantiate...', response))
    .catch((error) => console.error('Instantiation error', error));
}

The URL and all seem to work, but the console shows a 500 error because the credentials don't seem to be included in the fetch. When pasting the exact call in browser console/Postman, the response is a 200 code, so back-end seems to work correctly.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Alex Janse
  • 43
  • 6
  • have you installed the `CORS` package on your server? https://stackoverflow.com/questions/63351799/react-fetch-credentials-include-breaks-my-entire-request-and-i-get-an-error – tobzilla90 Nov 20 '20 at 05:55
  • You have to explicitly pass the cookies to the `fetch` request to send them through, as this is done from the server-side. See [Why are cookies not sent to the server via getServerSideProps in Next.js?](https://stackoverflow.com/questions/69057271/why-are-cookies-not-sent-to-the-server-via-getserversideprops-in-next-js). – juliomalves Apr 24 '22 at 23:12

1 Answers1

0

I moved the fetch from getServerSideProps to componentDidMount, which fixed the problem. Only thing to take in mind is to initiate the state with empty values, since the order of calls is:

  1. constructor
  2. render
  3. componentDidMount
  4. render (if state update)
Alex Janse
  • 43
  • 6