2

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:

  1. FastAPI for the backend server
  2. Vue for the frontend UI
  3. 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
ericg
  • 8,413
  • 9
  • 43
  • 77
  • 1. Are you seeing any CORS errors in the console? 2. How are you checking that the cookie is set? It won't be accessible via `document.cookies` and it will only be added to subsequent requests if those requests also have `withCredentials`. 3. If none of that explains it, could you right-click on the request in the Network section of your developer tools and select `Copy -> Copy response headers` and include those headers in the question. – skirtle Dec 14 '19 at 02:26
  • There are no CORS errors. You can check the [backend](https://github.com/ericg-vue-questions/authentication/blob/master/backend/main.py) to see how I handled the CORS issue. In Chrome, I can go to the developer tools -> Application -> Storage -> Cookies and see that none have been set. – ericg Dec 15 '19 at 02:03
  • 1
    You need to be careful with the developer tools. They won't necessarily show you cookies set from CORS requests. Open up `http://127.0.0.1:8000` directly in a new browser tab and check the cookies from there. Don't login via the new tab, you just need the URL to be for the right server to be able to see the cookies in the developer tools. Be careful with Incognito mode as the cookie may not be shared between the two tabs. Alternatively, just try sending another CORS request, setting `withCredentials: true`, to see if the cookie is included as a request header. – skirtle Dec 15 '19 at 04:09
  • Ok. That seems to have been the issue...my lack of understanding on how cookies operate. It is working as expected. Thank you for clearing that up. – ericg Dec 15 '19 at 23:50

1 Answers1

0

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.

tsaife
  • 11
  • 1
  • 4
  • I tried that, but the behavior remains unchanged. In this case, I am only concerned with http communication. – ericg Dec 15 '19 at 02:04