@dpa-connect/dpa-id-user

A component that displays a user avatar and an overlay with profile info. This package additionally exposes dpa ID specific business logic used vue.js based apps, e.g. authentication and user object vuex store modules, and Vue 3.0 composition functions for authentication related features.

Browser compatibility

• The web component version (wc) should work in any modern browser except for Microsoft Internet Explorer.
• The vue.js library version (lib) should have support for Microsoft Internet Explorer 11.

Installation

yarn add @dpa-connect/dpa-id-user

Usage

Props

| prop | type | default | desc | | ---------- | ------- | --------- | -------------------------------------------------------------- | | token | String | undefined | A valid JSON webtoken string (JWT) | | profileUrl | String | undefined | The url where the user can edit their profile for their dpa id | | isLight | Boolean | false | If a light version of user avatar should be displayed |

With a module System (commonjs-node)

Using single file components and postcss imports

<template>
  <DpaIdUser
    :token="token"
    :profile-url="profileUrl"
    v-on:logout-click="handleLogoutClick"
  />
</template>
<script>
  import DpaIdUser from "@dpa-connect/dpa-id-user";

  export default {
    components: {
      DpaIdUser
    },
    data() {
      return {
        token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaXJzdE5hbWUiOiJKYW5lIiwibGFzdE5hbWUiOiJEb2UifQ";
        profileUrl: "https://sso.dpa-id.de/goto/myprofile"
      };
    },
    methods: {
      handleLogoutClick() {
        console.log("logout");
      }
    }
  };
</script>

<style postcss>
  @import "@dpa-connect/dpa-id-user/lib/dpa-id-user.css";
</style>

In the browser (universal modules)

See wc/demo.html

As web component (custom elements)

See lib/demo.html

auth and user store modules

To use the dpa ID auth and user shared vuex modules:

// store.js
import vuex from "vuex";
import authModule from "@dpa-connect/dpa-id-user/store/modules/auth";
import user from "@dpa-connect/dpa-id-user/store/modules/user";

// API services used (e.g. events/newsitems), and the API version used need to be registered to create an auth store module instance
const API_SETTINGS = {
  services: services: /(newsitems|filters)/,
  apiVersion: "v1"
};
const auth = authModule(API_SETTINGS);

export default new Vuex.Store({
  // ... other store config
  modules: {
    // ... other modules
    auth,
    user
  }
});

dpa ID Vue.js shared compositions

The useAuthentication and useWatchAuthentication composition functions can be used in vue.js apps setup to use the Vue Composition API.

useAuthentication composition

Exposes the following authentication related component properties/methods.

Requirements:

• auth store module
• user store module
• stageconfig store module

| Members | type | desc | | ---------------- | -------- | ----------------------------------------------------------------- | | ssoURL | String | dpa ID single sign-on URL (CAS) | | dpaIdURL | String | The url where the user can edit their profile for their dpa id | | stageConfig | Object | Stage specific configuration object also containing feature flags | | isAuthenticated | Boolean | Whether the user is currently authenticated in the app | | authIsLoading | Boolean | Whether the user is currently being authenticated | | token | String | The dpa ID JWT authorization token | | profile | Object | The data object of the dpa ID user | | authenticate | Function | Authenticates a JWT against app's public key | | logout | Function | Invalidates the current token making the user unauthenticated |

Useage in a vue.js component:

// Local app composition file e.g. src/compositions/useAuthentication.js
import useAuthentication from "@dpa-connect/dpa-id-user/compositions/useAuthentication";
import store from "@/store";

// Instantiates a composition function
export default useAuthentication(store);

// App.vue
import { defineComponent } from "@vue/composition-api";
import useAuthentication from "./compositions/useAuthentication";

export default defineComponent({
  setup() {
    const { isAuthenticated, token, profile } = useAuthentication();

    return { isAuthenticated, token, profile };
  }
});

useWatchAuthentication composition

Watches properties exposed from useAuthentication to:

• Load user's profile once authenticated, otherwise clear the token and logout
• Set success status if the auth token is validated
• Proceed to authenticate the user when the JWT ticket and stage config are present
• useWatchAuthentication is required to be used once at app level

Requirements:

• auth store module
• user store module
• stageconfig store module
• settings store module
• vue-router instance

Useage in a vue.js component:

// Local app composition file e.g. src/compositions/useWatchAuthentication.js
import useWatchAuthentication from "@dpa-connect/dpa-id-user/compositions/useWatchAuthentication";
import store from "@/store";
import router from "@/router";

// Instantiates a composition function
export default useWatchAuthentication({ store, router });

// App.vue
import { defineComponent } from "@vue/composition-api";
import useWatchAuthentication from "./compositions/useWatchAuthentication";

export default defineComponent({
  setup() {
    useWatchAuthentication();
  }
});