add posthog identification

package-lock.json

@@ -36,6 +36,7 @@
         "next": "^13.3.0",
         "next-auth": "^4.21.0",
         "posthog-js": "^1.53.4",
+        "posthog-node": "^3.1.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-media-recorder": "^1.6.6",
@@ -5858,6 +5859,26 @@
         "rrweb-snapshot": "^1.1.14"
       }
     },
+    "node_modules/posthog-node": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-3.1.0.tgz",
+      "integrity": "sha512-hXhkDWigzNYgkfLpd3HbfCD0h1/zP19pPXEba2Daf6xCerrFxc7ixMDtXwCQMXOmJNvrcoVMvrjULpfKHN11vA==",
+      "dependencies": {
+        "axios": "^0.27.0"
+      },
+      "engines": {
+        "node": ">=15.0.0"
+      }
+    },
+    "node_modules/posthog-node/node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
     "node_modules/preact": {
       "version": "10.13.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.2.tgz",
@@ -11451,6 +11472,25 @@
         "rrweb-snapshot": "^1.1.14"
       }
     },
+    "posthog-node": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/posthog-node/-/posthog-node-3.1.0.tgz",
+      "integrity": "sha512-hXhkDWigzNYgkfLpd3HbfCD0h1/zP19pPXEba2Daf6xCerrFxc7ixMDtXwCQMXOmJNvrcoVMvrjULpfKHN11vA==",
+      "requires": {
+        "axios": "^0.27.0"
+      },
+      "dependencies": {
+        "axios": {
+          "version": "0.27.2",
+          "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+          "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+          "requires": {
+            "follow-redirects": "^1.14.9",
+            "form-data": "^4.0.0"
+          }
+        }
+      }
+    },
     "preact": {
       "version": "10.13.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.13.2.tgz",

package.json

@@ -44,6 +44,7 @@
     "next": "^13.3.0",
     "next-auth": "^4.21.0",
     "posthog-js": "^1.53.4",
+    "posthog-node": "^3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-media-recorder": "^1.6.6",

src/pages/_app.tsx

@@ -1,14 +1,15 @@
 import { type AppType } from "next/app";
 import { type Session } from "next-auth";
-import { SessionProvider } from "next-auth/react";
+import { SessionProvider, useSession } from "next-auth/react";
 
 import { api } from "~/utils/api";
 
 import "~/styles/globals.css";
 import CrispChat from "~/components/CrispChat";
 import posthog from "posthog-js";
-import { PostHogProvider } from "posthog-js/react";
+import { PostHogProvider, usePostHog } from "posthog-js/react";
 import { env } from "~/env.mjs";
+import { type ReactNode, useEffect } from "react";
 
 // Check that PostHog is client-side (used to handle Next.js SSR)
 if (typeof window !== "undefined") {
@@ -28,11 +29,38 @@ const MyApp: AppType<{ session: Session | null }> = ({
   return (
     <SessionProvider session={session}>
       <PostHogProvider client={posthog}>
+        <PostHogIdentificationWrapper>
           <Component {...pageProps} />
+        </PostHogIdentificationWrapper>
         <CrispChat />
       </PostHogProvider>
     </SessionProvider>
   );
 };
 
+const PostHogIdentificationWrapper = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const { data: session, status } = useSession();
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (!posthog) return;
+    if (status === "authenticated") {
+      const { id, name, email, stripeSubscriptionStatus } = session?.user;
+      posthog.identify(id, {
+        name,
+        email,
+        stripeSubscriptionStatus,
+      });
+    } else if (status === "unauthenticated") {
+      posthog.reset();
+    }
+  }, [posthog, session, status]);
+
+  return <div>{children}</div>;
+};
+
 export default api.withTRPC(MyApp);