Identify users based on clerk id (#179)

* Added identify user * Don't mask searches
ScottyLabs · Nov 10, 2024 · 15072a3 · 15072a3
1 parent 1402d71
commit 15072a3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/apps/frontend/src/app/providers.tsx b/apps/frontend/src/app/providers.tsx
@@ -12,7 +12,13 @@ export function PHProvider({
     posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || "", {
       api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
       person_profiles: 'identified_only',
-      capture_pageview: false // Disable automatic pageview capture, as we capture manually
+      capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+      session_recording: {
+        maskAllInputs: false,
+        maskInputOptions: {
+          password: true,
+        }
+      }
     })
   }, []);
 

diff --git a/apps/frontend/src/components/Page.tsx b/apps/frontend/src/components/Page.tsx
@@ -9,6 +9,7 @@ import { SideNav } from "./SideNav";
 import Link from "./Link";
 import { useAuth } from "@clerk/nextjs";
 import { userSlice } from "~/app/user";
+import { usePostHog } from "posthog-js/react";
 
 type Props = {
   sidebar?: React.ReactNode;
@@ -23,7 +24,7 @@ export const Page = ({ sidebar, content, activePage }: Props) => {
   );
   const dispatch = useAppDispatch();
 
-  const { isLoaded, userId, sessionId, getToken } = useAuth();
+  const { isLoaded, isSignedIn, userId, sessionId, getToken } = useAuth();
 
   useEffect(() => {
     if (isLoaded && userId && sessionId) {
@@ -50,6 +51,16 @@ export const Page = ({ sidebar, content, activePage }: Props) => {
     }
   }, [dispatch, loggedIn, modalShown]);
 
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (isSignedIn && userId) {
+      posthog?.identify(userId);
+    } else {
+      posthog?.reset();
+    }
+  }, [posthog, isSignedIn, userId]);
+
   return (
     <div className="accent-blue-600 dark:accent-blue-800">
       <LoginModal />