Nuxt Auth using different prefixes for axios calls depending on server-side or client-side call

[moritzlaube]

In my project, I am using nuxt/auth, nuxt/proxy and nuxt/axios. My Nuxt App lives on localhost:8080 while my API is located at localhost:5000. My API generates a session and sends a http-only cookie to the frontend.

I got everything working fine. Registering, logging in ... Only on reload the app kept on logging me out. When I checked the network requests, I figured that – on reload – the Nuxt server-side was trying to make a GET request to my API's users route that I specified in the auth config. But it prefixed it with '/api'! So the final url looked like this: /api/api/v1/me.

So I deleted the '/api' from my auth.endpoints.users config. And it worked. BUT: When I am calling this.$auth.fetchUser() on the client, the API call looks as follows: /v1/me 🤯.

Am I missing something here? Or is this a bug with the Auth module? Appreciate your help.

The are my auth, proxy and axios configs in nuxt.config.js:

auth: {
    strategies: {
      local: {
        token: {
          required: false,
          type: false,
        },
        endpoints: {
          login: { url: '/api/v1/auth/login', method: 'post' },
          logout: { url: '/api/v1/auth/logout', method: 'post' },
          user: { url: '/v1/me', method: 'get' }, // I am omitting the /api prefix here. And it's weird that I have to do this.
        },
        user: {
          property: 'user',
          autoFetch: false,
        },
      },
    },
  },
  proxy: {
    '/api/': {
      target: process.env.API_URL,
      pathRewrite: { '^/api/': '' },
    },
  },
  axios: {
    proxy: true,
    credentials: true,
  }, 

[moritzlaube]

I finally found the solution myself. It has to do with how nuxt/axios works differently server-sider and client side when using the proxy module. The solution was to pass the following env-variables to the Nuxt build: API_HOST, API_PORT and API_PREFIX. As far as I understand, Axios then uses the baseURL (http://[API_HOST]:[API_PORT][API_PREFIX]) for client side calls and the API_PREFIX variable for server-side calls. However, this setup works for me:

auth: {
    strategies: {
      local: {
        token: {
          required: false,
          type: false,
        },
        endpoints: {
          login: { url: '/v1/auth/login', method: 'post' },
          logout: { url: '/v1/auth/logout', method: 'post' },
          user: { url: '/v1/me', method: 'get' },
        },
        user: {
          property: 'user',
          autoFetch: false,
        },
      },
    },
  },
  proxy: [
    `http://${process.env.API_HOST}:${process.env.API_PORT}${process.env.API_PREFIX}`,
  ],
  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
    credentials: true,
  },