Accept internationalized emails. Fix uppercase and anchor bugs in email auth.

examples/kitchen-sink/e2e-tests/tests/auth.spec.ts

@@ -3,6 +3,7 @@ import { WASP_SERVER_URL } from "../playwright.config";
 import { performEmailVerification, performLogin, performSignup } from "./auth";
 import {
   generateRandomEmail,
+  generateRandomInternationalizedEmail,
   isRunningInDeployedMode,
   isRunningInDevMode,
 } from "./helpers";
@@ -96,4 +97,58 @@ test.describe("auth", () => {
       await expect(page).toHaveURL("/");
     });
   });
+
+  test.describe("internationalized email address", () => {
+    test.skip(
+      isRunningInDeployedMode(),
+      "Skipped in deployed mode (no Mailcrab)",
+    );
+    test.describe.configure({ mode: "serial" });
+
+    const email = generateRandomInternationalizedEmail();
+    const password = "12345678";
+
+    test("can sign up", async ({ page }) => {
+      await performSignup(page, {
+        email,
+        password,
+        address: "Some at least 10 letter address",
+      });
+
+      await expect(page.locator("body")).toContainText(
+        `You've signed up successfully! Check your email for the confirmation link.`,
+      );
+    });
+
+    test("can verify email", async ({ page }) => {
+      if (isRunningInDevMode()) {
+        // Skip this test in dev mode, as email confirmation is not required.
+        test.skip();
+      }
+
+      await performEmailVerification(page, email);
+    });
+
+    test("can log in", async ({ page }) => {
+      await performLogin(page, { email, password });
+
+      await expect(page).toHaveURL("/");
+    });
+  });
+
+  test.describe("invalid email address", () => {
+    test("signing up with a malformed address results in an error message", async ({
+      page,
+    }) => {
+      await performSignup(page, {
+        email: "not-an-email",
+        password: "12345678",
+        address: "Some at least 10 letter address",
+      });
+
+      await expect(page.locator("body")).toContainText(
+        "Email must be a valid email",
+      );
+    });
+  });
 });

examples/kitchen-sink/e2e-tests/tests/auth.ts

@@ -107,7 +107,7 @@ async function navigateToLoginPage(page: Page) {
 }
 
 async function submitLoginForm(page: Page, credentials: BaseEmailCredentials) {
-  await page.locator("input[type='email']").fill(credentials.email);
+  await page.locator("input[name='email']").fill(credentials.email);
   await page.locator("input[type='password']").fill(credentials.password);
   await page.getByRole("button", { name: "Log in" }).click();
 }

examples/kitchen-sink/e2e-tests/tests/helpers.ts

@@ -12,3 +12,11 @@ export function isRunningInDeployedMode() {
 export function generateRandomEmail(): string {
   return `${randomUUID()}@test.com`;
 }
+
+/**
+ * An address with non-ASCII characters on both sides of the `@`, the kind
+ * RFC 6531 allows and the HTML5 `input[type=email]` grammar does not.
+ */
+export function generateRandomInternationalizedEmail(): string {
+  return `jürgen-${randomUUID()}@münchen.test`;
+}

waspc/ChangeLog.md

@@ -25,6 +25,7 @@
 - The `OAuthData` type your auth hooks receive now properly includes the `slack` provider. ([#4655](https://github.com/wasp-lang/wasp/pull/4655))
 - Password reset now rejects an invalid or expired token before it looks at the new password, so someone without a valid reset link can no longer probe your app's password rules. ([#4657](https://github.com/wasp-lang/wasp/pull/4657))
 - `onBeforeSignup` now runs before `userSignupFields` on every signup method: email, username and password, and OAuth. ([#4659](https://github.com/wasp-lang/wasp/pull/4659))
+- Email validation now accepts internationalized addresses such as `jürgen@münchen.de`, accepts addresses typed in uppercase, and no longer accepts a string that merely contains an address somewhere inside it. ([#1392](https://github.com/wasp-lang/wasp/issues/1392))
 
 ## 0.25.0
 

waspc/data/Generator/libs/auth/src/email.ts

@@ -0,0 +1,46 @@
+/**
+ * The syntax we accept is the HTML5 `input[type=email]` grammar (WHATWG HTML,
+ * "valid e-mail address"), widened to also accept Unicode letters, marks and
+ * digits so that internationalized addresses (RFC 6531) are not rejected.
+ *
+ * We match the HTML5 grammar because that is what browsers already enforce on
+ * `input[type=email]`, so the client and the server agree on what an address
+ * looks like. We widen it because the HTML5 grammar is deliberately ASCII-only
+ * (see whatwg/html#4562), which locks out anyone whose address contains, say,
+ * an umlaut.
+ *
+ * Syntax is all we check. Whether an address can actually receive mail is
+ * settled by sending it a verification email, not by a regex.
+ */
+const validEmailRegex =
+  /^[\p{L}\p{M}\p{N}.!#$%&'*+/=?^_`{|}~-]+@[\p{L}\p{N}](?:[\p{L}\p{M}\p{N}-]{0,61}[\p{L}\p{M}\p{N}])?(?:\.[\p{L}\p{N}](?:[\p{L}\p{M}\p{N}-]{0,61}[\p{L}\p{M}\p{N}])?)*$/u;
+
+/**
+ * Upper bounds from RFC 5321 (4.5.3.1. Size Limits and Minimums), counted in
+ * octets because that is how the RFC counts them.
+ */
+const maxLocalPartOctets = 64;
+const maxAddressOctets = 254;
+
+/**
+ * Checks that `input` looks like an email address.
+ */
+export function isValidEmail(input: unknown): boolean {
+  if (typeof input !== "string") {
+    return false;
+  }
+
+  return (
+    validEmailRegex.test(input) &&
+    countOctets(input) <= maxAddressOctets &&
+    countOctets(getLocalPart(input)) <= maxLocalPartOctets
+  );
+}
+
+function getLocalPart(email: string): string {
+  return email.slice(0, email.lastIndexOf("@"));
+}
+
+function countOctets(text: string): number {
+  return new TextEncoder().encode(text).length;
+}

waspc/data/Generator/libs/auth/src/index.ts

@@ -1,3 +1 @@
-/**
- *  NOTE: this is a placeholder file for future code exported for both runtimes.
- */
+export { isValidEmail } from "./email";

waspc/data/Generator/libs/auth/tests/email.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import { isValidEmail } from "../src/email";
+
+describe("isValidEmail", () => {
+  it.each([
+    "user@example.com",
+    "user.name+tag@example.co.uk",
+    "user_name@example.com",
+    "!#$%&'*+-/=?^_`{|}~@example.com",
+    "user@sub.domain.example.com",
+    "user@a.io",
+    // `input[type=email]` accepts a dotless domain, so we do too.
+    "user@localhost",
+  ])("accepts the ASCII address %j", (email) => {
+    expect(isValidEmail(email)).toBe(true);
+  });
+
+  it.each([
+    "",
+    "plainaddress",
+    "@example.com",
+    "user@",
+    "user@@example.com",
+    "user@-example.com",
+    "user@example-.com",
+    "user@exam ple.com",
+    "user name@example.com",
+    "user@example..com",
+  ])("rejects the malformed address %j", (email) => {
+    expect(isValidEmail(email)).toBe(false);
+  });
+
+  it.each([null, undefined, 42, {}, ["user@example.com"]])(
+    "rejects the non-string input %j",
+    (input) => {
+      expect(isValidEmail(input)).toBe(false);
+    },
+  );
+
+  describe("internationalized addresses (RFC 6531)", () => {
+    it.each([
+      "jürgen@example.com",
+      "user@münchen.de",
+      "jürgen@münchen.de",
+      "用户@例子.广告",
+      "θσερ@εχαμπλε.ψομ",
+      "अजय@डाटा.भारत",
+      "квіточка@пошта.укр",
+    ])("accepts %j", (email) => {
+      expect(isValidEmail(email)).toBe(true);
+    });
+  });
+
+  describe("case", () => {
+    // The email signup endpoint validates the raw request body and only
+    // lowercases the address afterwards, so the validator has to accept
+    // whatever casing the user typed.
+    it.each([
+      "JOHN@EXAMPLE.COM",
+      "John@Example.com",
+      "jOhN@eXaMpLe.CoM",
+      // Uppercase confined to the domain.
+      "john@Example.com",
+      "john@example.COM",
+      // Uppercase confined to the local part, running right up to the "@".
+      "JOHN@example.com",
+      "john.DOE@example.com",
+    ])("accepts %j", (email) => {
+      expect(isValidEmail(email)).toBe(true);
+    });
+  });
+
+  describe("anchoring", () => {
+    it.each([
+      "user@example.com <script>alert(1)</script>",
+      "I am not an email, ask user@example.com",
+      "\nuser@example.com",
+      "user@example.com\n",
+      " user@example.com ",
+    ])("rejects %j, which merely contains an address", (input) => {
+      expect(isValidEmail(input)).toBe(false);
+    });
+  });
+
+  describe("size limits (RFC 5321)", () => {
+    it("accepts a 64 octet local part", () => {
+      expect(isValidEmail(`${"a".repeat(64)}@example.com`)).toBe(true);
+    });
+
+    it("rejects a 65 octet local part", () => {
+      expect(isValidEmail(`${"a".repeat(65)}@example.com`)).toBe(false);
+    });
+
+    it("counts octets rather than characters in the local part", () => {
+      // "ä" is two octets in UTF-8, so 33 of them exceed the 64 octet limit
+      // while staying well under 64 characters.
+      expect(isValidEmail(`${"ä".repeat(32)}@example.com`)).toBe(true);
+      expect(isValidEmail(`${"ä".repeat(33)}@example.com`)).toBe(false);
+    });
+
+    it("rejects an address longer than 254 octets", () => {
+      const domain = `${"a".repeat(61)}.${"b".repeat(61)}.${"c".repeat(61)}.com`;
+      const localPart = "d".repeat(254 - domain.length - 1);
+
+      expect(isValidEmail(`${localPart}@${domain}`)).toBe(true);
+      expect(isValidEmail(`${localPart}x@${domain}`)).toBe(false);
+    });
+  });
+});

waspc/data/Generator/templates/sdk/wasp/auth/forms/internal/common/LoginSignupForm.tsx

@@ -6,6 +6,9 @@ import { config } from '../../../../client/index.js'
 import { clsx } from '../util'
 
 import { useAuthContext } from '@wasp.sh/lib-auth/browser'
+{=# enabledProviders.isEmailAuthEnabled =}
+import { emailFieldRules, emailInputProps } from '../emailField'
+{=/ enabledProviders.isEmailAuthEnabled =}
 import {
   Form,
   FormInput,
@@ -189,10 +192,8 @@ export const LoginSignupForm = ({
           <FormItemGroup>
             <FormLabel>E-mail</FormLabel>
             <FormInput
-              {...register('email', {
-                required: 'Email is required',
-              })}
-              type="email"
+              {...register('email', emailFieldRules)}
+              {...emailInputProps}
               disabled={isLoading}
             />
             {errors.email && <FormError>{errors.email.message}</FormError>}

waspc/data/Generator/templates/sdk/wasp/auth/forms/internal/email/ForgotPasswordForm.tsx

@@ -3,6 +3,7 @@ import { useAuthContext } from '@wasp.sh/lib-auth/browser'
 
 import { requestPasswordReset } from '../../../email/actions/passwordReset.js'
 import { Form, FormItemGroup, FormLabel, FormInput, SubmitButton, FormError } from '../Form'
+import { emailFieldRules, emailInputProps } from '../emailField'
 
 
 // PRIVATE API
@@ -34,10 +35,8 @@ export const ForgotPasswordForm = () => {
         <FormItemGroup>
           <FormLabel>E-mail</FormLabel>
           <FormInput
-            {...register('email', {
-              required: 'Email is required',
-            })}
-            type="email"
+            {...register('email', emailFieldRules)}
+            {...emailInputProps}
             disabled={isLoading}
           />
           {errors.email && <FormError>{errors.email.message}</FormError>}

waspc/data/Generator/templates/sdk/wasp/auth/forms/internal/emailField.ts

@@ -0,0 +1,21 @@
+import { isValidEmail } from '@wasp.sh/lib-auth'
+
+/**
+ * Deliberately not `type="email"`: browsers validate that against the HTML5
+ * grammar, which is ASCII-only and would reject internationalized addresses
+ * that the server accepts. `inputMode` keeps the email keyboard on mobile.
+ */
+export const emailInputProps = {
+  type: 'text',
+  inputMode: 'email',
+  autoComplete: 'email',
+} as const
+
+/**
+ * react-hook-form rules that mirror the server side `ensureValidEmail`.
+ */
+export const emailFieldRules = {
+  required: 'Email is required',
+  validate: (email: string) =>
+    isValidEmail(email) || 'Email must be a valid email',
+}