Auth Module

Authentication module for Nuxt.js

📖 Release Notes

Setup

• Add @nuxtjs/auth dependency using yarn or npm to your project
• Add @nuxtjs/auth and @nuxtjs/axios to modules section of nuxt.config.js

{
  modules: [
    '@nuxtjs/auth',

     // ...Axios module should be included AFTER @nuxtjs/auth
    '@nuxtjs/axios'
 ],
 // Default Values
 auth: {
    user: {
      endpoint: 'auth/user',
      propertyName: 'user',
      resetOnFail: true,
      enabled: true,
      method: 'GET',
    },
    login: {
      endpoint: 'auth/login',
    },
    logout: {
      endpoint: 'auth/logout',
      method: 'GET',
    },
    redirect: {
      notLoggedIn: '/login',
      loggedIn: '/'
    },
    token: {
      enabled: true,
      type: 'Bearer',
      localStorage: true,
      name: 'token',
      cookie: true,
      cookieName: 'token'
    }
}

Options

user

Sets the global settings for store fetch action.

• endpoint - Set the URL of the user data endpoint. It can be a relative or absolute path.
• propertyName - Set the name of the return object property that contains the user data. If you want the entire object returned, set an empty string.
• resetOnFail - Automatically invalidate all tokens if user fetch fails. (Default is true)
• method - Set the request to POST or GET.

login

Set the global settings for store login action.

• endpoint - Set the URL of the login endpoint. It can be a relative or absolute path.

logout

Sets the global settings for store logout action.

• endpoint - Set the URL of the logout endpoint. It can be a relative or absolute path.
• method - Set the request to POST or GET.

token

• enabled (Boolean) - Get and use tokens for authentication.
• type - Sets the token type of the authorization header.
• localStorage(Boolean) - Keeps token in local storage, if enabled.
• name - Set the token name in the local storage.
• cookie (Boolean) - Keeps token in cookies, if enabled.
• cookieName - Set the token name in Cookies.

redirect

• notLoggedIn (Boolean) - Sets the redirect URL default of the users not logged in. Only when auth middleware is added to a page.
• loggedIn (Boolean) - Sets the redirect URL default of the users logged in. Only when no-auth middleware is added to a page.

Example usage

// ... code ...
// Do a password based login
store.dispatch('auth/login', {
  fields: {
    username: 'your_username',
    password: 'your_password'
  }
})

// ... code ...
store.dispatch('auth/logout') // run logout

// ... code ...
store.state.auth.token // get access token

// ... code ...
store.state.auth.user // get user data

// ... code ...
store.getters['auth/loggedIn'] // get login status (true or false)

Middleware

// ... in nuxt.config.js ...
router: {
  middleware: [
    'auth', // If user not logged in, redirect to '/login' or to URL defined in redirect property
    'no-auth' // If user is already logged in, redirect to '/' or to URL defined in redirect property
  ]
}

License

MIT License

Copyright (c) Nuxt Community