fix(ui): Format safe identifier phone number during sign in verification step (#3751)

Author: alexcarpenter

packages/ui/src/components/sign-in/sign-in.tsx

@@ -24,6 +24,7 @@ import * as Icon from '~/primitives/icon';
 import { LinkButton } from '~/primitives/link-button';
 import { SecondaryButton } from '~/primitives/secondary-button';
 import { Seperator } from '~/primitives/seperator';
+import { formatSafeIdentifier } from '~/utils/format-safe-identifier';
 
 export function SignInComponent() {
   return (
@@ -204,7 +205,11 @@ export function SignInComponentLoaded() {
                       <Card.Description>{t('signIn.password.subtitle')}</Card.Description>
                       <Card.Description>
                         <span className='flex items-center justify-center gap-2'>
-                          <SignIn.SafeIdentifier />
+                          <SignIn.SafeIdentifier
+                            transform={val => {
+                              return formatSafeIdentifier(val) || val;
+                            }}
+                          />
                           <SignIn.Action
                             navigate='start'
                             asChild

packages/ui/src/utils/format-safe-identifier.ts

@@ -0,0 +1,15 @@
+import { stringToFormattedPhoneString } from '~/common/phone-number-field/utils';
+
+export const isMaskedIdentifier = (str: string | undefined | null) => str && str.includes('**');
+
+/**
+ * Formats a string that can contain an email, a username or a phone number.
+ * Depending on the scenario, the string might be obfuscated (parts of the identifier replaced with "*")
+ * Refer to the tests for examples.
+ */
+export const formatSafeIdentifier = (str: string | undefined | null) => {
+  if (!str || str.includes('@') || isMaskedIdentifier(str) || str.match(/[a-zA-Z]/)) {
+    return str;
+  }
+  return stringToFormattedPhoneString(str);
+};