Front-End: [Axios]
const submitForm = async (e) => {
e.preventDefault()
const formData = new FormData(e.target)
const email = formData.get('email')
const password = formData.get('password')
try {
const response = await axios.post('http://172.16.2.19:3001/api/v1/auth/login', {
email,
password,
})
console.log(response.data) // I can successfully log in if email & password are correct.
} catch (error) {
console.log(error)
}
}
Back-End [Nodejs ExpressJs]:
Inside App.js:
const cors = require('cors')
app.use(cors({ credentials: true }))
Inside Login.js (/auth/login endpoint):
// ... code, then... if email & password are correct:
// 3600000ms = 1hour
res.cookie('jwt', token, { httpOnly: true, expires: new Date(Date.now() + 3600000 })
res.status(200).json({
status: 'success'
token,
data: userDoc,
})
When I log in on my browser:
https://i.sstatic.net/MxFzr.png
I can successfully log in, but no cookies are being created, look here:
https://i.sstatic.net/1sdTv.jpg
- The front-end HTTP service (React app) is hosted at
http://172.16.2.19:3000 - The back-end HTTP service (Express.js) is hosted at
http://172.16.2.19:3001 - The Axios requests from the front-end are sent to:
http://172.16.2.19:3001
What seems to be the issue?
The absence of cookies being created in the browser is hindering my progress in developing the front-end application. To access any data from the API, I need to be authenticated as all the API routes are protected. Hence, I must send my JWT token with each request to the API.
edit **:
Here's the response from the /auth/login endpoint upon successful login:
https://i.sstatic.net/Ag6nu.png
- I am using Brave Browser, the latest version.
- I tested this on Firefox and encountered the same issue.