feat(elements,ui): Determine SafeIdentifier based on strategy

.changeset/wet-cherries-develop.md

@@ -0,0 +1,5 @@
+---
+"@clerk/elements": patch
+---
+
+Add support for `transform` prop on `SignIn.SafeIdentifier` and determine identifier based on strategy

packages/elements/src/internals/machines/sign-in/index.ts

@@ -3,7 +3,7 @@ export { SignInRouterMachine, SignInRouterMachineId } from './router.machine';
 export { SignInStartMachine, SignInStartMachineId } from './start.machine';
 export { SignInResetPasswordMachine, SignInResetPasswordMachineId } from './reset-password.machine';
 
-export { SignInSafeIdentifierSelector, SignInSalutationSelector } from './router.selectors';
+export { SignInSafeIdentifierSelectorForStrategy, SignInSalutationSelector } from './router.selectors';
 
 export type { TSignInRouterMachine } from './router.machine';
 export type { TSignInStartMachine } from './start.machine';

packages/elements/src/internals/machines/sign-in/router.selectors.ts

@@ -1,9 +1,26 @@
+import type { SignInStrategyName } from '~/internals/machines/shared';
 import { formatSalutation } from '~/internals/machines/utils/formatters';
 
 import type { SignInRouterSnapshot } from './router.types';
 
-export function SignInSafeIdentifierSelector(s: SignInRouterSnapshot): string {
-  return s.context.clerk?.client.signIn.identifier || '';
+export function SignInSafeIdentifierSelectorForStrategy(
+  strategy: SignInStrategyName | undefined,
+): (s: SignInRouterSnapshot) => string {
+  return (s: SignInRouterSnapshot) => {
+    const signIn = s.context.clerk?.client.signIn;
+    const identifier = signIn.identifier || '';
+
+    if (strategy) {
+      const matchingFactor = [...(signIn.supportedFirstFactors ?? []), ...(signIn.supportedSecondFactors ?? [])].find(
+        f => f.strategy === strategy,
+      );
+      if (matchingFactor && 'safeIdentifier' in matchingFactor) {
+        return matchingFactor.safeIdentifier;
+      }
+    }
+
+    return identifier;
+  };
 }
 
 export function SignInSalutationSelector(s: SignInRouterSnapshot): string {

packages/elements/src/react/sign-in/choose-strategy.tsx

@@ -10,7 +10,7 @@ import { SignInRouterSystemId } from '~/internals/machines/sign-in';
 import { useActiveTags } from '../hooks';
 import { ActiveTagsMode } from '../hooks/use-active-tags.hook';
 import { createContextForDomValidation } from '../utils/create-context-for-dom-validation';
-import { SignInRouterCtx } from './context';
+import { SignInRouterCtx, SignInStrategyContext } from './context';
 
 // --------------------------------- HELPERS ---------------------------------
 
@@ -134,14 +134,16 @@ export const SignInSupportedStrategy = React.forwardRef<SignInSupportedStrategyE
     const defaultProps = asChild ? {} : { type: 'button' as const };
 
     return factor ? (
-      <Comp
-        {...defaultProps}
-        {...rest}
-        ref={forwardedRef}
-        onClick={sendUpdateStrategyEvent}
-      >
-        {children || factor.strategy}
-      </Comp>
+      <SignInStrategyContext.Provider value={{ strategy: name }}>
+        <Comp
+          {...defaultProps}
+          {...rest}
+          ref={forwardedRef}
+          onClick={sendUpdateStrategyEvent}
+        >
+          {children || factor.strategy}
+        </Comp>
+      </SignInStrategyContext.Provider>
     ) : null;
   },
 );

packages/elements/src/react/sign-in/context/index.ts

@@ -5,6 +5,7 @@ export {
   useSignInSecondFactorStep,
   useSignInResetPasswordStep,
 } from './router.context';
+export { SignInStrategyContext, useSignInStrategy } from './sign-in-strategy.context';
 export { StrategiesContext, useStrategy } from './strategies.context';
 
 export type { StrategiesContextValue } from './strategies.context';

packages/elements/src/react/sign-in/context/sign-in-strategy.context.ts

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+import { ClerkElementsRuntimeError } from '~/internals/errors';
+import type { SignInStrategyName } from '~/internals/machines/shared';
+
+export type SignInStrategyContextValue = {
+  strategy: SignInStrategyName | undefined;
+};
+
+export const SignInStrategyContext = createContext<SignInStrategyContextValue>({
+  strategy: undefined,
+});
+
+export function useSignInStrategy() {
+  const ctx = useContext(SignInStrategyContext);
+
+  if (!ctx) {
+    throw new ClerkElementsRuntimeError(
+      'useSignInStrategy must be used within a <SignIn.Strategy> or <SignIn.SupportedStrategy> component.',
+    );
+  }
+
+  const { strategy } = ctx;
+
+  return strategy;
+}

packages/elements/src/react/sign-in/identifiers.tsx

@@ -1,6 +1,8 @@
-import { SignInSafeIdentifierSelector, SignInSalutationSelector } from '~/internals/machines/sign-in';
+import { useMemo } from 'react';
 
-import { SignInRouterCtx } from './context';
+import { SignInSafeIdentifierSelectorForStrategy, SignInSalutationSelector } from '~/internals/machines/sign-in';
+
+import { SignInRouterCtx, useSignInStrategy } from './context';
 
 /**
  * Render an identifier that has been provided by the user during a sign-in attempt. Renders a `string` (or empty string if it can't find an identifier).
@@ -11,8 +13,16 @@ import { SignInRouterCtx } from './context';
  *  <p>We've sent a code to <SignIn.SafeIdentifier />.</p>
  * </SignIn.Strategy>
  */
-export function SignInSafeIdentifier(): string {
-  return SignInRouterCtx.useSelector(SignInSafeIdentifierSelector);
+export function SignInSafeIdentifier({ transform }: { transform?: (s: string) => string }): string {
+  const strategy = useSignInStrategy();
+  const selector = useMemo(() => SignInSafeIdentifierSelectorForStrategy(strategy), [strategy]);
+  const safeIdentifier = SignInRouterCtx.useSelector(selector);
+
+  if (transform) {
+    return transform(safeIdentifier);
+  }
+
+  return safeIdentifier;
 }
 
 /**

packages/elements/src/react/sign-in/verifications.tsx

@@ -11,6 +11,7 @@ import { Form } from '~/react/common/form';
 import { useActiveTags } from '~/react/hooks';
 import {
   SignInRouterCtx,
+  SignInStrategyContext,
   StrategiesContext,
   useSignInFirstFactorStep,
   useSignInSecondFactorStep,
@@ -86,7 +87,9 @@ export function SignInStrategy({ children, name }: SignInStrategyProps) {
     };
   }, [factorCtx, name]);
 
-  return active ? <>{children}</> : null;
+  return active ? (
+    <SignInStrategyContext.Provider value={{ strategy: name }}>{children}</SignInStrategyContext.Provider>
+  ) : null;
 }
 
 /**

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

@@ -27,6 +27,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';
 
 /**
  * Implementation Details:
@@ -293,7 +294,7 @@ 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={formatSafeIdentifier} />
                           <SignIn.Action
                             navigate='start'
                             asChild
@@ -678,9 +679,13 @@ export function SignInComponentLoaded() {
                         asChild
                       >
                         <SecondaryButton icon={<Icon.LinkSm />}>
-                          {t('signIn.alternativeMethods.blockButton__emailLink', {
-                            identifier: SignIn.SafeIdentifier,
-                          })}
+                          <SignIn.SafeIdentifier
+                            transform={(identifier: string) =>
+                              t('signIn.alternativeMethods.blockButton__emailLink', {
+                                identifier,
+                              })
+                            }
+                          />
                         </SecondaryButton>
                       </SignIn.SupportedStrategy>
 
@@ -689,9 +694,13 @@ export function SignInComponentLoaded() {
                         asChild
                       >
                         <SecondaryButton icon={<Icon.Envelope />}>
-                          {t('signIn.alternativeMethods.blockButton__emailCode', {
-                            identifier: SignIn.SafeIdentifier,
-                          })}
+                          <SignIn.SafeIdentifier
+                            transform={(identifier: string) =>
+                              t('signIn.alternativeMethods.blockButton__emailCode', {
+                                identifier,
+                              })
+                            }
+                          />
                         </SecondaryButton>
                       </SignIn.SupportedStrategy>
                     </div>
@@ -759,9 +768,13 @@ export function SignInComponentLoaded() {
                           asChild
                         >
                           <SecondaryButton icon={<Icon.LinkSm />}>
-                            {t('signIn.alternativeMethods.blockButton__emailLink', {
-                              identifier: SignIn.SafeIdentifier,
-                            })}
+                            <SignIn.SafeIdentifier
+                              transform={(identifier: string) =>
+                                t('signIn.alternativeMethods.blockButton__emailLink', {
+                                  identifier,
+                                })
+                              }
+                            />
                           </SecondaryButton>
                         </SignIn.SupportedStrategy>
 
@@ -770,9 +783,13 @@ export function SignInComponentLoaded() {
                           asChild
                         >
                           <SecondaryButton icon={<Icon.Envelope />}>
-                            {t('signIn.alternativeMethods.blockButton__emailCode', {
-                              identifier: SignIn.SafeIdentifier,
-                            })}
+                            <SignIn.SafeIdentifier
+                              transform={(identifier: string) =>
+                                t('signIn.alternativeMethods.blockButton__emailCode', {
+                                  identifier,
+                                })
+                              }
+                            />
                           </SecondaryButton>
                         </SignIn.SupportedStrategy>
                       </div>

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

@@ -0,0 +1,18 @@
+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 function formatSafeIdentifier(str: null): null;
+export function formatSafeIdentifier(str: undefined): undefined;
+export function formatSafeIdentifier(str: string): string;
+export function formatSafeIdentifier(str: string | undefined | null) {
+  if (!str || str.includes('@') || isMaskedIdentifier(str) || str.match(/[a-zA-Z]/)) {
+    return str;
+  }
+  return stringToFormattedPhoneString(str);
+}