add posthog user identification

d-ivashchuk · Mar 27, 2024 · 7b9f4a8 · 7b9f4a8
1 parent f6c6d42
commit 7b9f4a8
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "lucide-react": "^0.363.0",
     "next": "^14.1.3",
     "next-auth": "^4.24.6",
+    "posthog-js": "^1.116.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "server-only": "^0.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,11 @@
-'use client'
+"use client";
 
 import "~/styles/globals.css";
 
 import { Inter } from "next/font/google";
 
-import { TRPCReactProvider } from "~/trpc/react";
-import { SessionProvider } from 'next-auth/react';
 import { Layout } from "~/components/patterns/layout";
+import Providers from "~/components/providers";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -27,11 +26,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`font-sans ${inter.variable}`}>
-        <TRPCReactProvider>
-        <SessionProvider>
+        <Providers>
           <Layout>{children}</Layout>
-        </SessionProvider>
-        </TRPCReactProvider>
+        </Providers>
       </body>
     </html>
   );

diff --git a/src/components/patterns/login-screen.tsx b/src/components/patterns/login-screen.tsx
@@ -18,7 +18,9 @@ export function LoginScreen() {
           </div>
           <div className="grid gap-4">
             <Button
-              onClick={() => signIn("discord", { callbackUrl: "/" })}
+              onClick={() =>
+                signIn("discord", { callbackUrl: "/?loginState=signedIn" })
+              }
               variant="outline"
               className="w-full"
             >

diff --git a/src/components/providers/index.tsx b/src/components/providers/index.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import React from "react";
+import posthog from "posthog-js";
+import { PostHogProvider, usePostHog } from "posthog-js/react";
+import { SessionProvider, useSession } from "next-auth/react";
+
+import { Layout } from "~/components/patterns/layout";
+import { TRPCReactProvider } from "~/trpc/react";
+import { env } from "~/env.mjs";
+import { useSearchParams } from "next/navigation";
+
+if (typeof window !== "undefined" && process.env.NODE_ENV === "production") {
+  posthog.init(env.NEXT_PUBLIC_POSTHOG_API_KEY!, {
+    api_host: env.NEXT_PUBLIC_POSTHOG_HOST!,
+  });
+}
+
+const PostHogIdentification = ({ children }: { children: React.ReactNode }) => {
+  const { data: session } = useSession();
+  const posthog = usePostHog();
+
+  const params = useSearchParams();
+  const newLoginState = params.get("loginState");
+
+  if (newLoginState == "signedIn" && session) {
+    posthog.identify(session.user.id);
+  }
+
+  return <>{children}</>;
+};
+
+const Providers = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <TRPCReactProvider>
+      <SessionProvider>
+        <PostHogProvider client={posthog}>
+          <PostHogIdentification>
+            <Layout>{children}</Layout>
+          </PostHogIdentification>
+        </PostHogProvider>
+      </SessionProvider>
+    </TRPCReactProvider>
+  );
+};
+
+export default Providers;
diff --git a/src/env.mjs b/src/env.mjs
@@ -50,7 +50,14 @@ export const env = createEnv({
    * `NEXT_PUBLIC_`.
    */
   client: {
-    // NEXT_PUBLIC_CLIENTVAR: z.string(),
+    NEXT_PUBLIC_POSTHOG_API_KEY:
+      process.env.NODE_ENV === "production"
+        ? z.string()
+        : z.string().optional(),
+    NEXT_PUBLIC_POSTHOG_HOST:
+      process.env.NODE_ENV === "production"
+        ? z.string()
+        : z.string().optional(),
   },
 
   /**
@@ -64,6 +71,8 @@ export const env = createEnv({
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
     DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
     DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+    NEXT_PUBLIC_POSTHOG_API_KEY: process.env.POSTHOG_API_KEY,
+    NEXT_PUBLIC_POSTHOG_HOST: process.env.POSTHOG_HOST,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially