❤
npm
Sign UpSign In

@uam/vuejs-user

0.14.14 • Public • Published

Vuejs user

Installation

via npm

npm install @uam/vuejs-user

via yarn

yarn add @uam/vuejs-user

Usage

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

For Font Awesome icons, add following to <head> :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Install Vuejs user module as follows:

# main.js

import userPlugin from '@uam/vuejs-user'

import Profile from './models/Profile'
import User from './models/User'

let logoutCallback = () => {
  store.dispatch('beforeLogout')
}

let apiRoutes = {
  login: '/login',
  logout: '/logout',
  requestPasswordReset: '/request-password-reset',
  profile: '/profile',
  refresh: '/login/refresh',
  signup: '/signup',
  updatePassword: '/user/change-password'
}

let routes = {
  login: 'login',
  logout: 'login', // route to go after logout
  profile: 'profile'
}

// key is credential param used by user plugin, value is param needed by backend
let credentialsParamMapper = {
  username: 'email'
}

let profileModel = new Profile()
let userModel = new User()

Vue.use(
  userPlugin,
  {
    apiRoutes,
    axios,
    credentialsParamMapper,
    logoutCallback,
    profileModel,
    router,
    store,
    userModel,
    vueAuthenticateOptions,
  }
)

Options

Option Description Type Default Value
apiRoutes API endpoints related to user authentication Object
axios The instance of axios used by app Object
credentialsParamMapper Overridden credential keys to API keys mapper Object
loginRouteName The name of the login route String 'login'
logoutCallback Callback to invoke while logging out String
profileModel The stub instance of profile model Object UAMProfile object
redirectAfterLogout The name of route to redirect to after user logs out String 'home'
router The registered router instance Object
store The Vuex store to use Object
userModel The stub instance of user model Object UAMUser object
vueAuthenticateOptions Social login provider options Object

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, install and setup vue-authenticate in your app as follows:

# main.js

let vueAuthenticateOptions = {
  baseUrl: process.env.API_BASE_URL, // API domain

  providers: {
    facebook: {
      clientId: process.env.FACEBOOK_CLIENT_ID,
      redirectUri: window.location.origin + '/'
    },
    github: {
      clientId: process.env.GITHUB_CLIENT_ID,
      redirectUri: window.location.origin
    },
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID,
      redirectUri: window.location.origin
    },
    linkedin: {
      clientId: process.env.LINKEDIN_CLIENT_ID,
      redirectUri: window.location.origin
    }
  }
}

Vue.use(User, { store, router, loginRouteName: 'login', vueAuthenticateOptions, axios })

Configure client ID of each platform that you want to enable on config/{environment}.env.js of your app.

Then you can render login component with various social login links by passing respective prop as follows:

<uam-login facebook github google linkedin></uam-login>

For login form on modal dialog

When mounting component if refresh token is expired(with Vue.$uamAuth.isRefreshExpired()) or on axios request if error occurs with 401 Unauthorized status, you can authenticate using uam-login component as modal body inside your modal.

You can set no-redirect prop to remain on current page after logging through modal dialog. You can listen to login:success event and handle closing modal dialog, re-requesting endpoint etc. on your event handler.

<uam-login @login:success="hideLoginModal" no-redirect></uam-login>

Component Reference

<uam-login>

Properties

Property Description Type Default Value
facebook Facebook login button Boolean false
github Github login button Boolean false
google Google login button Boolean false
linkedin Linkedin login button Boolean false
redirect Route to redirect to after login. false for no redirect. Boolean, Object, String 'home'
requestPasswordReset Password reset request route. false to not show link Boolean, Object, String 'request_password_reset'
showPasswordButton Display password button Boolean false
title Title to show as heading String translated user.login.title key

Events

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

<uam-profile>

Properties

Property Description Type Default Value
max-password Maximum password length Number 255
min-password Minimum password length Number 6
update-url API url to update current user profile String

Events

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

<uam-request-password-reset>

Properties

Property Description Type Default Value
login Route to go back to login Object, String 'login'
redirect Route to redirect to after requesting reset Object, String 'home'
title Title to show as heading String translated 'user.requestPasswordReset.title' key

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

<uam-reset-password>

Properties

Property Description Type Default Value
max-password Maximum password length Number 255
min-password Minimum password length Number 6
redirect Route to redirect to after resetting password Object, String 'login'
reset-url API url to reset password String
title Title to show as heading String translated 'user.resetPassword.title' key

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

<uam-user-enable>

Properties

Property Description Type Default Value
enable-url API url to enable user String
redirect Route to redirect to after enabling user Object, String 'home'

Events

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

<uam-user-menu>

Properties

Property Description Type Default Value
divider Show dropdown divider Boolean true
login Login route Object, String 'login'
profile Profile route Object, String
right Right align dowpdown menu Boolean false
signup Signup route Object, String 'signup'
welcome Content to show on menu button String translated user.menu.welcome key

<uam-signup>

Properties

Property Description Type Default Value
max-password Maximum password length Number 255
min-password Minimum password length Number 6
redirect Route to redirect to after signup. String, Object 'home'
title Title to show as heading String translated user.signup.title key

Events

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

Readme

Keywords

none

Package Sidebar

Install

npm i @uam/vuejs-user

Repository

github.com/unitedasian/vuejs-user

Homepage

github.com/unitedasian/vuejs-user

Weekly Downloads

1

Version

0.14.14

License

MIT

Unpacked Size

238 kB

Total Files

37

Last publish

Collaborators

  • cpxpratik
  • manandharsabir
  • opichon
Try on RunKit
Report malware