add posthog identification

This commit is contained in:
MarconLP 2023-04-23 09:55:33 +02:00
parent cf903425f1
commit c3dad32a2e
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
3 changed files with 72 additions and 3 deletions

40
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -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}>
<Component {...pageProps} />
<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);