add posthog identification
This commit is contained in:
parent
cf903425f1
commit
c3dad32a2e
3 changed files with 72 additions and 3 deletions
40
package-lock.json
generated
40
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue