transcend.setAuth()

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/transcend-io/consent-manager-ui.git"
   },
   "homepage": "https://github.com/transcend-io/consent-manager-ui",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "license": "MIT",
   "main": "build/ui",
   "files": [
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@monaco-editor/react": "^4.4.5",
-    "@transcend-io/airgap.js-types": "^10.12.5",
+    "@transcend-io/airgap.js-types": "^10.13.0",
     "@transcend-io/type-utils": "^1.0.7",
     "@types/node": "^17.0.21",
     "@typescript-eslint/eslint-plugin": "^5.12.1",

src/api.ts

@@ -3,6 +3,7 @@ import {
   ConsentManagerAPI,
   ViewState,
   InitialViewState,
+  AirgapAuth,
 } from '@transcend-io/airgap.js-types';
 import { isViewStateClosed } from './hooks';
 import { logger } from './logger';
@@ -12,6 +13,7 @@ import {
   HandleSetLanguage,
   HandleChangePrivacyPolicy,
   HandleSetViewState,
+  HandleChangeAuthKey,
 } from './types';
 import { VERSION } from './constants';
 
@@ -20,6 +22,8 @@ interface MakeConsentManagerAPIInput {
   eventTarget: EventTarget;
   /** Property for the current view state of the consent manager UI */
   viewState: ViewState;
+  /** Method to change the current auth key */
+  handleChangeAuthKey: HandleChangeAuthKey;
   /** Method to change language */
   handleChangeLanguage: HandleSetLanguage;
   /** Method to change view state */
@@ -43,6 +47,7 @@ let promptSuppressionNoticeShown = false;
 export function makeConsentManagerAPI({
   eventTarget,
   viewState,
+  handleChangeAuthKey,
   handleChangeLanguage,
   handleChangePrivacyPolicy,
   handleChangeSecondaryPolicy,
@@ -137,6 +142,9 @@ export function makeConsentManagerAPI({
       handleSetViewState('open', undefined, true);
       return Promise.resolve();
     },
+    setAuth: (key: AirgapAuth): void => {
+      handleChangeAuthKey(key);
+    },
     version: VERSION,
   };
 

src/components/AcceptAll.tsx

@@ -1,6 +1,6 @@
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
-import { useAirgap } from '../hooks';
+import { useAirgap, useAuth } from '../hooks';
 import { messages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { Button } from './Button';
@@ -15,6 +15,7 @@ export function AcceptAll({
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
   const { formatMessage } = useIntl();
 
   // Opt in to all purposes
@@ -24,7 +25,7 @@ export function AcceptAll({
     event: JSX.TargetedEvent<HTMLButtonElement, MouseEvent>,
   ): void => {
     event.preventDefault();
-    airgap.optIn(event);
+    airgap.optIn(auth || event);
     handleSetViewState('close');
   };
 

src/components/AcceptAllOrMoreChoices.tsx

@@ -1,6 +1,6 @@
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
-import { useAirgap } from '../hooks';
+import { useAirgap, useAuth } from '../hooks';
 import { messages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { Button } from './Button';
@@ -15,6 +15,7 @@ export function AcceptAllOrMoreChoices({
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
   const { formatMessage } = useIntl();
 
   // Opt in to all purposes
@@ -24,7 +25,7 @@ export function AcceptAllOrMoreChoices({
     event: JSX.TargetedEvent<HTMLButtonElement, MouseEvent>,
   ): void => {
     event.preventDefault();
-    airgap.optIn(event);
+    airgap.optIn(auth || event);
     handleSetViewState('close');
   };
 

src/components/AcceptAllRejectAllToggle.tsx

@@ -25,6 +25,7 @@
   fontColor: string;
 }): JSX.Element {
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
   const { formatMessage } = useIntl();
   const [saving, setSaving] = useState<boolean | null>(null);
   const [consentLocal, setConsentLocal] = useState(
@@ -38,10 +39,10 @@
   ): void => {
     if (checked) {
       event.preventDefault();
-      airgap.optIn(event);
+      airgap.optIn(auth || event);
     } else {
       event.preventDefault();
-      airgap.optOut(event);
+      airgap.optOut(auth || event);
     }
 
     setConsentLocal(checked);

src/components/AcceptOrRejectAdvertising.tsx

@@ -1,7 +1,7 @@
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
-import { useAirgap } from '../hooks';
+import { useAirgap, useAuth } from '../hooks';
 import { messages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { Button } from './Button';
@@ -16,6 +16,7 @@ export function AcceptOrRejectAdvertising({
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
   const { formatMessage } = useIntl();
 
   return (
@@ -53,7 +54,11 @@ export function AcceptOrRejectAdvertising({
           primaryText={formatMessage(messages.rejectAdvertising)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Advertising: false }, CONSENT_OPTIONS);
+            airgap.setConsent(
+              auth || event,
+              { Advertising: false },
+              CONSENT_OPTIONS,
+            );
             handleSetViewState('close');
           }}
           initialFocus
@@ -62,7 +67,11 @@ export function AcceptOrRejectAdvertising({
           primaryText={formatMessage(messages.acceptAdvertising)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Advertising: true }, CONSENT_OPTIONS);
+            airgap.setConsent(
+              auth || event,
+              { Advertising: true },
+              CONSENT_OPTIONS,
+            );
             handleSetViewState('close');
           }}
         />

src/components/AcceptOrRejectAll.tsx

@@ -1,6 +1,6 @@
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
-import { useAirgap } from '../hooks';
+import { useAirgap, useAuth } from '../hooks';
 import { messages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { Button } from './Button';
@@ -15,6 +15,7 @@ export function AcceptOrRejectAll({
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
   const { formatMessage } = useIntl();
 
   // Opt in to all purposes
@@ -24,7 +25,7 @@ export function AcceptOrRejectAll({
     event: JSX.TargetedEvent<HTMLButtonElement, MouseEvent>,
   ): void => {
     event.preventDefault();
-    airgap.optIn(event);
+    airgap.optIn(auth || event);
     handleSetViewState('close');
   };
 
@@ -35,7 +36,7 @@ export function AcceptOrRejectAll({
     event: JSX.TargetedEvent<HTMLButtonElement, MouseEvent>,
   ): void => {
     event.preventDefault();
-    airgap.optOut(event);
+    airgap.optOut(auth || event);
     handleSetViewState('close');
   };
 

src/components/AcceptOrRejectAllOrMoreChoices.tsx

@@ -1,6 +1,6 @@
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
-import { useAirgap } from '../hooks';
+import { useAirgap, useAuth } from '../hooks';
 import { messages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { Button } from './Button';
@@ -15,6 +15,7 @@ export function AcceptOrRejectAllOrMoreChoices({
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
   const { formatMessage } = useIntl();
 
   // Opt in to all purposes
@@ -24,7 +25,7 @@ export function AcceptOrRejectAllOrMoreChoices({
     event: JSX.TargetedEvent<HTMLButtonElement, MouseEvent>,
   ): void => {
     event.preventDefault();
-    airgap.optIn(event);
+    airgap.optIn(auth || event);
     handleSetViewState('close');
   };
 
@@ -35,7 +36,7 @@ export function AcceptOrRejectAllOrMoreChoices({
     event: JSX.TargetedEvent<HTMLButtonElement, MouseEvent>,
   ): void => {
     event.preventDefault();
-    airgap.optOut(event);
+    airgap.optOut(auth || event);
     handleSetViewState('close');
   };
 

src/components/AcceptOrRejectAnalytics.tsx

@@ -1,7 +1,7 @@
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
-import { useAirgap } from '../hooks';
+import { useAirgap, useAuth } from '../hooks';
 import { messages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { Button } from './Button';
@@ -16,6 +16,7 @@ export function AcceptOrRejectAnalytics({
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
   const { formatMessage } = useIntl();
 
   return (
@@ -53,7 +54,11 @@ export function AcceptOrRejectAnalytics({
           primaryText={formatMessage(messages.rejectAnalytics)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Analytics: false }, CONSENT_OPTIONS);
+            airgap.setConsent(
+              auth || event,
+              { Analytics: false },
+              CONSENT_OPTIONS,
+            );
             handleSetViewState('close');
           }}
           initialFocus
@@ -62,7 +67,11 @@ export function AcceptOrRejectAnalytics({
           primaryText={formatMessage(messages.acceptAnalytics)}
           handleClick={(event) => {
             event.preventDefault();
-            airgap.setConsent(event, { Analytics: true }, CONSENT_OPTIONS);
+            airgap.setConsent(
+              auth || event,
+              { Analytics: true },
+              CONSENT_OPTIONS,
+            );
             handleSetViewState('close');
           }}
         />

src/components/App.tsx

@@ -15,6 +15,7 @@
 import { TranscendEventTarget } from '../event-target';
 import { useState } from 'preact/hooks';
 import { MergedConsentManagerConfig } from '../types';
+import { useAuth } from 'src/hooks/useAuth';
 
 // TODO: https://transcend.height.app/T-13483
 // Fix IntlProvider JSX types
@@ -52,18 +53,26 @@
       privacyRegime as keyof typeof initialViewStateByPrivacyRegime
     ] || 'Hidden';
 
+  // Auth key setup
+  const { auth: storedAuth, handleChangeAuthKey } = useAuth();
+
   // View state controller. Defaults based on regime and config.
-  const { viewState, firstSelectedViewState, handleSetViewState, auth } =
-    useViewState({
-      initialViewState,
-      dismissedViewState,
-      eventTarget,
-      savedActiveElement:
-        document.activeElement instanceof HTMLElement &&
-        document.activeElement !== document.body
-          ? document.activeElement
-          : null,
-    });
+  const {
+    viewState,
+    firstSelectedViewState,
+    handleSetViewState,
+    /** auth for triggering authenticated/side-effect view states  */
+    auth,
+  } = useViewState({
+    initialViewState,
+    dismissedViewState,
+    eventTarget,
+    savedActiveElement:
+      document.activeElement instanceof HTMLElement &&
+      document.activeElement !== document.body
+        ? document.activeElement
+        : null,
+  });
 
   // Language setup
   const { language, handleChangeLanguage, messages } = useLanguage({
@@ -80,6 +89,7 @@
   const consentManagerAPI = makeConsentManagerAPI({
     eventTarget,
     viewState,
+    handleChangeAuthKey,
     handleChangeLanguage,
     handleSetViewState,
     handleChangePrivacyPolicy: (privacyPolicyUrl) =>

src/components/CompleteOptions.tsx

@@ -1,7 +1,7 @@
 import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
-import { useAirgap, useGetPurposeMessageKeys } from '../hooks';
+import { useAirgap, useAuth, useGetPurposeMessageKeys } from '../hooks';
 import { messages, completeOptionsMessages } from '../messages';
 import type { ConsentSelection, HandleSetViewState } from '../types';
 import { getConsentSelections } from '../consent-selections';
@@ -22,6 +22,7 @@ export function CompleteOptions({
 }): JSX.Element {
   const { formatMessage } = useIntl();
   const { airgap } = useAirgap();
+  const { auth } = useAuth();
 
   // Get the tracking purposes from Airgap for display
   const initialConsentSelections = getConsentSelections(airgap);
@@ -54,7 +55,7 @@ export function CompleteOptions({
     Object.entries(consentSelections).forEach(([purpose, isChecked]) => {
       newConsent.purposes[purpose] = isChecked;
     });
-    airgap.setConsent(event, newConsent.purposes, CONSENT_OPTIONS);
+    airgap.setConsent(auth || event, newConsent.purposes, CONSENT_OPTIONS);
     handleSetViewState('close');
   };