NEOS-984:add posthog to login page (#11)

package.json

@@ -21,6 +21,7 @@
   "dependencies": {
     "evt": "^2.5.7",
     "keycloakify": "^9.5.3",
+    "posthog-js": "^1.118.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/PosthogProvider.tsx

@@ -0,0 +1,37 @@
+import posthog from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+// export function PostHogPageview() {
+
+// //   useEffect(() => {
+// //     if (pathname) {
+// //       let url = window.origin + pathname;
+// //       if (searchParams.toString()) {
+// //         url = url + `?${searchParams.toString()}`;
+// //       }
+// //       posthog.capture("$pageview", {
+// //         $current_url: url,
+// //       });
+// //     }
+// //   }, [pathname, searchParams]);
+// //   return null;
+// // }
+
+export default function PHProvider(props: Props) {
+  const { children } = props;
+
+  const token: string = process.env.NEXT_PUBLIC_POSTHOG_KEY ?? "";
+
+  if (typeof window !== "undefined") {
+    posthog.init(token, {
+      api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    });
+  }
+
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}

src/login/pages/Login.tsx

@@ -98,7 +98,7 @@ export default function Login(
               display: !social?.providers ? "none" : "block",
             }}
           >
-            <span>or continue with email</span>
+            <span>or continue with email!</span>
           </div>
           {realm.password && (
             <form

src/main.tsx

@@ -2,27 +2,30 @@ import { StrictMode, Suspense, lazy } from "react";
 import { createRoot } from "react-dom/client";
 import { kcContext as kcAccountThemeContext } from "./account/kcContext";
 import { kcContext as kcLoginThemeContext } from "./login/kcContext";
+import PHProvider from "./PosthogProvider";
 
 const KcLoginThemeApp = lazy(() => import("./login/KcApp"));
 const KcAccountThemeApp = lazy(() => import("./account/KcApp"));
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <Suspense>
-      {(() => {
-        if (kcLoginThemeContext !== undefined) {
-          return <KcLoginThemeApp kcContext={kcLoginThemeContext} />;
-        }
+      <PHProvider>
+        {(() => {
+          if (kcLoginThemeContext !== undefined) {
+            return <KcLoginThemeApp kcContext={kcLoginThemeContext} />;
+          }
 
-        if (kcAccountThemeContext !== undefined) {
-          return <KcAccountThemeApp kcContext={kcAccountThemeContext} />;
-        }
+          if (kcAccountThemeContext !== undefined) {
+            return <KcAccountThemeApp kcContext={kcAccountThemeContext} />;
+          }
 
-        throw new Error(
-          "This app is a Keycloak theme" +
-            "It isn't meant to be deployed outside of Keycloak"
-        );
-      })()}
+          throw new Error(
+            "This app is a Keycloak theme" +
+              "It isn't meant to be deployed outside of Keycloak"
+          );
+        })()}
+      </PHProvider>
     </Suspense>
   </StrictMode>
 );