feat(backend): include user email in session creation and update auth utilities

Author: tyler-dane

packages/backend/src/auth/controllers/auth.controller.ts

@@ -116,7 +116,9 @@ class AuthController {
           : await this.signup(gUser, gRefreshToken);
 
       const sUserId = supertokens.convertToRecipeUserId(cUserId);
-      await Session.createNewSession(req, res, "public", sUserId);
+      await Session.createNewSession(req, res, "public", sUserId, {
+        email,
+      });
 
       const result: Result_Auth_Compass = {
         cUserId,

packages/backend/src/common/types/supertokens.types.ts

@@ -9,4 +9,5 @@ export interface SupertokensAccessTokenPayload {
   parentRefreshTokenHash1: string | null;
   antiCsrfToken: string | null;
   iss: string;
+  email?: string;
 }

packages/web/src/auth/UserContext.tsx

@@ -1,36 +1,50 @@
-import React, {
+import { usePostHog } from "posthog-js/react";
+import {
   ReactNode,
   createContext,
   useContext,
+  useEffect,
   useLayoutEffect,
   useState,
 } from "react";
 import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
-import { getUserId } from "./auth.util";
+import { getUserEmail, getUserId } from "./auth.util";
 
 const UserContext = createContext<
   { isLoadingUser: boolean; userId: string } | undefined
 >(undefined);
 
 export const UserProvider = ({ children }: { children: ReactNode }) => {
   const [userId, setUserId] = useState<string | null>(null);
+  const [email, setEmail] = useState<string | null>(null);
   const [isLoadingUser, setIsLoadingUser] = useState(false);
+  const posthog = usePostHog();
 
   useLayoutEffect(() => {
-    const fetchUserId = async () => {
+    const fetchUserData = async () => {
       try {
         const uid = await getUserId();
+        const userEmail = await getUserEmail();
+        console.log("userEmail", userEmail);
         setUserId(uid);
+        setEmail(userEmail);
       } catch (e) {
         console.error("Failed to get user because:", e);
       } finally {
         setIsLoadingUser(false);
       }
     };
 
-    void fetchUserId();
+    void fetchUserData();
   }, []);
 
+  // Identify user in PostHog when userId and email are available
+  useEffect(() => {
+    if (userId && email && posthog) {
+      posthog.identify(email, { email, userId });
+    }
+  }, [userId, email, posthog]);
+
   if (isLoadingUser || userId === null) {
     return <AbsoluteOverflowLoader />;
   }

packages/web/src/auth/auth.util.ts

@@ -2,6 +2,7 @@ import Session from "supertokens-auth-react/recipe/session";
 
 interface AccessTokenPayload {
   sub: string;
+  email?: string;
 }
 
 export const getUserId = async () => {
@@ -10,3 +11,17 @@ export const getUserId = async () => {
   const userId = accessTokenPayload["sub"];
   return userId;
 };
+
+/**
+ * Get the user's email from the session access token payload
+ */
+export const getUserEmail = async (): Promise<string | null> => {
+  try {
+    const accessTokenPayload =
+      (await Session.getAccessTokenPayloadSecurely()) as AccessTokenPayload;
+    return accessTokenPayload.email || null;
+  } catch (error) {
+    console.error("Failed to get user email:", error);
+    return null;
+  }
+};

packages/web/src/views/Login/Login.tsx

@@ -1,4 +1,3 @@
-import { usePostHog } from "posthog-js/react";
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuthCheck } from "@web/auth/useAuthCheck";
@@ -31,7 +30,6 @@ type FlowStep = "initial" | "checkingWaitlist" | "waitlistStatusKnown";
 export const LoginView = () => {
   const emailInputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
-  const posthog = usePostHog();
 
   // New state for the waitlist check flow
   const [emailInput, setEmailInput] = useState("");
@@ -71,15 +69,10 @@ export const LoginView = () => {
     loading: isGoogleLoginLoading,
   } = useGoogleLogin({
     onSuccess: async (code) => {
-      const response = await AuthApi.loginOrSignup(code);
+      await AuthApi.loginOrSignup(code);
 
       // Set flag to track that user has completed signup
       markSignupCompleted();
-
-      // Identify user in PostHog with email as distinct ID
-      if (response.email && posthog) {
-        posthog.identify(response.email, { email: response.email });
-      }
     },
     onError: (error) => {
       console.error(error);

packages/web/src/views/Onboarding/steps/events/SomedaySandbox/sandbox.util.test.ts

@@ -23,6 +23,7 @@ jest.mock("@core/types/event.types", () => ({
 
 jest.mock("@web/auth/auth.util", () => ({
   getUserId: jest.fn().mockResolvedValue("test-user-id"),
+  getUserEmail: jest.fn().mockResolvedValue("test@example.com"),
 }));
 
 jest.mock("@web/common/styles/theme.util", () => ({