fix(auth): trim whitespace from email/phone identifiers before submit (#3238) (#3239)

Autofill and copy-paste routinely smuggle leading/trailing whitespace into
the login identifier; the server then rejects it as "Invalid email". Trim
the identifier at every submit path — LoginForm (password, phone+password
routing, SSO request body), RegisterForm (signUp + verification callback),
and ForgotPasswordForm (reset request) — while leaving the input value as
typed. Phone-OTP paths already trimmed.

Closes #3238

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: baozhoutao

packages/auth/src/ForgotPasswordForm.tsx

@@ -204,7 +204,8 @@ export function ForgotPasswordForm({
     setError(null);
 
     try {
-      await forgotPassword(email);
+      // Trim pasted/autofilled whitespace before the reset request (#3238).
+      await forgotPassword(email.trim());
       setSubmitted(true);
       onSuccess?.();
     } catch (err) {

packages/auth/src/LoginForm.tsx

@@ -265,16 +265,19 @@ export function LoginForm({
     e.preventDefault();
     setError(null);
 
+    // Autofill and copy-paste routinely smuggle in leading/trailing whitespace
+    // that the server rejects as "Invalid email" (#3238) — trim before use.
+    const identifier = email.trim();
     try {
       if (mode === 'phone-otp') {
         await signInWithPhoneOtp(phone.trim(), otpCode.trim());
-      } else if (phonePasswordEnabled && looksLikePhoneIdentifier(email)) {
+      } else if (phonePasswordEnabled && looksLikePhoneIdentifier(identifier)) {
         // Unified identifier: a phone-shaped entry routes to phone+password.
         // Normalize identically to the backend (strip formatting, no country
         // code) or the phoneNumber lookup fails.
-        await signInWithPhonePassword(normalizePhoneIdentifier(email) ?? email.trim(), password);
+        await signInWithPhonePassword(normalizePhoneIdentifier(identifier) ?? identifier, password);
       } else {
-        await signIn(email, password);
+        await signIn(identifier, password);
       }
       onSuccess?.();
     } catch (err) {
@@ -322,8 +325,9 @@ export function LoginForm({
   const handleSso = async () => {
     if (ssoSubmitting) return;
     setError(null);
+    const identifier = email.trim();
     // SSO routes by email domain — a phone-shaped identifier can't map to an IdP.
-    if (looksLikePhoneIdentifier(email)) {
+    if (looksLikePhoneIdentifier(identifier)) {
       setError('Enter your email address to sign in with SSO.');
       return;
     }
@@ -333,7 +337,7 @@ export function LoginForm({
       const res = await fetch('/api/v1/auth/sign-in/sso', {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ email, callbackURL: base + '/home' }),
+        body: JSON.stringify({ email: identifier, callbackURL: base + '/home' }),
         credentials: 'include',
       });
       const data = (await res.json().catch(() => ({}))) as { url?: string; message?: string };

packages/auth/src/RegisterForm.tsx

@@ -159,10 +159,13 @@ export function RegisterForm({
       return;
     }
 
+    // Autofill and copy-paste routinely smuggle in leading/trailing whitespace
+    // that the server rejects as "Invalid email" (#3238) — trim before use.
+    const trimmedEmail = email.trim();
     try {
-      const result = await signUp(name, email, password);
+      const result = await signUp(name, trimmedEmail, password);
       if (result?.requiresVerification) {
-        onVerificationRequired?.(email);
+        onVerificationRequired?.(trimmedEmail);
         return;
       }
       onSuccess?.();

packages/auth/src/__tests__/LoginForm.test.tsx

@@ -253,6 +253,70 @@ describe('LoginForm — phone + password sign-in (framework#2780)', () => {
   });
 });
 
+// #3238: autofill/copy-paste smuggle leading/trailing whitespace into the
+// identifier; the server then rejects it ("Invalid email"). The form must trim
+// before validating, routing, or sending.
+describe('LoginForm — identifier whitespace trimming (#3238)', () => {
+  it('trims whitespace around the email before signIn', async () => {
+    const signIn = vi.fn().mockResolvedValue({ user: { id: '1' }, session: { token: 't' } });
+    renderLogin(createMockClient({}, { signIn }));
+
+    fireEvent.change(await screen.findByLabelText('Email'), {
+      target: { value: '  admin@objectos.ai  ' },
+    });
+    fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'pw' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Sign In' }));
+
+    await waitFor(() =>
+      expect(signIn).toHaveBeenCalledWith({ email: 'admin@objectos.ai', password: 'pw' }),
+    );
+  });
+
+  it('trims whitespace around the email in the SSO request body', async () => {
+    const fetchSpy = vi
+      .spyOn(globalThis, 'fetch')
+      .mockResolvedValue(new Response(JSON.stringify({ message: 'nope' }), {
+        status: 404,
+        headers: { 'content-type': 'application/json' },
+      }));
+    try {
+      renderLogin(createMockClient({ features: { sso: true } }));
+      const button = await screen.findByRole('button', SSO_BUTTON);
+
+      fireEvent.change(screen.getByLabelText('Email'), {
+        target: { value: '  a@corp.example  ' },
+      });
+      fireEvent.click(button);
+
+      await waitFor(() => expect(fetchSpy).toHaveBeenCalledTimes(1));
+      const body = JSON.parse(String(fetchSpy.mock.calls[0][1]?.body)) as { email: string };
+      expect(body.email).toBe('a@corp.example');
+    } finally {
+      fetchSpy.mockRestore();
+    }
+  });
+
+  it('still routes a whitespace-padded phone identifier to signInWithPhonePassword', async () => {
+    const signIn = vi.fn();
+    const signInWithPhonePassword = vi.fn().mockResolvedValue({
+      user: { id: 'u2' },
+      session: { token: 'pw-tok' },
+    });
+    renderLogin(createMockClient({ features: { phoneNumber: true } }, { signIn, signInWithPhonePassword }));
+
+    fireEvent.change(await screen.findByLabelText('Email or phone number'), {
+      target: { value: '  +86 138-0013-8000  ' },
+    });
+    fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'S3cret!' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Sign In' }));
+
+    await waitFor(() =>
+      expect(signInWithPhonePassword).toHaveBeenCalledWith('+8613800138000', 'S3cret!'),
+    );
+    expect(signIn).not.toHaveBeenCalled();
+  });
+});
+
 describe('LoginForm — SSO button pending state (objectui#2458 item 1)', () => {
   it('disables the SSO button while /sign-in/sso is in flight and surfaces failure inline', async () => {
     let resolveFetch!: (r: Response) => void;

packages/auth/src/__tests__/identifier-trim.test.tsx

@@ -0,0 +1,79 @@
+/**
+ * #3238: autofill/copy-paste smuggle leading/trailing whitespace into the
+ * email field; the server then rejects it ("Invalid email"). RegisterForm and
+ * ForgotPasswordForm must trim the email before sending, matching LoginForm
+ * (whose trim tests live in LoginForm.test.tsx).
+ */
+
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { AuthProvider } from '../AuthProvider';
+import { RegisterForm } from '../RegisterForm';
+import { ForgotPasswordForm } from '../ForgotPasswordForm';
+import type { AuthClient, AuthPublicConfig } from '../types';
+
+function createMockClient(
+  config: AuthPublicConfig,
+  overrides: Partial<AuthClient> = {},
+): AuthClient {
+  return {
+    signIn: vi.fn().mockResolvedValue({ user: { id: '1' }, session: { token: 't' } }),
+    signUp: vi.fn().mockResolvedValue({ user: { id: '2' }, session: null, requiresVerification: false }),
+    signOut: vi.fn().mockResolvedValue(undefined),
+    getSession: vi.fn().mockResolvedValue(null),
+    forgotPassword: vi.fn().mockResolvedValue(undefined),
+    resetPassword: vi.fn().mockResolvedValue(undefined),
+    getConfig: vi.fn().mockResolvedValue(config),
+    ...overrides,
+  } as unknown as AuthClient;
+}
+
+function renderWithAuth(client: AuthClient, ui: React.ReactElement) {
+  return render(
+    <AuthProvider authUrl="/api/auth" client={client}>
+      {ui}
+    </AuthProvider>,
+  );
+}
+
+describe('RegisterForm — email whitespace trimming (#3238)', () => {
+  it('trims whitespace around the email before signUp', async () => {
+    const signUp = vi
+      .fn()
+      .mockResolvedValue({ user: { id: '2' }, session: null, requiresVerification: false });
+    renderWithAuth(createMockClient({}, { signUp }), <RegisterForm />);
+
+    fireEvent.change(await screen.findByLabelText('Name'), { target: { value: 'Test User' } });
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: '  new@objectos.ai  ' },
+    });
+    fireEvent.change(screen.getByLabelText('Password'), { target: { value: 'password123' } });
+    fireEvent.change(screen.getByLabelText('Confirm Password'), {
+      target: { value: 'password123' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Create Account' }));
+
+    await waitFor(() =>
+      expect(signUp).toHaveBeenCalledWith({
+        name: 'Test User',
+        email: 'new@objectos.ai',
+        password: 'password123',
+      }),
+    );
+  });
+});
+
+describe('ForgotPasswordForm — email whitespace trimming (#3238)', () => {
+  it('trims whitespace around the email before requesting the reset link', async () => {
+    const forgotPassword = vi.fn().mockResolvedValue(undefined);
+    renderWithAuth(createMockClient({}, { forgotPassword }), <ForgotPasswordForm />);
+
+    fireEvent.change(await screen.findByLabelText('Email'), {
+      target: { value: '  reset@objectos.ai  ' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Send Reset Link' }));
+
+    await waitFor(() => expect(forgotPassword).toHaveBeenCalledWith('reset@objectos.ai'));
+  });
+});