stephweb's avatar

Send cookies from getServerSideProps to Laravel API

Hello

I am developing a website with Laravel for the API part, and Next.js for the Front-Office part.

On this website, I am developing a private member space (a cleint space).

But in the Next.js part, I can't send the cookies ("XSRF-TOKEN" cookie, and "APP_SESSID" session cookie) from getServerSideProps. However, with my Ajax request with axios, I put "Cookie: req.headers.cookie" in my headers.

(I am using Laravel sanctum to check auth in API part in Laravel).

In the API part in Laravel, in the "routes/api.php" file :

Route::middleware('auth:sanctum')->group(function () { // it is this line that protects my 'home' action
    Route::get('espace-client/home', [HomeController::class, 'home']);
});

In the front-office part in next.js :

export async function getServerSideProps(context) {
  const { req } = context

  const props = {}

  console.log( req.headers.cookie )
  // I have this as expected :
  //XSRF-TOKEN=eyJpdiI6Ik5rSWlpYm9WV0JoK05NZTlnWDdVRFE9PSIsInZhbHVlIjoiR1lIRE9LcnNOaG94OGkzeXFMS3p3bWlVVXNmUDJWeFhkUDY2QWtPMXZSYzFVWW1HSldXQmZjbit3TEd3bVlmb1NCTlpXdlkrTzhaekhsOVdzdk0xc2djY0JCMDJoTGpvT0M0eUxnQXdiZE9EOFFVUFJueWxGQTg4MXR0SFFxS0EiLCJtYWMiOiI1OTk3OTNjZTJhMjU2YTNhZDQyODEwNWRhYTM1ZTExZWQ3NzliNTRjNmQ5MzkyZTA4NzQ0ODE1ZTRhMzA3ZmM1IiwidGFnIjoiIn0%3D; APP_SESSID=eyJpdiI6ImZIY0I1N3N4MGVuTWN2UGVtSGR6dHc9PSIsInZhbHVlIjoiQUtqU0x3OVpkcDVBR2hHSlYyUlljUmtGOFNKZUVxSVNBbHlpYmlFUHJqbWVIV24xTXVzOTk2QlFZd0lsTmpBSmFOaVc0dEhMSE9Fc3FScTJwMHJyRnBRbXA4elRUcGhMcE1iSmthZnhtYWQ2Qmtid0JEbGlTVEJHSFlOQmlvUm8iLCJtYWMiOiJlN2UyYjAzMmNmYjc3Nzg1ZGMwYjZjOWY5OTgyOTVmYjg2MTNiNmRmNjc1ZDY0ODFkYmE5ZmUxMzAxMjM2ZmM2IiwidGFnIjoiIn0%3D

  try {
    const response = await axios.get(process.env.NEXT_PUBLIC_API_BASE_URL+'/espace-client/home', {
      headers: {
        Cookie: req.headers.cookie,
      },
    })

    // it doesn't go through here

    const json = await response.data
  } catch (error) {
    // it goes through here
    
    console.log( error.response.status ) // response : 401
    console.log( error.response.data ) // response : { message: 'Unauthenticated.' }

    // TODO : if error.response.status === 401 redirect to login page
  }

  return {
    props
  }
}

Where could the problem come from?

Thank you.

0 likes
1 reply

Please or to participate in this conversation.