Nuxt-token-auth-module NPM

Nuxt.js token auth module

Token based authentication module for Nuxt.js apps.

Setup

Install with npm:

npm install nuxt-token-auth-module @nuxtjs/axios

Edit nuxt.config.js:

modules: [
  // Modules connection order matters
  'nuxt-token-auth-module',
  '@nuxtjs/axios'
],
tokenAuth: {
  // Settings
}

Important

When adding auth-module to a new Nuxt project ensure you have activated the Vuex store.

Middleware

You can enable tokenAuth middleware. When this middleware is enabled on a route and loggedIn is false user will be redirected to redirects.login route.

Edit nuxt.config.js:

router: {
  middleware: ['tokenAuth']
}

In case of global usage, You can set tokenAuth option to false in a specific component and the middleware will ignore that route.

export default {
  tokenAuth: false
}

Settings

Example:

{
  // Each endpoint is a required option.
  // It will be used to make requests using axios.
  endpoints: {
    refresh: {
      url: 'http://localhost:3000/api/refresh',
      method: 'post'
    },
    login: {
      url: 'http://localhost:3000/api/login',
      method: 'post'
    },
    logout: {
      url: 'http://localhost:3000/api/logout',
      method: 'post'
    }
  },
  // Each redirect is a required option.
  // It will be used to make redirect, after failed loggedIn check or refresh request.
  redirects: {
    login: '/login'
  },
  // It will be used to set cookie options.
  cookie: {
    // Default path is '/'.
    path: '',
    // Default domain is current.
    domain: '',
  }
}

Methods

Anywhere in your application you can use following methods:

login

this.$tokenAuth.login([data])
// return Promise object with axios request
// [data] - data object for axios request

logout

this.$tokenAuth.logout([data])
// return Promise object with axios request
// [data] - data object for axios request

refresh

this.$tokenAuth.refresh(token, refreshToken)
// return Promise object with axios request

getToken

this.$tokenAuth.getToken()
// return auth token in 'spa' mode

this.$tokenAuth.getToken(context)
// return auth token in 'universal' mode

getRefreshToken

this.$tokenAuth.getRefreshToken()
// return refresh token in 'spa' mode

this.$tokenAuth.getRefreshToken(context)
// return refresh token in 'universal' mode

setToken

this.$tokenAuth.setToken(token)
// setting auth token in 'spa' mode

this.$tokenAuth.setToken(token, context)
// setting auth token in 'universal' mode

setRefreshToken

this.$tokenAuth.setRefreshToken(refreshToken)
// setting refresh token in 'spa' mode

this.$tokenAuth.setRefreshToken(refreshToken, context)
// setting refresh token in 'universal' mode

removeToken

this.$tokenAuth.removeToken()
// remove token in 'spa' mode

this.$tokenAuth.removeToken(context)
// remove token in 'universal' mode

removeRefreshToken

this.$tokenAuth.removeRefreshToken()
// remove refresh token in 'spa' mode

this.$tokenAuth.removeRefreshToken(context)
// remove refresh token in 'universal' mode

Usage example

Login

<script>
export default {
  data () {
    return {
      login: 'login',
      password: 'password'
    }
  },
  methods: {
    onLoginSubmit () {
      this.$tokenAuth
        .login({
          data: {
            login: this.login,
            password: this.password
          }
        })
        .then(() => {
          this.$router.push({
            name: 'index'
          })
        })
        .catch((error) => {
          console.log('login.vue => onLoginSubmit() => error: ', error)
        })
    }
  }
}
</script>

After you log in, token will be updated automatically if any of the requests receives a 401 Unathorized status code and refreshToken is not expired. If the lifetime of both tokens has expired, then you will be redirected to the login route from settings redirect section.

Logout

<script>
export default {
  methods: {
    onLogoutSubmit () {
      this.$tokenAuth
        .logout()
        .then(() => {
          this.$router.push({
            name: 'login'
          })
        })
        .catch((error) => {
          console.log('index.vue => onLogoutSubmit() => error: ', error)
        })
    }
  }
}
</script>