@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Changing your account email address now sends a confirmation link to the new address; the change only takes effect once that link is opened. Requesting a magic link no longer creates an account until the link is used.
@@ -368,14 +368,14 @@ export async function getUserById(id: User["id"]) {
   };
 }
 
+/** The onboarding write. Email changes go through `emailChange.server.ts` and need confirmation. */
 export function updateUser({
   id,
   name,
-  email,
   marketingEmails,
   referralSource,
   onboardingData,
-}: Pick<User, "id" | "name" | "email"> & {
+}: Pick<User, "id" | "name"> & {
   marketingEmails?: boolean;
   referralSource?: string;
   onboardingData?: Prisma.InputJsonValue;
@@ -384,7 +384,6 @@ export function updateUser({
     where: { id },
     data: {
       name,
-      email,
       marketingEmails,
       referralSource,
       onboardingData,
@@ -404,13 +403,6 @@ export function updateUserName({ id, name }: Pick<User, "id" | "name">) {
   });
 }
 
-export function updateUserEmail({ id, email }: Pick<User, "id" | "email">) {
-  return prisma.user.update({
-    where: { id },
-    data: { email },
-  });
-}
-
 /**
  * `updateMany` so the WHERE does the comparing: a redundant request updates zero
  * rows rather than churning the row and its updatedAt.
 
@@ -62,7 +62,6 @@ import {
   THEME_OPTIONS_BY_VALUE,
   themeOptionIcon,
 } from "~/components/themeOptions";
-import { prisma } from "~/db.server";
 import { SelectBestEnvironmentPresenter } from "~/presenters/SelectBestEnvironmentPresenter.server";
 import {
   applyThemeContrast,
@@ -72,9 +71,14 @@ import {
 } from "~/hooks/useSystemThemeSync";
 import { useFeatures } from "~/hooks/useFeatures";
 import { useHasAdminAccess, useUser } from "~/hooks/useUser";
-import { updateUserEmail, updateUserMarketingEmails, updateUserName } from "~/models/user.server";
+import { updateUserMarketingEmails, updateUserName } from "~/models/user.server";
+import {
+  cancelEmailChange,
+  requestEmailChange,
+  resendEmailChange,
+} from "~/services/emailChange.server";
 import { logger } from "~/services/logger.server";
-import { type EmailOwnership, getEmailOwnership } from "~/services/ssoManagedIdentity.server";
+import { type EmailOwnership } from "~/services/ssoManagedIdentity.server";
 import {
   updateContrastPreference,
   updateIconContrastPreference,
@@ -370,27 +374,25 @@ export const action: ActionFunction = async ({ request }) => {
       );
     }
 
-    const { email } = submission.data;
+    const result = await requestEmailChange(gate.user, submission.data.email);
+    if (!result.ok) return profileUpdateError(result.error, result.status);
+    return json({ success: true as const });
+  }
 
-    const ownership = await getEmailOwnership(gate.user, email);
-    if (ownership === "idp") {
-      return profileUpdateError(
-        "Your email address is managed by your organization's identity provider.",
-        403
-      );
-    }
-    if (ownership === "unknown") {
-      return profileUpdateError(
-        "We couldn't check your single sign-on settings just now. Please try again shortly.",
-        503
-      );
-    }
-    const existingUser = await prisma.user.findFirst({ where: { email } });
-    if (existingUser && existingUser.id !== gate.user.id) {
-      return profileUpdateError("Email is already being used by a different account", 400);
-    }
+  if (formData.get("action") === "resend-email-change") {
+    const gate = await requireOwnAccountWrite(request);
+    if ("error" in gate) return gate.error;
 
-    await updateUserEmail({ id: gate.user.id, email });
+    const result = await resendEmailChange(gate.user);
+    if (!result.ok) return profileUpdateError(result.error, result.status);
+    return json({ success: true as const });
+  }
+
+  if (formData.get("action") === "cancel-email-change") {
+    const gate = await requireOwnAccountWrite(request);
+    if ("error" in gate) return gate.error;
+
+    await cancelEmailChange(gate.user.id);
     return json({ success: true as const });
   }
 
@@ -528,7 +530,7 @@ function EditEmailButton() {
   const user = useUser();
   const [isOpen, setIsOpen] = useState(false);
   const { fetcher, error, setError, isSubmitting } = useProfileFieldUpdate({
-    successMessage: "Your email address has been updated.",
+    successMessage: "Check your inbox for a link to confirm your new email address.",
     onSuccess: () => setIsOpen(false),
   });
   const ownershipFetcher = useFetcher<{ ownership: EmailOwnership }>();
@@ -601,7 +603,7 @@ function EditEmailButton() {
                   Cancel
                 </Button>
                 <Button type="submit" variant="primary/medium" disabled={isSubmitting}>
-                  {isSubmitting ? "Saving…" : "Update"}
+                  {isSubmitting ? "Sending…" : "Send confirmation link"}
                 </Button>
               </DialogFooter>
             </fetcher.Form>
@@ -612,6 +614,40 @@ function EditEmailButton() {
   );
 }
 
+/** Shown under the email row while a new address is waiting to be confirmed. */
+function PendingEmailChange({ pendingEmail }: { pendingEmail: string }) {
+  const resend = useProfileFieldUpdate({
+    successMessage: `We've sent another confirmation link to ${pendingEmail}.`,
+    onSuccess: () => {},
+  });
+  const cancel = useProfileFieldUpdate({
+    successMessage: "Email change cancelled.",
+    onSuccess: () => {},
+  });
+
+  return (
+    <div className="flex w-full items-center justify-between gap-4 pb-3">
+      <Paragraph variant="extra-small" className="min-w-0 break-all text-text-dimmed">
+        Confirm {pendingEmail} using the link we emailed to it.
+      </Paragraph>
+      <div className="flex flex-none items-center gap-2">
+        <resend.fetcher.Form method="post">
+          <input type="hidden" name="action" value="resend-email-change" />
+          <Button type="submit" variant="tertiary/small" disabled={resend.isSubmitting}>
+            Resend
+          </Button>
+        </resend.fetcher.Form>
+        <cancel.fetcher.Form method="post">
+          <input type="hidden" name="action" value="cancel-email-change" />
+          <Button type="submit" variant="tertiary/small" disabled={cancel.isSubmitting}>
+            Cancel
+          </Button>
+        </cancel.fetcher.Form>
+      </div>
+    </div>
+  );
+}
+
 const MARKETING_EMAILS_DEBOUNCE_MS = 600;
 
 /** Debounced, one write at a time; the action's rate limit backs it up. */
@@ -988,8 +1024,8 @@ export default function Page() {
               </div>
             </div>
           </div>
-          <div className="flex min-h-16 w-full items-center border-b border-grid-dimmed">
-            <div className="flex w-full items-center justify-between gap-4">
+          <div className="flex min-h-16 w-full flex-col justify-center border-b border-grid-dimmed">
+            <div className="flex w-full items-center justify-between gap-4 py-3">
               <Label>Email address</Label>
               <div className="flex min-w-0 items-center gap-3">
                 {/* break-all: an address has no spaces to wrap at, so a long one
@@ -1000,6 +1036,7 @@ export default function Page() {
                 <EditEmailButton />
               </div>
             </div>
+            {user.pendingEmail && <PendingEmailChange pendingEmail={user.pendingEmail} />}
           </div>
           <div className="flex min-h-16 w-full items-center border-b border-grid-dimmed">
             <div className="flex w-full items-center justify-between gap-4">
 
@@ -0,0 +1,30 @@
+import type { LoaderFunctionArgs } from "@remix-run/node";
+import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
+import { confirmEmailChange } from "~/services/emailChange.server";
+import { getUserId } from "~/services/session.server";
+import { accountPath } from "~/utils/pathBuilder";
+
+/**
+ * Target of the link emailed to a pending address. Works logged out: sending
+ * the visitor through /login first would invite them to "log in" with the new
+ * address, which would register it as a separate account.
+ */
+export async function loader({ request }: LoaderFunctionArgs) {
+  const token = new URL(request.url).searchParams.get("token") ?? "";
+  const result = await confirmEmailChange(token);
+
+  const sessionUserId = await getUserId(request);
+  const destination = sessionUserId ? accountPath() : "/login";
+
+  if (!result.ok) {
+    return redirectWithErrorMessage(destination, request, result.error);
+  }
+
+  return redirectWithSuccessMessage(
+    destination,
+    request,
+    sessionUserId === result.userId
+      ? "Your email address has been updated."
+      : `Your email address is now ${result.email}. Use it to log in.`
+  );
+}
@@ -26,7 +26,8 @@ import { useFeatures } from "~/hooks/useFeatures";
 import { useUser } from "~/hooks/useUser";
 import { redirectWithSuccessMessage } from "~/models/message.server";
 import { updateUser } from "~/models/user.server";
-import { requireUserId } from "~/services/session.server";
+import { normalizeEmail, requestEmailChange } from "~/services/emailChange.server";
+import { requireUser } from "~/services/session.server";
 import { telemetry } from "~/services/telemetry.server";
 import { emailSchema, MAX_EMAIL_LENGTH } from "~/utils/emailValidation";
 import { rootPath } from "~/utils/pathBuilder";
@@ -113,7 +114,8 @@ function createSchema(
 }
 
 export const action: ActionFunction = async ({ request }) => {
-  const userId = await requireUserId(request);
+  const user = await requireUser(request);
+  const userId = user.id;
   const formData = await request.formData();
 
   const formSchema = createSchema({
@@ -170,10 +172,21 @@ export const action: ActionFunction = async ({ request }) => {
         ? `Other: ${submission.value.referralSourceOther}`
         : submission.value.referralSource;
 
+    // The email is not written here: the account keeps its current address
+    // until the user opens the link sent to the new one. Requested first so a
+    // refused address leaves onboarding unconfirmed and the form comes back.
+    const newEmail = normalizeEmail(submission.value.email);
+    const emailChanged = newEmail !== normalizeEmail(user.email);
+    if (emailChanged) {
+      const result = await requestEmailChange(user, newEmail);
+      if (!result.ok) {
+        return json(submission.reply({ formErrors: [result.error] }), { status: result.status });
+      }
+    }
+
     await updateUser({
       id: userId,
       name: submission.value.name,
-      email: submission.value.email,
       referralSource: referralSourceForLegacy,
       onboardingData: Object.keys(onboardingData).length > 0 ? onboardingData : undefined,
     });
@@ -200,7 +213,13 @@ export const action: ActionFunction = async ({ request }) => {
       redirectUrl = `/orgs/new?${params.toString()}`;
     }
 
-    return redirectWithSuccessMessage(redirectUrl, request, "Your details have been updated.");
+    return redirectWithSuccessMessage(
+      redirectUrl,
+      request,
+      emailChanged
+        ? `Your details have been updated. Check ${newEmail} for a link to confirm your new email address.`
+        : "Your details have been updated."
+    );
   } catch (error: any) {
     return json({ errors: { body: error.message } }, { status: 400 });
   }
@@ -428,6 +447,7 @@ export default function Page() {
                 </>
               )}
 
+              <FormError id={form.errorId}>{form.errors}</FormError>
               <FormButtons
                 confirmButton={
                   <Button
 
@@ -12,48 +12,58 @@ import { SsoRequiredError, ssoRedirectForEmail } from "./ssoAutoDiscovery.server
 let secret = env.MAGIC_LINK_SECRET;
 if (!secret) throw new Error("Missing MAGIC_LINK_SECRET env variable.");
 
+/**
+ * The strategy's verify callback. It runs twice per login: once when SENDING
+ * the link (`magicLinkVerify: false`, only to hand a user to `sendEmail`, which
+ * ignores it; the throw is swallowed) and once when the link is opened.
+ */
+export async function verifyMagicLink({
+  email,
+  magicLinkVerify,
+}: {
+  email: string;
+  magicLinkVerify: boolean;
+}): Promise<AuthUser> {
+  // Nothing may be created on the send path: an account must not exist for an
+  // address until a link delivered to it has been opened, or anyone could
+  // register someone else's email and have mail sent to it.
+  if (!magicLinkVerify) {
+    throw new Error("Magic link not yet verified");
+  }
+
+  logger.info("Magic link user authenticated");
+
+  // Gate the link CLICK: a magic link issued before SSO enforcement flipped
+  // on (or replayed within its validity window) must not mint a session for
+  // an enforced domain.
+  const ssoRedirect = await ssoRedirectForEmail(email, "domain_policy");
+  if (ssoRedirect) {
+    throw new SsoRequiredError(ssoRedirect);
+  }
+
+  try {
+    const { user, isNewUser } = await findOrCreateUser({
+      email,
+      authenticationMethod: "MAGIC_LINK",
+    });
+
+    await postAuthentication({ user, isNewUser, loginMethod: "MAGIC_LINK" });
+
+    return { userId: user.id };
+  } catch (error) {
+    logger.debug("Magic link user failed to authenticate", { error: JSON.stringify(error) });
+    throw error;
+  }
+}
+
 const emailStrategy = new EmailLinkStrategy(
   {
     sendEmail: sendMagicLinkEmail,
     secret,
     callbackURL: "/magic",
     sessionMagicLinkKey: "triggerdotdev:magiclink",
   },
-  async ({
-    email,
-    form,
-    magicLinkVerify,
-  }: {
-    email: string;
-    form: FormData;
-    magicLinkVerify: boolean;
-  }) => {
-    logger.info("Magic link user authenticated", { magicLinkVerify });
-
-    // Gate the link CLICK, not just the send: a magic link issued before
-    // SSO enforcement flipped on (or replayed within its validity
-    // window) must not mint a session for an enforced domain.
-    if (magicLinkVerify) {
-      const ssoRedirect = await ssoRedirectForEmail(email, "domain_policy");
-      if (ssoRedirect) {
-        throw new SsoRequiredError(ssoRedirect);
-      }
-    }
-
-    try {
-      const { user, isNewUser } = await findOrCreateUser({
-        email,
-        authenticationMethod: "MAGIC_LINK",
-      });
-
-      await postAuthentication({ user, isNewUser, loginMethod: "MAGIC_LINK" });
-
-      return { userId: user.id };
-    } catch (error) {
-      logger.debug("Magic link user failed to authenticate", { error: JSON.stringify(error) });
-      throw error;
-    }
-  }
+  verifyMagicLink
 );
 
 export function addEmailLinkStrategy(authenticator: Authenticator<AuthUser>) {