Auth-module: Always redirected to login

Created on 27 Jun 2019  路  4Comments  路  Source: nuxt-community/auth-module

Version

v4.8.1

Reproduction link

http://sorry-no-link

Steps to reproduce

  1. Nuxt in universal mode
    Use global auth middlware in nuxt config
  router: {
    middleware: 'auth'
  },
  1. Log in with any strategy
  2. Refresh on any protected route
  3. You'll see you get redirect to the login page

What is expected ?

After a refresh, middleware should detect loggedin is true and a redirect will not occur.

What is actually happening?

Redirected to login route, but the state is logged in.

Additional comments?

Switching to spa mode fixes this issue, so I'm guessing this is happening due to the pre-rendering nature of ssr and the fact the server does not have access to client storage, but I'm not too sure.

current 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: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-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
    plugins: ['~/plugins/auth.js'],
    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,
  },
  /*
  ** Proxy config
  */
  proxy: {
    '/api': {
      target: process.env.API_URL,
      logLevel: 'debug',
      pathRewrite: {
        '^/api/': '/'
      }
    },
  },
  /*
  ** Build configuration
  */
  build: {
    transpile: ['vuetify/lib'],
    plugins: [new VuetifyLoaderPlugin()],
    loaders: {
      stylus: {
        import: ['~assets/style/variables.styl']
      }
    },

    /*
    ** You can extend webpack config here
    */
    // extend(config, ctx) {
    //   // Run ESLint on save
    //   if (ctx.isDev && ctx.isClient) {
    //     config.module.rules.push({
    //       enforce: 'pre',
    //       test: /\.(js|vue)$/,
    //       loader: 'eslint-loader',
    //       exclude: /(node_modules)/
    //     })
    //   }
    // }
  }
}

This bug report is available on Nuxt community (#c365)
bug

Most helpful comment

For anyone else having same issue... in my case I had { baseURL: '/api' } set for axios in nuxt config file. Changed it to the full url eg: 'http://127.0.0.1:3000/api/' and worked fine afterwards... thanks to this issue post.

All 4 comments

API_URL must be some reserved system variable for Node.js? I solved this by changing the env variable to API respectively in the .env file and nuxt.config.js

@russellsean It is an env used by axios (or http) module :)

@pi0 Good to know, thank you!

For anyone else having same issue... in my case I had { baseURL: '/api' } set for axios in nuxt config file. Changed it to the full url eg: 'http://127.0.0.1:3000/api/' and worked fine afterwards... thanks to this issue post.

Was this page helpful?
0 / 5 - 0 ratings