Skip to content

CodeCoupler Costa Authentication Modules

All modules can be used as the CodeCoupler Costa authentication module as well as in custom JavaScript environments.

Module Interface

Authentication Modules must provide the following interface:

export class {

  // Best practice: Use one object as single argument for your options
  constructor(options = {}): AuthenticationModule;

  // Return a promise which resolves when the module is ready and rejects with an Error object in
  // error case
  get initialized() : Promise<undefined|Error>;

  // Return a reactive object containing current logied in identity
  get identity() : Reactive<Identity>;

  // Return a promise which resolves to "true" when login was successfull, otherwise "false".
  // Login should be able to be called multiple times without open multiple login sessions/ui's
  async login(): Promise<boolean>;

  // Return a promise which resolves to "true" when logout was successfull, otherwise "false"
  async logout(): Promise<boolean>;

}

Identity Object

An identity is a reactive object. Whenever an identity changes, the reactive object will update its values. The object has the following properties, at least:

{
  authenticated: boolean;
  id: string | null;
  username: string | null;
  given_name: string | null;
  family_name: string | null;
  email: string | null;
  roles: Array<string>;
  groups: Array<string>;
  permissions: Array<string>;
}
  • The property authenticated is a Boolean value. It tells you if the user is logged in or not.
  • The properties roles, groups and permissions are empty arrays if not authenticated.
  • All other properties have the value null if not authenticated.

React to Identity Changes

The best way to keep track of identity changes is to use the reactive property identity with:

import { watch } from "vue";

watch(
  () => authInstance.identity,
  () => {
    // Check here authInstance.identity.authenticated ||
    // Check here for example authInstance.roles.includes("some-roles");
  },
  { deep: true, immediate: true }
);