68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { type AppType } from "next/app";
|
|
import { type Session } from "next-auth";
|
|
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, 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" &&
|
|
!!env.NEXT_PUBLIC_POSTHOG_KEY &&
|
|
!!env.NEXT_PUBLIC_POSTHOG_PROXY_HOST
|
|
) {
|
|
posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
|
|
api_host: env.NEXT_PUBLIC_POSTHOG_PROXY_HOST,
|
|
// Enable debug mode in development
|
|
loaded: (posthog) => {
|
|
if (process.env.NODE_ENV === "development") posthog.debug();
|
|
},
|
|
});
|
|
}
|
|
|
|
const MyApp: AppType<{ session: Session | null }> = ({
|
|
Component,
|
|
pageProps: { session, ...pageProps },
|
|
}) => {
|
|
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?.__loaded) return;
|
|
if (status === "authenticated") {
|
|
const { id, name, email, stripeSubscriptionStatus } = session?.user;
|
|
posthog?.identify(id, {
|
|
name,
|
|
email,
|
|
stripeSubscriptionStatus,
|
|
});
|
|
}
|
|
}, [posthog, session, status]);
|
|
|
|
return <div>{children}</div>;
|
|
};
|
|
|
|
export default api.withTRPC(MyApp);
|