User Identification

Author: ThomasCode92

src/app/_providers/posthog-provider.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { useEffect } from "react";
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
+import { useEffect } from "react";
+
+import UserIdentification from "./user-identification";
 
 import { env } from "~/env";
 
@@ -16,5 +18,10 @@ export function PostHogProvider({ children }: { children: React.ReactNode }) {
     });
   }, []);
 
-  return <PHProvider client={posthog}>{children}</PHProvider>;
+  return (
+    <PHProvider client={posthog}>
+      <UserIdentification />
+      {children}
+    </PHProvider>
+  );
 }

src/app/_providers/user-identification.tsx

@@ -0,0 +1,20 @@
+import { useUser } from "@clerk/nextjs";
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+
+export default function UserIdentification() {
+  const posthog = usePostHog();
+  const { user } = useUser();
+
+  useEffect(() => {
+    if (user) {
+      posthog.identify(user.id, {
+        email: user.emailAddresses[0]?.emailAddress,
+      });
+    } else {
+      posthog.reset();
+    }
+  }, [posthog, user]);
+
+  return null; // Do not render anything
+}