feat(webapp): inline email validation on login and SSO sign-in forms

Use conform (@conform-to/react + @conform-to/zod) for client-side email
validation on the /login inline email form and the /login/sso enterprise
email field. Invalid emails now surface the app's standard inline FormError
(associated with the field for accessibility) instead of the browser's native
tooltip. Both forms still post cross-route to their existing actions
(/login/magic, /auth/sso), so server-side errors keep their current paths.

Author: samejr

.server-changes/login-sso-ui.md

@@ -10,4 +10,5 @@ logic. `/login/magic` becomes confirmation-only and redirects to `/login`
 otherwise, so the inline form is the single source of truth and old links
 don't 404. `/login/sso` gets refreshed copy, an "Enterprise email address"
 placeholder, and an "Ask about SSO" link. The Documentation link is removed
-from the shared login layout.
+from the shared login layout. Both email fields validate inline with the
+standard styled form error instead of the browser's native tooltip.

apps/webapp/app/routes/login._index/route.tsx

@@ -1,9 +1,12 @@
+import { getFormProps, getInputProps, useForm } from "@conform-to/react";
+import { parseWithZod } from "@conform-to/zod";
 import { EnvelopeIcon, LockClosedIcon } from "@heroicons/react/20/solid";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Form, useNavigation } from "@remix-run/react";
 import { GitHubLightIcon } from "@trigger.dev/companyicons";
 import { motion, useReducedMotion } from "framer-motion";
 import { redirect, typedjson, useTypedLoaderData } from "remix-typedjson";
+import { z } from "zod";
 import { GoogleLogo } from "~/assets/logos/GoogleLogo";
 import { LoginPageLayout } from "~/components/LoginPageLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
@@ -27,6 +30,16 @@ import { requestUrl } from "~/utils/requestUrl.server";
 import { SSO_SESSION_EXPIRED_REASON } from "~/utils/ssoSession";
 import { cn } from "~/utils/cn";
 
+// Client-side email validation for the inline magic-link form. Mirrors
+// /login/sso: the form posts cross-route to /login/magic, so conform runs
+// format validation in the browser and renders the styled inline error.
+// Server-side errors still surface via the session-backed authError below.
+const emailSchema = z.object({
+  email: z
+    .string({ required_error: "Enter your email address" })
+    .email("Enter a valid email address"),
+});
+
 function LastUsedBadge({ className }: { className?: string }) {
   const shouldReduceMotion = useReducedMotion();
 
@@ -154,6 +167,15 @@ export default function LoginPage() {
     navigation.formAction === "/login/magic" &&
     navigation.formData?.get("action") === "send";
 
+  const [emailForm, emailFields] = useForm({
+    id: "login-email",
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: emailSchema });
+    },
+    shouldValidate: "onBlur",
+    shouldRevalidate: "onInput",
+  });
+
   return (
     <LoginPageLayout>
       <div className="flex w-full flex-col items-center">
@@ -239,19 +261,25 @@ export default function LoginPage() {
                 <div className="w-full">
                   {/* Posts to the /login/magic action so all magic-link logic
                       (rate limiting, SSO auto-discovery, send) stays in one place. */}
-                  <Form action="/login/magic" method="post" className="w-full">
+                  <Form
+                    action="/login/magic"
+                    method="post"
+                    className="w-full"
+                    {...getFormProps(emailForm)}
+                  >
                     <input type="hidden" name="action" value="send" />
                     <div className="flex w-full flex-col items-center gap-y-2">
                       <InputGroup fullWidth>
                         <Input
-                          type="email"
-                          name="email"
+                          {...getInputProps(emailFields.email, { type: "email" })}
                           spellCheck={false}
                           placeholder="Email Address"
                           variant="large"
-                          required
                           data-action="email address"
                         />
+                        <FormError id={emailFields.email.errorId}>
+                          {emailFields.email.errors}
+                        </FormError>
                       </InputGroup>
                       <div className="relative w-full">
                         {data.lastAuthMethod === "email" && <LastUsedBadge />}

apps/webapp/app/routes/login.sso/route.tsx

@@ -1,7 +1,10 @@
+import { getFormProps, getInputProps, useForm } from "@conform-to/react";
+import { parseWithZod } from "@conform-to/zod";
 import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { Form, useNavigation } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { z } from "zod";
 import { LoginPageLayout } from "~/components/LoginPageLayout";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Fieldset } from "~/components/primitives/Fieldset";
@@ -58,6 +61,16 @@ const ERROR_MESSAGES: Record<string, string> = {
   missing_code: "We couldn't complete sign-in. Try again.",
 };
 
+// Client-side validation for the enterprise email field. The form posts
+// cross-route to /auth/sso, so there's no same-route action result to hydrate
+// from — conform validates the format in the browser and renders the styled
+// inline error before submit. Server-side errors keep flowing via ?error=.
+const ssoEmailSchema = z.object({
+  email: z
+    .string({ required_error: "Enter your enterprise email address" })
+    .email("Enter a valid email address"),
+});
+
 export const meta: MetaFunction = () => [
   { title: "Sign in with SSO – Trigger.dev" },
   { name: "viewport", content: "width=device-width,initial-scale=1" },
@@ -98,9 +111,19 @@ export default function LoginSsoPage() {
   const content = CONTENT[reason];
   const emailReadOnly = reason === "oauth_blocked";
 
+  const [form, fields] = useForm({
+    id: "login-sso",
+    defaultValue: { email },
+    onValidate({ formData }) {
+      return parseWithZod(formData, { schema: ssoEmailSchema });
+    },
+    shouldValidate: "onBlur",
+    shouldRevalidate: "onInput",
+  });
+
   return (
     <LoginPageLayout>
-      <Form method="post" action="/auth/sso">
+      <Form method="post" action="/auth/sso" {...getFormProps(form)}>
         <input type="hidden" name="redirectTo" value={redirectTo} />
         <input type="hidden" name="flow" value="user_initiated" />
         <div className="flex flex-col items-center justify-center">
@@ -113,16 +136,14 @@ export default function LoginSsoPage() {
           <Fieldset className="flex w-full flex-col items-center gap-y-2">
             <InputGroup>
               <Input
-                type="email"
-                name="email"
+                {...getInputProps(fields.email, { type: "email" })}
                 spellCheck={false}
                 placeholder="Enterprise email address"
                 variant="large"
-                required
                 autoFocus={!emailReadOnly}
-                defaultValue={email}
                 readOnly={emailReadOnly}
               />
+              <FormError id={fields.email.errorId}>{fields.email.errors}</FormError>
             </InputGroup>
 
             <Button