How to use Web Guard (Cookies) with VueJS

[simonjcarr]

I am trying to use Web Guard with my VueJS Application

I am able to send email and password and get a Set-Cookie response back from Adonis.
Here is the response to hitting the login route with the correct username and password

2 requests
1.0 kB transferred
Request URL:
http://localhost:3333/api/v1/auth/login
Request Method:
OPTIONS
Status Code:
204 No Content
Remote Address:
127.0.0.1:3333
Referrer Policy:
strict-origin-when-cross-origin
HTTP/1.1 204 No Content
access-control-allow-origin: http://127.0.0.1:8080
access-control-allow-credentials: true
access-control-allow-methods: GET,HEAD,POST,PUT,DELETE
access-control-allow-headers: content-type
access-control-max-age: 90
set-cookie: adonis-session=s%3AeyJtZXNzYWdlIjoiY2xwbndueGd4MDAwMG5yNGQ3ZHdzM3V1YiIsInB1cnBvc2UiOiJhZG9uaXMtc2Vzc2lvbiJ9.WVYZUPD_2oj753pkNDS8zJtvLUjrnyW_r6fp2gWV1bs; Max-Age=7200; Path=/; HttpOnly
Date: Sat, 02 Dec 2023 10:23:10 GMT
Connection: keep-alive
Keep-Alive: timeout=5

However on future future fetch requests I get 401 Unauthorised.

Here is my controller code

public async profile({ auth, response }: HttpContextContract) {
    try {
      const user = await auth.use('web').authenticate()
      if (user) {
        return response.json(user)
      }
    }
    catch (error) {
      console.log(error)
      return response.status(401).send(error.message)
    }
  }

Here is the error that Adonis produces.

AuthenticationException: E_INVALID_AUTH_SESSION: Invalid session
    at Function.invalidSession (/home/[email protected]/dev/sp-meetings/sp-meetings-api/node_modules/@adonisjs/auth/build/src/Exceptions/AuthenticationException.js:82:16)
    at SessionGuard.authenticate (/home/[email protected]/dev/sp-meetings/sp-meetings-api/node_modules/@adonisjs/auth/build/src/Guards/Session/index.js:255:69)
    at AuthController.profile (/home/[email protected]/dev/sp-meetings/sp-meetings-api/app/Controllers/Http/AuthController.ts:32:42)
    at Injector.callAsync (/home/[email protected]/dev/sp-meetings/sp-meetings-api/node_modules/@adonisjs/fold/build/src/Ioc/Injector.js:124:30)
    at processTicksAndRejections (node:internal/process/task_queues:95:5) {
  redirectTo: '/login',
  responseText: 'E_INVALID_AUTH_SESSION: Invalid session',
  guard: 'web'
}

I have set credentials to true in the fetch request.

fetch("http://localhost:3333/api/v1/auth/profile", {
    method: "GET",
    credentials: "include",
    headers: {
      "Accept": "application/json",
    },
  })
    .then((res) => res.json())
    .then((data) => console.log(data))
    .catch((err) => console.log(err));

Adonis is running on http://127.0.0.1:3333 and my VueApp is running on http://127.0.0.1:8080

Cors is enabled and origin is to "*", but I have also tried true

Any ideas what I might be doing wrong.

[simonjcarr]

I fixed this by running my Adonis Server on http://localhost:3333 rather than http://127.0.0.1:3333. The problem with running on http://127.0.0.1:3333 was that I was send my fetch requests to localhost and cookies can not cross domains.