Installation

npm i @ui-toolkit/auth

import Auth from '@ui-toolkit/auth';
import router from '@/router';

const auth = new Auth({
  router, // vue-router. This needs to be after it's initialized.
  authority: 'https://youridserver.com',
  clientId: 'my-app',
  scope: 'profile offline_access', // offline_access is required
  siteDomain: 'yourwebsite.com',
});

Vue.use(auth);

export default auth;

This module is an oidc-client implementation allowing a no-setup use of oidc in a vue app. There's a fair bit of configuration available to allow for custom use case, but 5 config options are required.

API

The auth module can be used throughout the app. It exposes the following API through the exported module as well as globally in vue components via this.$auth.

auth.loggedIn

Returns a boolean indicating whether the user is logged in.

auth.user

Returns the user object.

auth.userExpired

Returns a boolean indicating whether the user is expired.

auth.logIn()

Starts the login flow.

auth.logOut()

Logs the user out.

auth.refresh()

Forces a refresh of the user session if the ID session is still valid. (new token is grabbed)

auth.map()

Utility function for mapping the above properties to computed properties & vuex getters. Takes an array of keys and returns an object that can be spread into computed.

computed: { ...this.$auth.map(['loggedIn', 'user']), },

Config

router

Type: VueRouter

The reference to your initialized vue router.

authority

Type: string

The id server url.

clientId

Type: string

The clientId for oidc.

scope

Type: string

The oidc scope string. offline_access must always be included. The remaining scopes are typically custom per application and per id server client id config.

siteDomain

Type: string

The full root domain of the site.

appContextPath

Type: string

If the app has a root path as context, such as mysite.com/app/, the appContextPath would be /app. Do not end it with a slash.

beforeAuthCheck

Type: Function (to: Route) => void

Any custom logic you want to run before checking auth.

getHints

Type: Function (to: Route) => { localeHint: string; loginHint: string }

The function to get localeHint and loginHint.

customLightValidation

Type: Function (auth: Auth) => boolean;

Custom logic for light validation to be called every 5 seconds.

customFullValidation

Type: Function (auth: Auth) => boolean;

Custom logic for light validation to be called every route change & every 10 minutes. It should return a boolean indicating the user is validated. If the function returns false, the app will log out on route change.

customPostLogin

Type: Function (auth: Auth, returnUrl: string | null, returnIsExternal: boolean) => boolean

Custom logic called after logging in. It should return a boolean indicating whether to proceed. True will continue, false will cause a logout.

customPostLogout

Type: Function (reason?: string) => void

Custom logic called after logging out.

customPostUserLoaded

Type: Function (auth: Auth) => void

Custom logic called after the user has loaded.

customMapProfile

Type: Function (auth: Auth) => void

Custom logic called during the 'process login callback'. Receives the entire auth object, allowing custom mapping through access to the user.

extendedUserDefaults

Type: Object

An object that becomes reactive data on the user object.

customCallbackView

Type: VueComponent

customLoggedOutView

Type: VueComponent

customLayout

Type: VueComponent

extraQueryParams

Type: Function () => { [key: string]: string }

Function that returns key value pairs to be added as query string params during the signInRedirect.