Added JWT decoding

src/@types/SessionIdentiferProps.ts

@@ -0,0 +1,3 @@
+export interface SessionIdentiferProps {
+  sessionIdentifier: string;
+}

src/@types/vue3-datatable/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="node" />
+
+declare module "@jobinsjp/vue3-datatable" {
+  export interface DataTable {}
+}

src/helpers/index.ts

@@ -1,7 +1,7 @@
 import { apiBaseUrl } from "../app.config.js";
-import type { SessionIdentifier } from "../types/index";
+import type { SessionIdentiferProps } from "../@types/SessionIdentiferProps";
 
-export function getAuthKeyFromProperties(props: SessionIdentifier) {
+export function getAuthKeyFromProperties(props: SessionIdentiferProps) {
   let authKey;
 
   if (props.sessionIdentifier && props.sessionIdentifier.length > 0) {
@@ -14,7 +14,7 @@ export function getAuthKeyFromProperties(props: SessionIdentifier) {
   return authKey;
 }
 
-export function getTenantProperty(key: string, props: SessionIdentifier) {
+export function getTenantProperty(key: string, props: SessionIdentiferProps) {
   return new Promise((resolve, reject) => {
     if (!props) {
       reject("no props provided for authentication");

src/router/index.ts

@@ -1,10 +1,12 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Home from "../views/HomePage.vue";
 import TelephonyContext from "../views/TelephonyContext.vue";
+import DebugView from "../views/DebugView.vue";
 import { Component } from "vue";
 
 const routes = [
   { path: "/", component: Home as Component },
+  { path: "/debug", component: DebugView as Component },
   {
     path: "/telephonyContext/",
     name: "telephonyContext",

src/types/index.ts

@@ -1,3 +0,0 @@
-export interface SessionIdentifier {
-  sessionIdentifier: string;
-}

src/vendor.d.ts

@@ -0,0 +1 @@
+declare module "@jobinsjp/vue3-datatable";

src/views/DebugView.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import { inject, onMounted, ref } from "vue";
+import type { VueCookies } from "vue-cookies";
+import { DataTable } from "@jobinsjp/vue3-datatable";
+import "@jobinsjp/vue3-datatable/dist/style.css";
+
+import { jwtDecode } from "jwt-decode";
+
+const cookiePrefix = "__Host-VRNTOTCT";
+const $cookies = inject<VueCookies>("$cookies");
+const data = ref([{ name: "", value: "" }]);
+const authCookie = ref("");
+const jwtDecoded = ref("");
+
+onMounted(() => {
+  if ($cookies) {
+    data.value = $cookies?.keys().map(function (value) {
+      return {
+        name: value,
+        value: $cookies.get(value) as string,
+      };
+    });
+
+    $cookies.keys().forEach((key) => {
+      if (key.startsWith(cookiePrefix)) {
+        console.log(`Found ${key} cookie using value for token`);
+        authCookie.value = $cookies.get(key) as string;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+        jwtDecoded.value = JSON.stringify(jwtDecode(authCookie.value), null, 2);
+        // console.log(`Decoded [${JSON.stringify(decoded, null, 2)}]`);
+      }
+    });
+  }
+});
+</script>
+<template>
+  <h1>Channel Automation Vua Applications - Debugging</h1>
+  <h2>Cookie information</h2>
+
+  <DataTable :rows="data"></DataTable>
+
+  <h3>VRNTOTCT authentication</h3>
+  <p>OIDC Token is {{ authCookie }}</p>
+  <h3>JWT Decoded</h3>
+  <pre>{{ jwtDecoded }}</pre>
+</template>

src/views/HomePage.vue

@@ -2,6 +2,9 @@
   <div>
     <h1>Home</h1>
     <ul>
+      <li>
+        <router-link to="/debug"> Debug </router-link>
+      </li>
       <li>
         <router-link
           to="/telephonyContext?ani=+13125138223&dnis=unknown&queue=GeneralInquires&direction=INBOUND&channel=AmazonConnect&type=Voice&transferSummary=summary&integrationCardTitle=title&integrationCardDoc=doc&_sessionIdentifier=bc93f1fc"

src/views/TelephonyContext.vue

@@ -5,22 +5,25 @@ import VerticalLabelValue from "../components/VerticalLabelValue.vue";
 import ErrorMessage from "../components/ErrorMessage.vue";
 import IntegrationCard from "../components/IntegrationCard.vue";
 import DaVinciView from "./DaVinciView.vue";
+
 import type { VueCookies } from "vue-cookies";
-
-import type { SessionIdentifier } from "../types/index";
-
-var user = {
-  id: 1,
-  name: "Journal",
-  session: "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",
-};
+import type { SessionIdentiferProps } from "../@types/SessionIdentiferProps";
 
 const $cookies = inject<VueCookies>("$cookies");
 if ($cookies) {
-  $cookies.set("user", user);
-  // print user name
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  console.log($cookies.get("user").name);
+  const key = "__Host-VRNTOTCT404fdb6f";
+  $cookies.set(
+    key,
+    "eyJhbGciOiJSUzI1NiIsImtpZCI6IjM4MThlZDMxMmVkOGRhNTVkZWZkM2EzZmI0OGY1NjQzMWFjMWMwMmEzZjZkMmFkMjVjNDA5ZmEwOTA1NDU3ZTkiLCJ0eXAiOiJKV1QifQ.eyJhdWQiOlsiZGVmYXVsdCJdLCJhenAiOiJkZWZhdWx0IiwiY29tLnZlcmludC5pc0V4dGVybmFsbHlBdXRoZW50aWNhdGVkIjpmYWxzZSwiY29tLnZlcmludC5sb2dpblJlc3VsdCI6MSwiY29tLnZlcmludC5zY3JlZW5IZWlnaHQiOiI5MTQiLCJjb20udmVyaW50LnNjcmVlbldpZHRoIjoiMTQxNCIsImNvbnRlbnRfZW50aXRsZW1lbnRzIjpbIlRlYW1FRDpjY2FnZW50dGVhbSIsIlRlYW1Sb2xlRUQ6Y2NhZ2VudHRlYW1yb2xlIiwiVGVhbUVEOkNsYWltcyIsIlJlZ2lzdGVyZWRVc2VyQ29udGVudCIsIlBhZ2VTZXRFeGVjdXRpb25FbnRpdGxlbWVudDAiXSwiY29udGV4dF9lbnRpdGxlbWVudHMiOlsiQ29udGV4dFVwZGF0ZXJBUElBY2Nlc3MiXSwiZW1fYXBpX2FjY2VzcyI6WyJlbWFpbF9vdXRnb2luZ19jcmVhdGUiLCJlbWFpbF9vdXRnb2luZ19mb3J3YXJkIiwiZW1haWxfb3V0Z29pbmdfcmVwbHkiLCJhY2Nlc3NfY2FzZV9jcmVhdGUiLCJhY2Nlc3NfYXR0YWNobWVudF9kb3dubG9hZCIsImFjY2Vzc19hdHRhY2htZW50X3VwbG9hZCIsImNhc2VfdXBkYXRlIiwiYWNjZXNzX2N1c3RvbWVyX2NyZWF0ZSIsImN1c3RvbWVyX3JlYWQiLCJjdXN0b21lcl9zZWFyY2giLCJlbWFpbG1haWxib3hfc2VhcmNoIiwiYWNjZXNzX21lc3NhZ2luZ19yZWFkIiwicHJlZmVyZW5jZXNfY29udGVudGxvY2FsZSIsInByZWZlcmVuY2VzX2Rlc2t0b3Bsb2NhbGUiLCJNZXNzYWdpbmciXSwiZXhwIjoxNzAzMDcwMjI3LCJpYXQiOjE3MDMwMzQyMjcsImlzcyI6Imh0dHBzOi8vZW0yMC52ZXJpbnQubGl2ZTo0NDMvb2lkYy10b2tlbi1zZXJ2aWNlL2RlZmF1bHQiLCJyZWFsbSI6Ii9kZWZhdWx0Iiwic3ViIjoiY2NhZ2VudCIsInpvbmVpbmZvIjoiQW1lcmljYS9DaGljYWdvIn0.hRQLzfOSp8eWMoDVXNPVNBsaSJLEbZtHfbAWHseTB76dvqVPtw6TYW6ZP8FPKX339ngpuHkHj9QtyaVPbriJnvoKkEK9mSgbDWkO1d8nkGtnzcCxkZoLz7MsAUllbIVaaBqED_jf17rio_dc73dfbRjDOIg44firKVnC4SbGMiLHw5796maP3qoIs7PAw1tG_7YrPc0_idMinsF5hA71hl-NgVq-BIz5m7Sjy0Jm4h162PxXGcNek-PxZkOIrQyrGi9D1e8xdZpzbXMvgRD6YoTYkMc45bzY4-aHf3TwYWKaE64hunuWe05KRnlInsHH2BJpPOqRkov9sJx6DGOlIQ",
+    "1d",
+    "/",
+    undefined,
+    true,
+    "Strict",
+  );
+
+  const value = $cookies.get(key) as string;
+  console.log(`Cookie with value [${value}]`);
 }
 
 const props = defineProps({
@@ -56,7 +59,7 @@ onMounted(() => {
 function setValueFromTPS(
   reference: { value: string },
   param: string,
-  props: SessionIdentifier,
+  props: SessionIdentiferProps,
 ) {
   if (param.startsWith("tps:")) {
     const tpsProperty = param.substring(4, param.length);
@@ -139,4 +142,4 @@ p {
   size: 24pt;
 }
 </style>
-../types/index
+../types/index ../@types/index