diff --git a/package-lock.json b/package-lock.json index eb83625..3275b0f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 9067ab7..6131e7c 100644 --- a/package.json +++ b/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", diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index b70ce29..c59dbf5 100644 --- a/src/pages/_app.tsx +++ b/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 ( - + + + ); }; +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
{children}
; +}; + export default api.withTRPC(MyApp);