Merge pull request #266 from Shelf-nu/custom-email-regex-validation

replacing zod's default email validation with a custom refine function

app/routes/_auth+/forgot-password.tsx

@@ -8,7 +8,7 @@ import { Button } from "~/components/shared/button";
 import { db } from "~/database";
 
 import { getAuthSession, sendResetPasswordLink } from "~/modules/auth";
-import { assertIsPost, isFormProcessing, tw } from "~/utils";
+import { assertIsPost, isFormProcessing, tw, validEmail } from "~/utils";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 
 export async function loader({ request }: LoaderArgs) {
@@ -24,8 +24,10 @@ export async function loader({ request }: LoaderArgs) {
 const ForgotPasswordSchema = z.object({
   email: z
     .string()
-    .email("Please enter a valid Email address")
-    .transform((email) => email.toLowerCase()),
+    .transform((email) => email.toLowerCase())
+    .refine(validEmail, () => ({
+      message: "Please enter a valid email",
+    })),
 });
 
 export async function action({ request }: ActionArgs) {

app/routes/_auth+/login.tsx

@@ -20,7 +20,7 @@ import {
   signInWithEmail,
   ContinueWithEmailForm,
 } from "~/modules/auth";
-import { assertIsPost, isFormProcessing } from "~/utils";
+import { assertIsPost, isFormProcessing, validEmail } from "~/utils";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 
 export async function loader({ request }: LoaderArgs) {
@@ -34,8 +34,10 @@ export async function loader({ request }: LoaderArgs) {
 const LoginFormSchema = z.object({
   email: z
     .string()
-    .email("Please enter a valid email.")
-    .transform((email) => email.toLowerCase()),
+    .transform((email) => email.toLowerCase())
+    .refine(validEmail, () => ({
+      message: "Please enter a valid email",
+    })),
   password: z.string().min(8, "Password is too short. Minimum 8 characters."),
   redirectTo: z.string().optional(),
 });

app/routes/_auth+/send-magic-link.tsx

@@ -4,6 +4,7 @@ import { parseFormAny } from "react-zorm";
 import { z } from "zod";
 
 import { sendMagicLink } from "~/modules/auth";
+import { validEmail } from "~/utils";
 import { assertIsPost } from "~/utils/http.server";
 
 export async function action({ request }: ActionArgs) {
@@ -12,10 +13,18 @@ export async function action({ request }: ActionArgs) {
   const formData = await request.formData();
   const result = await z
     .object({
+      /**
+       * .email() has an issue with validating email
+       * addresses where the there is a subdomain and a dash included:
+       * https://github.com/colinhacks/zod/pull/2157
+       * So we use the custom validation
+       *  */
       email: z
         .string()
-        .email("Please enter a valid email.")
-        .transform((email) => email.toLowerCase()),
+        .transform((email) => email.toLowerCase())
+        .refine(validEmail, () => ({
+          message: "Please enter a valid email",
+        })),
     })
     .safeParseAsync(parseFormAny(formData));
 

app/utils/index.ts

@@ -18,3 +18,4 @@ export * from "./gif-to-png";
 export * from "./slugify";
 export * from "./geolocate.server";
 export * from "./user-friendly-asset-status";
+export * from "./misc";

app/utils/misc.ts

@@ -0,0 +1,8 @@
+/**
+ * .email() has an issue with validating email
+ * addresses where the there is a subdomain and a dash included:
+ * https://github.com/colinhacks/zod/pull/2157
+ * So we use the custom validation
+ *  */
+export const validEmail = (val: string) =>
+  /^([A-Z0-9_+-]+\.?)*[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i.test(val);