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.