tycho-components 0.36.9 → 0.36.11

package/dist/common/AppClarity/AppClarity.d.ts

@@ -8,9 +8,10 @@ declare global {
  * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
  *
  * On top of the plain snippet it stitches every session of the logged-in Tycho
- * user under their stable `uid` (decoded client-side from the `jwt_token_tycho`
- * cookie) via `clarity('identify', …)`, so cross-module full-page navigations
- * count as ONE identified user instead of N anonymous ones. The friendly name is
- * PII — drop the last `identify` argument for a stricter privacy posture.
+ * user under their stable `uid` (from `CookieStorage` / `SecurityUtils.parseJwt`)
+ * via `clarity('identify', …)`, so cross-module full-page navigations count as
+ * ONE identified user instead of N anonymous ones. Re-runs identify when the JWT
+ * cookie changes (login/logout) or the tab becomes visible again. The friendly
+ * name is PII — drop the last `identify` argument for a stricter privacy posture.
  */
 export default function AppClarity(): null;

package/dist/common/AppClarity/AppClarity.js

@@ -1,48 +1,67 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
+import CookieStorage, { JWT_CHANGED_EVENT } from '../../configs/CookieStorage';
+import SecurityUtils from '../../functions/SecurityUtils';
+const SCRIPT_ATTR = 'data-tycho-clarity';
 /**
  * Microsoft Clarity loader — mirrors {@link AppAnalytics} (null render, injects
  * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
  *
  * On top of the plain snippet it stitches every session of the logged-in Tycho
- * user under their stable `uid` (decoded client-side from the `jwt_token_tycho`
- * cookie) via `clarity('identify', …)`, so cross-module full-page navigations
- * count as ONE identified user instead of N anonymous ones. The friendly name is
- * PII — drop the last `identify` argument for a stricter privacy posture.
+ * user under their stable `uid` (from `CookieStorage` / `SecurityUtils.parseJwt`)
+ * via `clarity('identify', …)`, so cross-module full-page navigations count as
+ * ONE identified user instead of N anonymous ones. Re-runs identify when the JWT
+ * cookie changes (login/logout) or the tab becomes visible again. The friendly
+ * name is PII — drop the last `identify` argument for a stricter privacy posture.
  */
 export default function AppClarity() {
     const CLARITY_ID = import.meta.env.VITE_APP_CLARITY_ID;
+    const lastUidRef = useRef(undefined);
     useEffect(() => {
         if (!CLARITY_ID) {
             console.warn('Microsoft Clarity project ID not set.');
             return;
         }
-        // Inject the official Clarity loader (same shape as Clarity's install snippet).
-        const loader = document.createElement('script');
-        loader.innerHTML =
-            `(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};` +
-                `t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;` +
-                `y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)})` +
-                `(window,document,"clarity","script","${CLARITY_ID}");`;
-        document.head.appendChild(loader);
-        // Identify the logged-in Tycho user so sessions stitch under one real id.
-        try {
-            const match = document.cookie.match(/(?:^|;\s*)jwt_token_tycho=([^;]+)/);
-            if (match) {
-                let b64 = match[1].split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
-                b64 += '==='.slice((b64.length + 3) % 4);
-                const payload = JSON.parse(decodeURIComponent(atob(b64)
-                    .split('')
-                    .map((ch) => '%' + ('00' + ch.charCodeAt(0).toString(16)).slice(-2))
-                    .join('')));
-                if (payload?.uid) {
-                    window.clarity?.('identify', payload.uid, undefined, undefined, payload.name || undefined);
-                }
-            }
+        if (!document.querySelector(`script[${SCRIPT_ATTR}]`)) {
+            const loader = document.createElement('script');
+            loader.setAttribute(SCRIPT_ATTR, CLARITY_ID);
+            loader.innerHTML =
+                `(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};` +
+                    `t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;` +
+                    `y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)})` +
+                    `(window,document,"clarity","script","${CLARITY_ID}");`;
+            document.head.appendChild(loader);
             window.clarity?.('consent');
         }
-        catch {
-            /* not logged in / unparseable — track anonymously */
-        }
+        const identifyUser = () => {
+            try {
+                const token = CookieStorage.getJwtToken();
+                if (!token) {
+                    lastUidRef.current = undefined;
+                    return;
+                }
+                const payload = SecurityUtils.parseJwt(token);
+                if (!payload?.uid || payload.uid === lastUidRef.current)
+                    return;
+                window.clarity?.('identify', payload.uid, undefined, undefined, payload.name || undefined);
+                lastUidRef.current = payload.uid;
+            }
+            catch {
+                /* not logged in / unparseable — track anonymously */
+            }
+        };
+        const onVisible = () => {
+            if (document.visibilityState === 'visible')
+                identifyUser();
+        };
+        identifyUser();
+        window.addEventListener(JWT_CHANGED_EVENT, identifyUser);
+        window.addEventListener('focus', identifyUser);
+        document.addEventListener('visibilitychange', onVisible);
+        return () => {
+            window.removeEventListener(JWT_CHANGED_EVENT, identifyUser);
+            window.removeEventListener('focus', identifyUser);
+            document.removeEventListener('visibilitychange', onVisible);
+        };
     }, [CLARITY_ID]);
     return null;
 }

package/dist/configs/CookieStorage.d.ts

@@ -1,3 +1,5 @@
+/** Dispatched on `window` whenever the Tycho JWT cookie is set or cleared. */
+export declare const JWT_CHANGED_EVENT = "tycho:jwt-changed";
 declare function getRedirectUri(): string | undefined;
 declare function setRedirectUri(uri: string): void;
 declare function removeRedirectUri(): void;

package/dist/configs/CookieStorage.js

@@ -1,7 +1,12 @@
 import Cookies from 'js-cookie';
 const REDIRECT_URI = 'redirect_uri_tycho';
 const JWT_TOKEN = 'jwt_token_tycho';
+/** Dispatched on `window` whenever the Tycho JWT cookie is set or cleared. */
+export const JWT_CHANGED_EVENT = 'tycho:jwt-changed';
 const expireDays = 7;
+const notifyJwtChanged = () => {
+    window.dispatchEvent(new Event(JWT_CHANGED_EVENT));
+};
 const set = (key, value) => {
     Cookies.set(key, value, { expires: expireDays });
 };
@@ -14,13 +19,16 @@ const remove = (key) => {
 };
 const setJwtToken = (jwtToken) => {
     Cookies.set(JWT_TOKEN, jwtToken, { expires: expireDays });
+    notifyJwtChanged();
 };
 const getJwtToken = () => {
     const cookie = Cookies.get(JWT_TOKEN);
     return cookie === 'undefined' ? '' : cookie;
 };
 const removeJwtToken = () => {
-    return Cookies.remove(JWT_TOKEN);
+    const removed = Cookies.remove(JWT_TOKEN);
+    notifyJwtChanged();
+    return removed;
 };
 function getRedirectUri() {
     return Cookies.get(REDIRECT_URI);

package/dist/functions/SecurityUtils.js

@@ -11,7 +11,8 @@ const hasAccess = (uid, roles, mode) => {
 };
 const parseJwt = (token) => {
     const base64Url = token.split('.')[1];
-    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    base64 += '==='.slice((base64.length + 3) % 4);
     const payload = decodeURIComponent(window
         .atob(base64)
         .split('')

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.36.9",
+  "version": "0.36.11",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -82,7 +82,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.10.13",
+    "tycho-storybook": "0.10.15",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -111,7 +111,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.10.13",
+    "tycho-storybook": "^0.10.15",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",