Tengo una API de nodo/express que creará una cookie HTTP y la pasará a mi aplicación React para la autenticación. La configuración se basó en el tutorial de cookies HTTP JWT de Ben Awad en Youtube si está familiarizado con él. Todo funciona muy bien cuando ejecuto el sitio web en mi servidor local (localhost: 4444). El problema con el que ahora me encuentro es que mi aplicación ahora usa subdominios para manejar espacios de trabajo (similar a cómo JIRA o Monday.com usan un subdominio para especificar un espacio de trabajo/equipo). Cada vez que ejecuto mi aplicación en un subdominio, las cookies HTTP dejan de funcionar.

He mirado muchos hilos sobre este problema y no puedo encontrar una solución, no importa lo que intente, la cookie no se guardará en mi navegador. Aquí están las cosas actuales que he intentado hasta ahora sin suerte:

• He intentado especificar el dominio en la cookie. Ambos con un . y sin
• Actualicé mi archivo de host para usar un dominio como máscara para localhost. Algo así como myapp.com:4444 que apunta a localhost:4444
• Probé una configuración elegante que encontré donde también podía ocultar el puerto, por lo que myapp.com apuntó a localhost: 4444.
• He probado Chrome, Safari y Firefox.
• Me aseguré de que no hubiera problemas de CORS
• He jugado un poco con la configuración de seguridad de la cookie.
• También configuré un servidor ngrok para que hubiera un dominio publicado para ejecutar en el navegador

Ninguno de estos intentos ha hecho una diferencia, así que estoy un poco perdido sobre qué hacer en este momento. La única otra cosa que podría hacer es implementar mi aplicación en un servidor adecuado y simplemente ejecutar mi desarrollo a partir de eso, pero realmente no quiero hacer eso, creo que debería poder desarrollar desde mi máquina local.

Mi conocimiento de las cookies es un poco escaso, así que tal vez hay algo obvio que me estoy perdiendo.

Así es como se ve mi configuración en este momento:

En la API, tengo una ruta ( /refresh_token ) que creará una nueva cookie rápida así:

 export const sendRefreshToken = (res: Response, token: string): void => { res.cookie('jid', token, { httpOnly: true, path: '/refresh_token', }); };

Luego, en la interfaz, esencialmente ejecutará esta llamada en carga:

 fetch('http://localhost:3000/refresh_token', { credentials: 'include', method: 'POST' }).then(async res => { const { accessToken } = await res.json() setState({ accessToken, workspaceId }) setLoading(false) })

Parece súper simple de hacer, pero todo deja de funcionar cuando está en un subdominio. Estoy completamente perdido en este punto. Si tienes alguna idea, ¡sería genial!