fix(webapp): show magic link confirmation instead of reloading login

.server-changes/fix-magic-link-login-confirmation.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Fixed submitting your email on the login page reloading back to an empty form instead of showing the magic link confirmation screen.

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

@@ -34,7 +34,6 @@ import { ssoRedirectForEmail } from "~/services/ssoAutoDiscovery.server";
 import { logger, tryCatch } from "@trigger.dev/core/v3";
 import { env } from "~/env.server";
 import { extractClientIp } from "~/utils/extractClientIp.server";
-import { magicLinkEmailCookie } from "./magicLinkEmailCookie.server";
 
 export const meta: MetaFunction = ({ matches }) => {
  const parentMeta = matches
@@ -74,12 +73,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
  // 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 in a short-lived cookie (not the URL) so
- // the confirmation can name it. Validate before echoing it back.
- const emailCookie = await magicLinkEmailCookie.parse(request.headers.get("Cookie"));
+ // The email-link strategy stores the submitted address in the session
+ // (`auth:email`) alongside the magic-link key, so read it from there to name
+ // the confirmation — no address in the URL, and no separate cookie to leak
+ // into the client bundle. Validate before echoing it back.
+ const emailValue = session.get("auth:email");
  const email =
- typeof emailCookie === "string" && z.string().email().safeParse(emailCookie).success
- ? emailCookie
+ typeof emailValue === "string" && z.string().email().safeParse(emailValue).success
+ ? emailValue
  : null;
  if (!session.has("triggerdotdev:magiclink")) {
  // Throw (not return) so the redirect doesn't widen the loader's return
@@ -215,20 +216,13 @@ export async function action({ request }: ActionFunctionArgs) {
  return redirect(ssoRedirect);
  }
 
- // authenticator.authenticate throws its redirect Response; attach the
- // sent-to email as a short-lived cookie so the confirmation can name it
- // without putting the address in the URL.
- try {
- return await authenticator.authenticate("email-link", request, {
- successRedirect: "/login/magic",
- failureRedirect: "/login",
- });
- } catch (thrown) {
- if (thrown instanceof Response) {
- thrown.headers.append("Set-Cookie", await magicLinkEmailCookie.serialize(email));
- }
- throw thrown;
- }
+ // The email-link strategy stores the address in the session (`auth:email`)
+ // and throws its own redirect Response (with the committed session cookie),
+ // so return it directly — the confirmation reads the email from the session.
+ return await authenticator.authenticate("email-link", request, {
+ successRedirect: "/login/magic",
+ failureRedirect: "/login",
+ });
  }
  case "reset":
  default: {
@@ -260,7 +254,7 @@ export default function LoginMagicLinkPage() {
  </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]">
+ <Paragraph className="mb-6 text-center">
  {email ? (
  <>
  We emailed a magic link to <span className="text-text-bright">{email}</span> to

apps/webapp/app/services/emailAuth.server.tsx

@@ -18,6 +18,11 @@ const emailStrategy = new EmailLinkStrategy(
  secret,
  callbackURL: "/magic",
  sessionMagicLinkKey: "triggerdotdev:magiclink",
+ // Pin explicitly to the library default rather than relying on it: the
+ // /login/magic loader reads the submitted address via
+ // session.get("auth:email") to name it on the confirmation screen, so a
+ // future remix-auth-email-link default change can't silently break that.
+ sessionEmailKey: "auth:email",
  },
  async ({
  email,