@nuxtjs/auth

🔑 Auth

Authentication module for Nuxt.js

📖 Release Notes

If you are coming from an older release please be sure to read Migration Guide.

Setup

Install with yarn:

yarn add @nuxtjs/auth @nuxtjs/axios

Install with npm:

npm install @nuxtjs/auth @nuxtjs/axios

Edit nuxt.config.js:

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

 auth: {
   // Options
 }

See Options section for all available options

Usage

Do a password based login:

this.$auth.login({
  data: {
    username: 'your_username',
    password: 'your_password'
  }
})

user object:

// Access using $auth (reactive)
this.$auth.state.user

// Access using $store (reactive)
this.$store.state.auth.user

// Refetch user
this.$auth.fetchUser()

loggedIn status:

// Access using $auth (reactive)
this.$auth.state.loggedIn

// Access using $store (reactive)
this.$store.state.auth.loggedIn

// Do logout
this.$auth.logout()

Check if user has a speficic scope:

// Returns is a computed boolean
this.$auth.hasScope('admin')

Auth token:

// Access token (reactive)
this.$auth.token

// Update token
this.$auth.setToken('123')

Listen for auth errors: (plugins/auth.js)

export default function({ $auth }) {
  $auth.onError(({ name, error }) => {
    console.error(name, error)
  })
}

Working with low level state: (Not recommended)

// Store
this.$auth.setState(key, val)
this.$auth.getState(key)

// Cookie
this.$auth.setCookie(key, val, options)
this.$auth.getCookie(key)

// LocalStorage
this.$auth.setLocalstorage(key, val, options)
this.$auth.getLocalstorage(key)

Auth Middleware

You can enable auth middleware either globally or per route. When this middleware is enabled on a route and loggedIn is false user will be redirected to redirect.login route. (/login by default)

Setting per route:

export default {
  middleware: 'auth'
}

Globally setting in nuxt.config.js:

router: {
  middleware: ['auth']
}

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

export default {
  options: {
    auth: false
  }
}

Options

See defaults.js for defaults.

endpoints

Default:

endpoints: {
  login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
  logout: { url: '/api/auth/logout', method: 'post' },
  user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
}

Endpoints used to make requests using axios. They are basically extending Axios Request Config.

propertyName can be used to specify which field of the response to be used for value. It can be undefined to directly use API response or being more complicated like auth.user.

To disable each endpoint, simply set it's value to false.

redirect

Default:

redirect: {
  login: '/login',
  home: '/'
},

Redirect paths to redirect user after login and logout. Each can be disabled by setting to false.

token

Default:

token: {
  type: 'Bearer',
  name: 'token'.
}

• type - Authotization header type to be used in axios requests.
• name - Token name to be stored in Browser localStorage. It can be disabled by setting to false.

cookie

Default:

cookie: {
  name: 'token',
  options: {
    path: '/'
  }
}

Using cookies is required for SSR requests to work with JWT tokens.

It can be disabled by setting cookie to false.

• name - Cookie name.
• options - Cookie options.
  • options.expires can be used to speficy cookie lifetime in days. Default is session only.

fetchUserOnLogin

• Default: true

If enabled, user will be auto fetched after login.

resetOnError

• Default: true

If enabled, user will be automatically logged out if any error happens. (For example when token expired)

rewriteRedirects

• Default: true

If enabled, user will redirect back to the original guarded route instead of redirects.home.

namespace

• Default: auth

Vuex store namespace for keeping state.

scopeKey

• Default: scope

user object proprty used for scope checkings (hasScope). Can be either an array or a object.

License

MIT License - Copyright (c) Nuxt Community