@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 |