From bc54389603c3a31dce72a9767157306c20fbc491 Mon Sep 17 00:00:00 2001
From: Rohan Chaturvedi <rohan.chaturvedi@protonmail.com>
Date: Thu, 2 Nov 2023 15:09:06 +0530
Subject: [PATCH] feat: posthog (#99)

* feat: added posthog analytics
---
 docker-compose.yml                             |  1 +
 frontend/Dockerfile                            |  1 +
 frontend/Dockerfile.dev                        |  6 +++---
 frontend/apollo/client.ts                      |  2 ++
 .../app/[team]/apps/[app]/members/page.tsx     |  4 ++--
 frontend/app/[team]/apps/[app]/page.tsx        |  4 ++--
 frontend/app/[team]/apps/[app]/tokens/page.tsx |  4 +++-
 frontend/app/[team]/newdevice/page.tsx         |  2 +-
 frontend/app/[team]/settings/page.tsx          |  2 +-
 frontend/app/[team]/tokens/page.tsx            |  4 +++-
 frontend/app/providers.tsx                     | 11 ++++++++++-
 frontend/app/webauth/[requestCode]/page.tsx    |  4 ++--
 frontend/components/apps/NewAppDialog.tsx      |  2 +-
 .../components/apps/tokens/SecretTokens.tsx    |  4 +++-
 .../components/auth/UnlockKeyringDialog.tsx    |  2 +-
 .../environments/SecretPropertyDiffs.tsx       | 18 ++++++++++++------
 frontend/components/environments/SecretRow.tsx | 12 ++++++------
 frontend/components/logs/SecretLogs.tsx        | 10 +++-------
 .../components/onboarding/AccountPassword.tsx  |  4 ++--
 .../onboarding/AccountSeedChecker.tsx          |  2 +-
 .../components/onboarding/AccountSeedGen.tsx   |  2 +-
 frontend/contexts/organisationContext.tsx      | 12 ++++++++++++
 frontend/next.config.js                        |  6 +++---
 frontend/package.json                          |  1 +
 frontend/scripts/replace-variable.sh           |  1 +
 frontend/utils/posthog.ts                      | 15 +++++++++++++++
 frontend/yarn.lock                             | 12 ++++++++++++
 staging-docker-compose.yml                     |  1 +
 28 files changed, 106 insertions(+), 43 deletions(-)
 create mode 100644 frontend/utils/posthog.ts

diff --git a/docker-compose.yml b/docker-compose.yml
index e8fe87030..1d625ca43 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -31,6 +31,7 @@ services:
       BACKEND_API_BASE: "http://backend:8000"
       NEXT_PUBLIC_BACKEND_API_BASE: "${HTTP_PROTOCOL}${HOST}/service"
       NEXT_PUBLIC_NEXTAUTH_PROVIDERS: "${SSO_PROVIDERS}"
+      NEXT_PUBLIC_POSTHOG_KEY: "${NEXT_PUBLIC_POSTHOG_KEY}"
     networks:
       - phase-net
 
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index a4284a8b5..fa921d4d4 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -33,6 +33,7 @@ COPY --chown=app:app . .
 ARG NEXT_PUBLIC_BACKEND_API_BASE=BAKED_NEXT_PUBLIC_BACKEND_API_BASE
 ARG NEXT_PUBLIC_NEXTAUTH_PROVIDERS=BAKED_NEXT_PUBLIC_NEXTAUTH_PROVIDERS
 ARG NEXT_PUBLIC_APP_HOST=BAKED_NEXT_PUBLIC_APP_HOST
+ARG NEXT_PUBLIC_POSTHOG_KEY=BAKED_NEXT_PUBLIC_POSTHOG_KEY
 RUN yarn build
 
 # ---- Release ----
diff --git a/frontend/Dockerfile.dev b/frontend/Dockerfile.dev
index fec896a13..841c6b542 100644
--- a/frontend/Dockerfile.dev
+++ b/frontend/Dockerfile.dev
@@ -6,12 +6,12 @@ WORKDIR /app
 
 # Copy over package files 
 COPY package.json ./
-COPY package-lock.json ./
+COPY yarn.lock ./
 
 # Install dependencies
-RUN npm install
+RUN yarn install --frozen-lockfile --no-cache && yarn cache clean
 
 # Copy all files 
 COPY . .
 
-CMD ["npm", "run", "dev"]
\ No newline at end of file
+CMD ["yarn", "dev"]
\ No newline at end of file
diff --git a/frontend/apollo/client.ts b/frontend/apollo/client.ts
index 2bbfac83d..e38a0a603 100644
--- a/frontend/apollo/client.ts
+++ b/frontend/apollo/client.ts
@@ -5,8 +5,10 @@ import { signOut, SignOutParams } from 'next-auth/react'
 import { UrlUtils } from '@/utils/auth'
 import axios from 'axios'
 import { toast } from 'react-toastify'
+import posthog from 'posthog-js'
 
 export const handleSignout = async (options?: SignOutParams<true> | undefined) => {
+  posthog.reset()
   const response = await axios.post(
     UrlUtils.makeUrl(process.env.NEXT_PUBLIC_BACKEND_API_BASE!, 'logout'),
     {},
diff --git a/frontend/app/[team]/apps/[app]/members/page.tsx b/frontend/app/[team]/apps/[app]/members/page.tsx
index d1a63f3c4..38918692e 100644
--- a/frontend/app/[team]/apps/[app]/members/page.tsx
+++ b/frontend/app/[team]/apps/[app]/members/page.tsx
@@ -410,7 +410,7 @@ export default function Members({ params }: { params: { team: string; app: strin
                                         minLength={16}
                                         required
                                         autoFocus
-                                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                                       />
                                       <button
                                         className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
@@ -820,7 +820,7 @@ export default function Members({ params }: { params: { team: string; app: strin
                               minLength={16}
                               required
                               autoFocus
-                              className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                              className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                             />
                             <button
                               className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/app/[team]/apps/[app]/page.tsx b/frontend/app/[team]/apps/[app]/page.tsx
index 994d87666..0025326b0 100644
--- a/frontend/app/[team]/apps/[app]/page.tsx
+++ b/frontend/app/[team]/apps/[app]/page.tsx
@@ -234,7 +234,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
           <div className="flex justify-between items-center w-full">
             <code
               className={clsx(
-                'break-all whitespace-break-spaces max-w-full',
+                'break-all whitespace-break-spaces max-w-full ph-no-capture',
                 sameAsProd ? 'text-amber-500' : 'text-emerald-500'
               )}
             >
@@ -299,7 +299,7 @@ export default function Secrets({ params }: { params: { team: string; app: strin
             >
               <td
                 className={clsx(
-                  'px-6 py-3 whitespace-nowrap font-mono text-zinc-800 dark:text-zinc-300 flex items-center gap-2',
+                  'px-6 py-3 whitespace-nowrap font-mono text-zinc-800 dark:text-zinc-300 flex items-center gap-2 ph-no-capture',
                   open ? 'font-bold' : 'font-medium'
                 )}
               >
diff --git a/frontend/app/[team]/apps/[app]/tokens/page.tsx b/frontend/app/[team]/apps/[app]/tokens/page.tsx
index 613a5dbdc..5a53aa1c3 100644
--- a/frontend/app/[team]/apps/[app]/tokens/page.tsx
+++ b/frontend/app/[team]/apps/[app]/tokens/page.tsx
@@ -231,7 +231,9 @@ export default function Tokens({ params }: { params: { team: string; app: string
             </div>
             {!appSecret && <RotateAppDialog />}
           </div>
-          <code className="text-xs text-red-500">{appSecret || appSecretPlaceholder}</code>
+          <code className="text-xs text-red-500 ph-no-capture">
+            {appSecret || appSecretPlaceholder}
+          </code>
         </div>
       </div>
     )
diff --git a/frontend/app/[team]/newdevice/page.tsx b/frontend/app/[team]/newdevice/page.tsx
index 8dbf52b3a..5facf3fa7 100644
--- a/frontend/app/[team]/newdevice/page.tsx
+++ b/frontend/app/[team]/newdevice/page.tsx
@@ -241,7 +241,7 @@ export default function NewDevice({ params }: { params: { team: string } }) {
                       minLength={16}
                       required
                       autoFocus
-                      className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                      className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                     />
                     <button
                       className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/app/[team]/settings/page.tsx b/frontend/app/[team]/settings/page.tsx
index f84b8c621..c2e33cad5 100644
--- a/frontend/app/[team]/settings/page.tsx
+++ b/frontend/app/[team]/settings/page.tsx
@@ -133,7 +133,7 @@ const ViewRecoveryDialog = () => {
                                 minLength={16}
                                 required
                                 autoFocus
-                                className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                                className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                               />
                               <button
                                 className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/app/[team]/tokens/page.tsx b/frontend/app/[team]/tokens/page.tsx
index 602b92de1..76da4bf2d 100644
--- a/frontend/app/[team]/tokens/page.tsx
+++ b/frontend/app/[team]/tokens/page.tsx
@@ -206,7 +206,9 @@ const CreateUserTokenDialog = (props: { organisationId: string }) => {
                             )}
                           </div>
                         </div>
-                        <code className="text-xs break-all text-blue-500">{userToken}</code>
+                        <code className="text-xs break-all text-blue-500 ph-no-capture">
+                          {userToken}
+                        </code>
                       </div>
                     </div>
                   ) : (
diff --git a/frontend/app/providers.tsx b/frontend/app/providers.tsx
index c94cab9a3..1b548335e 100644
--- a/frontend/app/providers.tsx
+++ b/frontend/app/providers.tsx
@@ -6,6 +6,13 @@ import { ApolloProvider } from '@apollo/client'
 import { graphQlClient } from '@/apollo/client'
 import { KeyringProvider } from '@/contexts/keyringContext'
 import { OrganisationProvider } from '@/contexts/organisationContext'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { initializePostHog } from '@/utils/posthog'
+
+const IS_CLOUD_HOSTED = process.env.APP_HOST || process.env.NEXT_PUBLIC_APP_HOST
+
+if (IS_CLOUD_HOSTED) initializePostHog()
 
 export default function Providers({ children }: { children: React.ReactNode }) {
   return (
@@ -13,7 +20,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
       <SessionProvider>
         <ApolloProvider client={graphQlClient}>
           <OrganisationProvider>
-            <KeyringProvider>{children}</KeyringProvider>
+            <KeyringProvider>
+              <PostHogProvider client={posthog}>{children}</PostHogProvider>
+            </KeyringProvider>
           </OrganisationProvider>
         </ApolloProvider>
       </SessionProvider>
diff --git a/frontend/app/webauth/[requestCode]/page.tsx b/frontend/app/webauth/[requestCode]/page.tsx
index d53654eeb..2d56e6adc 100644
--- a/frontend/app/webauth/[requestCode]/page.tsx
+++ b/frontend/app/webauth/[requestCode]/page.tsx
@@ -243,7 +243,7 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                         minLength={16}
                         required
                         autoFocus
-                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                        className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                       />
                       <button
                         className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
@@ -358,7 +358,7 @@ export default function WebAuth({ params }: { params: { requestCode: string } })
                   )}
                 </div>
               </div>
-              <code className="text-xs break-all text-blue-500">{userToken}</code>
+              <code className="text-xs break-all text-blue-500 ph-no-capture">{userToken}</code>
             </div>
           </div>
 
diff --git a/frontend/components/apps/NewAppDialog.tsx b/frontend/components/apps/NewAppDialog.tsx
index c0b3527f0..649afe62d 100644
--- a/frontend/components/apps/NewAppDialog.tsx
+++ b/frontend/components/apps/NewAppDialog.tsx
@@ -510,7 +510,7 @@ export default function NewAppDialog(props: {
                                 type={showPw ? 'text' : 'password'}
                                 minLength={16}
                                 required
-                                className="w-full "
+                                className="w-full ph-no-capture"
                               />
                               <button
                                 className="absolute inset-y-0 right-4"
diff --git a/frontend/components/apps/tokens/SecretTokens.tsx b/frontend/components/apps/tokens/SecretTokens.tsx
index af29839c3..b25f8faf5 100644
--- a/frontend/components/apps/tokens/SecretTokens.tsx
+++ b/frontend/components/apps/tokens/SecretTokens.tsx
@@ -280,7 +280,9 @@ const CreateServiceTokenDialog = (props: { organisationId: string; appId: string
                             )}
                           </div>
                         </div>
-                        <code className="text-xs break-all text-teal-500">{serviceToken}</code>
+                        <code className="text-xs break-all text-teal-500 ph-no-capture">
+                          {serviceToken}
+                        </code>
                       </div>
                     </div>
                   ) : (
diff --git a/frontend/components/auth/UnlockKeyringDialog.tsx b/frontend/components/auth/UnlockKeyringDialog.tsx
index 59f8bb434..a1c7e1110 100644
--- a/frontend/components/auth/UnlockKeyringDialog.tsx
+++ b/frontend/components/auth/UnlockKeyringDialog.tsx
@@ -110,7 +110,7 @@ export default function UnlockKeyringDialog(props: { organisationId: string }) {
                             minLength={16}
                             required
                             autoFocus
-                            className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md"
+                            className="custom w-full text-zinc-800 font-mono dark:text-white bg-zinc-100 dark:bg-zinc-800 rounded-md ph-no-capture"
                           />
                           <button
                             className="bg-zinc-100 dark:bg-zinc-800 px-4 text-neutral-500 rounded-md"
diff --git a/frontend/components/environments/SecretPropertyDiffs.tsx b/frontend/components/environments/SecretPropertyDiffs.tsx
index 2f4de44e9..8438107b8 100644
--- a/frontend/components/environments/SecretPropertyDiffs.tsx
+++ b/frontend/components/environments/SecretPropertyDiffs.tsx
@@ -30,8 +30,10 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.key !== previousItem.key && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">KEY:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.key}</s>
-          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-no-capture">
+            {previousItem.key}
+          </s>
+          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
             {historyItem!.key}
           </span>
         </div>
@@ -40,8 +42,10 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.value !== previousItem.value && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">VALUE:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.value}</s>
-          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-no-capture">
+            {previousItem.value}
+          </s>
+          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
             {historyItem!.value}
           </span>
         </div>
@@ -50,8 +54,10 @@ export const SecretPropertyDiffs = (props: {
       {historyItem!.comment !== previousItem.comment && (
         <div className="pl-3 font-mono">
           <span className="text-neutral-500 mr-2">COMMENT:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500">{previousItem.comment}</s>
-          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500">
+          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-no-capture">
+            {previousItem.comment}
+          </s>
+          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
             {historyItem!.comment}
           </span>
         </div>
diff --git a/frontend/components/environments/SecretRow.tsx b/frontend/components/environments/SecretRow.tsx
index 96975dfbf..174ca4cf3 100644
--- a/frontend/components/environments/SecretRow.tsx
+++ b/frontend/components/environments/SecretRow.tsx
@@ -184,7 +184,7 @@ const TagsDialog = (props: {
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
                       Update{' '}
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secretName}
                       </span>{' '}
                       tags
@@ -301,7 +301,7 @@ const HistoryDialog = (props: { secret: SecretType }) => {
                 <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-2xl bg-neutral-100 dark:bg-neutral-900 p-6 text-left align-middle shadow-xl transition-all">
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secret.key}
                       </span>{' '}
                       history
@@ -428,7 +428,7 @@ const CommentDialog = (props: {
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
                       Update{' '}
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secretName}
                       </span>{' '}
                       comment
@@ -439,7 +439,7 @@ const CommentDialog = (props: {
                     </Button>
                   </Dialog.Title>
 
-                  <div className="space-y-6 p-4">
+                  <div className="space-y-6 p-4 ph-no-capture">
                     <textarea
                       rows={5}
                       value={commentValue}
@@ -519,7 +519,7 @@ const DeleteConfirmDialog = (props: {
                   <Dialog.Title as="div" className="flex w-full justify-between">
                     <h3 className="text-lg font-medium leading-6 text-black dark:text-white ">
                       Delete{' '}
-                      <span className="text-zinc-700 dark:text-zinc-200 font-mono">
+                      <span className="text-zinc-700 dark:text-zinc-200 font-mono ph-no-capture">
                         {secretName}
                       </span>
                     </h3>
@@ -576,7 +576,7 @@ export default function SecretRow(props: {
   }
 
   const INPUT_BASE_STYLE =
-    'w-full text-zinc-800 font-mono custom bg-zinc-100 dark:bg-zinc-800 dark:text-white transition ease'
+    'w-full text-zinc-800 font-mono custom bg-zinc-100 dark:bg-zinc-800 dark:text-white transition ease ph-no-capture'
 
   const keyIsBlank = secret.key.length === 0
 
diff --git a/frontend/components/logs/SecretLogs.tsx b/frontend/components/logs/SecretLogs.tsx
index 3680c2a21..666c361bb 100644
--- a/frontend/components/logs/SecretLogs.tsx
+++ b/frontend/components/logs/SecretLogs.tsx
@@ -194,12 +194,6 @@ export default function SecretLogs(props: { app: string }) {
         // Decrypt event fields
         decryptedEvent!.key = await decryptAsymmetric(event!.key, privateKey, publicKey)
 
-        // decryptedEvent!.value = await decryptAsymmetric(event!.value, privateKey, publicKey)
-
-        // if (decryptedEvent!.comment !== '') {
-        //   decryptedEvent!.comment = await decryptAsymmetric(event!.comment, privateKey, publicKey)
-        // }
-
         setDecryptedEvent(decryptedEvent)
       }
 
@@ -319,7 +313,9 @@ export default function SecretLogs(props: { app: string }) {
 
                   <div className="grid grid-cols-1 md:grid-cols-2 w-full gap-4 text-sm">
                     <LogField label="Key">
-                      <div className="flex items-center gap-2">{decryptedEvent?.key}</div>
+                      <div className="flex items-center gap-2 ph-no-capture">
+                        {decryptedEvent?.key}
+                      </div>
                     </LogField>
 
                     <LogField label="IP address"> {log.ipAddress}</LogField>
diff --git a/frontend/components/onboarding/AccountPassword.tsx b/frontend/components/onboarding/AccountPassword.tsx
index da5030972..69805442c 100644
--- a/frontend/components/onboarding/AccountPassword.tsx
+++ b/frontend/components/onboarding/AccountPassword.tsx
@@ -73,7 +73,7 @@ export const AccountPassword = (props: AccountPasswordProps) => {
             type={showPw ? 'text' : 'password'}
             minLength={16}
             required
-            className="w-full "
+            className="w-full ph-no-capture"
           />
           <button
             className="absolute inset-y-0 right-4 text-neutral-500"
@@ -98,7 +98,7 @@ export const AccountPassword = (props: AccountPasswordProps) => {
             type={showPw2 ? 'text' : 'password'}
             minLength={16}
             required
-            className="w-full"
+            className="w-full ph-no-capture"
           />
           <button
             className="absolute inset-y-0 right-4 text-neutral-500"
diff --git a/frontend/components/onboarding/AccountSeedChecker.tsx b/frontend/components/onboarding/AccountSeedChecker.tsx
index e0a803b2e..997efa0a8 100644
--- a/frontend/components/onboarding/AccountSeedChecker.tsx
+++ b/frontend/components/onboarding/AccountSeedChecker.tsx
@@ -29,7 +29,7 @@ export const AccountSeedChecker = (props: AccountSeedCheckProps) => {
             readOnly={isCorrect(index) ? true : false}
             //maxLength={25}
             className={clsx(
-              'font-mono w-full',
+              'font-mono w-full ph-no-capture',
               isCorrect(index) && '!bg-emerald-400/20 !text-emerald-500'
             )}
           />
diff --git a/frontend/components/onboarding/AccountSeedGen.tsx b/frontend/components/onboarding/AccountSeedGen.tsx
index bf02dffa6..a249e3c45 100644
--- a/frontend/components/onboarding/AccountSeedGen.tsx
+++ b/frontend/components/onboarding/AccountSeedGen.tsx
@@ -28,7 +28,7 @@ export const AccountSeedGen = (props: { mnemonic: string }) => {
           key={word + index}
         >
           <span className="text-zinc-400 dark:text-zinc-700">{index + 1}</span>
-          <span className="hidden group-hover:block">{word}</span>
+          <span className="hidden group-hover:block ph-no-capture">{word}</span>
           <span className="group-hover:hidden">*****</span>
         </div>
       ))}
diff --git a/frontend/contexts/organisationContext.tsx b/frontend/contexts/organisationContext.tsx
index f173c6b98..8fab2be26 100644
--- a/frontend/contexts/organisationContext.tsx
+++ b/frontend/contexts/organisationContext.tsx
@@ -5,6 +5,7 @@ import UpdateWrappedSecrets from '@/graphql/mutations/organisation/updateUserWra
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client'
 import { useSession } from 'next-auth/react'
 import { getLocalKeyring } from '@/utils/localStorage'
+import posthog from 'posthog-js'
 
 interface OrganisationContextValue {
   activeOrganisation: OrganisationType | null
@@ -37,6 +38,17 @@ export const OrganisationProvider: React.FC<OrganisationProviderProps> = ({ chil
 
   const { organisations } = orgsData ?? { organisations: null }
 
+  useEffect(() => {
+    if (session && organisation) {
+      if (session.user?.email)
+        posthog.identify(organisation.memberId!, {
+          email: session.user.email,
+          name: session.user.name,
+          organisation: organisation.name,
+        })
+    } else posthog.reset()
+  }, [organisation, session])
+
   useEffect(() => {
     if (session?.user?.email) getOrgs()
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/frontend/next.config.js b/frontend/next.config.js
index 10b75573a..2e88850e0 100644
--- a/frontend/next.config.js
+++ b/frontend/next.config.js
@@ -1,14 +1,14 @@
 /** @type {import('next').NextConfig} */
 const ContentSecurityPolicy = `
   default-src 'self';
-  script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval';
+  script-src 'self' 'unsafe-inline' 'wasm-unsafe-eval' https://app.posthog.com;
   style-src 'self' 'unsafe-inline';
   object-src 'none';
   base-uri 'self';
-  connect-src 'self' data: http://127.0.0.1:* https://*.phase.dev https://phase.statuspage.io/api/v2/status.json;
+  connect-src 'self' data: http://127.0.0.1:* https://*.phase.dev https://phase.statuspage.io/api/v2/status.json https://app.posthog.com; 
   font-src 'self';
   frame-src 'self';
-  img-src 'self' https://lh3.googleusercontent.com https://avatars.githubusercontent.com https://secure.gravatar.com https://gitlab.com;
+  img-src 'self' https://lh3.googleusercontent.com https://avatars.githubusercontent.com https://secure.gravatar.com https://gitlab.com; 
   manifest-src 'self';
   media-src 'self';
   worker-src 'none';
diff --git a/frontend/package.json b/frontend/package.json
index 27c1b0bc3..491ae57d6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,6 +34,7 @@
     "next": "13.1.6",
     "next-auth": "^4.20.1",
     "npm": "^9.5.0",
+    "posthog-js": "^1.87.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
diff --git a/frontend/scripts/replace-variable.sh b/frontend/scripts/replace-variable.sh
index 32fd7dcb0..67ed27363 100644
--- a/frontend/scripts/replace-variable.sh
+++ b/frontend/scripts/replace-variable.sh
@@ -16,4 +16,5 @@ while read file; do
     sed -i "s|BAKED_NEXT_PUBLIC_BACKEND_API_BASE|$NEXT_PUBLIC_BACKEND_API_BASE|g" "$file"
     sed -i "s|BAKED_NEXT_PUBLIC_NEXTAUTH_PROVIDERS|$NEXT_PUBLIC_NEXTAUTH_PROVIDERS|g" "$file"
     sed -i "s|BAKED_NEXT_PUBLIC_APP_HOST|$APP_HOST|g" "$file"
+    sed -i "s|BAKED_NEXT_PUBLIC_POSTHOG_KEY|$NEXT_PUBLIC_POSTHOG_KEY|g" "$file"
 done
\ No newline at end of file
diff --git a/frontend/utils/posthog.ts b/frontend/utils/posthog.ts
new file mode 100644
index 000000000..b8569c206
--- /dev/null
+++ b/frontend/utils/posthog.ts
@@ -0,0 +1,15 @@
+import posthog from 'posthog-js'
+
+export function initializePostHog() {
+  if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
+      capture_pageview: true,
+      session_recording: {
+        maskInputOptions: {
+          password: true, // Mask password inputs
+        },
+      },
+    })
+  }
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index c563a5409..2a723259c 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3491,6 +3491,11 @@ fbjs@^3.0.0:
     setimmediate "^1.0.5"
     ua-parser-js "^1.0.35"
 
+fflate@^0.4.1:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -5749,6 +5754,13 @@ postcss@^8.0.9, postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+posthog-js@^1.87.5:
+  version "1.87.5"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.87.5.tgz#a279fc2016984008f2378a451bbbe33d9c89b857"
+  integrity sha512-GvSOX9oA1iPPaZSwFkuA333PDDo9yCKj4yqFYjxf/dU2mBIOuIMjdPLTiCvoVmsf2UL/2/9c7AwlnFAG4iRZuQ==
+  dependencies:
+    fflate "^0.4.1"
+
 preact-render-to-string@^5.1.19:
   version "5.2.6"
   resolved "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.6.tgz"
diff --git a/staging-docker-compose.yml b/staging-docker-compose.yml
index 8af281646..cb2f0ef0e 100644
--- a/staging-docker-compose.yml
+++ b/staging-docker-compose.yml
@@ -33,6 +33,7 @@ services:
       BACKEND_API_BASE: "http://backend:8000"
       NEXT_PUBLIC_BACKEND_API_BASE: "${HTTP_PROTOCOL}${HOST}/service"
       NEXT_PUBLIC_NEXTAUTH_PROVIDERS: "${SSO_PROVIDERS}"
+      NEXT_PUBLIC_POSTHOG_KEY: "${NEXT_PUBLIC_POSTHOG_KEY}"
     networks:
       - phase-net-dev