feat(core,experience): show masked email/phone for MFA verification c… (#7699)

feat(core,experience): show masked email/phone for MFA verification code send

Author: wangsijie

packages/core/src/routes/experience/classes/experience-interaction.ts

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import { appInsights } from '@logto/app-insights/node';
-import { InteractionEvent, VerificationType, type User } from '@logto/schemas';
+import { InteractionEvent, MfaFactor, VerificationType, type User } from '@logto/schemas';
+import { maskEmail, maskPhone } from '@logto/shared';
 import { conditional, trySafe } from '@silverhand/essentials';
 
 import RequestError from '#src/errors/RequestError/index.js';
@@ -339,11 +340,29 @@ export default class ExperienceInteraction {
     const mfaValidator = new MfaValidator(mfaSettings, user);
     const isVerified = mfaValidator.isMfaVerified(this.verificationRecordsArray);
 
+    const { primaryEmail, primaryPhone } = user;
+    // Build masked identifiers for UX hints when applicable
+    const maskedIdentifiers: Record<string, string> = {
+      ...(mfaValidator.availableUserMfaVerificationTypes.includes(
+        MfaFactor.EmailVerificationCode
+      ) && primaryEmail
+        ? { [MfaFactor.EmailVerificationCode]: maskEmail(primaryEmail) }
+        : {}),
+      ...(mfaValidator.availableUserMfaVerificationTypes.includes(
+        MfaFactor.PhoneVerificationCode
+      ) && primaryPhone
+        ? { [MfaFactor.PhoneVerificationCode]: maskPhone(primaryPhone) }
+        : {}),
+    };
+
     assertThat(
       isVerified,
       new RequestError(
         { code: 'session.mfa.require_mfa_verification', status: 403 },
-        { availableFactors: mfaValidator.availableUserMfaVerificationTypes }
+        {
+          availableFactors: mfaValidator.availableUserMfaVerificationTypes,
+          maskedIdentifiers,
+        }
       )
     );
   }

packages/core/src/routes/interaction/verifications/mfa-verification.ts

@@ -110,6 +110,7 @@ export const verifyMfa = async (
     const mfaData = userMfaDataGuard.safeParse(logtoConfig[userMfaDataKey]);
     const skipMfaOnSignIn = mfaData.success ? mfaData.data.skipMfaOnSignIn : undefined;
     const canSkipMfa = skipMfaOnSignIn && policy !== MfaPolicy.Mandatory;
+
     assertThat(
       Boolean(canSkipMfa) || Boolean(verifiedMfa),
       new RequestError(

packages/experience/src/hooks/use-mfa-error-handler.ts

@@ -106,6 +106,7 @@ const useMfaErrorHandler = ({ replace }: Options = {}) => {
         const [_, data] = validate(error.data, mfaErrorDataGuard);
         const factors = data?.availableFactors ?? [];
         const skippable = data?.skippable;
+        const maskedIdentifiers = data?.maskedIdentifiers;
 
         if (factors.length === 0) {
           setToast(error.message);
@@ -118,7 +119,7 @@ const useMfaErrorHandler = ({ replace }: Options = {}) => {
             ? factors.filter((factor) => factor !== MfaFactor.WebAuthn)
             : factors;
 
-        await handleMfaRedirect(flow, { availableFactors, skippable });
+        await handleMfaRedirect(flow, { availableFactors, skippable, maskedIdentifiers });
       };
     },
     [handleMfaRedirect, setToast]

packages/experience/src/pages/MfaVerification/EmailVerificationCode/index.tsx

@@ -1,4 +1,4 @@
-import { SignInIdentifier } from '@logto/schemas';
+import { MfaFactor, SignInIdentifier } from '@logto/schemas';
 import { useEffect, useState } from 'react';
 
 import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
@@ -33,11 +33,14 @@ const EmailVerificationCode = () => {
     return <ErrorPage title="error.invalid_session" />;
   }
 
+  const maskedEmail = flowState.maskedIdentifiers?.[MfaFactor.EmailVerificationCode];
+
   return (
     <SecondaryPageLayout title="mfa.verify_mfa_factors">
       <SectionLayout
         title="mfa.enter_email_verification_code"
         description="mfa.enter_email_verification_code_description"
+        descriptionProps={{ identifier: maskedEmail }}
       >
         {verificationId ? (
           <MfaCodeVerification

packages/experience/src/pages/MfaVerification/PhoneVerificationCode/index.tsx

@@ -1,4 +1,4 @@
-import { SignInIdentifier } from '@logto/schemas';
+import { MfaFactor, SignInIdentifier } from '@logto/schemas';
 import { useEffect, useState } from 'react';
 
 import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
@@ -33,11 +33,14 @@ const PhoneVerificationCode = () => {
     return <ErrorPage title="error.invalid_session" />;
   }
 
+  const maskedPhone = flowState.maskedIdentifiers?.[MfaFactor.PhoneVerificationCode];
+
   return (
     <SecondaryPageLayout title="mfa.verify_mfa_factors">
       <SectionLayout
         title="mfa.enter_phone_verification_code"
         description="mfa.enter_phone_verification_code_description"
+        descriptionProps={{ identifier: maskedPhone }}
       >
         {verificationId ? (
           <MfaCodeVerification

packages/experience/src/types/guard.ts

@@ -69,9 +69,15 @@ const mfaFactorsGuard = s.array(
   ])
 );
 
+const mfaFactorEnumValues = [
+  MfaFactor.EmailVerificationCode,
+  MfaFactor.PhoneVerificationCode,
+] as const;
+
 export const mfaErrorDataGuard = s.object({
   availableFactors: mfaFactorsGuard,
   skippable: s.optional(s.boolean()),
+  maskedIdentifiers: s.optional(s.record(s.enums(mfaFactorEnumValues), s.string())),
 });
 
 export const mfaFlowStateGuard = mfaErrorDataGuard;

packages/experience/src/utils/format.ts

@@ -1,9 +1 @@
-export const maskEmail = (email: string) => {
-  const [name = '', domain = ''] = email.split('@');
-
-  const preview = name.length > 4 ? `${name.slice(0, 4)}` : '';
-
-  return `${preview}****@${domain}`;
-};
-
-export const maskPhone = (phone: string) => `****${phone.slice(-4)}`;
+export { maskEmail, maskPhone } from '@logto/shared/universal';

packages/phrases-experience/src/locales/ar/mfa.ts

@@ -38,10 +38,10 @@ const mfa = {
     'تم تمكين التحقق من خطوتين لهذا الحساب. يرجى إدخال الرمز لمرة واحدة المعروض على تطبيق المصادقة المرتبط بك.',
   enter_email_verification_code: 'أدخل رمز التحقق عبر البريد الإلكتروني',
   enter_email_verification_code_description:
-    'تم تمكين المصادقة بخطوتين لهذا الحساب. يرجى إدخال رمز التحقق المرسل إلى عنوان بريدك الإلكتروني.',
+    'تم تمكين المصادقة بخطوتين لهذا الحساب. يرجى إدخال رمز التحقق المرسل إلى {{identifier}}.',
   enter_phone_verification_code: 'أدخل رمز التحقق عبر الرسائل القصيرة',
   enter_phone_verification_code_description:
-    'تم تمكين المصادقة بخطوتين لهذا الحساب. يرجى إدخال رمز التحقق عبر الرسائل القصيرة المرسل إلى رقم هاتفك.',
+    'تم تمكين المصادقة بخطوتين لهذا الحساب. يرجى إدخال رمز التحقق عبر الرسائل القصيرة المرسل إلى {{identifier}}.',
   link_another_mfa_factor: 'التبديل إلى طريقة أخرى',
   save_backup_code: 'احفظ رمز النسخ الاحتياطي الخاص بك',
   save_backup_code_description:

packages/phrases-experience/src/locales/de/mfa.ts

@@ -39,10 +39,10 @@ const mfa = {
     'Für dieses Konto wurde die Zwei-Faktor-Authentifizierung aktiviert. Bitte geben Sie den einmaligen Code ein, der in Ihrer verknüpften Authentifizierungs-App angezeigt wird.',
   enter_email_verification_code: 'E-Mail‑Bestätigungscode eingeben',
   enter_email_verification_code_description:
-    'Für dieses Konto ist die Zwei‑Faktor‑Authentifizierung aktiviert. Bitte geben Sie den an Ihre E‑Mail‑Adresse gesendeten Bestätigungscode ein.',
+    'Für dieses Konto ist die Zwei‑Faktor‑Authentifizierung aktiviert. Bitte geben Sie den an {{identifier}} gesendeten Bestätigungscode ein.',
   enter_phone_verification_code: 'SMS‑Bestätigungscode eingeben',
   enter_phone_verification_code_description:
-    'Für dieses Konto ist die Zwei‑Faktor‑Authentifizierung aktiviert. Bitte geben Sie den per SMS an Ihre Telefonnummer gesendeten Bestätigungscode ein.',
+    'Für dieses Konto ist die Zwei‑Faktor‑Authentifizierung aktiviert. Bitte geben Sie den per SMS an {{identifier}} gesendeten Bestätigungscode ein.',
   link_another_mfa_factor: 'Zu einer anderen Methode wechseln',
   save_backup_code: 'Backup-Code speichern',
   save_backup_code_description:

packages/phrases-experience/src/locales/en/mfa.ts

@@ -39,10 +39,10 @@ const mfa = {
     '2-step verification has been enabled for this account. Please enter the one-time code shown on your linked authenticator app.',
   enter_email_verification_code: 'Enter Email verification code',
   enter_email_verification_code_description:
-    '2-step authentication has been enabled for this account. Please enter the email verification code sent to your email address.',
+    '2-step authentication has been enabled for this account. Please enter the email verification code sent to {{identifier}}.',
   enter_phone_verification_code: 'Enter SMS verification code',
   enter_phone_verification_code_description:
-    '2-step authentication has been enabled for this account. Please enter the SMS verification code sent to your phone number.',
+    '2-step authentication has been enabled for this account. Please enter the SMS verification code sent to {{identifier}}.',
   link_another_mfa_factor: 'Switch to another method',
   save_backup_code: 'Save your backup code',
   save_backup_code_description: