feat(saas): Posthog Analytics Init

starterkits/saas/.env.example

@@ -39,3 +39,7 @@ UPLOADTHING_ID=""
 LEMONSQUEEZY_API_KEY=""
 LEMONSQUEEZY_STORE_ID=""
 LEMONSQUEEZY_WEBHOOK_SECRET=""
+
+# Posthog
+NEXT_PUBLIC_POSTHOG_KEY=""
+NEXT_PUBLIC_POSTHOG_HOST=""

starterkits/saas/package.json

@@ -53,6 +53,7 @@
         "next-themes": "^0.3.0",
         "nodemailer": "^6.9.13",
         "postgres": "^3.4.3",
+        "posthog-js": "^1.130.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.51.3",

starterkits/saas/src/components/posthog-provider.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { env } from "@/env";
+import { useSession } from "next-auth/react";
+import posthog from "posthog-js";
+import { PostHogProvider as CSPostHogProvider } from "posthog-js/react";
+import { useEffect } from "react";
+
+if (typeof window !== "undefined") {
+    posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
+        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    });
+}
+
+type PostHogProviderProps = {
+    children: React.ReactNode;
+};
+
+export function PosthogProvider({ children }: PostHogProviderProps) {
+    return (
+        <CSPostHogProvider client={posthog}>
+            <PosthogAuthWrapper>{children}</PosthogAuthWrapper>
+        </CSPostHogProvider>
+    );
+}
+
+function PosthogAuthWrapper({ children }: PostHogProviderProps) {
+    const { data: session, status } = useSession();
+
+    useEffect(() => {
+        if (status === "authenticated") {
+            posthog.identify(session.user.id, {
+                email: session.user.email,
+                name: session.user.name,
+            });
+        } else if (status === "unauthenticated") {
+            posthog.reset();
+        }
+    }, [session, status]);
+
+    return children;
+}

starterkits/saas/src/components/providers.tsx

@@ -2,6 +2,8 @@
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "@/components/theme-provider";
+import { PosthogProvider } from "@/components/posthog-provider";
+import { SessionProvider } from "next-auth/react";
 
 type ProvidersProps = {
     children: React.ReactNode;
@@ -11,8 +13,12 @@ export function Providers({ children }: ProvidersProps) {
     const queryClient = new QueryClient();
 
     return (
-        <QueryClientProvider client={queryClient}>
-            <ThemeProvider>{children}</ThemeProvider>
-        </QueryClientProvider>
+        <SessionProvider>
+            <QueryClientProvider client={queryClient}>
+                <PosthogProvider>
+                    <ThemeProvider>{children}</ThemeProvider>
+                </PosthogProvider>
+            </QueryClientProvider>
+        </SessionProvider>
     );
 }

starterkits/saas/src/env.js

@@ -41,6 +41,8 @@ export const env = createEnv({
      */
     client: {
         // NEXT_PUBLIC_CLIENTVAR: z.string(),
+        NEXT_PUBLIC_POSTHOG_KEY: z.string(),
+        NEXT_PUBLIC_POSTHOG_HOST: z.string().url(),
     },
 
     /**
@@ -62,6 +64,8 @@ export const env = createEnv({
         LEMONSQUEEZY_API_KEY: process.env.LEMONSQUEEZY_API_KEY,
         LEMONSQUEEZY_STORE_ID: process.env.LEMONSQUEEZY_STORE_ID,
         LEMONSQUEEZY_WEBHOOK_SECRET: process.env.LEMONSQUEEZY_WEBHOOK_SECRET,
+        NEXT_PUBLIC_POSTHOG_HOST: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+        NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
     },
     /**
      * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially