Authentication module for Nuxt.js
If you are coming from an older release please be sure to read Migration Guide.
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
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((error, name, endpoint) => {
console.error(name, error)
})
}
Working with low level state: (Not recommended)
// Store
this.$auth.setState(key, val)
this.$auth.getState(key)
// Watch state changes
this.$auth.watchState('loggedIn', newValue => { })
// Cookie
this.$auth.setCookie(key, val, options)
this.$auth.getCookie(key)
// LocalStorage
this.$auth.setLocalstorage(key, val, options)
this.$auth.getLocalstorage(key)
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 {
auth: false
}
See defaults.js for defaults.
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
.
Default:
redirect: {
login: '/login',
home: '/'
},
Redirect paths to redirect user after login and logout. Each can be disabled by setting to false
.
Default:
token: {
type: 'Bearer',
name: 'token'.
}
- type - Authorization 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
.
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.
- Default:
true
If enabled, user will be auto fetched after login.
- Default:
false
If enabled, user will be automatically logged out if any error happens. (For example when token expired)
- Default:
true
If enabled, user will redirect back to the original guarded route instead of redirects.home
.
- Default:
true
If enabled, user will automatically redirected to redirects.home
after login/logout.
- Default:
auth
Vuex store namespace for keeping state.
- Default:
scope
user
object proprty used for scope checkings (hasScope
). Can be either an array or a object.
MIT License - Copyright (c) Nuxt Community