@dzangolab/vue-user

Installation

via npm

npm install @dzangolab/vue-user

via yarn

yarn add @dzangolab/vue-user

Usage

Provided components are built on Bootstrap 4 so install bootstrap 4 as stated here.

Install Vuejs user module as follows:

# main.js

import initUserModule from '@dzangolab/vue-user'

const apiRoutes = {
    enable: '/user/enable',
    login: '/login',
    logout: '/logout',
    me: '/me',
    refresh: '/login/refresh',
    requestPasswordReset: '/request-password-reset',
    resetPassword: '/reset-password/:token', // dynamic segments start with a colon
    signup: '/signup',
    updatePassword: '/user/change-password',
    updateProfile: '/me',
    updateUser: '/me'
}

const options = {
}

initUserModule(
  store,
  axios,
  router,
  apiRoutes,
  options
)

arguments

Arguments	Description	Type	Default Value
apiRoutes	API endpoints related to user authentication	Object
axios	The instance of axios used by app	Object
router	The registered router instance	Object
store	The Vuex store to use	Object
options	User module options	Object

options

default options

import {ProfileModel, UserModel} from '@dzangolab/vue-user'

const options = {
    login: {
      emailAsUsername: false,
      showPasswordToggle: true,
      showSubTitles: false
    },
    namespace: '$_user',
    onLoginSuccess: null, //callback
    onLogoutSuccess: null, //callback
    password: {
      length: {
        max: 255,
        min: 6
      }
    },
    profileModel: new ProfileModel(),
    routes: {
      login: 'login',
      home: 'home',
      pageNotFound: null,
      redirectAfterLogout: 'login',
      redirectAfterSignup: 'profile',
      resetPassword: 'reset_password',
      resetPasswordRequest: 'reset_password_request',
      signup: 'signup'
    },
    signup: {
      enabled: true,
      showPasswordToggle: true
    },
    sso: {
      apiBaseUrl: '',
      enabled: false,
      layout: {
        direction: 'v', //supports 'v' or 'vertical' and 'h' or 'horizontal'
        ssoFirst: false
      },
      providers: [],
      showLabels: false
    },
    userModel: new UserModel()
  }

Localization

import VueI18n from 'vue-i18n'

import userEn from '@dzangolab/vue-user/src/locales/en/user.json'
import userFr from '@dzangolab/vue-user/src/locales/fr/user.json'

const i18n = new VueI18n({
  locale: 'en',
  en: userEn,
  fr: userFr
})

Route meta fields

This plugin uses following meta fields in beforeEach guard of router instance. These can be specified when defining a route in the app

Meta field key	Description	Type	Value
redirectOnExpire	Redirect to loginRouteName when both access token and refresh token gets expired	Boolean	true
requiresAuth	Make route accessible to only authenticated user. Redirects to loginRouteName when user is not logged in.	Boolean	true

Social login

For social login, internally it uses vue-authenticate

providers = {
  facebook: {
    clientId: process.env.VUE_APP_SSO_FACEBOOK_APP_ID, // https://developers.facebook.com/appspage/
    enabled: parse(process.env.VUE_APP_SSO_FACEBOOK_ENABLED, true),
    rank: parse(process.env.VUE_APP_SSO_FACEBOOK_RANK, 2)
  },
  github: {
    clientId: process.env.VUE_APP_SSO_GITHUB_CLIENT_ID, // https://github.com/settings/applications
    enabled: parse(process.env.VUE_APP_SSO_GITHUB_ENABLED, true),
    rank: parse(process.env.VUE_APP_SSO_GITHUB_RANK, 4)
  },
  google: {
    clientId: process.env.VUE_APP_SSO_GOOGLE_CLIENT_ID, // https://console.developers.google.com > credentials
    enabled: parse(process.env.VUE_APP_SSO_GOOGLE_ENABLED, false),
    rank: parse(process.env.VUE_APP_SSO_GOOGLE_RANK, 1)
  },
  linkedin: {
    clientId: process.env.VUE_APP_SSO_LINKEDIN_CLIENT_ID, // https://www.linkedin.com/developers/apps
    enabled: parse(process.env.VUE_APP_SSO_LINKEDIN_ENABLED, false),
    rank: parse(process.env.VUE_APP_SSO_LINKEDIN_RANK, 3)
  }
}

Component Reference [TODO review these]

<Login>

Events

Event	Description
login:error	emits after error while logging in
login:start	emits before invoking login
login:success	emits after successful login

<Profile>

Events

Event	Description
profile:before-update	emits before invoking update
profile:unauthorized-error	emits if response status is 401 while refreshing token
profile:update-error	emits after error while updating profile
profile:update-success	emits after successful profile update

<RequestPasswordReset>

Events

Event	Description
request-password-reset:error	emits after error while requesting password reset
request-password-reset:start	emits before requesting password reset
request-password-reset:success	emits after successfully requesting password reset

<ResetPassword>

Events

Event	Description
reset-password:error	emits after error while resetting password
reset-password:start	emits before invoking password reset
reset-password:success	emits after successful password reset

<Confirm>

Events

Event	Description
user-confirm:error	emits after error while confirm user
user-confirm:start	emits before starting to confirm user
user-confirm:success	emits after successfully confirm user

<Signup>

Properties

Events

Event	Description
signup:error	emits after error while signing up
signup:start	emits before invoking signup
signup:success	emits after successful signup