@nuxt/auth send me to /login page when I reload the page or access URLs manually

I'm trying to implement a login system in my app (Nuxt 2) using @nuxt/auth. The backend is a Node.js + Express + Passport, using sessions and cookies.

I think it's important to say I'm using http-proxy-middleware in my front end, so my back end can be accessible in the same domain with localhost:3000/api/... or localhost:3000/uploads for uploaded files.

The backend seems to be working as expected, creating the sessions, returning an User object if logged in and 401 if not. I did some research and didn't find much advantages to use JWT so I opted for sessions and cookies instead (but any recommendations are valid). Cookies expiration time is set in the backend as 24 hours.

In my front end I don't have any custom middlewares.

In the front end, I can log in and it redirects me to home ('/'), and I can access protected pages, I have set auth globally but excluded from the login layout with auth: false.

But when I refresh the page or try to access some URL manually (e.g. /timeline) it goes back to the login page. I tried to show $auth.user in the login page and it's showing me the user's information as it was logged in. $auth.loggedIn is true.

One important thing to note is that it takes a while to show the information in $auth.user and $auth.loggedIn shows as false at the first second, maybe something to do with this? I checked the cookies and it seems to be all right, I will post more information below. (this in the login page)

When I tried to access my back end endpoint /api/user I get the user's information so I'm sure in my backend I'm logged in.

Also when I try to log out, at the first moment it logs me out but doesn't redirect to me to the login page. When I try to access some protected page it does redirect me as expected.

But I was expecting to not being redirected to login page when refreshing or accessing URLs manually, how can I fix this please?

This is my nuxt.config.js:

const { createProxyMiddleware } = require('http-proxy-middleware')

export default {
  head: {
    // ...
  },

  serverMiddleware: [
    createProxyMiddleware('/api', {
      target: 'http://localhost:3300/api',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
      }
    }),
    createProxyMiddleware('/uploads', {
      target: 'http://localhost:3300',
      changeOrigin: true,
      pathRewrite: {
        '^/uploads': '/uploads'
      }
    }),
  ],

  router: {
    middleware: ['auth']
  },

  // css: [],
  css: [
    '~assets/scss/main.scss',
  ],

  // loading bar
  loading: {
    color: '#ef443b',
  },

  plugins: [
    '~/plugins/vuelidate'
  ],

  components: true,

  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/style-resources',
    '@nuxtjs/fontawesome',
  ],

  modules: [
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    'nuxt-precompress',
  ],

  auth: {
    cookie: {
      options: {
        maxAge: 24 * 60 * 60 * 1000, // 24 hrs
        secure: process.env.NODE_ENV && process.env.NODE_ENV === 'production', // HTTP if local, HTTPS if production
      },
    },
    strategies: {
      local: {
        token: {
          required: false,
          type: false
        },
        endpoints: {
          login: {
            url: '/api/login',
            method: 'POST',
            propertyName: false
          },
          logout: {
            url: '/api/logout',
            method: 'GET'
          },
          user: {
            url: '/api/user',
            method: 'GET',
            propertyName: false
          },
        },
        tokenRequired: false,
        // tokenType: 'Bearer',
      },
    },
  },


  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false // Or `bvCSS: false`
  },

  fontawesome: {
    component: 'fa',
    suffix: false,
    icons: {
      regular: true,
      solid: true,
      brands: true,
    },
  },

  styleResources: {
    scss: [
      './assets/scss/_variables.scss',
      './assets/scss/_mixins.scss',
    ],
    hoistUseStatements: true,
  },

  axios: {
    baseURL: '/',
    withCredentials: true,
    credentials: true,
  },

  env: {
    apiUrl: process.env.API_URL,
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },

  build: {
    transpile: [
      'audiomotion-analyzer'
    ]
  },
}

My logout code is as simple as this:

methods: {
    logout(e) {
      this.$auth.logout()
    },
  },

These are the cookies when:

I log out and try to log in for the first time (maybe this cookie is from past sessions):

enter image description here

When I'm logged in and redirected to home:

enter image description here

When I access another protected page using a link:

enter image description here

When I try to access an URL manually and gets redirected to /login:

enter image description here

If necessary I can share some code from my backend too, but I think the problem is in my front-end...

EDIT

I just realized I was using this.$router.push('/') after logging in and had no config whatsoever for redirections, so I updated my nuxt.config.js and now it is redirecting without $router.push, and also when I log out. The refresh / manually access problem persists tho.

auth: {
    cookie: {
      options: {
        maxAge: 24 * 60 * 60 * 1000, // 24 hrs
        secure: process.env.NODE_ENV && process.env.NODE_ENV === 'production', // HTTP if local, HTTPS if production
      },
    },
    strategies: {
      local: {
        token: {
          required: false,
          type: false
        },
        endpoints: {
          login: {
            url: '/api/login',
            method: 'POST',
            propertyName: false
          },
          logout: {
            url: '/api/logout',
            method: 'GET'
          },
          user: {
            url: '/api/user',
            method: 'GET',
            propertyName: 'user'
          },
        },
        tokenRequired: false,
        // tokenType: 'Bearer',
      },
    },
    redirect: {
      login: '/login',
      logout: '/login',
      home: '/',
    },
  },

Answering my own question, for anyone who can stumble on the same or similar problem...

I even tried to create and implement a new auth module from scratch for 3 days because of this, just to get stuck on the same problem, turns out my axios wasn't set with the correct baseURL, I'm not sure where I've got this part of the code from, but I hadn't my .env vars set correctly, so when in SSR axios was requesting the wrong URL, but it was working on the client side somehow. This part of the code here in my nuxt.config.js:

  axios: {
    baseURL: '/',
    withCredentials: true,
    credentials: true,
  },

  // ...

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: process.env.BASE_URL
    }
  },

I just added to .env:

BASE_URL = 'http://localhost:3000/'
BROWSER_BASE_URL = 'http://localhost:3000/'

So if anyone is experiencing a similar problem try to check out your axios configuration!

I'm not sure why but even when I deleted 'publicRuntimeConfig' and 'privateRuntimeConfig' axios baseURL was still wrong... Also pay attention to the option being baseURL, not baseUrl as I saw other people with similar problems because of wrong case.

Hope this helps other people.