fix: track login page correctly (#13618)

kylecarbs · web-flow · commit 495eea452fcc · 2024-06-20T21:33:47.000Z
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { useEffect, type FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { Navigate, useLocation, useNavigate } from "react-router-dom";
@@ -26,10 +26,21 @@ export const LoginPage: FC = () => {
   const redirectTo = retrieveRedirect(location.search);
   const applicationName = getApplicationName();
   const navigate = useNavigate();
-
   const { metadata } = useEmbeddedMetadata();
   const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
 
+  useEffect(() => {
+    if (!buildInfoQuery.data || isSignedIn) {
+      // isSignedIn already tracks with window.href!
+      return;
+    }
+    // This uses `navigator.sendBeacon`, so navigating away will not prevent it!
+    sendDeploymentEvent(buildInfoQuery.data, {
+      type: "deployment_login",
+      user_id: user?.id,
+    });
+  }, [isSignedIn, buildInfoQuery.data, user?.id]);
+
   if (isSignedIn) {
     if (buildInfoQuery.data) {
       // This uses `navigator.sendBeacon`, so window.href
@@ -85,15 +96,6 @@ export const LoginPage: FC = () => {
         isSigningIn={isSigningIn}
         onSignIn={async ({ email, password }) => {
           await signIn(email, password);
-          if (buildInfoQuery.data) {
-            // This uses `navigator.sendBeacon`, so navigating away
-            // will not prevent it!
-            sendDeploymentEvent(buildInfoQuery.data, {
-              type: "deployment_login",
-              user_id: user?.id,
-            });
-          }
-
           navigate("/");
         }}
       />
