Auth-module: 302 redirect to login with https

[russellsean]

Version

v4.8.1

Reproduction link

http://sorry-no-link

Steps to reproduce

1) Make sure app is running over https
2) Refresh on a protected route

What is expected ?

I'm assuming middleware should detect auth even on page load.

What is actually happening?

Routed to login with a 302.

but state is logged in:

Additional comments?

No issues when not using https!

Here is my current nuxt config:

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const pkg = require('./package')

require('dotenv').config()
module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: 'Lightest Touch',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'
      }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    '~/assets/style/app.styl',
    '~/assets/main.css',
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/vuetify',
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // '@nuxtjs/dotenv',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/auth',
    [
      'nuxt-google-maps-module', {
        key: process.env.PLACES_API
      },
    ]
  ],
  /**
   * Router configuration
   */
  router: {
    middleware: 'auth'
  },
  /**
   * Auth module configuration
   */
  auth: {
    // options
    redirect: {
      login: '/login',
      logout: '/login',
      callback: false,
      home: '/roles',
    },
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/api/auth/login',
            method: 'post',
            propertyName: 'token'
          },
          logout: false,
          user: {
            url: '/api/user',
            method: 'get',
            propertyName: 'user'
          }
        }
      }
    }
  },
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    proxy: true,
    progress: false,
  },
  /*
  ** Proxy config
  */
  proxy: {
    '/api': {
      target: process.env.GW,
      logLevel: 'debug',
      pathRewrite: {
        '^/api/': '/'
      }
    },
  },
  /*
  ** Build configuration
  */
  build: {
    transpile: ['vuetify/lib'],
    plugins: [new VuetifyLoaderPlugin()],
    loaders: {
      stylus: {
        import: ['~assets/style/variables.styl']
      }
    },

  }
}

_{This bug report is available on Nuxt community (#c369)}

[TristanDuck]

Did you ever figure this out? I have the same issue, however it works on a dev environment, but when I clone my project on a production server it doesn't work.

[SashaMihalache]

any fixes related to this bug up until now?

[brfrth]

This bug still exists. Really annoying.

[brfrth]

I actually managed to solve this through this comment from the axios module. I ended up setting the prefix option on axios and the API_URL environment variable for my API. I then removed all usages of /api/ in my requests (including the auth config). This fixed it. Seems like the auth module was making unproxied requests before.

Do take note that API_URL is not some randomly chosen variable name. This sets axios baseUrl internally, so you need to use this name.

As a little edit, here are the relevant parts of my config.

# .env
API_URL=http://localhost:8080/api/v1

// nuxt.config.js
{
  // ...
  axios: {
    proxy: true,
    prefix: '/api/' // This needs to match your proxy setting
  },
  proxy: {
    '/api/': { // This needs to match your axios prefix
      target: process.env.API_URL, 
      pathRewrite: { '^/api/': '' } 
    }
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: '/auth/login', // Note that there is no '/api/' prepended
            // ...
          },
          // ...
        }
      }
    },
    // ...
  },
  // ...
}

[love8587]

I was really annoying this problem before. I managed this problem before. But, I occur it again recent to build nuxt app for new project. I'm using Nuxt, Nuxt Auth, Axios. To resolve this issue, I had to check built js files in dist directory. When I checked the auth middleware built sources, that's strange. they use baseURL(env value) or default value to check authentification. If you don't use default and you have to handle this value when build nuxt.

Okay. I will show you my code. I'm not sure it's good or not. However, It's working well in enterprise product now.
I hope it helps you.

nuxt.config.js

const fs = require('fs');
const path = require('path');
const dotenv = require('dotenv');

const packageJson = fs.readFileSync('./package.json');
const version = JSON.parse(packageJson).version || 0;

let envPath = path.resolve(process.cwd(), '.env');
if (process.env.BUILD_TARGET_SERVER) {
  envPath = path.resolve(process.cwd(), 'bin', `${process.env.BUILD_TARGET_SERVER}.env`);
}

dotenv.config({
  path: envPath,
});

console.log('process.env.API_BASE_URL ============> ', process.env.API_BASE_URL);

----------------------------------

  axios: {
    proxy: true,
    // https: true
    baseURL: process.env.API_BASE_URL,
  },

----------------------------------

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
  ],

----------------------------------

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/auth/login', method: 'post', propertyName: 'access_token' },
          logout: false,
          user: { url: '/api/users', method: 'get', propertyName: 'userId' },
        },
      },
    },
  },

----------------------------------

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

----------------------------------