fix(webapp): keep login page errors visible when the timezone is saved

Errors on the login page, such as an expired or invalid magic link, no
longer disappear a moment after the page loads in a new browser.

Mono-RevId: e4a17f9e652349a0a32df1005947f8a50280534b

Author: ericallam

.server-changes/login-error-stays-visible.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Errors on the login page, such as an expired or invalid magic link, no longer disappear a moment after the page loads in a new browser.

apps/webapp/app/components/TimezoneSetter.tsx

@@ -2,6 +2,7 @@ import { useFetcher } from "@remix-run/react";
 import { useEffect, useRef } from "react";
 import { useTypedLoaderData } from "remix-typedjson";
 import type { loader } from "~/root";
+import { TIMEZONE_ACTION_PATH } from "~/utils/flashedErrorRevalidation";
 
 export function TimezoneSetter() {
   const { timezone: storedTimezone } = useTypedLoaderData<typeof loader>();
@@ -19,7 +20,7 @@ export function TimezoneSetter() {
         { timezone: browserTimezone },
         {
           method: "POST",
-          action: "/resources/timezone",
+          action: TIMEZONE_ACTION_PATH,
           encType: "application/json",
         }
       );

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

@@ -32,6 +32,9 @@ import { flags as getGlobalFlags } from "~/v3/featureFlags.server";
 import { requestUrl } from "~/utils/requestUrl.server";
 import { SSO_SESSION_EXPIRED_REASON } from "~/utils/ssoSession";
 import { cn } from "~/utils/cn";
+import { keepFlashedErrorOnTimezoneSave } from "~/utils/flashedErrorRevalidation";
+
+export const shouldRevalidate = keepFlashedErrorOnTimezoneSave;
 
 // Client-side email validation for the inline magic-link form. Mirrors
 // /login/sso: the form posts cross-route to /login/magic, so conform runs

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

@@ -36,6 +36,9 @@ import { logger, tryCatch } from "@trigger.dev/core/v3";
 import { env } from "~/env.server";
 import { extractClientIp } from "~/utils/extractClientIp.server";
 import { magicLinkEmailCookie } from "./magicLinkEmailCookie.server";
+import { keepFlashedErrorOnTimezoneSave } from "~/utils/flashedErrorRevalidation";
+
+export const shouldRevalidate = keepFlashedErrorOnTimezoneSave;
 
 export const meta: MetaFunction = ({ matches }) => {
   const parentMeta = matches

apps/webapp/app/utils/flashedErrorRevalidation.ts

@@ -0,0 +1,14 @@
+import type { ShouldRevalidateFunction } from "@remix-run/react";
+
+export const TIMEZONE_ACTION_PATH = "/resources/timezone";
+
+/**
+ * For routes whose loader reads a one-time flashed error from the session. A fetcher submission
+ * re-runs every loader on the page, and the second run finds the flash already consumed, so the
+ * error renders and then disappears. The timezone setter submits on a browser's first visit,
+ * which is exactly when a magic link opened in a new browser lands on these pages.
+ */
+export const keepFlashedErrorOnTimezoneSave: ShouldRevalidateFunction = ({
+  formAction,
+  defaultShouldRevalidate,
+}) => (formAction === TIMEZONE_ACTION_PATH ? false : defaultShouldRevalidate);