1

Estoy practicando con jsonwebtoken y cookies.

Servidor Node Module

import Express, { json } from "express"
import JWT from "jsonwebtoken"
import cors from 'cors'

const PORT = 3000
const SECRET = '4FGEbz4m29TN3hRU0dHt0aSkTcLfWj1r'
const app = Express()

app.use(json())
app.use(cors())

app.post('/token', (req, res) => {
    const { user, name } = req.body
    const token = JWT.sign({ user, name }, SECRET)
    res.cookie("jwt", token)
    res.json({ token })
})

app.listen(PORT, () => console.log(`Escuchando en http://localhost:${PORT}`))

Se crea el token y se manda en el header como Set-Cookie con el nombre de jwt.

React basico

import { useState } from 'react'

function App() {
    const url = 'http://localhost:3000/token'
    let headers = {
        Accept: '*/*',
        'Content-Type': 'application/json'
    }

    const [formData, setFormData] = useState({
        user: '',
        name: ''
    })

    const handleChange = e => {
        const { name, value } = e.target
        setFormData({ ...formData, [name]: value })
    }

    const handleSubmit = async e => {
        e.preventDefault()
        let res = await fetch(url, {
            method: 'POST',
            body: JSON.stringify(formData),
            headers
        }).then(res => res.json())
        console.log(res)
    }

    return (
        <>
            <form onSubmit={handleSubmit}>
                <input type="text" name="user" id="user" onChange={handleChange} value={formData.user} placeholder='Usuario' />
                <input type="text" name="name" id="name" onChange={handleChange} value={formData.name} placeholder='Nombre' />
                <button type="submit">Peticion</button>
            </form>
        </>
    )
}

export default App

La respuesta de la peticion contiene el Set-Cookie en el Header, y en la sección de Cookies de la peticion en Network aparece una Cookie, pero en application no se guarda la cookie.

No se si me falta alguna libreria mas al lado del servidor, o me falta alguna del lado del frontend.

Gracias de antemano.

1 respuesta 1

2

Sufriendo un poco con la solución, encontré que para que las cookies recibidas se seteen en el navegador (devtools > aplicación > cookies) y se envíen con cada solicitud subsiguiente tienes que agregar la propiedad credentials: 'include' en la solicitud fetch.

fetch(url, {
   method: "POST",
   body: JSON.stringify(formData),
   credentials: 'include',
   headers,
})

Las solicitudes que tienen esta opción no permiten el comodín '*' dentro del encabezado 'Access-Control-Allow-Origin' en la respuesta, lo que equivale a cuando en el servidor usamos el middleware cors asi:

app.use(cors()) // permitimos todos los orígenes (*).

En su lugar debemos ser mas especificos con el origen de las solicitudes, y permitir las credenciales:

app.use(cors({credentials: true, origin: 'http://localhost:5173'})) // en origin va la url de nuestro frontend

De esta manera la cookie se setea automáticamente dentro de aplicación > cookies. Esta se enviara en cada solicitud subsiguiente siempre que tenga la opción credentials: 'include'. Podes ver el comportamiento al imprimir en el endpoint la propiedad req.cookies:

app.post("/token", (req, res) => {
  const { user, name } = req.body;
  const token = JWT.sign({ user, name }, SECRET);
  console.log(req.cookies); // ten en cuenta que estará creando y seteando una nueva cookie cada vez que se llama a esta ruta
  res.cookie("jwt", token, { maxAge: 900000, httpOnly: false });
  res.json({ token });
});
4
  • Muchas gracias, el middleware, se pueden poner varios, en dado caso de ocuparse? Commented el 5 ene. a las 1:13
  • @MrLuisKiller se pueden poner los que quieras, en tu código tienes otro cuando haces app.use(json()), a eso te refieres? Commented el 5 ene. a las 1:57
  • Me refería a la cors Commented el 6 ene. a las 6:12
  • podes habilitar las credenciales para mas de un origen si queres, o habilitar el acceso al servidor para mas de un origen, el string de 'origin' puede ser un array de url's permitidas, lee cors npm documentation Commented el 6 ene. a las 19:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.