refactor(webapp): tidy the magic-link confirmation page and login divider

samejr · samejr · commit 0fe8de57da84 · 2026-07-02T17:55:14.000+01:00
- /login/magic is confirmation-only now (the email form lives on /login), so
  drop the dead form branch and its unused imports and render any flashed
  auth:error inline on the confirmation.
- /login: only render the "or" divider when a social/SSO option is shown above
  it, so it never appears with nothing before it.
diff --git a/.server-changes/login-sso-ui.md b/.server-changes/login-sso-ui.md
@@ -3,14 +3,6 @@ area: webapp
 type: improvement
 ---
 
-Rework the login page and SSO sign-in screens. On `/login`, SSO is now a
-button (after Google) and email sign-in is an inline magic-link form under an
-"or" divider that posts to the `/login/magic` action, reusing its existing
-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. Both email fields validate inline with the
-standard styled form error instead of the browser's native tooltip. The
-"magic link sent" confirmation names the address the link was sent to, and its
-"Re-enter email" action returns to `/login`.
+Rework the login and SSO sign-in screens: inline magic-link email form on
+`/login`, SSO as a button, `/login/magic` is now confirmation-only, and
+refreshed `/login/sso` copy.
diff --git a/apps/webapp/app/routes/login._index/route.tsx b/apps/webapp/app/routes/login._index/route.tsx
@@ -253,11 +253,13 @@ export default function LoginPage() {
             )}
             {!data.isVercelMarketplace && (
               <>
-                <div className="flex w-full items-center gap-3 py-1">
-                  <div className="h-px flex-1 bg-charcoal-700" />
-                  <span className="text-xs uppercase text-text-dimmed">or</span>
-                  <div className="h-px flex-1 bg-charcoal-700" />
-                </div>
+                {(data.showGithubAuth || data.showGoogleAuth || data.showSsoAuth) && (
+                  <div className="flex w-full items-center gap-3 py-1">
+                    <div className="h-px flex-1 bg-charcoal-700" />
+                    <span className="text-xs uppercase text-text-dimmed">or</span>
+                    <div className="h-px flex-1 bg-charcoal-700" />
+                  </div>
+                )}
                 <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. */}
diff --git a/apps/webapp/app/routes/login.magic/route.tsx b/apps/webapp/app/routes/login.magic/route.tsx
@@ -1,12 +1,12 @@
-import { ArrowLeftIcon, EnvelopeIcon } from "@heroicons/react/20/solid";
+import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import { InboxArrowDownIcon } from "@heroicons/react/24/solid";
 import {
   redirect,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
   type MetaFunction,
 } from "@remix-run/node";
-import { Form, useNavigation } from "@remix-run/react";
+import { Form } from "@remix-run/react";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { LoginPageLayout } from "~/components/LoginPageLayout";
@@ -15,11 +15,7 @@ import { Fieldset } from "~/components/primitives/Fieldset";
 import { FormButtons } from "~/components/primitives/FormButtons";
 import { FormError } from "~/components/primitives/FormError";
 import { Header1 } from "~/components/primitives/Headers";
-import { Input } from "~/components/primitives/Input";
-import { InputGroup } from "~/components/primitives/InputGroup";
 import { Paragraph } from "~/components/primitives/Paragraph";
-import { Spinner } from "~/components/primitives/Spinner";
-import { TextLink } from "~/components/primitives/TextLink";
 import { authenticator } from "~/services/auth.server";
 import { commitSession, getUserSession } from "~/services/sessionStorage.server";
 import {
@@ -66,13 +62,15 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const session = await getUserSession(request);
 
   // The email form now lives inline on /login; this route is only the
-  // "magic link sent" confirmation. Any visit without a pending magic link
-  // forwards to /login — keeping the inlined form the single source of truth
-  // and avoiding an orphaned duplicate page. This also catches the expired-
-  // link callback in routes/magic.tsx (which redirects here on error): with
-  // no pending link it lands on /login, where the error surfaces via the
-  // shared auth:error handling. Checked before reading auth:error so a flashed
-  // error isn't consumed here before /login can display it.
+  // "magic link sent" confirmation. A visit without a pending magic link
+  // forwards to /login — keeping the inlined form the single source of truth,
+  // avoiding an orphaned duplicate page, and letting /login surface any flashed
+  // auth:error (e.g. an invalid-email submit that never sent a link). The guard
+  // runs before reading auth:error so that error isn't consumed here before
+  // /login can show it. An expired/invalid link click (routes/magic.tsx) is
+  // different: the email-link strategy only clears the magic-link key on a
+  // successful verify, so the key is still set and the request lands here — the
+  // confirmation renders the flashed error as magicLinkError below.
   const url = new URL(request.url);
   const sanitized = sanitizeRedirectPath(url.searchParams.get("redirectTo"));
   // The submitted address is carried on the success redirect so the
@@ -82,7 +80,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   if (!session.has("triggerdotdev:magiclink")) {
     // Throw (not return) so the redirect doesn't widen the loader's return
     // type — otherwise useTypedLoaderData sees TypedResponse<never> in the
-    // union and the component can't read magicLinkSent/magicLinkError.
+    // union and the component can't read magicLinkError/email.
     throw redirect(
       sanitized === "/" ? "/login" : `/login?redirectTo=${encodeURIComponent(sanitized)}`
     );
@@ -111,7 +109,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
   return typedjson(
     {
-      magicLinkSent: session.has("triggerdotdev:magiclink"),
       magicLinkError,
       email,
     },
@@ -238,127 +235,53 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export default function LoginMagicLinkPage() {
-  const { magicLinkSent, magicLinkError, email } = useTypedLoaderData<typeof loader>();
-  const navigate = useNavigation();
-
-  const isLoading =
-    (navigate.state === "loading" || navigate.state === "submitting") &&
-    navigate.formAction !== undefined &&
-    navigate.formData?.get("action") === "send";
+  const { magicLinkError, email } = useTypedLoaderData<typeof loader>();
 
   return (
     <LoginPageLayout>
       <Form method="post">
         <div className="flex flex-col items-center justify-center">
-          {magicLinkSent ? (
-            <>
-              <Header1 className="pb-6 text-center text-xl font-normal leading-7 md:text-xl lg:text-2xl">
-                We've sent you a magic link!
-              </Header1>
-              <Fieldset className="flex w-full flex-col items-center gap-y-2">
-                <InboxArrowDownIcon className="mb-4 h-12 w-12 text-indigo-500" />
-                <Paragraph className="mb-6 text-center [text-wrap:balance]">
-                  {email ? (
-                    <>
-                      We emailed a magic link to <span className="text-text-bright">{email}</span>{" "}
-                      to log you in to your account.
-                    </>
-                  ) : (
-                    "We emailed you a magic link to log you in to your account."
-                  )}
-                </Paragraph>
-                <FormButtons
-                  cancelButton={
-                    <Button
-                      type="submit"
-                      name="action"
-                      value="reset"
-                      variant="minimal/small"
-                      LeadingIcon={ArrowLeftIcon}
-                      leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition"
-                      data-action="re-enter email"
-                    >
-                      Re-enter email
-                    </Button>
-                  }
-                  confirmButton={
-                    <LinkButton
-                      to="/login"
-                      variant="minimal/small"
-                      data-action="log in using another option"
-                    >
-                      Log in using another option
-                    </LinkButton>
-                  }
-                />
-              </Fieldset>
-            </>
-          ) : (
-            <>
-              <Header1 className="pb-4 font-semibold sm:text-2xl md:text-3xl lg:text-4xl">
-                Welcome
-              </Header1>
-              <Paragraph variant="base" className="mb-6 text-center">
-                Create an account or login using email
-              </Paragraph>
-              <Fieldset className="flex w-full flex-col items-center gap-y-2">
-                <InputGroup>
-                  <Input
-                    type="email"
-                    name="email"
-                    spellCheck={false}
-                    placeholder="Email Address"
-                    variant="large"
-                    required
-                    autoFocus
-                  />
-                </InputGroup>
-
+          <Header1 className="pb-6 text-center text-xl font-normal leading-7 md:text-xl lg:text-2xl">
+            We've sent you a magic link!
+          </Header1>
+          <Fieldset className="flex w-full flex-col items-center gap-y-2">
+            <InboxArrowDownIcon className="mb-4 h-12 w-12 text-indigo-500" />
+            <Paragraph className="mb-6 text-center [text-wrap:balance]">
+              {email ? (
+                <>
+                  We emailed a magic link to <span className="text-text-bright">{email}</span> to
+                  log you in to your account.
+                </>
+              ) : (
+                "We emailed you a magic link to log you in to your account."
+              )}
+            </Paragraph>
+            {magicLinkError && <FormError>{magicLinkError}</FormError>}
+            <FormButtons
+              cancelButton={
                 <Button
-                  name="action"
-                  value="send"
                   type="submit"
-                  variant="primary/large"
-                  disabled={isLoading}
-                  fullWidth
-                  data-action="send a magic link"
+                  name="action"
+                  value="reset"
+                  variant="minimal/small"
+                  LeadingIcon={ArrowLeftIcon}
+                  leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition"
+                  data-action="re-enter email"
                 >
-                  {isLoading ? (
-                    <Spinner className="mr-2 size-5" color="white" />
-                  ) : (
-                    <EnvelopeIcon className="mr-2 size-5 text-text-bright" />
-                  )}
-                  {isLoading ? (
-                    <span className="text-text-bright">Sending…</span>
-                  ) : (
-                    <span className="text-text-bright">Send a magic link</span>
-                  )}
+                  Re-enter email
                 </Button>
-                {magicLinkError && <FormError>{magicLinkError}</FormError>}
-              </Fieldset>
-              <Paragraph variant="extra-small" className="mb-4 mt-6 text-center">
-                By signing up you agree to our{" "}
-                <TextLink href="https://trigger.dev/legal" target="_blank">
-                  terms
-                </TextLink>
-                {" "}and{" "}
-                <TextLink href="https://trigger.dev/legal/privacy" target="_blank">
-                  privacy
-                </TextLink>
-                {" "}policy.
-              </Paragraph>
-
-              <LinkButton
-                to="/login"
-                variant={"minimal/small"}
-                LeadingIcon={ArrowLeftIcon}
-                leadingIconClassName="text-text-dimmed group-hover:text-text-bright transition"
-                data-action="all login options"
-              >
-                All login options
-              </LinkButton>
-            </>
-          )}
+              }
+              confirmButton={
+                <LinkButton
+                  to="/login"
+                  variant="minimal/small"
+                  data-action="log in using another option"
+                >
+                  Log in using another option
+                </LinkButton>
+              }
+            />
+          </Fieldset>
         </div>
       </Form>
     </LoginPageLayout>
