# @dzangolab/vue-user

> vue.js user module

Latest version **0.2.0** (published 2020-06-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dzangolab/vue-user
pnpm add @dzangolab/vue-user
yarn add @dzangolab/vue-user
bun add @dzangolab/vue-user
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-06-11 |
| First published | 2020-04-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+25 in 2 direct dependencies) |
| Install scripts | no |
| Author | Olivier Pichon |
| Maintainers | cpxpratik, manandharsabir, opichon, rameshlohala, uddhab |
| Keywords | vuejs, user, Authentication |

## Links

- npm: https://www.npmjs.com/package/@dzangolab/vue-user
- Repository: https://github.com/dzangolab/vue-user
- Issues: https://github.com/dzangolab/vue-user/issues
- npm.io page: https://npm.io/package/@dzangolab/vue-user

## Dependencies (12)

- [vue](https://npm.io/package/vue.md) ^2.6.0
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [axios](https://npm.io/package/axios.md) ^0.18.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.4
- [vue-i18n](https://npm.io/package/vue-i18n.md) ^8.0.0
- [bootstrap](https://npm.io/package/bootstrap.md) ^4.4.1
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2
- [vue-axios](https://npm.io/package/vue-axios.md) ^2.0.2
- [vue-router](https://npm.io/package/vue-router.md) ^3.1.5
- [vee-validate](https://npm.io/package/vee-validate.md) ^3.2.4
- [is-plain-object](https://npm.io/package/is-plain-object.md) ^3.0.0
- [vue-authenticate](https://npm.io/package/vue-authenticate.md) ^1.3.4

## Alternatives

- [@clerk/clerk-expo](https://npm.io/package/@clerk/clerk-expo.md) — 133.6K weekly downloads
- [@pothos/plugin-authz](https://npm.io/package/@pothos/plugin-authz.md) — 12.4K weekly downloads
- [@bounded-sh/client](https://npm.io/package/@bounded-sh/client.md) — 3.2K weekly downloads
- [@luigi-project/plugin-auth-oauth2](https://npm.io/package/@luigi-project/plugin-auth-oauth2.md) — 2.3K weekly downloads
- [@nocobase/plugin-verification](https://npm.io/package/@nocobase/plugin-verification.md) — 2.0K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2020-06-11
- 0.1.4 — 2020-05-26
- 0.1.3 — 2020-05-26
- 0.1.2 — 2020-05-06
- 0.1.1 — 2020-04-29
- 0.1.0 — 2020-04-22

## README

# @dzangolab/vue-user

## Installation

### via npm

```bash
npm install @dzangolab/vue-user
```

### via yarn

```bash
yarn add @dzangolab/vue-user
```

## Usage

Provided components are built on Bootstrap 4 so install bootstrap 4 as stated [here](https://getbootstrap.com/docs/4.0/getting-started/introduction/).

Install Vuejs user module as follows:

```js
# 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

```js
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

```js
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](https://github.com/dgrubelic/vue-authenticate)

```js
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      |

---
_Source: https://npm.io/package/@dzangolab/vue-user · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._