auth-capacitor v1.0.0

Installation

Add auth-capacitor @nuxtjs/axios dependencies to your project:

npm install auth-capacitor
npm install @nuxtjs/axios
npm install @capacitor/core

yarn add auth-capacitor
yarn add @nuxtjs/axios
yarn add @capacitor/core

Then, add auth-capacitor to the modules section of nuxt.config.js:

{
  modules: [
    '@nuxtjs/axios',
    'auth-capacitor'
  ],
  auth: {
    // Options
  }
}

When adding auth-capacitor to a new Nuxt project ensure you have activated the Vuex store. More information on how to do that can be found on the Nuxt Getting Started Guide.

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'
}

You can set middleware option to guest in a specific component. When this middleware is enabled on a route and loggedIn is true user will be redirected to redirect.home route. (/ by default)

export default {
  middleware: 'guest'
}

API

This module globally injects $auth instance, meaning that you can access it anywhere using this.$auth. For plugins, asyncData, fetch, nuxtServerInit and Middleware, you can access it from context.$auth.

properties

All properties are reactive. Meaning that you can safely use them in Vue template v-if conditions.

user

This object contains details about authenticated user such as name. You can access it using either $auth or Vuex.

// Access using $auth
this.$auth.user

// Access using vuex
this.$store.state.auth.user

loggedIn

This boolean flag indicates that user is authenticated and available at the moment or not.

// Access using $auth
this.$auth.loggedIn

// Access using vuex
this.$store.state.auth.loggedIn

Under the hood, auth uses attached $storage instance to provide this states.

methods

login(...args)

• Returns: Promise

Login using active strategy. Usage varies by current strategy.

this.$auth.login(/* .... */)
  .then(() => this.$toast.success('Logged In!'))

logout(...args)

• Returns: Promise

Logout active strategy. Usage varies by current scheme.

await this.$auth.logout(/* .... */)

fetchUser()

• Returns: Promise

Force re-fetch user using active strategy.

await this.$auth.fetchUser()

Default options

{
  auth: {
    endpoint: {
      login: '/login',
      logout: '/logout',
      user: '/getUser',
    },
      token: {
      proprety: 'token',
    },
    user: {
      proprety: 'data',
    },
    redirect: {
      login: '/login',
      logout: '/',
      home: '/',
    },
  }
}