Cookie not being stored in browser after call with Axios - vue.js

Question

I am playing with creating a simple authentication system and have a simple play project at: https://github.com/ericg-vue-questions/authentication
The main technologies I am using are:
FastAPI for the backend server
Vue for the frontend UI
axios to communicate from the frontend to the backend (eventually, a standard OpenAPI client)
I am make the axios call by doing:
axios
.get('http://127.0.0.1:8000/api/login', {
params: {
username: username,
password: password
},
withCredentials: true
})
.then((response) => {
console.log('Logged in')
console.log(response)
})
.catch(err => { console.log(err) })
On the backend, the code that sets the cookie is:
#app.get("/api/login", tags=["api"], operation_id = "login" )
async def login( username: str, password: str, response: Response ):
authenticated = False
if username in users:
if users[ username ][ 'password' ] == password:
authenticated = True
response.set_cookie( key="user", value=str( users[ username ][ 'id' ] ), max_age = 60 * 60 * 24 )
return authenticated
I can confirm that the cookie is being sent and received in the browser, but it is not being stored for some reason. I thought that the only thing that was required was to set withCredentials: true in the axios get request, but that doesn't seem to be working. Any idea what I might be doing wrong?
My Response headers are:
HTTP/1.1 200 OK
date: Sun, 15 Dec 2019 01:54:14 GMT
server: uvicorn
content-length: 4
content-type: application/json
set-cookie: user=userid; Max-Age=86400; Path=/
access-control-allow-credentials: true
access-control-allow-origin: http://localhost:8080
vary: Origin

Answer 1

I'm pretty sure that's because you are not setting a path, for example '/', to your cookie. That's the fourth parameter in set. If you're using your cookie in a https connection, you should also set a domain.