From 94784a783c02af3b6d9e3533b50521bd6dcac603 Mon Sep 17 00:00:00 2001
From: Dustin Do <dustin.do95@gmail.com>
Date: Wed, 11 Sep 2024 07:07:27 +0700
Subject: [PATCH] feat(mobile): track user auth events (#302)

---
 .vscode/settings.json                       |  1 +
 apps/mobile/app/(app)/(tabs)/_layout.tsx    |  2 +-
 apps/mobile/app/(auth)/login.tsx            | 37 ++++++++++++--
 apps/mobile/app/_layout.tsx                 |  4 +-
 apps/mobile/components/auth/auth-email.tsx  | 10 +++-
 apps/mobile/components/auth/auth-social.tsx | 54 ++++++++++++++++-----
 apps/mobile/mutations/user.ts               |  8 ++-
 7 files changed, 95 insertions(+), 21 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 5e2658fe..f87f9c04 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -17,6 +17,7 @@
     "EXCHANGERATES",
     "hono",
     "openai",
+    "posthog",
     "svix",
     "tanstack"
   ]
diff --git a/apps/mobile/app/(app)/(tabs)/_layout.tsx b/apps/mobile/app/(app)/(tabs)/_layout.tsx
index 65ad7c71..f94efa2d 100644
--- a/apps/mobile/app/(app)/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(app)/(tabs)/_layout.tsx
@@ -17,11 +17,11 @@ export default function TabLayout() {
   const { user } = useUser()
   const { width } = useWindowDimensions()
   const { bottom } = useSafeAreaInsets()
-
   const posthog = usePostHog()
 
   useEffect(() => {
     if (!user) {
+      posthog.reset()
       return
     }
     posthog.identify(user?.id, {
diff --git a/apps/mobile/app/(auth)/login.tsx b/apps/mobile/app/(auth)/login.tsx
index f279e722..2af31463 100644
--- a/apps/mobile/app/(auth)/login.tsx
+++ b/apps/mobile/app/(auth)/login.tsx
@@ -11,12 +11,33 @@ import { Trans, t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import { Link } from 'expo-router'
 import { MailIcon } from 'lucide-react-native'
-import { useState } from 'react'
+import { usePostHog } from 'posthog-react-native'
+import { useCallback, useState } from 'react'
 import { Linking, ScrollView, View } from 'react-native'
 
+type Strategy = 'email_code' | 'oauth_google' | 'oauth_apple'
+
 export default function LoginScreen() {
   const [withEmail, setWithEmail] = useState(false)
   const { i18n } = useLingui()
+  const posthog = usePostHog()
+
+  const handleSignedUp = useCallback(
+    (strategy: Strategy, userId?: string) => {
+      posthog.identify(userId)
+      posthog.capture('user_signed_up', { strategy })
+    },
+    [posthog],
+  )
+
+  const handleSignedIn = useCallback(
+    (strategy: Strategy, userId?: string) => {
+      posthog.identify(userId)
+      posthog.capture('user_signed_up', { strategy })
+    },
+    [posthog],
+  )
+
   return (
     <ScrollView
       className="bg-card"
@@ -37,14 +58,22 @@ export default function LoginScreen() {
       </Trans>
       <AuthIllustration className="my-16 h-[326px] text-primary" />
       <View className="flex flex-col gap-3">
-        <AppleAuthButton />
-        <GoogleAuthButton />
+        <AppleAuthButton
+          onSignedUp={handleSignedUp}
+          onSignedIn={handleSignedIn}
+        />
+        <GoogleAuthButton
+          onSignedUp={handleSignedUp}
+          onSignedIn={handleSignedIn}
+        />
         <Button variant="outline" onPress={() => setWithEmail(true)}>
           <MailIcon className="h-5 w-5 text-primary" />
           <Text>{t(i18n)`Continue with Email`}</Text>
         </Button>
         <Separator className="mx-auto my-3 w-[70%]" />
-        {withEmail && <AuthEmail />}
+        {withEmail && (
+          <AuthEmail onSignedUp={handleSignedUp} onSignedIn={handleSignedIn} />
+        )}
       </View>
       <View className="px-4">
         <Trans>
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index c7a040ef..86295b91 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -149,11 +149,13 @@ function RootLayout() {
 
   return (
     <PostHogProvider
+      autocapture
       apiKey={process.env.EXPO_PUBLIC_POSTHOG_API_KEY!}
       options={{
         host: process.env.EXPO_PUBLIC_POSTHOG_HOST!,
+        disabled:
+          process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY?.includes('test'),
       }}
-      autocapture
     >
       <ClerkProvider
         publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY!}
diff --git a/apps/mobile/components/auth/auth-email.tsx b/apps/mobile/components/auth/auth-email.tsx
index b3b31956..edee0789 100644
--- a/apps/mobile/components/auth/auth-email.tsx
+++ b/apps/mobile/components/auth/auth-email.tsx
@@ -22,7 +22,13 @@ import {
   verifyEmailFormSchema,
 } from './emailSchema'
 
-export function AuthEmail() {
+export function AuthEmail({
+  onSignedUp,
+  onSignedIn,
+}: {
+  onSignedUp: (strategy: 'email_code', userId?: string) => void
+  onSignedIn: (strategy: 'email_code', userId?: string) => void
+}) {
   const { i18n } = useLingui()
 
   const authEmailForm = useForm<EmailFormValues>({
@@ -108,6 +114,7 @@ export function AuthEmail() {
             email: signUpAttempt.emailAddress!,
             name: signUpAttempt.firstName ?? '',
           })
+          onSignedUp('email_code', signUpAttempt.id)
         } else {
           console.error(signUpAttempt)
         }
@@ -119,6 +126,7 @@ export function AuthEmail() {
         if (signInAttempt.status === 'complete') {
           await setActiveSignIn({ session: signInAttempt.createdSessionId })
           // signed in
+          onSignedIn('email_code', signInAttempt.id)
         } else {
           console.error(signInAttempt)
         }
diff --git a/apps/mobile/components/auth/auth-social.tsx b/apps/mobile/components/auth/auth-social.tsx
index dfccab60..c759b59c 100644
--- a/apps/mobile/components/auth/auth-social.tsx
+++ b/apps/mobile/components/auth/auth-social.tsx
@@ -9,33 +9,45 @@ import { GoogleLogo } from '../svg-assets/google-logo'
 import { Button } from '../ui/button'
 import { Text } from '../ui/text'
 
+type Strategy = 'oauth_google' | 'oauth_apple'
+
 type AuthSocialProps = {
   label: string
   icon: React.ComponentType<SvgProps>
-  strategy: 'oauth_google' | 'oauth_apple'
+  strategy: Strategy
+  onSignedUp: (strategy: Strategy, userId?: string) => void
+  onSignedIn: (strategy: Strategy, userId?: string) => void
 }
 
-export function AuthSocial({ label, icon: Icon, strategy }: AuthSocialProps) {
+export function AuthSocial({
+  label,
+  icon: Icon,
+  strategy,
+  onSignedIn,
+  onSignedUp,
+}: AuthSocialProps) {
   const { startOAuthFlow } = useOAuth({ strategy })
 
   const onPress = async () => {
     try {
-      const { createdSessionId, setActive, signUp } = await startOAuthFlow()
+      const { createdSessionId, setActive, signUp, signIn } =
+        await startOAuthFlow()
 
       if (createdSessionId) {
         setActive?.({ session: createdSessionId })
         if (signUp?.createdUserId) {
-          setTimeout(
-            async () =>
-              await createUser({
-                email: signUp.emailAddress!,
-                name: signUp.firstName ?? '',
-              }),
-            1000,
-          )
+          setTimeout(async () => {
+            await createUser({
+              email: signUp.emailAddress!,
+              name: signUp.firstName ?? '',
+            })
+
+            onSignedUp(strategy, signUp.id)
+          }, 1000)
         }
       } else {
         // Use signIn or signUp for next steps such as MFA
+        onSignedIn(strategy, signIn?.id)
       }
       // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     } catch (err: any) {
@@ -53,24 +65,40 @@ export function AuthSocial({ label, icon: Icon, strategy }: AuthSocialProps) {
   )
 }
 
-export function GoogleAuthButton() {
+export function GoogleAuthButton({
+  onSignedUp,
+  onSignedIn,
+}: {
+  onSignedUp: (strategy: Strategy, userId?: string) => void
+  onSignedIn: (strategy: Strategy, userId?: string) => void
+}) {
   const { i18n } = useLingui()
   return (
     <AuthSocial
       label={t(i18n)`Sign in with Google`}
       icon={GoogleLogo}
       strategy="oauth_google"
+      onSignedIn={onSignedIn}
+      onSignedUp={onSignedUp}
     />
   )
 }
 
-export function AppleAuthButton() {
+export function AppleAuthButton({
+  onSignedUp,
+  onSignedIn,
+}: {
+  onSignedUp: (strategy: Strategy, userId?: string) => void
+  onSignedIn: (strategy: Strategy, userId?: string) => void
+}) {
   const { i18n } = useLingui()
   return (
     <AuthSocial
       label={t(i18n)`Sign in with Apple`}
       icon={AppleLogo}
       strategy="oauth_apple"
+      onSignedIn={onSignedIn}
+      onSignedUp={onSignedUp}
     />
   )
 }
diff --git a/apps/mobile/mutations/user.ts b/apps/mobile/mutations/user.ts
index c7adbd68..33573734 100644
--- a/apps/mobile/mutations/user.ts
+++ b/apps/mobile/mutations/user.ts
@@ -7,11 +7,17 @@ export async function createUser(data: CreateUser) {
   const deviceLanguage = getLocales()[0].languageCode ?? 'vi'
   const deviceCurrency = getLocales()[0]?.currencyCode ?? 'VND'
 
-  await hc.v1.users.$post({
+  const res = await hc.v1.users.$post({
     json: data,
     header: {
       'x-device-language': deviceLanguage,
       'x-device-currency': deviceCurrency,
     },
   })
+
+  if (!res.ok) {
+    return null
+  }
+
+  return res.json()
 }