@entropy-softworks/ui 2026.7.31 → 2026.8.1

package/src/screens/auth/AuthScreen.tsx

@@ -11,6 +11,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from "react-native-reanimated";
+import { withClickTracking } from "../../services/telemetry";
 import { type Href } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { Ionicons } from "@expo/vector-icons";
@@ -103,6 +104,50 @@ export interface AuthScreenProps {
   decoration?: React.ReactNode;
   /** Welcome-view tagline/subtitle. Defaults to AppConfig `tagline`. */
   welcomeCtaLabel?: string;
+  /**
+   * Show the Sign Up half of the toggle. Defaults to `true`.
+   *
+   * Set `false` where the server has no self-service registration — an
+   * identity provider whose tenant is `closed`, for instance. The toggle is
+   * hidden rather than disabled, because a control that cannot ever succeed is
+   * worse than no control.
+   */
+  signUpEnabled?: boolean;
+  /**
+   * Collect an invite code on the Sign Up form and require it. For servers
+   * whose registration is invite-only.
+   */
+  requireInviteCode?: boolean;
+  /**
+   * Override registration entirely. When provided this runs instead of
+   * `useAuth().register`, and the screen shows `signUpSuccessMessage` rather
+   * than assuming the user is now signed in.
+   *
+   * This exists because registration is not uniform across the estate: the
+   * single-tenant apps sign you straight in, while the multi-tenant IdP creates
+   * an unverified account, emails a link, and leaves you signed out. Reshaping
+   * the shared `AuthService.register` to cover both would have changed the
+   * contract vault and simple-finance already depend on.
+   */
+  onSignUp?: (input: {
+    email: string;
+    username: string;
+    password: string;
+    displayName: string;
+    inviteCode?: string;
+  }) => Promise<void>;
+  /** Shown after a successful `onSignUp`. */
+  signUpSuccessMessage?: string;
+  /**
+   * Render the welcome stage (logo, decoration, "Get Started") before the form.
+   * Defaults to `true`.
+   *
+   * Set `false` to land straight on the form. An app whose only purpose at this
+   * URL is to authenticate has nothing to introduce, and a button that only
+   * reveals the form it precedes is pure friction. The in-card "← Back" is
+   * hidden too, since there is no stage behind it.
+   */
+  showWelcome?: boolean;
 }
 
 /**
@@ -124,6 +169,11 @@ export function AuthScreen({
   transition,
   decoration,
   welcomeCtaLabel = "Get Started",
+  signUpEnabled = true,
+  requireInviteCode = false,
+  onSignUp,
+  signUpSuccessMessage = "Account created. Check your email to verify the address, then sign in.",
+  showWelcome = true,
 }: AuthScreenProps = {}) {
   const {
     login: authLogin,
@@ -132,21 +182,32 @@ export function AuthScreen({
     unlockWithPassword,
   } = useAuth();
   const router = useNavigation();
-  const { appName, Logo, tagline, routes, termsText, privacyText } = useAppConfig();
+  const {
+    appName,
+    Logo,
+    tagline,
+    routes,
+    termsText,
+    privacyText,
+    logoIsWordmark,
+    logoWidth,
+  } = useAppConfig();
 
   const { colorScheme } = useColorScheme();
   const isDark = colorScheme === "dark";
   const t = useMemo(() => ({ ...DEFAULT_TRANSITION, ...transition }), [transition]);
 
   const [mode, setMode] = useState<Mode>("signin");
-  const [stage, setStage] = useState<Stage>("welcome");
+  const [inviteCode, setInviteCode] = useState("");
+  const [signedUp, setSignedUp] = useState<string | null>(null);
+  const [stage, setStage] = useState<Stage>(showWelcome ? "welcome" : "auth");
   const isSignup = mode === "signup";
 
   // Stage morph: `stage` is the target; `displayStage` is what's rendered.
   // On a stage change we fade/scale the content out, swap displayStage at zero
   // opacity (so the centered-welcome → top-anchored-form layout change is
   // invisible — no teleport, no overlap of the two states), then fade in.
-  const [displayStage, setDisplayStage] = useState<Stage>("welcome");
+  const [displayStage, setDisplayStage] = useState<Stage>(showWelcome ? "welcome" : "auth");
   // Fade-through: `stage` is the target, `displayStage` is what's rendered. On
   // a change the content fades/scales out, swaps at zero opacity (so the
   // position change between stages is never seen), then fades back in.
@@ -182,6 +243,7 @@ export function AuthScreen({
     displayName?: string;
     password?: string;
     confirmPassword?: string;
+    inviteCode?: string;
   }>({});
 
   const [legal, setLegal] = useState<null | "terms" | "privacy">(null);
@@ -269,6 +331,9 @@ export function AuthScreen({
       } else if (password !== confirmPassword) {
         next.confirmPassword = "Passwords do not match";
       }
+      if (requireInviteCode && !inviteCode.trim()) {
+        next.inviteCode = "An invite code is required to create an account here";
+      }
     }
     return next;
   };
@@ -334,7 +399,25 @@ export function AuthScreen({
     }
     try {
       const username = (email.split("@")[0] || "user").replace(/[^a-zA-Z0-9_]/g, "_").toLowerCase();
-      await authRegister(email.trim().toLowerCase(), username, password, displayName.trim());
+      if (onSignUp) {
+        // The host owns the contract. It may leave the user signed out (the
+        // IdP emails a verification link), so show the notice rather than
+        // assuming a session now exists.
+        await onSignUp({
+          email: email.trim().toLowerCase(),
+          username,
+          password,
+          displayName: displayName.trim(),
+          inviteCode: requireInviteCode ? inviteCode.trim() : undefined,
+        });
+        setSignedUp(signUpSuccessMessage);
+        setPassword("");
+        setConfirmPassword("");
+        setInviteCode("");
+        setMode("signin");
+      } else {
+        await authRegister(email.trim().toLowerCase(), username, password, displayName.trim());
+      }
       await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
     } catch (error) {
       await Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
@@ -495,7 +578,8 @@ export function AuthScreen({
                   <IconButton
                     variant="ghost"
                     size="sm"
-                    onPress={() => setSettingsOpen(true)}
+                    telemetryId="auth.auth.settings_open"
+        onPress={() => setSettingsOpen(true)}
                     accessibilityLabel="Connection settings"
                     accessibilityRole="button"
                   >
@@ -522,10 +606,17 @@ export function AuthScreen({
                 ]}
               >
                 <View className="mb-6 items-center">
-                  <View className="flex-row items-center">
-                    <Logo width={72} height={72} style={{ marginRight: -2 }} />
-                    <Heading className="text-4xl">{appName}</Heading>
-                  </View>
+                  {logoIsWordmark ? (
+                    // The mark carries the name; height is left to the
+                    // component so a wide wordmark keeps its aspect ratio, and
+                    // the ink colour comes from the already-resolved theme.
+                    <Logo width={logoWidth ?? 160} color={isDark ? "#FFFFFF" : "#000000"} />
+                  ) : (
+                    <View className="flex-row items-center">
+                      <Logo width={72} height={72} style={{ marginRight: -2 }} />
+                      <Heading className="text-4xl">{appName}</Heading>
+                    </View>
+                  )}
                   {tagline ? (
                     <Text className="mt-1 font-mono text-base text-muted-foreground">
                       {tagline}
@@ -541,7 +632,8 @@ export function AuthScreen({
                     <View style={{ width: "100%", maxWidth: 320 }}>
                       <Button
                         className="w-full"
-                        onPress={() => setStage("auth")}
+                        telemetryId="auth.auth.stage"
+        onPress={() => setStage("auth")}
                         accessibilityLabel={welcomeCtaLabel}
                         accessibilityRole="button"
                         testID="welcome-get-started"
@@ -594,7 +686,8 @@ export function AuthScreen({
                             {forgotSent ? (
                               <Button
                                 className="w-full"
-                                onPress={goAuth}
+                                telemetryId="auth.auth.go_auth"
+        onPress={goAuth}
                                 accessibilityLabel="Back to sign in"
                               >
                                 Back to Sign In
@@ -603,7 +696,8 @@ export function AuthScreen({
                               <>
                                 <Button
                                   className="w-full"
-                                  onPress={handleForgot}
+                                  telemetryId="auth.auth.forgot"
+        onPress={handleForgot}
                                   isLoading={isLoading}
                                   accessibilityLabel="Send reset link"
                                 >
@@ -611,7 +705,7 @@ export function AuthScreen({
                                 </Button>
                                 <Text
                                   className="mt-1 text-center font-mono text-sm text-muted-foreground"
-                                  onPress={goAuth}
+                                  onPress={withClickTracking("auth.auth.go_auth_2", goAuth)}
                                   accessibilityRole="button"
                                   accessibilityLabel="Back to sign in"
                                 >
@@ -624,14 +718,19 @@ export function AuthScreen({
                       ) : (
                         <>
                           <CardHeader className="gap-4">
-                            <SegmentedToggle<Mode>
-                              value={mode}
-                              onChange={switchMode}
-                              options={[
-                                { key: "signin", label: "Sign In" },
-                                { key: "signup", label: "Sign Up" },
-                              ]}
-                            />
+                            {signUpEnabled ? (
+                              <SegmentedToggle<Mode>
+                                value={mode}
+                                onChange={switchMode}
+                                options={[
+                                  { key: "signin", label: "Sign In" },
+                                  { key: "signup", label: "Sign Up" },
+                                ]}
+                              />
+                            ) : null}
+                            {signedUp ? (
+                              <MutedText className="text-sm leading-5">{signedUp}</MutedText>
+                            ) : null}
                             <CardTitle>
                               {isSignup ? "Create your account" : `Sign in to ${appName}`}
                             </CardTitle>
@@ -649,7 +748,8 @@ export function AuthScreen({
                                   <Button
                                     variant="outline"
                                     className="w-full"
-                                    onPress={handlePasskeyLogin}
+                                    telemetryId="auth.auth.passkey_login"
+        onPress={handlePasskeyLogin}
                                     isLoading={passkeyStep === "passkey-loading"}
                                     accessibilityLabel="Sign in with passkey"
                                     accessibilityRole="button"
@@ -777,6 +877,28 @@ export function AuthScreen({
                                       testID="auth-confirm-password-input"
                                     />
                                   </ShakeField>
+                                  {requireInviteCode ? (
+                                    <View className="mt-3">
+                                      <ShakeField shake={confirmShake} label="Invite code">
+                                        <Input
+                                          value={inviteCode}
+                                          onChangeText={(text) => {
+                                            setInviteCode(text);
+                                            clearField("inviteCode");
+                                          }}
+                                          placeholder="Paste your invite code"
+                                          autoCapitalize="none"
+                                          autoCorrect={false}
+                                          returnKeyType="done"
+                                          onSubmitEditing={handleSubmit}
+                                          invalid={!!errors.inviteCode}
+                                          accessibilityLabel="Invite code"
+                                          testID="auth-invite-code-input"
+                                        />
+                                      </ShakeField>
+                                      <FormError message={errors.inviteCode} />
+                                    </View>
+                                  ) : null}
                                 </Animated.View>
                               ) : (
                                 <Animated.View
@@ -788,11 +910,11 @@ export function AuthScreen({
                                 >
                                   <Text
                                     className="font-mono text-sm underline"
-                                    onPress={() => {
+                                    onPress={withClickTracking("auth.auth.stage_2", () => {
                                       setStage("forgot");
                                       setForgotSent(false);
                                       setErrors({});
-                                    }}
+                                    })}
                                     accessibilityRole="link"
                                     accessibilityLabel="Forgot password"
                                   >
@@ -807,7 +929,8 @@ export function AuthScreen({
 
                               <Button
                                 className="w-full"
-                                onPress={handleSubmit}
+                                telemetryId="auth.auth.submit"
+        onPress={handleSubmit}
                                 isLoading={isLoading}
                                 accessibilityLabel={isSignup ? "Create account" : "Sign in"}
                                 accessibilityRole="button"
@@ -824,10 +947,15 @@ export function AuthScreen({
                               ) : null}
 
                               {/* In-card back — thumb-reachable, so users don't
-                                have to stretch to the top-left corner arrow. */}
+                                have to stretch to the top-left corner arrow.
+                                Hidden when there is no welcome stage behind it. */}
                               <Text
-                                className="mt-1 text-center font-mono text-sm text-muted-foreground"
-                                onPress={() => setStage("welcome")}
+                                className={
+                                  showWelcome
+                                    ? "mt-1 text-center font-mono text-sm text-muted-foreground"
+                                    : "hidden"
+                                }
+                                onPress={withClickTracking("auth.auth.stage_3", () => setStage("welcome"))}
                                 accessibilityRole="button"
                                 accessibilityLabel="Back"
                               >
@@ -848,7 +976,7 @@ export function AuthScreen({
                   By continuing, you agree to our{" "}
                   <Text
                     className="text-xs text-foreground underline"
-                    onPress={() => setLegal("terms")}
+                    onPress={withClickTracking("auth.auth.legal", () => setLegal("terms"))}
                     accessibilityRole="link"
                     accessibilityLabel="Terms of Service"
                   >
@@ -857,7 +985,7 @@ export function AuthScreen({
                   and{" "}
                   <Text
                     className="text-xs text-foreground underline"
-                    onPress={() => setLegal("privacy")}
+                    onPress={withClickTracking("auth.auth.legal_2", () => setLegal("privacy"))}
                     accessibilityRole="link"
                     accessibilityLabel="Privacy Policy"
                   >
@@ -909,7 +1037,7 @@ export function AuthScreen({
         <DialogFooter style={{ justifyContent: "center" }}>
           <DialogButton
             variant="primary"
-            onPress={isLoading ? () => {} : handleUnlockAfterPasskey}
+            onPress={withClickTracking("auth.auth.action", isLoading ? () => {} : handleUnlockAfterPasskey)}
             accessibilityLabel="Unlock"
             accessibilityRole="button"
           >

package/src/screens/auth/ConsentScreen.tsx

@@ -92,7 +92,8 @@ export function ConsentScreen({
           <CardFooter className="flex-col gap-3 border-t-0">
             <Button
               className="w-full"
-              onPress={onAllow}
+              telemetryId="auth.consent.allow"
+        onPress={onAllow}
               isLoading={isLoading}
               accessibilityLabel={`Allow ${clientName}`}
               accessibilityRole="button"
@@ -102,7 +103,8 @@ export function ConsentScreen({
             <Button
               className="w-full"
               variant="outline"
-              onPress={onDeny}
+              telemetryId="auth.consent.deny"
+        onPress={onDeny}
               accessibilityLabel="Deny access"
               accessibilityRole="button"
             >

package/src/screens/auth/ErrorScreen.tsx

@@ -67,7 +67,8 @@ export function ErrorScreen({
               {onRetry ? (
                 <Button
                   className="w-full"
-                  onPress={onRetry}
+                  telemetryId="auth.error.retry"
+        onPress={onRetry}
                   accessibilityLabel="Try again"
                   accessibilityRole="button"
                 >
@@ -78,7 +79,8 @@ export function ErrorScreen({
                 <Button
                   className="w-full"
                   variant="outline"
-                  onPress={onHome}
+                  telemetryId="auth.error.home"
+        onPress={onHome}
                   accessibilityLabel={homeLabel}
                   accessibilityRole="button"
                 >

package/src/screens/auth/ExpiredLinkScreen.tsx

@@ -58,7 +58,8 @@ export function ExpiredLinkScreen({
               {onRequestNew ? (
                 <Button
                   className="w-full"
-                  onPress={onRequestNew}
+                  telemetryId="auth.expired_link.request_new"
+        onPress={onRequestNew}
                   accessibilityLabel={requestLabel}
                   accessibilityRole="button"
                 >
@@ -69,7 +70,8 @@ export function ExpiredLinkScreen({
                 <Button
                   className="w-full"
                   variant="outline"
-                  onPress={onHome}
+                  telemetryId="auth.expired_link.home"
+        onPress={onHome}
                   accessibilityLabel={homeLabel}
                   accessibilityRole="button"
                 >

package/src/screens/auth/ForgotPasswordScreen.tsx

@@ -17,6 +17,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/card";
+import { withClickTracking } from "../../services/telemetry";
 import { EmailInput } from "../../components/input";
 import AuthService from "../../services/auth.service";
 import { validateEmail } from "../../utils/validation";
@@ -79,7 +80,8 @@ export function ForgotPasswordScreen() {
         <View className="mt-4 self-start absolute top-4 left-6">
           <IconButton
             variant="ghost"
-            onPress={() => router.back()}
+            telemetryId="auth.forgot_password.back"
+        onPress={() => router.back()}
             accessibilityLabel="Go back"
             accessibilityRole="button"
           >
@@ -120,7 +122,8 @@ export function ForgotPasswordScreen() {
               <CardFooter className="flex-col gap-3 border-t-0">
                 <Button
                   className="w-full"
-                  onPress={handleSubmit}
+                  telemetryId="auth.forgot_password.submit"
+        onPress={handleSubmit}
                   isLoading={isLoading}
                   accessibilityLabel="Reset your password"
                   accessibilityRole="button"
@@ -132,7 +135,7 @@ export function ForgotPasswordScreen() {
                   Remember your password?{" "}
                   <Text
                     className="text-sm text-foreground underline"
-                    onPress={() => router.push(routes.login)}
+                    onPress={withClickTracking("auth.forgot_password.push", () => router.push(routes.login))}
                     accessibilityRole="link"
                     accessibilityLabel="Sign in"
                   >
@@ -145,7 +148,8 @@ export function ForgotPasswordScreen() {
             <CardFooter className="flex-col gap-3 border-t-0">
               <Button
                 className="w-full"
-                onPress={() =>
+                telemetryId="auth.forgot_password.push_2"
+        onPress={() =>
                   router.push({
                     pathname: routes.resetPassword,
                     params: { email },
@@ -161,10 +165,10 @@ export function ForgotPasswordScreen() {
                 Didn't receive the code?{" "}
                 <Text
                   className="text-sm text-foreground underline"
-                  onPress={() => {
+                  onPress={withClickTracking("auth.forgot_password.sent", () => {
                     setSent(false);
                     setError("");
-                  }}
+                  })}
                   accessibilityRole="button"
                   accessibilityLabel="Resend reset email"
                 >

package/src/screens/auth/ImportDataScreen.tsx

@@ -95,7 +95,8 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
           <CardFooter className="border-t-0">
             <Button
               className="w-full"
-              onPress={completeAndNavigate}
+              telemetryId="auth.import_data.complete_and_navigate"
+        onPress={completeAndNavigate}
               accessibilityLabel={`Continue to ${appName}`}
               accessibilityRole="button"
               testID="import-continue"

package/src/screens/auth/LoginScreen.tsx

@@ -17,6 +17,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/card";
+import { withClickTracking } from "../../services/telemetry";
 import { EmailInput, PasswordInput } from "../../components/input";
 import { Dialog, DialogButton, DialogFooter } from "../../components/dialog";
 import { SeparatorWithText } from "../../components/separator";
@@ -280,7 +281,8 @@ export function LoginScreen({
             <View className="mt-4">
               <IconButton
                 variant="ghost"
-                onPress={() => router.push(routes.welcome)}
+                telemetryId="auth.login.push"
+        onPress={() => router.push(routes.welcome)}
                 className="self-start"
                 accessibilityLabel="Go back"
                 accessibilityRole="button"
@@ -315,7 +317,8 @@ export function LoginScreen({
                       <Button
                         variant="outline"
                         className="w-full"
-                        onPress={handlePasskeyLogin}
+                        telemetryId="auth.login.passkey_login"
+        onPress={handlePasskeyLogin}
                         isLoading={passkeyStep === "passkey-loading"}
                         accessibilityLabel="Sign in with passkey"
                         accessibilityRole="button"
@@ -375,7 +378,7 @@ export function LoginScreen({
                   <View className="items-end">
                     <Text
                       className="font-mono text-sm underline"
-                      onPress={() => router.push(routes.forgotPassword)}
+                      onPress={withClickTracking("auth.login.push_2", () => router.push(routes.forgotPassword))}
                       accessibilityRole="link"
                       accessibilityLabel="Forgot password"
                     >
@@ -389,7 +392,7 @@ export function LoginScreen({
                     Don&apos;t have an account?{" "}
                     <Text
                       className="text-sm text-foreground underline"
-                      onPress={() => router.push(routes.register)}
+                      onPress={withClickTracking("auth.login.push_3", () => router.push(routes.register))}
                       accessibilityRole="link"
                       accessibilityLabel="Sign up"
                     >
@@ -401,7 +404,8 @@ export function LoginScreen({
 
                   <Button
                     className="w-full"
-                    onPress={handleLogin}
+                    telemetryId="auth.login.login"
+        onPress={handleLogin}
                     isLoading={isLoading}
                     accessibilityLabel="Sign in"
                     accessibilityRole="button"
@@ -469,7 +473,7 @@ export function LoginScreen({
         <DialogFooter style={{ justifyContent: "center" }}>
           <DialogButton
             variant="primary"
-            onPress={isLoading ? () => {} : handleUnlockAfterPasskey}
+            onPress={withClickTracking("auth.login.action", isLoading ? () => {} : handleUnlockAfterPasskey)}
             accessibilityLabel="Unlock"
             accessibilityRole="button"
           >

package/src/screens/auth/MfaChallengeScreen.tsx

@@ -1,3 +1,4 @@
+import { withClickTracking } from "../../services/telemetry";
 import React, { useState } from "react";
 import { ActivityIndicator, Platform, Pressable, Text, TextInput, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -169,7 +170,7 @@ export function MfaChallengeScreen() {
           )}
 
           <Pressable
-            onPress={handleVerify}
+            onPress={withClickTracking("auth.mfa_challenge.verify", handleVerify)}
             disabled={isLoading}
             className="rounded-lg items-center mt-5"
             style={({ pressed }) => ({
@@ -194,7 +195,7 @@ export function MfaChallengeScreen() {
           </Pressable>
 
           <Pressable
-            onPress={toggleRecoveryMode}
+            onPress={withClickTracking("auth.mfa_challenge.toggle_recovery_mode", toggleRecoveryMode)}
             className="mt-5 items-center"
             hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
             accessibilityRole="button"

package/src/screens/auth/MfaEnrollScreen.tsx

@@ -19,6 +19,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/card";
+import { withClickTracking } from "../../services/telemetry";
 import { Input } from "../../components/input";
 import { Separator } from "../../components/separator";
 import AuthService from "../../services/auth.service";
@@ -191,7 +192,8 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
               <CardFooter className="flex-col gap-3 border-t-0">
                 <Button
                   className="w-full"
-                  onPress={handleStartSetup}
+                  telemetryId="auth.mfa_enroll.start_setup"
+        onPress={handleStartSetup}
                   isLoading={isLoading}
                   accessibilityLabel="Enable MFA"
                   accessibilityRole="button"
@@ -201,7 +203,8 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 <Button
                   variant="ghost"
                   className="w-full"
-                  onPress={handleSkip}
+                  telemetryId="auth.mfa_enroll.skip"
+        onPress={handleSkip}
                   accessibilityLabel="Skip for now"
                   accessibilityRole="button"
                 >
@@ -243,7 +246,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                     Can&apos;t scan? Enter the secret key manually
                   </MutedText>
                   <Pressable
-                    onPress={() => copyToClipboard(setupData.secret, "Secret")}
+                    onPress={withClickTracking("auth.mfa_enroll.copy_to_clipboard", () => copyToClipboard(setupData.secret, "Secret"))}
                     className="rounded-lg bg-secondary p-3 active:opacity-70 dark:bg-neutral-800"
                     accessibilityRole="button"
                     accessibilityLabel="Copy secret key"
@@ -257,7 +260,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 </View>
 
                 <Pressable
-                  onPress={() => copyToClipboard(setupData.uri, "URI")}
+                  onPress={withClickTracking("auth.mfa_enroll.copy_to_clipboard_2", () => copyToClipboard(setupData.uri, "URI"))}
                   className="rounded-lg bg-secondary px-3 py-2 active:opacity-70 dark:bg-neutral-800"
                   accessibilityRole="button"
                   accessibilityLabel="Copy full OTP URI"
@@ -293,7 +296,8 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
               <CardFooter className="flex-col gap-3 border-t-0">
                 <Button
                   className="w-full"
-                  onPress={handleVerifyCode}
+                  telemetryId="auth.mfa_enroll.verify_code"
+        onPress={handleVerifyCode}
                   isLoading={isLoading}
                   disabled={code.length !== 6}
                   accessibilityLabel="Verify and enable MFA"
@@ -304,7 +308,8 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 <Button
                   variant="ghost"
                   className="w-full"
-                  onPress={handleSkip}
+                  telemetryId="auth.mfa_enroll.skip_2"
+        onPress={handleSkip}
                   accessibilityLabel="Skip for now"
                   accessibilityRole="button"
                 >
@@ -343,7 +348,8 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 <Button
                   variant="outline"
                   className="w-full"
-                  onPress={() =>
+                  telemetryId="auth.mfa_enroll.copy_to_clipboard_3"
+        onPress={() =>
                     copyToClipboard(setupData.recovery_codes.join("\n"), "Recovery codes")
                   }
                   accessibilityLabel="Copy all recovery codes"
@@ -370,7 +376,8 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
               <CardFooter className="border-t-0">
                 <Button
                   className="w-full"
-                  onPress={handleFinish}
+                  telemetryId="auth.mfa_enroll.finish"
+        onPress={handleFinish}
                   accessibilityLabel={`Continue to ${appName}`}
                   accessibilityRole="button"
                 >