npm install @uam/vuejs-useryarn add @uam/vuejs-userProvided 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 apiRoutes = {
login: '/login',
logout: '/logout',
profile: '/profile',
refresh: '/login/refresh'
}
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,
profileModel,
redirectRoute: 'login',
router,
routes,
store,
userModel,
vueAuthenticateOptions,
}
)| 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' |
| profileModel | The stub instance of profile model | Object | UAMProfile object |
| redirectAfterLogout | The name of the 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 |
Note: routes option can have logout key whose value does not refer route of logout. It refers the route to go after logout.
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 redirectRoute when both access token and refresh token gets expired |
Boolean | true |
| requiresAuth | Make route accessible to only authenticated user. Redirects to redirectRoute when user is not logged in. |
Boolean | true |
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, redirectRoute: 'login', userEndpoints, 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>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>| Property | Description | Type | Default Value |
|---|---|---|---|
| Facebook login button | Boolean | false |
|
| github | Github login button | Boolean | false |
| Google login button | Boolean | false |
|
| Linkedin login button | Boolean | false |
|
| redirect | Route to redirect to after login. false for no redirect. |
'Boolean | String |
| title | Title to show as heading | String | translated user.login.title key |
| Event | Description |
|---|---|
| login:error | emits after error while logging in |
| login:start | emits before invoking login |
| login:success | emits after successful login |
| Property | Description | Type | Default Value |
|---|---|---|---|
| update-url | API route to update current user profile | String |
| 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 |
| 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 |