fix(account-center,schemas): validate email/phone format before sending verification code (#8082)

fix(account-center): validate email format before sending verification code

Add client-side and server-side validation for email/phone format in the
account-center email linking flow. Previously, entering an invalid email
like "foo" would result in "internal server error" instead of a proper
validation message.

Changes:
- Add client-side email validation using emailRegEx before sending
- Add ErrorMessage component to display validation errors
- Update verificationCodeIdentifierGuard to validate email/phone format
- Add account-center README with import guidelines

Author: wangsijie

packages/account-center/README.md

@@ -0,0 +1,54 @@
+# Account Center
+
+The Logto account center app that allows users to manage their account settings, profile, and security options.
+
+## Development
+
+```bash
+pnpm dev
+```
+
+## Import Guidelines
+
+This package uses path aliases for cleaner imports:
+
+- `@ac/*` - Account center source files (`./src/*`)
+- `@experience/*` - Experience package shared files
+
+### Important: Experience Package Imports
+
+When importing from the experience package, **only import from the `shared` folder**:
+
+```typescript
+// ✅ Correct - importing from shared folder
+import Button from '@experience/shared/components/Button';
+import SmartInputField from '@experience/shared/components/InputFields/SmartInputField';
+
+// ❌ Incorrect - importing from non-shared folders
+import { validateIdentifierField } from '@experience/utils/form';
+import useSendVerificationCode from '@experience/hooks/use-send-verification-code';
+```
+
+### Why This Restriction?
+
+1. **Shared folder** (`@experience/shared/*`) contains components and utilities designed to be reused across packages
+2. **Non-shared folders** may have dependencies, hooks, or context providers that are specific to the experience package's internal architecture
+3. Importing non-shared code can cause:
+   - Missing context providers
+   - Circular dependencies
+   - Build/runtime errors
+
+### What To Do Instead
+
+If you need functionality from `@experience/utils/*` or other non-shared locations:
+
+1. **Use shared packages** - Check if `@logto/core-kit`, `@logto/schemas`, or `@logto/shared` has what you need
+2. **Re-implement locally** - Simple utilities can be implemented in account-center
+3. **Move to shared** - If the utility is truly reusable, consider moving it to `@experience/shared/`
+
+### Available Shared Packages
+
+- `@logto/core-kit` - Core utilities like `emailRegEx` for validation
+- `@logto/schemas` - TypeScript types and schemas
+- `@logto/phrases-experience` - i18n translations
+- `@logto/shared/universal` - Universal utilities (browser + Node.js compatible)

packages/account-center/src/pages/CodeFlow/IdentifierSendStep.tsx

@@ -1,6 +1,8 @@
 import Button from '@experience/shared/components/Button';
+import ErrorMessage from '@experience/shared/components/ErrorMessage';
 import SmartInputField from '@experience/shared/components/InputFields/SmartInputField';
-import { type SignInIdentifier } from '@logto/schemas';
+import { emailRegEx } from '@logto/core-kit';
+import { SignInIdentifier, type SignInIdentifier as SignInIdentifierType } from '@logto/schemas';
 import { type TFuncKey } from 'i18next';
 import { useContext, useEffect, useState, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +20,7 @@ export type IdentifierLabelKey =
   | 'account_center.phone_verification.phone_label';
 
 type Props = {
-  readonly identifierType: SignInIdentifier.Email | SignInIdentifier.Phone;
+  readonly identifierType: SignInIdentifierType.Email | SignInIdentifierType.Phone;
   readonly name: string;
   readonly labelKey: IdentifierLabelKey;
   readonly titleKey: TFuncKey;
@@ -48,6 +50,7 @@ const IdentifierSendStep = ({
   const { loading } = useContext(LoadingContext);
   const { setToast } = useContext(PageContext);
   const [pendingValue, setPendingValue] = useState(value);
+  const [errorMessage, setErrorMessage] = useState<string>();
   const sendCodeRequest = useApi(sendCode);
   const handleError = useErrorHandler();
 
@@ -63,6 +66,15 @@ const IdentifierSendStep = ({
       return;
     }
 
+    // Validate email format before sending
+    if (identifierType === SignInIdentifier.Email && !emailRegEx.test(target)) {
+      setErrorMessage(t('error.invalid_email'));
+      return;
+    }
+
+    // Clear any previous validation error
+    setErrorMessage(undefined);
+
     const [error, result] = await sendCodeRequest(target);
 
     if (error) {
@@ -87,12 +99,16 @@ const IdentifierSendStep = ({
           label={t(labelKey)}
           defaultValue={pendingValue}
           enabledTypes={[identifierType]}
+          isDanger={Boolean(errorMessage)}
           onChange={(inputValue) => {
-            if (inputValue.type === identifierType) {
+            if (inputValue.type === identifierType && inputValue.value !== pendingValue) {
               setPendingValue(inputValue.value);
+              // Clear error when user modifies input
+              setErrorMessage(undefined);
             }
           }}
         />
+        {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
         <Button
           title="account_center.code_verification.send"
           type="primary"

packages/integration-tests/src/tests/api/experience-api/verifications/social-verification.test.ts

@@ -134,7 +134,7 @@ describe('social verification', () => {
       const { verificationId } = await client.sendVerificationCode({
         identifier: {
           type: SignInIdentifier.Email,
-          value: 'foo',
+          value: 'foo@logto.io',
         },
         interactionEvent: InteractionEvent.SignIn,
       });

packages/integration-tests/src/tests/api/experience-api/verifications/verification-code.test.ts

@@ -33,7 +33,7 @@ describe('Verification code verification APIs', () => {
     },
     {
       type: SignInIdentifier.Phone,
-      value: '+1234567890',
+      value: '1234567890',
     },
   ];
 
@@ -144,12 +144,15 @@ describe('Verification code verification APIs', () => {
         },
       });
 
+      // Use a valid but different identifier to trigger the mismatch error
+      const differentValue = type === SignInIdentifier.Email ? '[email protected]' : '9876543210';
+
       await expectRejects(
         client.verifyVerificationCode({
           code,
           identifier: {
             type,
-            value: 'invalid_identifier',
+            value: differentValue,
           },
           verificationId,
         }),

packages/schemas/src/types/interactions.ts

@@ -62,10 +62,16 @@ export type VerificationCodeIdentifier<
   type: T;
   value: string;
 };
-export const verificationCodeIdentifierGuard = z.object({
-  type: z.enum([SignInIdentifier.Email, SignInIdentifier.Phone]),
-  value: z.string(),
-}) satisfies ToZodObject<VerificationCodeIdentifier>;
+export const verificationCodeIdentifierGuard = z.discriminatedUnion('type', [
+  z.object({
+    type: z.literal(SignInIdentifier.Email),
+    value: z.string().regex(emailRegEx),
+  }),
+  z.object({
+    type: z.literal(SignInIdentifier.Phone),
+    value: z.string().regex(phoneRegEx),
+  }),
+]) satisfies z.ZodType<VerificationCodeIdentifier>;
 
 // REMARK: API payload guard