@bcwdev/auth0-vue

Vue3.js Updates

1export const AuthService = initializeAuth({
2  domain,
3  clientId,
4  audience,
5  onRedirectCallback: appState => {
6    router.push(
7      appState && appState.targetUrl
8        ? appState.targetUrl
9        : window.location.pathname
10    )
11  }
12})
13
14AuthService.on(AuthService.AUTH_EVENTS.AUTHENTICATED, async () => {
15  AppState.user = AuthService.user
16  $resource.defaultHeaders.Authorization = AuthService.bearer
17  await profileService.getProfile()
18})
19AuthService.on(AuthService.AUTH_EVENTS.LOADED, () => {
20  AppState.$auth = reactive(AuthService)
21})
22

CDN

1<script src="https://cdn.jsdelivr.net/gh/jakeoverall/auth0-vue/auth0provider.min.js">

---

This library is a small wrapper around auth0-spa-js. It is extended beyond the simple scale that is used in the auth0 tutorial. Added features include getting the userInfo and identity on login.

REQUIRED: Enable RBAC in you application for the full set of features in this app. You can also add the following rule to retrieve more information in your userInfo

1// AUTH0 RULE
2function (user, context, callback) {
3  // please note auth0 will strip any non namespaced properties
4  const namespace = 'https://YOURDOMAIN.auth0.com';
5  const assignedRoles = (context.authorization || {}).roles;
6
7  let idTokenClaims = context.idToken || {};
8
9  idTokenClaims[`${namespace}/roles`] = assignedRoles;
10  context.idToken = idTokenClaims;
11  context.idToken[namespace + '/user_metadata'] = user.user_metadata;
12  context.idToken[namespace + '/app_metadata'] = user.app_metadata;
13
14  // namespaced properties are reduced to simple properties by this libary
15  // so in vue you can access userInfo.app_metadata directly
16
17  callback(null, user, context);
18}

Fetching this extra data allows us to extend the basic methods for validating user roles and permissions.

On login $auth.getUserData() will be triggered

Vue 2 Only

Install

1import Vue from "vue";
2import { Auth0Plugin } from "@bcwdev/auth0-vue/vue2";
3// you will get these from your auth0 dashboard
4import { domain, clientId, audience } from "./authconfig";
5
6Vue.use(Auth0Plugin, {
7  domain,
8  clientId,
9  audience,
10  onRedirectCallback: appState => {
11    router.push(
12      appState && appState.targetUrl
13        ? appState.targetUrl
14        : window.location.pathname
15    );
16  }
17});

$auth

You can access any of the following state properties directly from your vue components using this.$auth

1// $auth state
2{
3  loading: true,
4  isAuthenticated: false,
5  user: {},
6  userInfo: {},
7  identity: {},
8  bearer: "",
9}
10
11// $auth methods
12{
13  /**
14   * Sets userInfo, identity and bearer
15   * @returns {Promise<void>}
16  */
17  getUserData()
18
19  /**
20   * Depends on UserData
21   * @param {string[] | string} permissions
22   * @returns {boolean}
23  */
24 hasPermissions(permissions) {},
25
26  /**
27   * Depends on UserData
28   * @param {string[] | string} roles
29   * @returns {boolean}
30  */
31  hasRoles(roles) {},
32}
33

Caution: $auth.identity is easily modifed on the client and therefore cannot be trusted when making server side decisions. Your server should use the bearer token and the auth0 api when handeling requests see @bcwdev/auth0provider

Conditional rendering in vue templates based on roles or permissions can be accomplished directly from the $auth property

1<div v-if="$auth.hasRoles('admin')">
2  <p>Only an admin can see me</p>
3</div>