@bcwdev/auth0provider-client

AuthService.js

1import {
2    initialize
3} from '@bcwdev/auth0provider-client'
4
5export const AuthService = initialize({
6    domain,
7    clientId,
8    authorizationParams: {
9        redirect_uri: window.location.href
10    }
11})
12
13// Listen for secific AUTH_EVENTS hooks
14AuthService.on(AuthService.AUTH_EVENTS.AUTHENTICATED, async () => {
15    // AuthService.user is now defined
16    AppState.user = AuthService.user
17    $resource.defaultHeaders.Authorization = AuthService.bearer
18    await profileService.getProfile()
19})
20AuthService.on(AuthService.AUTH_EVENTS.LOADED, () => {
21    AppState.$auth = reactive(AuthService)
22})

CDN

1<script src="https://cdn.jsdelivr.net/gh/jakeoverall/auth0provider-client/browser/Auth0Provider.browser.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}

AuthService

You can access any of the following state properties directly from the initialized

1export const AuthService = Auth0Provider.initialize(options)

---

1// AuthService Properties
2{
3    loading: true,
4    user: {
5        isAuthenticated: false,
6        // ... Auth0User
7    },
8    userInfo: {
9        // ... Extra details provided by your Auth0Rules
10    },
11    bearer: "",
12}
13
14// AuthService Login Methods
15{
16    /** Awaitable Authentication opening a popup window */
17    async loginWithPopup(o) {}
18    /** Authenticates the user using the redirect method */
19    loginWithRedirect(o) {}
20    /** Returns all the claims present in the ID token */
21    getIdTokenClaims(o) {}
22    /** Returns the access token. If the token is invalid or missing, a new one is retrieved */
23    getTokenSilently(o) {}
24}
25
26// AuthService Helper Methods
27{
28    /**
29     * Depends on UserData
30     * @param {string[] | string} permissions
31     * @returns {boolean}
32     */
33    hasPermissions(permissions) {},
34
35        /**
36         * Depends on UserData
37         * @param {string[] | string} roles
38         * @returns {boolean}
39         */
40        hasRoles(roles) {},
41}
42
43// Event Hooks
44{
45    LOADING: "LOADING",
46    LOADED: "LOADED",
47    AUTHENTICATED: "AUTHENTICATED"
48    // LOGOUT FORCES A REFRESH SO NO HOOK HERE
49}

Caution: Auth0Provider 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 to validate requests see @bcwdev/auth0provider