En éste post voy hablar sobre un "problema" que tuve al desarrollar con las cookies.

La situación fue la siguiente, estaba desarrollando un proyecto que tiene un login, al iniciar sesión el backend respondia con

es decir se guardaba una cookie con el token previamente generado por jwt y como respuesta success:true.

Todo funciona muy bien hasta que publiqué todo a "producción", para el frontend compre un dominio (.com.ar) y lo hosteaba en Vercel. Mientras que el backend con la base de datos en Railway.

Al tratar de iniciar sesión en el dominio que compré, no funcionaba, sí veía la respuesta del backend pero la cookie no se guardaba correctamente, al recargar la página desaparecía.

Al inspeccionar la cookie había un cartel de alerta que decía "this attempt to set a cookie via set-cookie header was blocked due to user preferences" en el application del navegador.

Probé muchas cosas, diferentes respuesta en el Backend, iniciar sesión con otro navegador, en Chrome tenía habilitado las cookies de terceros y seguía sin funcionar.

Fue un problema que nunca había tenido y poca veces se ve en un curso ya que ésto se dió por el simple hecho de que compré un dominio.

En localhost todo funciona..

Tratando de encontrar el error se me ocurrió crear la cookie manualmente y funcionó.

En la imagen la cookie que aparece primera es la que se creaba al iniciar sesión pero que desaparecía al recargar.

La segunda cookie es la creada manualmente, esa me permitía iniciar sesión correctamente. Y aunque en la imagen no tenía tildada la opción de Https / Secure y SameSite en none ese no era el error.

Lo que no permitía que se guarde la cookie era que fueran creadas en dominios diferentes.

Si la cookie la creaba el Backend que tenia un dominio / url distinta no funcionaba, en cambio si el front y el back era el mismo sí funcionaba.

Una de las soluciones fue utilizar reverse proxy que fue la que utilicé, lo que nextjs llama middleware, redirects, rewrites son funcionalidades de reverse proxy.

en el next config agregue:

async rewrites() {
return [
{source: '/api/:path',
destination: 'https://example.railway.app/:path'
,},
];
},

Agregando ese código cuando haces una petición desde tu frontend a /api/algo, Next.js:

1) Intercepta la solicitud,

2) La reenvía internamente a otro servidor por ejemplo, https://example.railway.app/algo

3) Y te devuelve la respuesta como si viniera de tu propio dominio.

Por eso ésto funcionaba reescribía internamente la respuesta.

Hablando en un canal de Discord, un desarrollador me compartió mucha información y otras posibles soluciones, así que si lees ésto Santiago, te vuelvo agradecer.

Otra posible solución que me comentó fue crear una api en nextjs y desde esa api llamar al back, de esa forma tus llamadas desde el browser van a ser hacia el mismo dominio.

Otra solución que involucra invertir en un dominio (y no recuerdo si vercel y railway permiten setear un dominio en sus planes gratuitos) es usar un dominio tuyo para ambos (el sitio web y el back), pueden ser subdominios (por ejemplo la api estar en api.mysite.com y el sitio en sitio.mysite.com) y las cookies no tienen problemas con eso.

https://curity.io/resources/learn/oauth-cookie-best-practices/

https://jvns.ca/blog/2022/12/08/a-debugging-manifesto/

https://jvns.ca/blog/good-questions/

https://thenewstack.io/opennext-gets-closer-to-making-next-js-truly-portable/