Merge pull request #1418 from jetstreamapp/chore/cookie-consent-banner

Add cookie banner for opt-in analytics

Author: paustint

apps/api/src/app/controllers/auth.controller.ts

@@ -385,9 +385,20 @@ const callback = createRoute(
 
       if (provider.type === 'oauth') {
         // oauth flow
+        // Validate required cookies exist before calling OAuth library
+        if (!cookies[pkceCodeVerifier.name]) {
+          throw new InvalidSession('Missing PKCE code verifier - invalid OAuth flow. Please start the login process again.');
+        }
+
+        // Validate OAuth callback has required parameters
+        const queryParams = new URLSearchParams(query as Record<string, string>);
+        if (!queryParams.has('code') && !queryParams.has('error')) {
+          throw new InvalidParameters('Missing OAuth callback parameters. Please start the login process again.');
+        }
+
         const { userInfo } = await validateCallback(
           provider.provider as OauthProviderType,
-          new URLSearchParams(query as Record<string, string>),
+          queryParams,
           cookies[pkceCodeVerifier.name],
           cookies[nonce.name],
         );

apps/api/src/main.ts

@@ -166,7 +166,6 @@ if (ENV.NODE_ENV === 'production' && !ENV.CI && cluster.isPrimary) {
           scriptSrc: [
             "'self'",
             "'sha256-AS526U4qXJy7/SohgsysWUxi77DtcgSmP0hNfTo6/Hs='", // Google Analytics (Docs)
-            "'sha256-pOkCIUf8FXwCoKWPXTEJAC2XGbyg3ftSrE+IES4aqEY='", // Google Analytics (Next/React)
             "'sha256-7mNBpJaHD4L73RpSf1pEaFD17uW3H/9+P1AYhm+j/Dg='", // Monaco unhandledrejection script
             "'sha256-U1ZWk/Nvev4hBoGjgXSP/YN1w4VGTmd4NTYtXEr58xI='", // __IS_BROWSER_EXTENSION__ script
             'blob:',

apps/jetstream-e2e/src/setup/global.setup.ts

@@ -18,7 +18,17 @@ setup('login and ensure org exists', async ({ page, request }) => {
   console.log('Logging in as example user');
   const user = ENV.EXAMPLE_USER;
 
+  const cookieBanner = page.getByText('We use cookies to improve');
+  const cookieBannerAcceptButton = page.getByRole('button', { name: 'Accept' });
+
   await page.goto(baseApiURL);
+
+  if (await cookieBanner.isVisible()) {
+    await cookieBannerAcceptButton.click();
+  } else {
+    console.log('Element not visible, skipping click.');
+  }
+
   await page.getByRole('link', { name: 'Log in' }).click();
   await page.getByLabel('Email Address').click();
   await page.getByLabel('Email Address').fill(user.email);

apps/jetstream/index.html

@@ -31,9 +31,6 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="96x96" href="/assets/images/favicon-96x96.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png" />
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-GZJ9QQTK44"></script>
-    <!-- prettier-ignore -->
-    <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}if(window.location.hostname!=='localhost'){gtag('js', new Date());gtag('config', 'G-GZJ9QQTK44');}</script>
     <!-- Monaco throws error when hovering on a completion  -->
     <!-- any changes need to be adjusted in CSP hash -->
     <script>

apps/jetstream/src/app/components/core/AppInitializer.tsx

@@ -6,6 +6,7 @@ import { useObservable, useRollbar } from '@jetstream/shared/ui-utils';
 import { Announcement, SalesforceOrgUi } from '@jetstream/types';
 import { useAmplitude } from '@jetstream/ui-core';
 import { fromAppState } from '@jetstream/ui/app-state';
+import { CookieConsentBanner, useConditionalGoogleAnalytics } from '@jetstream/ui/cookie-consent-banner';
 import { initDexieDb } from '@jetstream/ui/db';
 import { AxiosResponse } from 'axios';
 import { useAtom, useAtomValue } from 'jotai';
@@ -42,6 +43,9 @@ export const AppInitializer: FunctionComponent<AppInitializerProps> = ({ onAnnou
   const { version, announcements, appInfo } = useAtomValue(fromAppState.appInfoState);
   const [orgs, setOrgs] = useAtom(fromAppState.salesforceOrgsState);
   const invalidOrg = useObservable(orgConnectionError$);
+  const [analytics, setAnalytics] = useAtom(fromAppState.analyticsState);
+
+  useConditionalGoogleAnalytics(environment.googleAnalyticsSiteId, analytics === 'accepted');
 
   const recordSyncEntitlementEnabled = ability.can('access', 'RecordSync');
   const recordSyncEnabled = recordSyncEntitlementEnabled && userProfile.preferences.recordSyncEnabled;
@@ -88,7 +92,7 @@ APP VERSION ${version}
     userProfile: userProfile,
     version,
   });
-  useAmplitude();
+  useAmplitude(analytics !== 'accepted');
 
   useEffect(() => {
     if (invalidOrg) {
@@ -137,8 +141,12 @@ APP VERSION ${version}
     return () => document.removeEventListener('visibilitychange', handleWindowFocus);
   }, [handleWindowFocus]);
 
-  // eslint-disable-next-line react/jsx-no-useless-fragment
-  return <Fragment>{children}</Fragment>;
+  return (
+    <Fragment>
+      <CookieConsentBanner onConsentChange={setAnalytics} />
+      {children}
+    </Fragment>
+  );
 };
 
 export default AppInitializer;

apps/jetstream/src/app/components/settings/AnalyticsTrackingSetting.tsx

@@ -0,0 +1,41 @@
+import { RadioButton, RadioGroup } from '@jetstream/ui';
+import { fromAppState } from '@jetstream/ui/app-state';
+import { useCookieConsent } from '@jetstream/ui/cookie-consent-banner';
+import { useAtom } from 'jotai';
+
+type ConsentValue = 'accepted' | 'rejected' | null;
+
+export const AnalyticsTrackingSetting = () => {
+  const { acceptAll, rejectAll } = useCookieConsent();
+  const [analytics, setAnalytics] = useAtom(fromAppState.analyticsState);
+
+  function handleChange(value: ConsentValue) {
+    setAnalytics(value);
+    if (value === 'accepted') {
+      acceptAll();
+    } else {
+      rejectAll();
+    }
+  }
+
+  return (
+    <RadioGroup label="Allow Analytics Tracking" isButtonGroup>
+      <RadioButton
+        id="cookie-consent-accept"
+        name="cookie-analytics-consent"
+        label="Allow"
+        value="accepted"
+        checked={analytics === 'accepted'}
+        onChange={(value) => handleChange(value as ConsentValue)}
+      />
+      <RadioButton
+        id="cookie-consent-reject"
+        name="cookie-analytics-consent"
+        label="Disallow"
+        value="rejected"
+        checked={analytics !== 'accepted'}
+        onChange={(value) => handleChange(value as ConsentValue)}
+      />
+    </RadioGroup>
+  );
+};

apps/jetstream/src/app/components/settings/Settings.tsx

@@ -21,6 +21,7 @@ import { dexieDataSync, recentHistoryItemsDb } from '@jetstream/ui/db';
 import { useAtom, useAtomValue } from 'jotai';
 import localforage from 'localforage';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { AnalyticsTrackingSetting } from './AnalyticsTrackingSetting';
 import LoggerConfig from './LoggerConfig';
 import { SettingsDeleteAccount } from './SettingsDeleteAccount';
 const HEIGHT_BUFFER = 170;
@@ -255,6 +256,11 @@ export const Settings = () => {
               <LoggerConfig />
             </div>
 
+            <div className="slds-m-top_large">
+              <h2 className="slds-text-heading_medium slds-m-vertical_small">Analytics</h2>
+              <AnalyticsTrackingSetting />
+            </div>
+
             {!userProfile.teamMembership && <SettingsDeleteAccount onDeleteAccount={handleDelete} />}
           </div>
         )}

apps/jetstream/src/environments/environment.ts

@@ -4,6 +4,7 @@
 export const environment = {
   name: 'JetstreamDev',
   production: false,
+  googleAnalyticsSiteId: import.meta.env.NX_GOOGLE_ANALYTICS_KEY || '',
   rollbarClientAccessToken: import.meta.env.NX_PUBLIC_ROLLBAR_KEY,
   amplitudeToken: import.meta.env.NX_PUBLIC_AMPLITUDE_KEY,
   STRIPE_PUBLIC_KEY: import.meta.env.NX_PUBLIC_STRIPE_PUBLIC_KEY,

apps/landing/components/HeaderNoNavigation.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element */
 import Link from 'next/link';
 import { ROUTES } from '../utils/environment';
 

apps/landing/components/auth/LoginOrSignUp.tsx

@@ -55,7 +55,6 @@ const FormSchema = z.discriminatedUnion('action', [LoginSchema, RegisterSchema])
   }
 });
 
-type LoginForm = z.infer<typeof LoginSchema>;
 type RegisterForm = z.infer<typeof RegisterSchema>;
 type Form = z.infer<typeof FormSchema>;