@uam/vuejs-user NPM

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