fix(webapp): make CLI login codes single use and mint a token per login

CLI and MCP login codes now work once, every login mints its own
personal access token, and you get an email whenever a new login is
authorized on your account. The consent page shows when and from which
IP address the login was started.

Mono-RevId: 3f906ca868b4568d9695ccee660a6681c4e13bd4

Author: ericallam

.server-changes/cli-login-network-context.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+The CLI and MCP login consent page now shows when and from which IP address the login was started, and you get an email whenever a new CLI or MCP login is authorized on your account.

.server-changes/cli-login-single-use-codes.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+CLI and MCP login codes now work once, and every login mints its own personal access token instead of reusing an existing CLI token.

apps/webapp/app/env.server.ts

@@ -1045,6 +1045,8 @@ const EnvironmentSchema = z
     WORKLOAD_CREATED_AT_GATE_ENABLED: z.string().default("0"),
     WORKLOAD_TOKEN_CUTOFF: z.string().datetime().optional(),
 
+    CLI_LOGIN_NETWORK_CHECK: z.enum(["off", "log", "confirm"]).default("log"),
+
     // Development OTEL environment variables
     DEV_OTEL_EXPORTER_OTLP_ENDPOINT: z.string().optional(),
     DEV_OTEL_METRICS_ENDPOINT: z.string().optional(),

apps/webapp/app/routes/account.authorization-code.$authorizationCode/route.tsx

@@ -1,21 +1,33 @@
 import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import { Form } from "@remix-run/react";
+import { useState } from "react";
 import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { typedjson, useTypedActionData, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { AppContainer, MainCenteredContainer } from "~/components/layout/AppLayout";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
+import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { Header1 } from "~/components/primitives/Headers";
 import { Icon } from "~/components/primitives/Icon";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { TextLink } from "~/components/primitives/TextLink";
 import { prisma } from "~/db.server";
+import { env } from "~/env.server";
+import {
+  compareCliLoginNetworks,
+  describeIpLocation,
+  needsNetworkConfirmation,
+} from "~/services/cliLoginNetwork.server";
 import { logger } from "~/services/logger.server";
 import {
   createPersonalAccessTokenFromAuthorizationCode,
-  isAuthorizationCodeMintable,
+  getMintableAuthorizationCode,
 } from "~/services/personalAccessToken.server";
+import { getIpLocation } from "~/services/platform.v3.server";
+import { scheduleEmail } from "~/services/scheduleEmail.server";
 import { requireUser } from "~/services/session.server";
+import { extractClientIp } from "~/utils/extractClientIp.server";
 import { pageMeta } from "~/utils/pageTitle";
 
 export const meta = pageMeta("Authorize login");
@@ -57,28 +69,42 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { authorizationCode } = parseParams(params);
   const { source, clientName } = parseSearch(request);
 
-  const mintable = await isAuthorizationCodeMintable(authorizationCode);
+  const mintable = await getMintableAuthorizationCode(authorizationCode);
 
   if (!mintable) {
     return typedjson({ status: "invalid" as const, source, clientName });
   }
 
   // The token acts as the user, so it can reach every organization they belong to.
   const organizationWhere = { deletedAt: null, members: { some: { userId: user.id } } };
-  const [organizations, organizationCount] = await Promise.all([
+  const [organizations, organizationCount, requesterLocation] = await Promise.all([
     prisma.organization.findMany({
       select: { id: true, title: true },
       where: organizationWhere,
       orderBy: { title: "asc" },
       take: ORGANIZATION_DISPLAY_LIMIT,
     }),
     prisma.organization.count({ where: organizationWhere }),
+    getIpLocation(mintable.requesterIp),
   ]);
 
+  const networkMatch = compareCliLoginNetworks(
+    mintable.requesterIp,
+    extractClientIp(request.headers.get("x-forwarded-for"))
+  );
+
   return typedjson({
     status: "consent" as const,
     source,
     clientName,
+    requesterIp: mintable.requesterIp,
+    requesterLocation: describeIpLocation(requesterLocation) ?? null,
+    startedMinutesAgo: Math.max(
+      0,
+      Math.floor((Date.now() - mintable.createdAt.getTime()) / 60_000)
+    ),
+    requiresNetworkConfirmation:
+      env.CLI_LOGIN_NETWORK_CHECK === "confirm" && needsNetworkConfirmation(networkMatch),
     account: {
       email: user.email,
       name: user.displayName ?? user.name,
@@ -89,13 +115,26 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 };
 
 export const action = async ({ request, params }: ActionFunctionArgs) => {
-  const { id: userId } = await requireUser(request);
+  const user = await requireUser(request);
+  const userId = user.id;
 
   const { authorizationCode } = parseParams(params);
   const { source, clientName } = parseSearch(request);
+  const formData = await request.formData();
 
   try {
-    await createPersonalAccessTokenFromAuthorizationCode(authorizationCode, userId);
+    const token = await createPersonalAccessTokenFromAuthorizationCode(authorizationCode, userId, {
+      approverIp: extractClientIp(request.headers.get("x-forwarded-for")),
+      confirmedDifferentNetwork: formData.get("confirmDifferentNetwork") === "on",
+    });
+
+    await notifyLoginAuthorized({
+      userEmail: user.email,
+      clientDescription: describeClient(source, clientName),
+      obfuscatedToken: token.obfuscatedToken,
+      requesterIp: token.requesterIp,
+    });
+
     return typedjson({ success: true as const, source, clientName });
   } catch (error) {
     if (error instanceof Response) {
@@ -169,14 +208,24 @@ export default function Page() {
       <div className="flex flex-col gap-4">
         <Header1>Authorize login</Header1>
         <Paragraph>{getConsentPrompt(loaderData.source, loaderData.clientName)}</Paragraph>
-        <Form method="post">
-          <Button type="submit" variant="primary/medium" fullWidth>
-            Authorize
-          </Button>
-        </Form>
+        <Paragraph variant="small">
+          {describeLoginStart(
+            loaderData.startedMinutesAgo,
+            loaderData.requesterIp,
+            loaderData.requesterLocation
+          )}
+        </Paragraph>
+        <ConsentForm requiresNetworkConfirmation={loaderData.requiresNetworkConfirmation} />
         <Paragraph variant="extra-small">
           Only authorize if you started this login yourself. If you didn't, close this page.
         </Paragraph>
+        {loaderData.requesterLocation && (
+          <Paragraph variant="extra-small">
+            <TextLink href="https://ipinfo.io" target="_blank">
+              IP address data powered by IPinfo
+            </TextLink>
+          </Paragraph>
+        )}
         <div className="flex flex-col gap-3 rounded-md border border-grid-bright p-3">
           <div>
             <Paragraph variant="base/bright" className="font-medium">
@@ -209,6 +258,88 @@ export default function Page() {
   );
 }
 
+function ConsentForm({ requiresNetworkConfirmation }: { requiresNetworkConfirmation: boolean }) {
+  const [confirmed, setConfirmed] = useState(false);
+
+  return (
+    <Form method="post" className="flex flex-col gap-3">
+      {requiresNetworkConfirmation && (
+        <>
+          <Callout variant="warning">
+            This login was started from a different network than the one you're on now. If someone
+            sent you this link, close this page.
+          </Callout>
+          <CheckboxWithLabel
+            name="confirmDifferentNetwork"
+            value="on"
+            variant="simple/small"
+            label="I started this login myself, on another machine"
+            onChange={setConfirmed}
+          />
+        </>
+      )}
+      <Button
+        type="submit"
+        variant="primary/medium"
+        fullWidth
+        disabled={requiresNetworkConfirmation && !confirmed}
+      >
+        Authorize
+      </Button>
+    </Form>
+  );
+}
+
+function describeLoginStart(
+  startedMinutesAgo: number,
+  requesterIp: string | null,
+  requesterLocation: string | null
+) {
+  const when =
+    startedMinutesAgo === 0
+      ? "just now"
+      : `${startedMinutesAgo} minute${startedMinutesAgo === 1 ? "" : "s"} ago`;
+  if (!requesterIp) {
+    return `This login was started ${when}.`;
+  }
+  return requesterLocation
+    ? `This login was started ${when} from IP address ${requesterIp} (${requesterLocation}).`
+    : `This login was started ${when} from IP address ${requesterIp}.`;
+}
+
+function describeClient(source: string, clientName: string) {
+  if (source === "mcp") {
+    return knownClientName(clientName) ?? "an MCP client";
+  }
+  return "the Trigger.dev CLI";
+}
+
+async function notifyLoginAuthorized(details: {
+  userEmail: string;
+  clientDescription: string;
+  obfuscatedToken: string;
+  requesterIp: string | null;
+}) {
+  try {
+    const requesterLocation = describeIpLocation(await getIpLocation(details.requesterIp));
+    await scheduleEmail({
+      email: "cli-login-authorized",
+      to: details.userEmail,
+      userEmail: details.userEmail,
+      clientDescription: details.clientDescription,
+      obfuscatedToken: details.obfuscatedToken,
+      requesterIp: details.requesterIp ?? undefined,
+      requesterLocation,
+      authorizedAt: new Date().toUTCString(),
+      tokensUrl: `${env.APP_ORIGIN}/account/tokens`,
+    });
+  } catch (error) {
+    logger.error("Failed to schedule the CLI login authorized email", {
+      error: error instanceof Error ? error.message : String(error),
+    });
+  }
+}
+
 function AuthShell({ children }: { children: React.ReactNode }) {
   return (
     <AppContainer>
@@ -227,10 +358,14 @@ const prettyClientNames: Record<string, string> = {
   "claude-ai": "Claude Desktop",
 };
 
+function knownClientName(clientName: string): string | undefined {
+  return Object.hasOwn(prettyClientNames, clientName) ? prettyClientNames[clientName] : undefined;
+}
+
 function getConsentPrompt(source: string, clientName: string) {
   if (source === "mcp") {
-    const pretty = prettyClientNames[clientName] ?? clientName;
-    if (pretty && pretty !== "unknown") {
+    const pretty = knownClientName(clientName);
+    if (pretty) {
       return `Authorize ${pretty} to access your Trigger.dev account?`;
     }
     return `Authorize this MCP client to access your Trigger.dev account?`;
@@ -241,9 +376,8 @@ function getConsentPrompt(source: string, clientName: string) {
 
 function getInstructionsForSource(source: string, clientName: string) {
   if (source === "mcp") {
-    if (clientName) {
-      return `Return to your ${prettyClientNames[clientName] ?? clientName} to continue.`;
-    }
+    const pretty = knownClientName(clientName);
+    return pretty ? `Return to ${pretty} to continue.` : `Return to your MCP client to continue.`;
   }
 
   return `Return to your terminal to continue.`;

apps/webapp/app/routes/api.v1.authorization-code.ts

@@ -39,7 +39,7 @@ export async function action({ request }: ActionFunctionArgs) {
   }
 
   try {
-    const authorizationCode = await createAuthorizationCode();
+    const authorizationCode = await createAuthorizationCode({ requesterIp: clientIp });
     const responseJson: CreateAuthorizationCodeResponse = {
       authorizationCode: authorizationCode.code,
       url: `${env.APP_ORIGIN}/account/authorization-code/${authorizationCode.code}`,

apps/webapp/app/services/cliLoginNetwork.server.ts

@@ -0,0 +1,89 @@
+import { isIPv4, isIPv6 } from "node:net";
+
+/**
+ * How the network that started a CLI login compares with the network of the browser approving it.
+ * A real login starts and is approved on the same machine, so the two usually share a public IP.
+ * `mixed-family` means one side used IPv4 and the other IPv6, which dual-stack networks do too.
+ */
+export type CliLoginNetworkMatch = "match" | "mismatch" | "mixed-family" | "unknown";
+
+type Network = { family: 4 | 6; prefix: string };
+
+/** IPv4 addresses compare whole, IPv6 addresses by their /64 prefix (one site or device). */
+export function compareCliLoginNetworks(
+  requesterIp: string | null | undefined,
+  approverIp: string | null | undefined
+): CliLoginNetworkMatch {
+  const requester = networkOf(requesterIp);
+  const approver = networkOf(approverIp);
+
+  if (!requester || !approver) {
+    return "unknown";
+  }
+
+  if (requester.family !== approver.family) {
+    return "mixed-family";
+  }
+
+  return requester.prefix === approver.prefix ? "match" : "mismatch";
+}
+
+/** Whether the consent screen should ask the approver to confirm a login from another network. */
+export function needsNetworkConfirmation(match: CliLoginNetworkMatch) {
+  return match === "mismatch" || match === "mixed-family";
+}
+
+/**
+ * Where a login IP is, for the consent page and the authorized-login email: "United States, on
+ * Google LLC". Returns `undefined` when neither the country nor the network owner is known.
+ */
+export function describeIpLocation(
+  location: { country: string | null; asName: string | null } | undefined
+): string | undefined {
+  const parts = [location?.country, location?.asName ? `on ${location.asName}` : undefined].filter(
+    Boolean
+  );
+  return parts.length > 0 ? parts.join(", ") : undefined;
+}
+
+function networkOf(ip: string | null | undefined): Network | undefined {
+  if (!ip) {
+    return undefined;
+  }
+
+  const address = ip.trim().replace(/%.*$/, "");
+  const mappedIpv4 = address.match(/^::ffff:(\d{1,3}(?:\.\d{1,3}){3})$/i)?.[1];
+
+  if (mappedIpv4 && isIPv4(mappedIpv4)) {
+    return { family: 4, prefix: mappedIpv4 };
+  }
+
+  if (isIPv4(address)) {
+    return { family: 4, prefix: address };
+  }
+
+  if (isIPv6(address)) {
+    return { family: 6, prefix: ipv6Prefix64(address) };
+  }
+
+  return undefined;
+}
+
+function ipv6Prefix64(address: string) {
+  const [head, tail] = address.split("::");
+  const headGroups = head ? head.split(":") : [];
+  const tailGroups = tail ? tail.split(":") : [];
+  const groups =
+    tail === undefined
+      ? headGroups
+      : [
+          ...headGroups,
+          ...Array<string>(Math.max(0, 8 - headGroups.length - tailGroups.length)).fill("0"),
+          ...tailGroups,
+        ];
+
+  return groups
+    .slice(0, 4)
+    .map((group) => parseInt(group, 16).toString(16))
+    .join(":");
+}