Register nuxt axios interceptors as a nuxt plugin makes nuxt auth middleware not working on page reload

[yoelpc4]

Version

nuxt: 2.14.12
@nuxtjs/axios: 5.12.4
@nuxtjs/auth-next: 5.0.0-1608461079.ae1e5db
nprogress: 0.2.0

Nuxt configuration

mode:

• universal
• spa

Nuxt configuration

export default {
  auth: {
    redirect: {
      home: "/secure",
      callback: "/callback",
      logout: "/signed-out"
    },
    strategies: {
      local: {
        token: {
          property: "token.accessToken"
        }
      },
      localRefresh: {
        scheme: "refresh",
        token: {
          property: "token.accessToken",
          maxAge: 15
        },
        refreshToken: {
          property: "token.refreshToken",
          data: "refreshToken",
          maxAge: false
        }
      },
      auth0: {
        domain: "nuxt-auth.auth0.com",
        clientId: "q8lDHfBLJ-Fsziu7bf351OcYQAIe3UJv"
      },
      facebook: {
        endpoints: {
          userInfo:
            "https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday"
        },
        clientId: "1671464192946675",
        scope: ["public_profile", "email", "user_birthday"]
      },
      google: {
        clientId:
          "956748748298-kr2t08kdbjq3ke18m3vkl6k843mra1cg.apps.googleusercontent.com"
      },
      github: {
        clientId: process.env.GITHUB_CLIENT_ID,
        clientSecret: process.env.GITHUB_CLIENT_SECRET
      },
      // twitter: {
      //   clientId: 'FAJNuxjMTicff6ciDKLiZ4t0D'
      // },
      laravelJWT: {
        provider: "laravelJWT",
        url: "/laravel",
        endpoints: {
          login: {
            url: "/api/auth/jwt/login"
          },
          refresh: {
            url: "/api/auth/jwt/refresh"
          },
          logout: {
            url: "/api/auth/jwt/logout"
          },
          user: {
            url: "/api/auth/jwt/user"
          }
        }
      },
      laravelSanctum: {
        provider: "laravelSanctum",
        url: "/laravel"
      },
      laravelPassport: {
        provider: "laravelPassport",
        url: "https://laravel-auth.nuxtjs.app",
        endpoints: {
          userInfo: "/api/auth/passport/user"
        },
        token: {
          maxAge: 1800
        },
        refreshToken: {
          maxAge: 60 * 60 * 24 * 30
        },
        clientId: "3",
        clientSecret: "k0NAhYGKXbG6NjENFz4VIe5YSbccZWW9V3gGeSOa"
      },
      laravelPassportPasswordGrant: {
        name: "laravelPassportPassword",
        provider: "laravelPassport",
        url: "/laravel",
        endpoints: {
          user: {
            url: "/api/auth/passport/user"
          }
        },
        token: {
          maxAge: 1800
        },
        refreshToken: {
          maxAge: 60 * 60 * 24 * 30
        },
        clientId: "2",
        clientSecret: "eKm1ei8muaql7TfcBxhN6Nq48oSflw6QJKCZF8gl",
        grantType: "password"
      },
      oauth2mock: {
        scheme: "oauth2",
        endpoints: {
          authorization: "/oauth2mockLogin",
          token: "/oauth2mockserver/token",
          userInfo: "/oauth2mockserver/userinfo"
        },
        responseType: "code",
        grantType: "authorization_code",
        clientId: "test-client"
      }
    }
  },
  axios: {
    proxy: true
  },
  build: {
    extractCSS: true
  },
  css: ["nprogress/nprogress.css"],
  buildModules: ["@nuxt/typescript-build"],
  modules: ["bootstrap-vue/nuxt", "@nuxtjs/axios", "@nuxtjs/auth-next"],
  plugins: ["~/plugins/axios"],
  proxy: {
    "/api": "http://localhost:3000",
    "/laravel": {
      target: "https://laravel-auth.nuxtjs.app",
      pathRewrite: { "^/laravel": "/" }
    }
  },
  serverMiddleware: ["~/api/auth", "~/api/oauth2mockserver"]
};

Reproduction

https://codesandbox.io/s/inspiring-chebyshev-v2ryf

What is expected?

On secure page reload, the authenticated user is passed the auth middleware check and stay on the secure page.

What is actually happening?

On secure page reload, the authenticated user is redirected to the login page instead of stay on the secure page. This happens because the authenticated user is not passed the auth middleware check.

Steps to reproduce

This reproduction register an axios plugin on nuxt config

1. Open codesandbox url above
2. On home page click Login button
3. Click login with laravel jwt
4. Open hamburger menu, then click on the secure menu
5. Click on the reload button (beside codesandbox url bar), you'll redirected to login page instead of stay on secure page

If the axios plugin is unregistered from nuxt config, when we click on reload button then the expected behavior is happened.

Additional information

Checklist

• I have tested with the latest Nuxt version and the issue still occurs
• I have tested with the latest module version and the issue still occurs
• I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

What is expected?

What is actually happening?

Performance analysis?

[productdevbook]

plugins/axios let me see.